读书人

CSS格局快速入门

发布时间: 2012-09-09 09:27:54 作者: rapoo

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>

读书人网 >CSS

热点推荐