2008-7-26 17:14:12 中国WebSite网(网站制作)
这几天我在用Div+CSS进行网页三列布局的时候突然想到的这样一个方法，这个想法自己都觉得有些疯狂，如果其中有什么不对的地方还是请各位多多指教。
当您需要写一个三列布局的时候，一般情况下我会选择使用如下的DIV布局方式：
使用这样的嵌套方式无疑可以使代码出错的概率减少很多，但同时这样的布局也略显复杂，对于后期的维护也略显不便。我们在布局导航时经常会使用到一个方法，那就是使用 列表来进行布局，而导航可以形容为多列式的布局，既然如此，那么我们也就可以使用来进行页面的多列布局。 
固定宽度的布局，也就是说流动性不强，流动性的布局目前还没有试验过，等有时间了再试验一下，以下是贴上这个布局的代码：
list-style:none;
height:100%;
}
#content ul li {
width:150px;
height:100%;
background:#8AC7FA;
float:left;
}
#content ul li#li2 {
width:280px;
margin:0 10px;
}
#content ul li#li2 ul li {
width:270px;
height:140px;
margin:5px;
background:#0581F0;
}
list-style:none;
height:100%;
}
#content ul li {
width:150px;
height:100%;
background:#8AC7FA;
float:left;
}
#content ul li#li2 {
width:280px;
margin:0 10px;
}
#content ul li#li2 ul li {
width:270px;
height:140px;
margin:5px;
background:#0581F0;
}
这是头部
这是左边
这是中间的上部
这是中间的下部
这是右边
这是左边
这是中间的上部
这是中间的下部
这是右边
这是底部
这段代码在IE7及FF3下都能正常显示，其他浏览器未做测试，如果您有更好的方法不妨提出来。
这段代码在IE7及FF3下都能正常显示，其他浏览器未做测试，如果您有更好的方法不妨提出来。
【网站解决方案】
- 怎么判断一个网站设计的好与不好呢？
- 中小型企业网站解决方案
- 网上电子商城网站建设方案
- 大型上市企业应用门户网站建设方案
- 展会网站建设解决方案
- 幼儿园网站建设方案
- 物流管理网站建设方案
- 汽车行业网站建设方案
- 网络媒体网站设计方案
- B2B电子商务平台网站设计方案
- 人才招聘行业网站解决方案
- 房地产行业网站制作解决方案
- 中小型企业无纸化办公自动系统解决方案
- 企业信息网站解决方案
- 教育培训类门户网站解决方案
- 旅游类行业网站解决方案
- 校园门户网站解决方案
- 书画艺术网站解决方案
- 图书采购平台解决方案
- 医院门户网站解决方案
- 行业商务门户解决方案
- 电子商务门户解决方案
- 集团企业门户解决方案
- 政府信息门户网站解决方案
其它网站布局文章
相关文章