CSS简单布局（一）
本文称布局如以下模式的页面为工字形页面，主要由四个div构成。通过更改宽高数据或者定义板块比例可以呈现不同页面效果。
HTML如下，先构造四个div分别表示上、左中、右中、下（页脚）。
<body>
<div id="header">Header</div>
<div id="center">
<div class="center_left">Left</div>
<div class="center_right">Right</div>
</div>
<div id="footer">Footer</div><!--设定四个板块-->
</body>
</html>
傻瓜方法一，CSS如下，示例限制了四个div（其实是五个）的具体大小，但可能会导致因浏览器不同导致的视觉差异。
#header{
background:#B8B8B8;
text-align:center;
width:500px;
height:40px
}
#center{
width:500px;
height:400px
}
.center_left{
background:#787878;
text-align:center;
width:250px;
height:400px;
float:left
}
.center_right{
background:#D0D0D0;
text-align:center;
width:250px;
height:400px;
float:right
}
#footer{
background:#B8B8B8;
text-align:center;
width:500px;
height:40px
}
效果如下
方法二，采用比例。（以下示例省略字体背景颜色等）
#header{height:50px;width:100%
}
#center{width:100%;height:600px
}
.center_left{width:20%;height:100%;float:left
}
.center_right{width:80%;height:100%;float:right
}
#footer{width:100%;height:30px
}
效果如下
div和浏览器边缘的空白间隙可以通过margin改变。
最后是本人完成的工字形页面。
个人觉得工字形的格式非常好用!!一个栏目做导航栏,一个栏目呈现内容,操作也特别简单!示例中右边的部分文字可能颜色有点突兀!其实是用了一个文字渐变色彩动态的效果~
本人是编程菜鸟,文章如有不足之处欢迎大佬指点(っ*´Д`)っ
1011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
