〖原创〗CSS网站布局实录-基于Web2.0标准的网站设计指南（笔记）
昨日买了本新书叫《CSS网站布局实录》是flashempire.net的allan写的，是位闪客帝国网站标准化的设计师和执行者，具有丰富的实战经验，allan是结合自己的丰富经验和对web标准深刻的理解写了这本书，幸好被我买到了~ 不过我想通过我自己的理解，将我的心得体会写出来，跟大家一起分享~~按照我读此书之前的理解：
其实所谓的Web2.0标准化的设计，其目的就是尽量使程序、设计、内容3者脱离开来，使设计、程序更容易维护，而对于网站的灵活“内容“的更新更是更为灵活互动~标准化取代传统设计网站布局模式势不可挡。（可能时间上已经很晚了，不过相信应该还有部分网站设计者还在一直使用table布局）
Web2.0标准化就是html+css -----------------》div+css
（以下传统布局用html简称，web2.0标准用div简称，至于CSS，前者用得相对死板点儿，后者更灵活，不过目前的布局一般都用得蛮多）
印象中：div比html更简单，毕竟html布局 得用到 <table><tr> <td></td></tr></table>的嵌套，而div只需要<div></div>的嵌套，因此加之CSS的灵活应用对于div代码量的减少以及网页执行速度的提高也不难理解了
现在开始读书了...待续 说明：<... ...>是指网页上的代码，{... ...}是指css样式表里的代码
类型选择符：
body{}
div{}
span{}
群组选择符：
h1,h2,h3,p,span{font-size:12px; font-family:arial;}
包含选择符：
h1 span{color:blue;}
示例：<h1>这是一段文本<span>这是span内的文本</span></h1>
<h1>单独的h1</h1>
<span>单独的span</span>
id选择符：
<div id="content"></div>
#content{font-size:14px; ling-height:130%}
对于类似于此的元素在页面中均出现一次，使用id进行命名具有唯一性的指派含义
class选择符：
与id不同，class允许重复使用
<div class="p1"></div>
<h1 class="p1"></h1>
<h3 class="p1"></h3>
.p1{margin:10px; background-color:blue;}
标签指定式选择符：
h1#content{} //表示针对所有id为content的h1标签
h1.p1{} //表示针对所有class为p1的h1标签
组合选择符：
h1 .p1{}//表示h1标签下的所有class为p1的标签
#content h1{}//表示id为content的标签下的所有h1标签
h1 .p1,#content h1{} //以上二者群组选择
h1#content h2{}//id为content的h1标签下的h2标签
伪类及伪对象
a:hover{}// 伪类有link,hover,active,visited,focus,first-child,first,after,first-letter,first-ling,before
通配选择符：
*{color:red;}//表示页面上所有字的颜色是red CSS布局之于表格布局的优势之一：
示例:
<div id="header">
<h1>标题区</h1>
<ul>导航</ul>
</div>
web标准推荐使用尽可能符合页面中元素意义的标签来标识元素，在以往的表格式布局之中，无论是h1或是ul这些元素几乎都不常见到，主要原因就是所有的对象形式都被表格所替代，页面可读性差，也没有任何伸缩性可言，且浏览器要过分消耗对表格的层层嵌套关系进行解析，而在CSS布局之中，要求我们尽可能多的去使用XHTML中所支持的各种标签，最终网页对象都将拥有良好的可读性，通过进一步CSS的定义，其样式表现能力丝毫不比表格差，而且拥有比表格高出许多的样式控制方法 DIV+CSS布局典型（可由此延伸任意页面布局）：
（灵活性和代码的易读性真的是table布局没法比，并且发觉以后维护以及改版起来也是非常方便的）
演示网址：http://www.sinsopaper.com/xcss/
xhtml代码部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rev="stylesheet" href="xcss.css" rel="stylesheet" type="text/css" />
<div id="head">头部</div>
<div id="center">
<div id="right">右分栏</div>
<div id="left">左分栏</div>
</div>
<div id="footer">底部</div>
</body>
</html>
CSS代码部分：
*{ font:"宋体", Arial, "Arial Black", Verdana; color:#333; font-size:12px;}
#head{ border-top:4px solid #666;
border-left:4px solid #666;
border-right:4px solid #666;
border-bottom:0px;
width:80%;
height:auto;
margin:0px auto;}
#center{background-color:#CCC;
border:4px solid #666;
width:80%;
height:600px;
margin:0px auto;}
#left{ background-color:#fff;
border:1px solid #666;
height:300px;
margin:2px 2px;}
#right{ background-color:#09F;
border:1px solid #666;
width:200px;
height:300px;
margin:2px 2px;
float:right}
绝对定位（一般用得不多）
属性（position） 可用值（static/absolute/relative）
#layout{
position:absolute;
top:20px;
left:0px;
}//设置top:20px;它将永远离浏览器窗口上边20px，而left:0px;将保证它离浏览器左边为0px。
示例：
xhtml部分：
<div id="left">左列</div>
<div id="center">中列</div>
<div id="right">右列</div>
css部分：
#left{backgroud-color:#ccc; border:2px solid #333; width:100px; height:300px; position:absolute; top:0px; left:0px;}//左列
#right{backgroud-color:#ccc; border:2px solid #333; width:100px; height:300px; position:absolute; top:0px; right:0px;}//右列
#center{backgroud-color:#ccc; border:2px solid #333; width:100px; height:300px; margin-left:104px; margin-right:104px;}//中列
左栏将距左边left:0px;贴近左边缘进行显示，而右栏则将由right:0px;使得右栏居右显示，而中间的#center将使用普通的CSS样式 高度自适应
CSS布局代码：
html,body{
margin:0px;
height:100%;//重要，这个高度如果不写，下面的所有高度将不起作用
}
#left{
backgroud-color:#ccc;
width:300px;
height:100%;// 改为你想要显示的高度值
float:left;
} 好了 大家可以发表评论了，至此div+css布局结束，基本上可以通过div+css布局任意网页布局了，下次有空再来发 深一层的div+css
在此 简单的描述了div+css，对比表格的优势，一目了然~
页:
[1]