表格与DIV+CSS的布局设计分析
Div+CSS网站布局应用教程第8章 使用CSS样式设置列表效果
8.2.2
ul无序列表
Hale Waihona Puke 无序列表是网页中常见的元素之一，用于将一组相关的列表项目排列在 一起，并且列表中的项目没有特别的想顺序。无序列表使用<li>标签来罗列 各个项目，并且每个项目前面都带有特殊符号，比如黑色实心圆等。在 CSS中，可以通过list-style-type属性对无序列表前面的符号进行控制。 list-style-type属性的语法格式如下。 list-style-type: 参数1, 参数2,…;
自测8——为网页元素赋予内 容
自测8：为网页元素赋予内容 最终文件：光盘\最终文件\第8章\8-4-1.html 视 频：光盘\视频\第8章\8-4-1.swf
8.4.2
透明度opacity属性
opacity属性用来设置一个元素的透明度，opacity取值为1时是完全不透 明的，反之，取值为0时是完全透明的。1~0之间的任何值都表示该元素的透 明度。 opacity属性的语法格式如下。 opacity: <length> | inherit;
自测2——设置列表符号
自测2：设置列表符号 最终文件：光盘\最终文件\第8章\8-2-2.html 视 频：光盘\视频\第8章\8-2-2.swf
8.2.3
list-style-image属性
在网页设计中，除了可以使用CSS样式中的列表符号，还可以使用liststyle-image属性自定义列表符号。 list-style-image属性的基本语法如下。 list-style-image: 图片地址;
自测5——制作复杂新闻列表
自测5：制作复杂新闻列表 最终文件：光盘\最终文件\第8章\8-2-5.html 视 频：光盘\视频\第8章\8-2-5.swf
DIV+CSS布局和TABLE布局的优缺点
DIV+CSS布局和TABLE布局的优缺点
TABLE布局是WEB早期CSS不存在的时候兴起的，是对TABLE标签的不正规使⽤，Table标签就是表格，是⽤来显⽰数据的，⽽不是⽤来布局⽹页的，虽然它有时候布局⽹页很简单。
现在绝⼤多数的⽹站都是⽤DIV+CSS布局。
这两种布局各有各的优点。
⼀、div+css布局的好处：
1.符合W3C标准，代码结构清晰明了，结构、样式和⾏为分离，带来⾜够好的可维护性。
2.布局精准，⽹站版⾯布局修改简单。
3.加快了页⾯的加载速度（最重要的）（在IE中要将整个table加载完了才显⽰内容）。
4.节约站点所占的空间和站点的流量。
5.⽤只包含结构化内容的HTML代替嵌套的标签，提⾼另外搜索引擎对⽹页的搜索效率。
⼆、table布局的好处（table布局也不是⼀点⽤的没有，这点是⽏庸置疑的）
1.容易上⼿。
2.可以形成复杂的变化，简单快速。
3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。
CSS与DIV构建网站(4)布局与定位
table-caption : 将对象作为表格标题显示
table-cell : 将对象作为表格单元格显示
table-column : 将对象作为表格列显示
table-column-group : 将对象作为表格列组显示
table-header-group : 将对象作为表格标题组显示
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
（12）设置对象是否及如何显示
格式：display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
可以单独设置对象各边的内部边距：padding-top（上边）、padding-bottom（下边）、padding-left（左边）、padding-right（右边）。格式参数同padding。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
超级牛最详细的Div+CSS布局案例
DIV固定宽度居中显示－超级牛最详细的Div+C SS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px; background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。
大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。
在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
DIV与TABLE布局的使用
DIV与T ABLE布局的使用下面的代码表示三行三列的布局模式，没有用css来控制这些DIV。
•源代码：•<html>•<head>•<title>T ABLE布局</title>•</head>•<body>•<!-表格布局-->•<table border=1 width=100%>•<tr height=100 bgcolor=blue>•<td colspan="3">网页头部</td>•</tr>•<tr height=250>•<td bgcolor=orange>网页体部左边</td>•<td bgcolor=yellow>网页体部中间</td>•<td bgcolor=green>网页体部右边</td>•</tr>•<tr height=80 bgcolor=gray>•<td colspan="3">网页底部</td>•</tr>•</table>•</body>•</html>•下面用DIV布局显示相同的效果，上面的效果先用HTML标记设置好，然后使用CSS代码控制它，代码是用DIV加上样式属性布局。
•源代码:•<html>•<head>•<title>DIV布局</title>•<!-表格布局-->•<diV style="background:blue;height:100px;">头部</div>•<div id="content">•<div style="width:33％;•height:250px;float:right;background:green;">网页体右边</div>•<div style="width:33％;•height:250px;float:left;background:orange;">网页体左边</div>•<div style="width:33％;•height:250px;float:left;background:yellow;">网页体中间</div>•</div>•<div style="height:80px;background:gray;">网页底部</div>••</body>•</html>在代码中用DIV表示，有的DIV被样式属性修饰，如高度、背景等，上面的方式占用代码比较多，有一种更好的方法，可把重复的样式表示成样式文件，再链接进来，本节中所提出的样式链接(以后会学到)在下面章节会具体讲解，代码中演示了提出样式到一个样式文件中的设置。
实验三DIV+CSS样式应用
实验名称DIV+CSS样式应用实验3 DIV+CSS样式应用1实验目的1)了解页面常用布局结构；2)掌握使用CSS盒子模型浮动与定位的方法3)掌握DIV的使用方法；4)掌握DIV+CSS布局的基本方法；2实验内容及要求1)制作一个简单的如下图框架的首页，不需要填写具体内容，使用背景色标出区域；3 实验原理浮动边框可以向左或向右移动，直到外边缘碰到包含框或另一个浮动框的边框为止。
通过float或margin来让元素产生位置移动。
4仪器与材料安装有Windows7或以上操作系统的计算机，Dreamweaver5实验内容5.1CSS 布局入门CSS 布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF 图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin、padding、border 等属性来控制版块的间距。
定义DIV，分析一个典型的定义div 例子：说明如下：1)层的名称为sample，在页面中用就可以调用这个样式；2)margin 是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。
"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距，如果都一样，可以缩写成"margin: 10px;"。
如果边距为零，要写成"margin: 0px;"；3)注意：当值是零时，除了rgb 颜色值0%必须跟百分号，其他情况后面可以不跟单位"px"。
margin 是透明元素，不能定义颜色；4)padding 是指层的边框到层的内容之间的空白。
和margin 一样，分别指定上右下左边框到内容的距离。
如果都一样，可以缩写成"padding:0px"。
单独指定左边可以写成"padding-left: 0px;"。
浅析CSS+DIV与TABLE布局的异同
们知 道 ＣＳ ＋ Ｖ布 局技 术 才是 目前 各种 网站布 局使 用 最 多的 ， 告 诉我 们 准备 学 网 页制作 的学 生 ， 习 Ｓ ＤＩ 也 学
ＣＳ ＋ Ｖ是 个不错 的选择 。 Ｓ ＤＩ 【 关键词 】 Ｃ Ｓ ＤＩ Ｔ Ｌ 表 现 、 ： Ｓ ＋ Ｖ、 Ａ Ｅ、 Ｂ 内容 、 维护 、 改版
Ｃ Ｓ模 板 ＜ｓ ａ ＞ ／＞ ／ ＞ Ｓ ／ ｐ ｎ ＜ａ ＜ ｔ ｄ
＜ ｄ ｗｉ ｔ ｔ ｄ ｈ＝” ８ ｌ ＝” ｅ ｔｒ ＞ ｒ ｆ 群 ＞ ｓ ａ ｌｓ ＝” Ｔ Ｌ ” ８ ”ａ ｉ ｎ ｇ ｃ ｎ ｅ ” ＜ａ ｈ ｅ ＝” ” ＜ ｐ ｎ ｃ ａ ｓ Ｓ Ｙ Ｅ１ ＞
Ｃ Ｓ代 Ｓ
＜ｓ ａ ＞ ／＞ ／ ＞ ／ｐ ｎ ＜ａ ＜ ｔ ｄ
＜ｄ ｗｉｔ ｔ ｄｈ＝” ８ ｌ ＝” ｅ ｔｒ ＞ ｒｆ ’” ＜ ｐ ｎ ｃａｓ Ｓ ８ ”ａｉ ｎ ｇ ｃ ｎｅ” ＜８ｈｅ ＝’ ＞ ｓ ａ ｌ ＝” ＴＹＬ ” ＃ Ｓ Ｅ１ ＞
１ ． 求： ２要 文本 颜 色 为 白色 ， 本 字 体大 小 为 １ ｐ ， 文 ４ ｘ 文 本 都有空 超链接 ， 文本 超链 接没有 下 划线 ； 整个 水平 导 航 菜单下 有一个蓝 色调 的渐变 背景 图 １ 。 ３下面分 别用 Ｔ Ｂ Ｅ和 Ｃ Ｓ Ｄ Ｖ实现 的代 码如下 Ａ Ｌ Ｓ＋ Ｉ
＞ 文 Ｃ ｕ ＜ｓ ａ ＞ ／＞ ／ ＞ 英 ｌｂ ／ｐ ｎ ＜ ａ ＜ｔ ｄ
＜ｄ ｗｉｔ ｔ ｄｈ＝” ８ ｌｇ ＝”ｅ ｔｒ ＞ ｒｆ ” ＜ ｐ ｌｓ ＝” ＴＹ ８ ”ａｉ ｎ ｃ ｎｅ ” ＜ａｈｅ ＝’ ＞ ｓ ａ ｃａｓ Ｓ ＬＥ１ ＞ ｎ ”
慢 摇 串 烧＜ ｓ ａ ＞ ／＞ ／ ＞ ／ｔ ｎ ＜ａ ＜ ｔ ： ， ｄ
3.3 Div+CSS3布局
Div概念
• Div元素是用来为HTML文档内大块的内容提 供结构和背景的元素。Div 的起始标签与结 束标签之间的所有内容都是用来构成这个 块的，其中所包含元素的特性由<div>标签 的属性来控制，或者是通过使用CSS样式格 式化这个块进行控制。Div是一一个容器， 在HTML页面的每个标签对象几乎都可以称 得上是一个容器，如使用段落<p>标签对象 。
3
Div+CSS3布局
在传统的表格式布局中，之所以能进行页面的排版布局设计，完全依赖于 表格标签<table>。但表格布局需要通过表格的间距或者使用透明的gif 图 片来填充布局板块间的间距，这样布局的网页中表格会生成大量难以阅读 和维护的代码;而且表格布局的网页要等整个表格下载完单后才能显示所有 内容，所以表格布局浏览速度较慢。而在Div+CSS3布局中Div是这种布局 方式的核心对象，使用CSS3布局的页面排版不需要依赖表格，仅从Div的 使用上说，做一个简单的布局只需要依赖Div与CSS3,因此也可以称为 Div+CSS3布局。
• position属性 • 在CSS中，position属性用于定义元素的定位
模式，其属性值常用有4个。
实践与体验 布局和美化旅游新闻，分别用于控制元素 4周的填充，分別是padding-top（上填充） 、Padding-right (右填充)、padding-bottom( 下填充)和padding-left(左填充)。
CSS布局常用属性
• CSS布局完全不同于传统表格布局，它将页 面首先在整体上进行<div>标签的分块，将 页面分为若干个盒子，然后对各个盒子进 行CSS定位，最后再在各个块中添加相应的 内容。CSS布局页面最重要的手段就是利用 浮动属性和定位属性设置元素位置。
浅谈分析表格布局与Div+CSS布局的区别
浅谈分析表格布局与Div+CSS布局的区别(1)表格布局表格布局容易掌握，布局⽅便。
但表格布局需要通过表格的间距或者使⽤透明的gif图⽚来填充布局板块间的间距，这样布局的⽹页中表格会⽣成⼤量难以阅读和维护的代码；⽽且表格布局的⽹页要等整个表格下载完毕后才能显⽰所有内容，所有表格布局浏览速度较慢[2]。
(2)CSS+DIV布局通常要实现⽐较精确和⾃适应的层布局需要设置层的样式，即⽤CSS控制层的位置。
CSS+DIV布局采⽤Div来定位，通过Div的border(边框)、padding(填充)、margin(边界)和Float（浮动）等属性来控制板块的间距，具体实施是通过创建Div标签并对其应⽤CSS[3]定位及浮动属性来实现。
CSS+DIV布局需要编写⼤量CSS样式代码来控制各布局DIV层，因此要掌握它相对表格布局会困难⼀些。
但CSS+DIV布局较表格布局更加灵活实⽤，⽹站布局后很容易就能调整⽹站的布局结构；⽽且CSS+DIV布局的各布局DIV层可以依次下载显⽰，因此其访问速度较表[4]格布局要快。
表格布局⽹页实例以下为⽤表格布局的⼀个⽹页的代码[5]。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>表格布局</title> </head> <body><table width="900" height="280" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td height="82" colspan="2"><img src="header.jpg" width="900" height="82" /></td> </tr><tr><td height="32" colspan="2"><img src="links.jpg" width="900" height="32" /></td> </tr><tr><td width="190" height="618"><img src="left.jpg" width="190" height="618" /></td> <td width="710"><img src="main.jpg" width="710" height="618" /></td></tr><tr><td height="64" colspan="2"><img src="footer.jpg" width="900" height="64" /></td> </tr> </table></body></html> CSS+DIV布局⽹页实例<style type="text/css"> <!-- body{text-align:center; } #container{position:relative;background-color:#00FF00;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;height:765px;width:900px;text-align:left; } #header{position:relative;background-color:#FF0000;height:82px;width:900px;text-align:left; } #links{position:relative;background-color:#FF9900;height:32px;width:900px;text-align:left; } #left{position:relative;background-color:#FFFF66;height:618px;width:190px;text-align:left;float:right; } #main{position:relative;background-color:#00FFFF;height:618px;width:710px;text-align:left;float:left; } #footer{position:relative;background-color:#FF00FF;height:64px;width:900px;text-align:left;float:left; } --> </style> </head> <body> <div id="container"> <div id="header"><img src="header.jpg" /></div><div id="links"><img src="links.jpg" /></div><div id="left"><img src="left.jpg" /></div><div id="main"><img src="main.jpg" /></div><div id="footer"><img src="footer.jpg" /></div> </div> </body> </html>代码说明：(1)代码中共包含6个div标签，分别代表6个层。
用CSS_DIV画表格（table）进行网页排版【转】
⽤CSS_DIV画表格（table）进⾏⽹页排版【转】以往传统⽹页设计都喜欢使⽤table(表格)來建构⽹页，這樣的建构⽅式对于⽹页整体排版來讲并沒有太⼤的问题，可以完美相容于各个浏览器。
但是時代在进步，还在⽤table排⽹页感觉就有点过时了。
会这样说并不是想引起table和div之战，⽽是想要说对于⽹页的维护，table表格是⽐较⿇烦⼀点的，再加上程式码不太⼲净、过多的巢状，对于搜索引擎来讲，也⽐较难发现其中重要的部分。
那如果⽤CSS+DIV进⾏⽹页排版，就会⽐较好吗？基本上是可以这样讲，但是⼤家⼜会遇到⽹页校正的问题，⼀⼝⽓要调整四、五种版本的浏览器，这样很可能让⽹页设计者⼜跑回去⽤table表格排版。
但其实在CSS中，已经有语法是⽀援表格的了，并不是对表格进⾏样简单的样式定义，⽽是透过CSS的表格属性，完美画出表格，排除浏览器相容的问题，让传统的table排版的设计师，也可以快速转换。
本來想说使⽤table來产⽣清单排版，免除浏览器校正问题，但碍于搜索引擎对表格式的⽹页不好解析其內容，所以还是使⽤DIV排版，并默默的校正⼀堆浏览器。
但是这回因为⽹页化，因此所有的CSS与DIV⼏乎是重构的状态，所以在本來的分类⽂章清单中，样式也順便进⾏重构，可是问题來了？「重构=花时间」，因为要⽤CSS+DIV模拟成table的样式，如果⼀直使⽤float來排版，校正上其实很⿇烦，当然在浏览器的校正上，更是头⼤。
后來找了⼀下发现有不错的好东西，在diplay的属性上，有table相关的属性值可以使⽤！传统的table排版的问题⼀般來讲，table打好语法就可以呈现效果了，⽽且语法很简单，就单纯的table、tr、td，这三个语法就可以画出表格，在各个浏览器下也都可以正常的显⽰。
如果觉得排版不漂亮，就直接在语法內加上width、color等等的属性值，效果很容易就达到了，可是这样会让程式码杂乱。
对于搜寻引擎來讲，他们抓⽹站內容通常不会⼀次抓完，会先抓到⼀定的⽹页⼤⼩，之后再來，如果你把样式调整的程式码都放进去，很快的，搜寻引擎可能光收录你的表格样式，还沒抓到重点就已经达到抓取額度了，重要的资料沒被收录，倒是收录了⼀些不重要的样式设定。
实验四DivCSS网页布局
实验四 Div+CSS网页布局一、站点规划在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。
下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。
下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局及规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容：这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的布局了。
关于以上CSS的说明：1、请养成良好的注释习惯，这是非常重要的；2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；3、讲解一些常用的CSS代码的含义：font:12px Tahoma；这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；margin:0px；也使用了缩写，完整的应该是：margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px 0px 0px 0px顺序是上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，另外还有以下几种写法：margin:0px auto；说明上下边距为0px，左右为自动调整；我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。
DIV+CSS的布局相比表格(table)布局的优点介绍
DIV+CSS的布局相比表格（table）布局的优点介绍1、速率更快，页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了；2、更好地被搜索引擎收录，大部分html页面的样式写入了CSS文件中，便于被搜索引擎采集收录；3、对浏览者和浏览器更具优势，由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形；4、修改更有效率，由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时，提高工作效率；济南网站建设提供代码：?1 2 3 4 5 6 7 8 910111213141516171819202122232425262728293031 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/ <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>DIV+CSS布局教程</title><style type="text/css">#Container{width:1000px;margin:0auto;/*设置整个容器在浏览器中水平居中*/background:#CF3;}#Header{height:80px;background:#093;}#logo{padding-left:50px;padding-top:20px;padding-bottom:50px;}#Content{height:600px;/*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的 background:#0FF;}#Content-Left{height:400px;width:200px;3233343536373839404142434445464748495051525354555657585960616263646566 67 margin:20px;/*设置元素跟其他元素的距离为20像素*/float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/background:#90C;}#Content-Main{height:400px;width:720px;margin:20px;/*设置元素跟其他元素的距离为20像素*/float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/background:#90C;}/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了floa 的和一定不能大于父层Content元素的宽度，否则设置列将失败*/#Footer{height:40px;background:#90C;margin-top:20px;}.Clear{clear:both;}</style></head><body><div id="Container"><div id="Header"><div id="logo">这里设置了padding属性介绍一下padding的用法,padding将设置 </div><div id="Content"><div id="Content-Left">Content-Left</div><div id="Content-Main">Content-Main</div></div><div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。
第四部分Div+CSS进行网页布局
五、技巧 1、单行文本的垂直居中 <div class=“middle”> Here is one line of text. </div>
.middle{ Height:100px; Line-height:100px; Border:1px solid #666;}
2、设置Body居中的技巧
Position:
所有元素的默认定位都是：position:static，这 意味着元素没有被定位，而且在文档中出现在它 应该在的位置。 position:absolute 时，元素就脱离了文档【即 在文档中已经不占据位置了】，可以准确的按照 设置的 top,bottom,left 和 right 来定位 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置 来移动这个元素。【意思是元素实际上依然占据 文档中的原有位置，只是视觉上相对于它在文档 中的原有位置移动了】
三、Div的css定位与布局属性 Float:none|left|right 设置层的漂移 left 文本流向对象的左边 Clear：none|left|right|both 清除层的漂移范围 Overflow：visible|auto|hidden|scroll 内容超过层大小时用此属性
Cursor：auto|all-scroll|colresize|crosshair|default|hand|move|hel p|no-drop|notallowed|pointer|progress|rowresize|text|vertical|wait Display:block|none|inline|inline-block list-item 设置对象是否隐藏 Visibility：inherit|visible|hidden
基于css的div网页布局设计
科学技术创新1di v+css 布局的优势1.1与表格布局比较。
cs s +di v 布局在网站开发中已经被应用很多年了,占据了相当大的主导地位。
di v 是H TM L 里的一种标签<di v>是可以用来成块显示内容的一种标记。
几乎所有浏览器都能够识别此标签,为网页设计提供布局结构。
在di v 标签里,开始和结束标签之间可写入任何需要的标签来充实网页内容。
D i v 元素可以看做一个干净容器所以设计师可以通过设置其属性来修饰其样式也可以嵌套其他元素来放入内容,最后通过改变其布局方式来呈现多彩多样的网页布局形式。
Cs s 则是层级样式表,几乎所有浏览器都支持cs s 技术,cs s 将di v 中的各种属性和属性值集合在一起,能够简单、有效的控制网页的颜色、布局、字体、背景等等。
将cs s 样式表打包成一个文件,使用时可重复调用、举一反三。
使用cs s +di v 布局可以使内容和表现形式分离,代码干净整洁、有较好的复用性和可读性。
与cs s +di v 布局相比因表格布局最初的目的是用于放置文字显示内容,用于网页布局必须要调整表格内部大小,与制表元素夹杂在一起容易导致大量冗余代码,影响代码的可读性并且难以维护。
1.2属性的多样性。
D i v 元素可设置多种属性,其属性可通过cs s 层叠样式表统一设置,下面是几种较为常用的能够增强网页美观度属性设置。
1.2.1backgr ound 设置背景颜色,例如设置背景颜色为红色或者绿色backgr ound :r ed/gr een ,其中属性值还可以用十六进制数表示;属性值若是为ur l (“图片路径”)则为设置该路径下的图片为此di v 元素的背景。
1.2.2opaci t y 设置背景颜色的透明度,例如opaci t y :0.7效果是百分之70是不透明的,数值越小透明度越高。
1.2.3bor der -r adi us 设置di v 元素的圆角化,例如bor der -r adi us :10px 将10px 的宽度进行圆角化且数值越大圆角化的程度越高。
CSS+DIV
CSS+DIV与表格实现网页布局的比较作者：刘芳芳来源：《电子世界》2013年第14期【摘要】在网页设计的过程里，实现同一个效果有无数方法，而且新的方法还在不断的出现。
CSS以及DIV作为网页制作的重要组成部分，已经成为网页设计中必不可少的要素。
布局网页就是把文字、图片、动画安排到合适的位置，再把每部分合理的叠放到网页中。
【关键词】CSS+DIV；网页布局；表格；优点一、CSS+DIV布局介绍CSS+DIV布局，是通过CSS控制DIV标签的位置来实现。
CSS控制DIV搭建网页，可以生成简洁的网页源代码，提高页面的浏览速度；同时CSS也可以自如地控制网页外观，如边框、背景、链接等，这种布局方法不仅可以制作出精美的网页，也可以提供良好的用户浏览体验，是目前非常流行的一种布局技术。
“盒模型”是CSS+DIV布局的基础理论。
“盒模型”理论认为：页面上的每一个元素都被看做是一个矩形，这个矩形由内容、填充、边框和边距构成。
CSS布局网页，像拼积木一样，按照规划好的网页草图，把每部分按顺序搭建。
CSS布局网页，用到的积木就是DIV，每个DIV就是一个框架，而框架的大小、位置、外观等属性则由CSS控制。
CSS布局网页，为每个DIV设置ID，这个ID就是每一个DIV在CSS中的接口，CSS只需对这个接口（ID）来设置属性，从而实现对DIV的控制。
CSS也真正实现了“表现与样式分离”，DIV实现“表现”，CSS控制“样式”。
网页中有什么内容就放置到DIV中，而DIV不会管所放内容的样式，样式由CSS通过接口（ID）来统一控制。
在CSS+DIV布局网页中，每个DIV从上到下依次叠放，这就是DIV在网页中原始的也是唯一的顺序，这样的顺序叫网页的“普通流”。
不过，这样的顺序有很大的局限性，单靠这样的顺序无法实现网页的复杂布局，CSS可以改变DIV的原始排版顺序，这就是浮动（float）。
通过浮动（float）、清除（clear）、定位（position）以及“盒模型”的综合应用就可以实现网页的布局。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
表格与DIV+CSS的布局设计分析
摘要：网页的布局是给浏览者的第一印象，往往决定着网站的可看性。
在网页中应用不同的布局技术所能呈现的效果也不尽相同，它们各有其自己的优点，使用表格进行布局是传统的网页布局显示技术，仍是现在最常见的网页制作方法，而div+css布局是一种新的排版布局理念，可以使页面载入得更快，修改设计时更有效率而代价更低。
关键词：网页布局表格 div+css
中图分类号：tp393.092 文献标识码：a 文章编号：1007-9416(2011)12-0191-01
随着互联网应用的日渐普遍，网络应用进入了人们生活的多个层面，进而人们对网站需求的增大，市场对网页制作人员的需求也大大增加。
对于一个网站来说,要要给用户带来好的享受，就必须提高网页布局设计的美观度。
网页就好比一张图纸，通过排版布局之间的对比才凸显它的美，网页布局的效果直接影响到网页设计的质量。
目前常见的网页布局技术有表格技术和div+css技术。
1、表格布局技术
1.1 表格布局技术的特点
表格是网页的一个非常重要的元素，表格主要由行、列和单元格组成。
在使用表格布局时，设计者一般会先根据页面版式的设计需要将整个网页以水平切割的方式分解成多张独立的表格，而表格的行、列数则由该表格中所包含的版块数目来决定。
对于复杂的版块，
还必须在里面插入嵌套表格来完成。
1.2 表格布局技术的优势
对于初学者来说，表格可能是最好的布局方式，容易上手。
表格布局能对不同对象加以处理，而又不用担心不同对象之间的影响；而且表格在定位图片和文本上比起用css更加方便。
网上绝大部分的页面都是使用表格来美化的，因为表格有很好的兼容性，可被绝大部分的浏览器所支持，而且使用表格会使页面结构清晰、布局整齐。
1.3 表格布局技术的缺陷
使用table布局会生产很多冗余代码，会影响浏览速度以及占用过多服务器空间。
而且，表格结构单一，难以体现出层次感，无法将设计的美感流畅地通过网页表现出来。
2、div+css布局技术
2.1 div+css布局技术介绍
div+css的布局技术其实涉及到了网页的两个重要组成部分：结构和表现。
比如，在一个网页中，其内容可以包含很多，如各种级别的标题、正文段落、图片等，通过div，我们可以将网页中的这些内容元素放置到各个div中，构成网页的“结构”；然后，我们再根据页面的设计需要运用css样式表文件设置其中的文字、图片和列表等元素的“表现”效果。
在div+css的布局技术中，设计者运用html来确定网页的结构和内容，而用css来控制网页中内容的表现形式，很好地实现了内容与形式的分离。
2.2 div+css的布局的特点
div+css布局技术的应用相对于表格而言，具有强大的优势：
2.2.1 内容与形式分离，改版方便
在div+css的布局技术中，网页的内容通过html来表示，而网页中各版块的位置、大小、修饰以及各版块内文字、图片、列表的显示效果则交由css样式表来完成。
设计者如果想要使同样的网页内容在不同的媒体上以不同的方式显示，根本不需要去更改网页的源代码，只需要设计不同的css样式表文件即可。
div+css的布局技术中“内容与形式”分离的这上特点，既可以使我们设计的网页适应不同平台的显示需要，又可以很方便在进行网站的改版，大量地节省了设计者的设计时间，提高了设计效率。
2.2.2 页面显示速度更快
相对于表格布局技术，div+css的布局技术设计的网页显示速度更快。
在使用表格布局的网页中，浏览者在浏览网页时，必须等整张表格都下载完成后才能看到网页的内容，尤其是在网速较慢时，浏览者可能要等上好几分钟才能看到网页的内容；而用div+css布局的网页，由于它将内容与形式分离，网页中的代码较少，内容简洁，在同等网速下，这样的页面显示速度会更快，对于网络带宽的要求也就降低了。
2.2.3 有利于网站的搜索排名
在使用div+css进行布局时，网页的代码中只包含页面的内容，相对表格布局的页面，代码得了精简，这样，搜索程序在进行页面内
容搜索时，所需要的时间就会大大地缩短，搜索效率自然就会提高，网站的搜索排名也就会更靠前。
2.2.4 维护方便
由于div+css布局技术中，在页面上使用了更少了代码和组件，这样就使得整个网站更加容易维护。
2.3 div+css布局技术的缺陷
当然，div+css的布局技术虽然有着强大的优势，但也存在着一些缺陷，其中最重要的一项就是浏览器的兼容问题。
在w3c标准推出后，虽然各厂商纷纷表示会遵从这些新的标准，但实际上却还是存在着一些问题。
由于不同的浏览器厂商对于web标准有着不同的认识，也有的并没有完全严格执行新的web标准，造成了网站在不同的浏览器下有着不同的显示效果，这也是现在css布局上存在的最在弊端。
但是，目前的浏览器在下一代的研发中会逐渐解决这一问题，共同实现对web新标准的统一支持。
3、两种布局技术的综合运用
由以上分析，我们可以看出，对于表格和div+css这两种网页布局技术来说，都有站各自的优势和缺陷，那么在实际的应用中又该如何选择呢？对于div+css来说，它作为制作网页、美化网页的一个重要辅助是很强大方便的，可以弥补table制作框架和表格时的很多不足和美工上的缺点，但是完全只用它来做，太费时费力，选择table+div+css是最好的组合，也是最省时省力的办法。
一般，我们可以按以下原则来进行选择：(1)页面中各版块的布局
及定位通过div来完成；(2)网页中用来显示数据的区域则通过表格来完成。
网页的布局实际是一个信息合理化整合的一个过程，网页设计人员在制作网页时，该如何选择并正确地使用表格和div+css这两种布局技术，既要考虑网页的实际设计需要、个人设计习惯，又要综合考虑web标准，只有将选择table+div+css有机地结合起来，才能更好地做好网页的布局。
参考文献
[1]张晓晨编著.《div+css网页布局商业案例精粹》.电子工业出版社,2007,12.
[2]曾静娜等主编.《新手学css+div》.北京希望电子出版
社,2010,3.
[3]赵世新,郝敏著.《巧用css样式表制作个性化网页》.河南科技出版社,2002,7.
作者简介
孙小英（1973、11），女，硕士，副教授，研究方向：计算机网络技术；黄冈职业技术学院。