div+css变宽度网页布局实例制作

【实例介绍】变宽度网页布局制作对固定宽度的页面布局做了比较深入的分析和讲解，下面将对变宽度的页面布局做进一步的分析。变宽度的布局要比固定宽度的布局复杂一些。对于变

【实例介绍】

变宽度网页布局制作

       对固定宽度的页面布局做了比较深入的分析和讲解，下面将对变宽度的页面布局做进一步的分析。变宽度的布局要比固定宽度的布局复杂一些。
       对于变宽度的布局，首先要使内容的整体宽度随着浏览器窗口宽度的变化而变化。因此中间容器中的左右两列的总宽度也会变化，这样就会产生两种不同的情况。这两列是按照一定的比例同时变化，还是一列固定另一列变化，这两种情况都是很常用的布局方式。
       在实际应用中，只有单列宽度变化，而其他列保持固定的布局会更实用。一般在多个列的页面中，通常比较宽的一列是用来放置内容的，而窄列放置链接、导航等内容，这些内容—般宽度都是固定的，不需要扩大。
       如果使用简单的浮动布局，是无法实现这个效果的。如果把某一列的宽度设置为固定值。例如300像素，那么另一列的宽度就无法设置了，因为总宽度是变化的，变动的列的宽度也无法确定，那么怎么解决呢?
       在content的外面再套一个DIv，使它的宽度为100％，也就是等于container的宽度。然后通过将左侧的。margin设置为负的300像素，就使它向左平移了300像素。再将content的左侧margin设置为正的300像素，就实现了本来无法表达的宽度。

【实例代码】

下面是一个单列变宽布局的网页，右侧的一列宽度固定。当总宽度变化时，左侧部分的列就发生变化，具体代码如下。

#contentWrap{
margin-left:-300px;
float:left;
width:100%;
}

#content{
margin-left:300px;
}

#content img{
float:right;
}

#side{
float:right;
width:300px;
}

#pagefooter{
clear:both;
}
</style>
</head>
<body>
<div id="header">
<div class="rounded">
  <h2>理想新世纪家具木业有限公司</h2>
  <div class="main">
  </div>
  <div class="footer">
  <p> </p>
  </div>
</div>
</div>
<div id="container">
<div id="contentWrap">
<div id="content">
<div class="rounded">
  <h2>公司介绍</h2>
  <div class="main">

  <p>
    　　自1980年公司创立至今，历经三十余载，我们公司始终坚持专业从
事高档精品实木家具设计、生产与销售的一体化经营，成就实木经典品牌。
　　<br>     　　公司旗下拥有“原木世家”、“原木至尊”和“原木经典”
三大系列品牌，以满足不同生活方式的高品位消费群体需求。产品畅销国内外，
涵盖全球十几个国家和地区，国内市场网络已覆盖90%以上的一、二级城市，
遍布国内外500余家营销专卖网点，构成了多层次、全方位的网络体系。
　　<br>    　　坚持“以人为本，以诚信为先，以创造价值为荣”的核心理念
，成为全体员工共同奋进的宗旨。公司一直坚持创新的设计原则、严格的质量
管理和环保化的生产策略，产品工艺精湛、品质优良，顺利通过了ISO9001-2000
版国际质量认证，Ⅲ型绿色产品环保认证。近年来，曾被授予“名牌产品”、
“全国知名品牌”、“市质量诚信企业”等多项荣誉，赢得了国内外消费者的
一致好评。
</p>

  </div>
  <div class="footer">
  <p>
  查看详细信息>>
  </p>
  </div>
</div>
</div>
</div>
<div id="side">
<div class="rounded">
  <h2>企业文化理念</h2>
  <div class="main">
    <p>
    1.企业理念——求新求美求实求精；<br />
    2.企业使命——我认识世界，世界认识我；<br />
    3.企业方针——弘扬质量服务，提升品牌价值；<br />
    4.企业精神——人人向前，事事精进。</p>
  </div>
   <div class="footer">
  <p> </p>
  </div>
</div>
</div>
</div>
<div id="pagefooter">
<div class="rounded">
  <h2> </h2>
  <div class="main">
  <p>
   ◎企业文化 | ◎网站导航 | ◎诚聘英才 | ◎版权声明 | ◎友情链接 | ◎联系我们| ◎留言板
  </p>
  </div>
  <div class="footer">
  <p> </p>
  </div>
</div>
</div>