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

2012/11/27 15:14:17作者：佚名来源：网络

移动端

【实例介绍】

变宽度网页布局制作

       对固定宽度的页面布局做了比较深入的分析和讲解，下面将对变宽度的页面布局做进一步的分析。变宽度的布局要比固定宽度的布局复杂一些。
       对于变宽度的布局，首先要使内容的整体宽度随着浏览器窗口宽度的变化而变化。因此中间容器中的左右两列的总宽度也会变化，这样就会产生两种不同的情况。这两列是按照一定的比例同时变化，还是一列固定另一列变化，这两种情况都是很常用的布局方式。
       在实际应用中，只有单列宽度变化，而其他列保持固定的布局会更实用。一般在多个列的页面中，通常比较宽的一列是用来放置内容的，而窄列放置链接、导航等内容，这些内容—般宽度都是固定的，不需要扩大。
       如果使用简单的浮动布局，是无法实现这个效果的。如果把某一列的宽度设置为固定值。例如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>