〖原创〗CSS网站布局实录-基于Web2.0标准的网站设计指南（笔记）

D___C · 发表于 2006-12-3 10:27

昨日买了本新书叫《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代码量的减少以及网页执行速度的提高也不难理解了

现在开始读书了...待续

D___C · 发表于 2006-12-3 14:29

说明：<... ...>是指网页上的代码，{... ...}是指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

D___C · 发表于 2006-12-3 15:02

CSS布局之于表格布局的优势之一：

示例:

<div id="header">
<h1>标题区</h1>
<ul>导航</ul>
</div>

复制代码

web标准推荐使用尽可能符合页面中元素意义的标签来标识元素，在以往的表格式布局之中，无论是h1或是ul这些元素几乎都不常见到，主要原因就是所有的对象形式都被表格所替代，页面可读性差，也没有任何伸缩性可言，且浏览器要过分消耗对表格的层层嵌套关系进行解析，而在CSS布局之中，要求我们尽可能多的去使用XHTML中所支持的各种标签，最终网页对象都将拥有良好的可读性，通过进一步CSS的定义，其样式表现能力丝毫不比表格差，而且拥有比表格高出许多的样式控制方法

D___C · 发表于 2006-12-3 16:37

DIV+CSS布局典型（可由此延伸任意页面布局）：
（灵活性和代码的易读性真的是table布局没法比，并且发觉以后维护以及改版起来也是非常方便的）

演示网址：http://www.sinsopaper.com/xcss/

xhtml代码部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<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}

复制代码

D___C · 发表于 2006-12-3 18:06

绝对定位（一般用得不多）

属性（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样式

D___C · 发表于 2006-12-3 18:10

高度自适应

CSS布局代码：

html,body{
  margin:0px;
  height:100%;  //重要，这个高度如果不写，下面的所有高度将不起作用
}

#left{
  backgroud-color:#ccc;
  width:300px;
  height:100%;  // 改为你想要显示的高度值
  float:left;
}

D___C · 发表于 2006-12-3 18:17

好了大家可以发表评论了，至此div+css布局结束，基本上可以通过div+css布局任意网页布局了，下次有空再来发深一层的div+css

在此简单的描述了div+css，对比表格的优势，一目了然~

〖原创〗CSS网站布局实录-基于Web2.0标准的网站设计指南（笔记）

相关帖子

浏览过的版块