CSS布局快速入门
最近因为项目需要,不得不重新看看CSS/HTML之类的东西,不看不要紧,一看吓一跳
原来不知道真的是太多,以前从未认真对待过,这次总结了一下学习所得,算是对自己
有个交代,也可能让想了解CSS/HTML布局应用的朋友快速入门:
1. CSS 与HTML元素直接关联,以HTML h1元素为例。CSS定义如下:
完整的HTML代码如下:
DIV代码如下:
<html><head> <title>CSS Related to HTML element directly</title> <style type="text/css">#container { margin:auto; /* IE6 supports them with a full and valid doctype */ width: 800px; /* margin-left: 200px;*/ background: #ffffff;}#header { height: 80; background: #B0C4DE;}#leftBar { float: left; width: 150px; background: #DFDF12; }#content { float:left; width:500px; background-color: #cdcde6;}#rightBar { float:right; width: 150px; background: #EBEBEB; }#rightBar #zhao_shang {/*height:600px; - comment it */padding: 20px;}#footer { clear:both; text-align: center; background:#DDDDDD;} </style></head><body><div id="container"><div id="header"><label>头区域</label></div><div id="leftBar"><label>左侧导航</label></div><div id="content"><label>内容</label></div><div id="rightBar"><label>右边框</label></div><div id="footer"><label><b>尾区域</b></label></div></div></body></html>