03（前端）：Div+Css布局

来源：互联网发布：omnigraffle 网络拓扑编辑：程序博客网时间：2024/05/17 23:47

上一讲是关于CSS，这次DIV+CSS理解完了之后，就可以开始开发网站咯！我觉得在开始开发网站之前，就算无法设计一个漂亮的网页，但起码要理解好DIV+CSS进行布局和样式控制。这样至少还知道怎么修改别人的模板，知道怎样灵活输出对应的内容到对应的区域。

我的微薄：http://weibo.com/u/2448939884 欢迎程序员互粉。

<style type="text/css">*{/* 全局标签 */margin:0px 0px; /* 未设置的区域，全部紧贴临近区域 */}#container{background-color:#0066FF;width:70%;height:500px;margin:0px auto;/* 水平居中 */}#container #header{background-color:#990066;height:100px;}#container #body{background-color:#00FF66;height:400px;}#container #body #l-img{float:left; /* 设置左浮动，成为下个要浮动的区域的停靠点（如果这里不设置为浮动，那content区域将浮动在body，而不是跟在l-img后面） */background-color:#00FF00;width:30%;height:100%;}#container #body #content{float:left;  /* 设置左浮动，默认左浮动到父区域 */background-color:#CC9900;width:70%;height:100%}#container #footer{background-color:#666666;height:100px;}</style></head><body><div id="container"><div id="header">头部Logo、导航等</div><div id="body"><div id="l-img">左方图片区</div><div id="content">右方内容区</div></div><div style="clear:both"></div> <!--清除浮动--><div id="footer">底部</div></div></body>

在这里我无法详细去说明CSS标签选择器的各个规则，但这些规则适用于以后要将的jQuery，到时再一起讲述。