当前位置：文档之家 › DIV+CSS网页设计规范总结

DIV+CSS网页设计规范总结

  • 格式：doc
  • 大小：237.00 KB
  • 文档页数：29

下载文档原格式

  / 29

合集下载

典型的DIV＋CSS布局——左中右版式

典型的DIV＋CSS布局——左中右版式

典型的DIV＋CSS布局——左中右版式中，运⽤的是浮动属性；这个实例，则运⽤了绝对定位属性。

1、在#container中设置“position:relative;”，其作⽤是使得后⾯的绝对定位的基准为#container⽽不是以浏览器为其准。

2、左侧列#left_side和右侧#right_side列采⽤绝对定位，并且固定这两个div的宽度，⽽中间列#content由于需要根据浏览器⾃动调整，因此不设置类似属性。

但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px[html]1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %>2.3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">4.5. <html xmlns="/1999/xhtml" >6. <head runat="server">7. <title>左中右版式</title>8. </head>9. <body>10. <form id="form1" runat="server">11. <div id="wrap">12. <div id="header">header</div>13. <div id="container">14. <div id="left_side">left_side</div>15. <div id="content">content</div>16. <div id="right_side">right-side</div>17. </div>18. <div id="footer">footer</div>19. </div>20. </form>21. </body>22. </html>[css]01. #wrap{02. width:700px;03. margin:0 auto;04. }05. #header{06. margin:20px;07. height:80px;08. border:solid 1px #0000FF;09. }10. #container{11. position:relative;12. margin:20px;13. height:400px;14. }15. #left_side{16. position:absolute;17. top:0px;18. left:0px;19. border:solid 1px #0000FF;20. width:170px;21. height:100%;22. }23. #content{24. margin:0px 190px 0px 190px;25. border:solid 1px #0000FF;26. height:100%;27. }28. #right_side{29. position:absolute;30. top:0px;31. right:0px;32. border:solid 1px #0000FF;33. width:170px;34. height:100%;35. }36. #footer{37. margin:20px;38. height:80px;39. border:solid 1px #0000FF;40.41. }。

div布局技巧

div布局技巧

关于DIV布局的技巧二、DIV+CSS 网页布局的分类1、一列固定宽度一列布局是所有布局的基础，也是最简单的布局方式，用DIV+CSS 布局的代码如下：XHTML 代码：一列固定宽度CSS 代码：#main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; }2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值，是网页设计中一种非常灵活的布局形式，用DIV+CSS 布局的代码如下：XHTML 代码：一列自适应宽度CSS 代码：#main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; }3、一列固定宽度居中页面整体居中是网页布局中最常见到形式，在传统的表格布局中，使用TABLE 的align="center" 属性来实现，在DIV+CSS 布局中采用如下代码来实现：XHTML 代码：一列自适应宽度CSS 代码：DIV+CSS 网页布局方法探析。

如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利，传统的TABLE 网页布局由于其庞大的HTML 代码，使得其在搜索引擎方面显得有些无能为力，而用DIV+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。

但是又由于CSS 对不同浏览器存在兼容性问题，所以对于初学者来说，在使用DIV+CSS 进行网页布局过程中可能会遇到各种问题，本文就给大家探讨几点DIV+CSS 布局的技巧。

4、二列固定宽度在有一列固定宽度布局的基础上，实现二列固定宽度也就很简单了，用DIV+CSS 布局的代码如下：XHTML 代码：左侧右侧CSS 代码：#left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; }5、二列固定宽度居中从一列固定宽度居中的布局方法中，我们就不难完成二列固定宽度居中了，可以使用一个居中的DIV 作为容器，将二列分栏的DIV 放置在容器中，从而就实现二列的居中显示。

DIV常见布局设计

DIV常见布局设计

DIV常见布局设计DIV布局是一种常见的网页设计布局方式，它通过使用HTML中的DIV元素（<div></div>），并通过CSS样式来控制其位置和样式。

DIV布局具有灵活性和可扩展性，可以实现各种不同的网页布局和设计效果。

下面将介绍一些常见的DIV布局设计。

1.基本网页布局基本网页布局是最常见的DIV布局设计。

一般情况下，一个网页可以分为页眉（header）、导航栏（navigation）、主内容区（content）、侧边栏（sidebar）和页脚（footer）等部分。

使用DIV布局可以为每个部分创建一个DIV元素，并使用CSS样式来控制其位置和样式。

可以使用浮动、定位、flex等CSS属性来实现不同的布局效果。

2.两栏布局两栏布局是一种常见的DIV布局设计，适用于文章页面、博客页面等。

页面的内容一般分为主内容区和侧边栏两部分。

可以使用浮动或flex布局来实现。

主内容区和侧边栏的宽度可以通过CSS样式控制，可以固定宽度或自适应宽度。

3.三栏布局三栏布局是一种常见的DIV布局设计，适用于网站的主页面、新闻页面等。

页面的内容一般分为左侧栏（left sidebar）、主内容区和右侧栏（right sidebar）三部分。

可以使用浮动或flex布局来实现。

左侧栏和右侧栏的宽度可以通过CSS样式控制，可以固定宽度或自适应宽度。

4.响应式布局响应式布局是一种适应不同设备和不同屏幕尺寸的DIV布局设计。

可以使用CSS媒体查询来检测设备的屏幕尺寸，并根据不同的尺寸应用不同的CSS样式。

可以通过设置不同的宽度、隐藏或显示一些元素来实现响应式布局。

此外，还可以使用CSS框架如Bootstrap等来实现响应式布局。

5.瀑布流布局瀑布流布局是一种以瀑布流式排列元素的DIV布局设计，适用于图片墙、相册等页面。

可以使用flex布局或JavaScript库如Masonry等来实现瀑布流布局。

可以设置每列的宽度，元素会按照一定的规则排列在不同的列中，形成瀑布流效果。

第6章 Div+CSS布局网页

第6章 Div+CSS布局网页
图6-18 设置分类项方框
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。

Div

Div

Div+CSS布局网站设计的优点！业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。

那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。

<DIV>Very excellent webmaster club </DIV>如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 <P></P> 是一样的。

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

网上冲浪无论你用Intern et Explorer还是Netscape Navigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。

不管你用什么工具软件制作网页，都有在有意无意地使用CSS。

用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。

Div+CSS标准的优点:1.大大缩减页面代码，提高页面浏览速度,缩减带宽成本;2.结构清晰，容易被搜索引擎搜索到，天生优化了seo3.缩短改版时间。

只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

4.强大的字体控制和排版能力。

CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。

DIV+CSS布局使用的个人心得

DIV+CSS布局使用的个人心得

DIV+CSS布局使⽤的个⼈⼼得⽹站制作离不开⽹页布局就是说DIV+CSS都会涉及到的，以下是⼯作中总结的⼀些技巧，留下备⽤，也可以学习。

1、ul：默认的ul的margin和padding不是0，如果在导航中⽤到了左浮动的li，往往会把外部的div撑⼤，导致页⾯变形，改成：ul{margin:0px; padding:0px;}2、img：（1）这⾥牵涉的不同浏览器的问题，ie6⾥显⽰的图⽚height总是要⼤于准确值，这⾥就需要我们记住下⾯这⼀点 img{ display：block}；（2）页⾯中最好不要⽤⼤块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些⼤的⽹站，现在都尽量把背景统⼀放到⼀张图⽚上，⽤background-postion来取得背景。

（3）最好的格式就是gif格式，即确保了背景透明，在ie6中⼜不会有阴影，有时gif图⽚会有锯齿，这就需要我们保存成web格式，设置⼀下matter，matter的值⽤背景颜⾊的值越相近越好。

3、overflow：有时⼀些公司的注册协议都是很长，这就⽤到了overflow，可以把div的style⾥加上这个：overflow：auto4、float：有时候⼀些div会挤到页⾯的上⽅，这⾥可能就是浮动引起的，可以加上clear：both。

5、div：height等于1px的div，在ie6中可能并不是1px，在这个div的style⾥加上font-size：1px;这样就ok了。

6、id和class：当⼀个样式在页⾯中多次使⽤时，不要⽤id，要⽤class，要使⽤js的时候，样式最好不要⽤id，因为id要留给js使⽤。

7，link：.link：link{}、.link：visited{}、.link：hover{}、.link：active{}。

有⼀点，visited与hover的顺序⼀定不能倒换，否则ie6中会⼤⼤的问题。

实训4 div+css综合运用

实训4 div+css综合运用

实训4 div+css综合运用一、背景介绍在Web开发领域，div和css是两个基础、重要的概念。

div是HTML中的一个标签，用来划分网页的结构和布局；而css是一种样式表语言，用于描述HTML文档的呈现方式。

实训4中涉及到了div 和css的综合运用，旨在帮助学习者掌握这两个技术，并且能够灵活运用于实际项目中。

二、整体评估在实训4中，学习者需要通过实际操作，完成一个包含头部、导航、内容区域和底部的网页布局。

这样的任务要求对div和css的综合运用提出了很高的要求，需要考虑到页面的整体结构、样式和布局。

在评估过程中，我发现学习者需要注意以下几点：1. 结构清晰：div标签应该按照页面的结构和布局来合理地进行划分和嵌套，以确保页面结构清晰、层次分明。

2. 样式统一：css样式应该对整个页面起到统一、协调的作用，保证整体的美观和一致性。

3. 响应式布局：在综合运用中，需要考虑到不同设备上的显示效果，保证页面能够适配不同的屏幕尺寸。

4. 创新设计：除了基本的布局要求，学习者还可以通过css的特效和动画等进行创新设计，提升页面的互动性和吸引力。

三、文章撰写在本次实训4中，我们深入学习了div和css的综合运用，从理论到实践，都有了全面的了解和掌握。

通过对div的合理划分和css的样式设置，我们可以轻松实现一个精美、完善的网页布局。

在整个过程中，我对div和css的重要性有了更深的理解。

div作为网页设计中最基础的组件，它的合理划分和嵌套对于页面的结构和布局起着至关重要的作用。

通过div的灵活运用，我们可以将页面分割成不同的模块，从而更好地呈现页面内容，提高用户的浏览体验。

css则是页面样式的设计师，通过设置各种样式属性，我们可以实现页面的美化和个性化定制。

通过css的盒子模型、浮动布局、弹性布局等特性，我们可以完美定制各种不同风格的网页布局。

在综合运用的过程中，我深刻体会到了对div和css的熟练掌握意味着更自由地实现网页设计的愿景。

超级牛最详细的Div+CSS布局案例

超级牛最详细的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+CSS的教学研究

网页设计中DIV+CSS的教学研究
一Байду номын сангаас
、
协调， 并且后期维护 的工作量也大大减少。 导入样式表与前面提到 的链接样式表 的功能基本相 同， 只
３教学实施
３ ． １加强Ｈ Ｔ ＭＬ 代码训练
在学 习这 门课 时， 主要是要让 同学们 熟悉Ｈ Ｔ Ｍ Ｌ 代码 的格
１ ． ４导入样 式
是语法和运作 方式略有不同。 采用ｉ ｍ ｐ ｏ ｒ ｔ 方式导入 的样式表 ，
功能。
从而实现对 同一个标记 ， 声明多种样式风格。
． ２ ｌ Ｄ 选择 器 在设计网页时， 能否控制好各个模块在 页面 中的位 置是非 ２ Ｉ Ｄ 选 择器在某一个Ｈ Ｔ Ｍ Ｌ 页面中只能使用一次， Ｉ Ｄ 选 择器更 常关键 的。 在使 用ｃ ｓ ｓ 排版 的页面中， ＜ Ｄ Ｉ Ｖ ＞ 与＜ Ｓ Ｐ Ａ Ｎ ＞ 是两个常
关键 词： ｈ ｔ ｍ ｌ ； Ｃ Ｓ ｓ ； 布局 ； 网页设计
１ Ｃ Ｓ Ｓ ＋ ＤＩ Ｖ网页样 式与布局
Ｃ Ｓ Ｓ 是Ｃ ａ ｓ ｃ ａ ｄ ｉ ｎ ｇ Ｓ ｔ ｙ ｌ ｅ Ｓ ｈ ｅ ｅ ｔ ｓ 的英文缩 写， 即层叠样式
２ ． １标 签选择 器
一
个完 整的Ｈ Ｔ Ｍ Ｌ 页面是有很多不 同的标签组成 ， 而标 签选
因为每个标 记定义的Ｉ Ｄ 不只是Ｃ Ｓ Ｓ 可 以调用 ， Ｊ ａ ｖ ａ Ｓ ｃ ｒ ｉ ｐ ｔ 等其他脚本语言同样也可 以调用 。 如果一个Ｈ Ｔ Ｍ Ｌ 中有两个相 同
Ｉ Ｄ 的标记 ， 那 么将会 导致 Ｊ ａ ｖ ａ Ｓ ｃ ｒ ｉ ｐ ｔ 在查找Ｉ Ｄ 时出错， 例 如函 １ ． １行 内样 式 数ｇ ｅ ｔ Ｅ １ ｅ ｍ ｅ ｎ ｔ Ｂ ｙ Ｉ ｄ （ ） 。 正 因为Ｊ ａ ｖ ａ Ｓ ｃ ｒ ｉ ｐ ｔ 等脚本语言也能调用 行 内样 式是 所有样 式方 法 中最 为直接 的一种， 它 直接对 Ｈ Ｔ Ｍ Ｌ 标记使用ｓ ｔ ｙ ｌ ｅ 属ｌ 生， 然后将Ｃ Ｓ Ｓ 代码直接写在其中。 Ｈ Ｔ Ｍ Ｌ 中设置 的Ｉ Ｄ ， 因此Ｉ Ｄ 选 择器～直被广泛 地使用。网站建设

CSSdiv和css布局

CSSdiv和css布局

CSSdiv和css布局⼀.div和span DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应⽤CSS样式 DIV和span的区别在于，span是内联元素，div是块级元素。

div占⽤整⾏，span只会占⽤内容⼤⼩的部分。

div可以改变size，span不可以改变size⼆.盒模型 margin 盒⼦外边距，增加的话，内盒⼤⼩不会变 padding 盒⼦内边距，增加的话，border向外扩⼤，内盒⼤⼩本⾝不会变 border 盒⼦边框宽度 width 盒⼦宽度 height 盒⼦⾼度三.布局相关的属性 1.position定位⽅式 relative 正常定位 absolute 根据⽗元素进⾏定位 fixed 根据浏览器窗⼝进⾏定位 static 没有定位 inherit 继承 2.定位 left，right，top，bottom离页⾯顶点的距离 3.覆盖顺序优先级 z-index 其值是从0，1，2... 数值越⼤，优先级越⾼，那么显⽰就在最上⾯ 4.display显⽰属性 display:none 层不显⽰ display:block 块状显⽰，在元素后⾯换⾏，显⽰下⼀个块元素。

将内联转换成块状 display:inline 内联显⽰，多个块可以显⽰在⼀⾏内。

将块状转换成内联 5.float浮动属性 left 左浮动 right 右浮动 6.clear清除浮动 clear:both 7.overflow溢出处理 hidden 隐藏超出层⼤⼩的内容 scroll ⽆论内容是否超出层⼤⼩都添加滚动条 auto 超出时⾃动添加滚动条四.兼容问题及⾼效 1.兼容性测试⼯具 IE Tester Multibrowser 2.常⽤浏览器 Google chrome Firefox opera 3.⾼效的开发⼯具 轻量级 notepad++ sublime text 记事本 重量级 webstorm Dreamweaver 4.⽹页设计⼯具 fireworks photoshop 5.判断IE的⽅法 条件判断格式 <!--[if 条件版本]> 那么显⽰ <![endif]--> 不等于 [if !IE 8] 除了IE8都可以显⽰ ⼩于 [if lt IE 5.5] 如果IE浏览器版本⼩于5.5的显⽰ ⼤于 [if gt IE 5] 如果IE浏览器版本⼤于5的显⽰ ⼩于或者等于 [if lte IE 6] 如果IE浏览器版本⼩于等于6的显⽰ ⼤于或者等于 [if gte IE 6] 如果IE浏览器版本⼤于等于6的显⽰ ⼩于和⼤于之间 [if (gt IE 5)&(lt IE 7)] 或 [if (IE 6)|(IE 7)] 仅 <!--[if IE 8]><!doctype html><html><head><title>Div+Css布局(div+span以及盒模型)</title><meta charset="utf-8"><style type="text/css">body{margin:0px;padding:0px;}/*div{background-color:green;color:#fff;}span{background-color:green;color:#fff;}div{width:500px;height:500px;padding:0px;margin:0px;border:solid 10px;}*/.div{width:600px;height:600px;margin:0 auto;background-color:green;}.diva{float:left;width:240px;height:240px;background-color:red;}.divb{float:left;width:240px;height:240px;background-color:yellow;}.div div{margin:10px;padding:10px;border:solid 10px;}</style></head><body><!--div>麦⼦学院DIV</div><div>麦⼦学院DIV</div><span>麦⼦学院SPAN</span><span>麦⼦学院SPAN</span--><div class="div"><div class="diva"></div><div class="divb"></div></div></body></html><!doctype html><html><head><title>Div+Css布局(布局相关的属性)</title><meta charset="utf-8"><style type="text/css">body{padding:0;margin:0;}/*.div{width:300px;height:300px;background-color:green;position:relative;left:10px;top:10px;z-index:0;}span{position:absolute;background-color:#ff6600;color:#fff;top:-10px;right:0;}.fixed{position:fixed;background-color:#ff6600;color:#fff;top:100px;z-index:1;}*/div{background:green;display:inline;width:200px;}span{background-color:red;display:block;width:200px;}</style></head><body><!--div class="fixed"><p>联系电话：1111111</p><p>联系QQ：782590844</p><p>联系地址：四川省成都市</p></div><div class="div"><span>浏览次数：222</span></div></div--><div>麦⼦学院</div><div>麦⼦学院</div><div>麦⼦学院</div><span>麦⼦学院</span><span>麦⼦学院</span><span>麦⼦学院</span><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></body></html><!doctype html><html><head><title>Div+Css布局(浮动以及溢出处理)</title><meta charset="utf-8"><style type="text/css">body{padding:0;margin:0;}.div{width:960px;height:600px;margin:0 auto;background-color:#f1f1f1;}.left{float:left;width:260px;height:460px;background:#ccc;}.right{float:right;width:690px;height:460px;background:#ddd;}.clear{clear:both;}.bottom{margin-top:10px;height:200px;width:960px;background:red;}.jianjie{width:260px;height:120px;background:red;overflow:auto;}</style></head><body><div class="div"><div class="left"><div class="jianjie">麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br /></div></div><div class="right"></div><div class="clear"></div><div class="bottom"></div></div></body></html>。

网页设计中的DIV+CSS技术应用研究

网页设计中的DIV+CSS技术应用研究

网页设计中的DIV+CSS技术应用研究摘要：以目前非常流行的网页设计技术CSS+DIV为研究对象，阐述了该技术产生的背景，分析了该技术在实际应用中的优缺点，并在此基础上提出了能使该技术在应用上实现最优化的一系列方法。

关键词：DIV；CSS；网页布局；XMHTL0 引言“内容”与“形式”分离式的网页设计已成为时下静态网页设计的主流方向，整个网络刮起了一股“网站重构”的浪潮。

以“DIV控制网站的模块布局，CSS控制页面内容表现形式”的DIV+CSS技术为许多网页设计者带来了福音，但是在实际应用时也存在一些问题。

本文分析了CSS+DIV的产生背景，并对该技术的优缺点进行了探讨，然后在此基础上提出了一系列可行方法使该技术在网页设计中能做到扬长避短，将其功能发挥到最大化。

1 DIV+CSS产生的背景1.1 从HTML到XHMLHTML（Hypertext Markup Language）——超文本标记语言，它通过标记符号来标记要显示的网页中的各个部分，是传统基于TABLE布局的一种基本网页设计语言。

XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。

XHTML是一个基于XML的标记语言，XHTML是一种增强了的HTML，是基于“DIV+CSS”技术的一种网页设计语言。

建立XHTML的目的就是实现HTML向XML的过渡。

1.2 从TABLE到DIV+CSS最早期的TABLE布局网页是由表格的嵌套和合并拆分所实现，而所有的样式都直接在HTML代码中体现，样式与内容完全混合在一起。

后来，许多网页设计者会将整个网页设计分成两步：先直接在图像编辑软件生成一张网页的平面图，通过切片导出生成TABLE布局的网页；然后，利用网页编辑软件生成一些动态链接的效果。

但是这种两步走并不是真正意义上的“内容”与“样式”的分离，这样的网页代码中还是存在很多样式信息，也存在大量重复和冗余，同样不利于后期修改维护。

运用DIV+CSS设计网站布局

运用DIV+CSS设计网站布局

运用DIV+CSS设计网站布局作者：袁红霞来源：《科技资讯》2012年第33期摘要：DIV+CSS是网站标准中常用的术语之一，XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

用DIV盒模型结构给各部分内容划分到不同的区块，然后用CSS来定义盒模型的位置、大小、边框、内外边距、排列方式等。

在DIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。

关键词：DIV+CSS 选择器盒子模型中图分类号：TP393 文献标识码：A 文章编号：1672-3791（2012）11（c）-0022-01DIV用于搭建网站结构、CSS用于创建网站表现，实质即使用XHTML对网站进行标准化重构，使用CSS将表现与内容分离，便于网站维护，简化html页面代码，可以获得一个较优秀的网站结构，便于日后维护、协同工作和搜索引擎蜘蛛抓取。

仔细分析和规划页面结构，得到类似这样的几块：标志和站点名称主页面内容站点导航子菜单搜索框功能区（例如购物车、收银台）页脚（版权和有关法律声明）我们通常采用DIV元素来将这些结构定义出来，类似这样：这是一个对内容块的语义说明。

DIV容器中，可以包含任何内容块，也可以嵌套另一个DIV。

内容块可以包含任意的HTML元素：标题、段落、图片、表格等等。

每一个内容块都可以放在页面上的任何地方，再指定这个块颜色、字体、边框、背景以及对齐属性等等。

ID的名称是控制某一内容块的手段，通过给这个内容块套上DIV，并加上唯一的ID，就可以用CSS选择器精确定义每一个页面元素的外观。

CSS是CascadingStyleSheets（层叠样式表）的缩写。

是对web文档添加样式的简单机制，属于表现层的布局语言。

CSS中有三大类型选择器：基本选择器、复合选择器、特殊选择器。

基本选择器又包括标签选择器、id选择器、类选择器。

一个HTML页面可以由很多不同的标签组成，CSS标签选择器可以声明哪些标签采用哪种CSS样式。

网页设计实训总结 制作网页设计的心得体会精选10篇

网页设计实训总结 制作网页设计的心得体会精选10篇

网页设计实训总结制作网页设计的心得体会精选10篇网页设计实训总结心得要怎么写，才更标准规范？根据多年的文秘写作经验，参考优秀的网页设计实训总结心得样本能让你事半功倍，以下是细心的小编帮大伙儿分享的10篇网页设计实训总结的相关范文，仅供参考。

网页设计实训个人总结篇一时光匆匆，2021年马上离我们远去。

回首这走来的一年，似乎去年的圣诞歌还在耳边萦绕，实是感叹时间的飞逝，让自己的脚步显得如此匆忙。

可细细品味，却也发觉自己在不轻易间成熟了许多。

不知不觉中，充满希望的2022年就伴随着新年伊始临近。

回首2021年的工作，有硕果累累的喜悦，也有遇到困难和挫折时惆怅。

在医院我所从事的岗位是网络美工，工作主要涉及到网站的广告设计，广告图片替换，页面策划修改；网站的页面制作，样式修改，后期维护等不同工作。

可以说凡是需要突出我们网络部及网站整体形象的地方，就需要美工参与工作。

设计工作是痛苦并着快乐，每当面临重大的设计任务时充满了压力，开始搜集各种资料，接下来寻找设计，沉思、焦灼，经过痛苦煎熬，终于有了满意的创意时倍感轻松。

每当经过艰苦的磨砺，自己的劳动成果得到大家的肯定时，便是工作中较大的快乐！充满了快意。

下面是我过去一年来工作回顾，工作主要围绕以下内容：1、官方网站改版。

2、激光网制作与设计。

3、中韩美容网站相关样式修改，日常维护，广告设计，内容更新。

4、活动专题，与项目专题的设计。

根据文案提供的内容来设计策划专题活动。

平均3天/个。

经验总结作为一个网页美工除了要求网页三剑客，PS这些必会的软件之外，还要求对HTML用得熟练，对ASP或PHP，以及JSP要有初步的了解。

1.表达一定的艺术效果，特别是医疗网站，视觉效果很重要。

一个的网站应该把网页设计得吸引人，同时又要传达设计思想和情感。

网页作为一种媒体，它须具有一定的艺术感染力，一个平淡无奇、杂乱无章或毫无美感的网页很难会有浏览者喜欢，更不说去浏览它的内容了。

2.使页面结构清晰可读性强经常可以看到这样的页面，上面堆砌了许多内容，却没有考虑它的空间框架，让人无法知晓那些内容才是较具权威的。

实验四DivCSS网页布局

实验四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则是内部距离。

制作网页设计的心得体会(最新8篇)

制作网页设计的心得体会(最新8篇)

制作网页设计的心得体会（最新8篇）（经典版）编制人：__________________审核人：__________________审批人：__________________编制单位：__________________编制时间：____年____月____日序言下载提示：该文档是本店铺精心编制而成的，希望大家下载后，能够帮助大家解决实际问题。

文档下载后可定制修改，请根据实际需要进行调整和使用，谢谢!并且，本店铺为大家提供各种类型的经典范文，如总结报告、合同协议、规章制度、条据文书、策划方案、心得体会、演讲致辞、教学资料、作文大全、其他范文等等，想了解不同范文格式和写法，敬请关注!Download tips: This document is carefully compiled by this editor. I hope that after you download it, it can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you!Moreover, our store provides various types of classic sample essays, such as summary reports, contract agreements, rules and regulations, doctrinal documents, planning plans, insights, speeches, teaching materials, complete essays, and other sample essays. If you want to learn about different sample formats and writing methods, please pay attention!制作网页设计的心得体会（最新8篇）我们有一些启发后，有这样的时机，要好好记录下来，这样就可以总结出具体的经验和想法。

网页设计实习总结范文(通用7篇)

网页设计实习总结范文(通用7篇)

网页设计实习总结范文（通用7篇）w页设计实习总结内容（通用7篇）w页设计实习总结1我第一次步入了社会，从此开始了面对社会、工作的生活。

刚刚走入社会的我是一个性格有些内向的人，面对陌生的人，我不善言辞，不会给自己的外表进行很好的包装，不适合做那些销售、接待的工作，只有技术类的工作，少说多干的活适合我，这个我很清楚。

现在，中国每年都有很多毕业的大学生找不到工作，我也不例外，所以，这第一次实习工作肯定不会太好找，但是相反，我的运气还不错。

找到了一份w页设计的工作。

现将我在工作中的情况总结如下。

一、工作介绍我工作的这家公司，从事w站开发工作的，公司在技术团队这部分是比较正规的，一般是五到六人为一个小组，小组中有明确分工，有负责联系客户接恰生意的，有专门做技术的，而在技术这块分为w站前台、后台开发，我在学校主要做的是后台开发，当然前台设计工作也还算熟练，但不是很精通。

我们这个小组一般接下的活都是一些小型w站的开发工作，这样的w站技术难度不大，而且工作周期短，有相当一部分的，只需要通过cms软件就可以进行开发。

但是有个别的w站开发时，我们还是需要进行一些手写代码工作的。

二、开发技术做为一个刚毕业的大学生，我的知识储备肯定有不足的地方，毕竟学校教的东西肯定会有一部分和社会是脱节的，但好在我的领导对于我没有太多的要求，他只是要求我尽快的适应公司的工作和生活，在短时间内熟练的掌握相关技术，干好本职工作。

在大学里对一个学生来说什么是最重要的，那就是学习能力。

要知道，这个世界上，知识在发展，人类在进步，每天都在进行日新月异的变化，我们的知识储备总会有不够的地方，但是一定要有学习能力，将不会知识快速掌握，只有这样才能占据主动，减少被动情况的尴尬发生，通过二个星期的时间，我成功的适应了公司的工作和生活节奏，每天早九点上班，晚17：30下班，中午休息一个半小时，每周还有两天假期。

我利用业余时间，抓紧学习，将工作中所需要的技术进行了强化学习，其实这些东西在学校的时候就接触过，只是不精通。

DIV和CSS总结

DIV和CSS总结

DIV和CSS总结IE6下，DIV容器和padding之和，是DIV所占区域的总宽度（IE8时DIV容器所占区域总宽度不需要计算padding）真实宽度=width+padding+border+margin!important强调声明前面的语句有效性。

比如设置了:padding:0px!important;padding:10px;后面的重要性就不如前面带声明的！一、设置为float的div在IE6下margin会加倍解决方法一：是在这个div里面加上display:inline。

但是会导致内容区域的第一行文字出现缩进，和之后的行不对齐，应该再加一层div解决如：＜#div id="imfloat"> 相应的css为#imfloat{float:left; margin:5px; /*IE下理解为10px*/ display:inline; /*IE下再理解为5px*/}解决方法二：通过!important这样的手段hack。

（这里面有3种形式）第一种：.div { background:orange;/*ff*/*background:green !important;/*ie7*/*background:blue; /*ie6*/ }第二种：.div { margin:10px;/*ff*/*margin:15px;/*ie7*/_margin:15px;/*ie6*/ }第三种：#div { color: #333; } /* ff */* html #div { color: #666; } /* IE6 */*+html #div { color: #999; } /* IE7 */二、IE6和IE8下的导航菜单有时候鼠标放上，IE8会有背景色而IE6没有，这时候要给区域加上高度和宽度，试试height:auto;width:88px二、在google、IE8、Firefox中margin-top的兼容在这些浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。

DIV+Css总结

DIV+Css总结

1.以下是下划线的效果<style>p.one {text-decoration:underline;} /* 下划线效果*/p.two {text-decoration:overline; }/* 顶划线*/p.three {text-decoration:line-through;} /* 中间划线*/p.four {text-decoration:blink;}/*闪烁，只在firefox中可以。

*/p.five{ text-decoration:underline overline line-through; }/* 三种同时,有几种就用空格隔开*/</style>2. 英文字母大小写的方式<style><!--p{ font-size:17px; }p.one{ text-transform:capitalize; } /* 单词首字大写*/p.two{ text-transform:uppercase; } /* 全部大写*/p.three{ text-transform:lowercase; } /* 全部小写*/-->font-family:Arial, Helvetica, sans-serif; /* 字体*/letter-spacing:-2px; /* 字母间距*/</style>3. vertical-align的用法！vertical-align只作用于在同一行内的元素vertical-align声明在很多中文文档中解释是“决定元素在垂直位置的显示”，它有下面几个参数baseline | sub | super | top | text-top | middle | bottom | text-bottom |baseline：与元素的基线对齐。

middle：与元素中部对齐。

sub：字下沉。

super：字上升。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

DIV+CSS布局的好处1 内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给CSS来处理。

生成的HTML文件代码精简，更小打开更快。

2 改版网站更简单容易了，不用重新设计排版网页，甚至于不用动原网站的任何HTML 和程序页面，只需要改动CSS文件就完成了所有改版。

对于门户网站来说改版就像换件衣服一样简单容易。

3 搜索引擎更友好，排名更容易靠前。

第一内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给CSS来处理。

生成的HTML文件代码精简，更小打开更快。

这个是DIV+CSS技术最现著的特点，也是CSS存在的根源。

完全的颠覆现在传统(table)网页设计的技术。

所有现在用table制作的内容，都可以用CSS来解决掉，而且解决的更完美，更强大。

不需要大家再表格套表格，只需要用div套div就可以实现以往表格套表格所有的美工，这样的结果就是使用div+CSS技术，让生成的网页文件大小更精简，更小。

table时代，一个页面表格达到10个以上是非常普遍的事情，但是现在用DIV+CSS，一个table都可以不用，就完全达到之前的效果，这就直接导致网页文件大小比使用table 时减少50%-80%，更节约各位站长的硬盘空间，访问者打开网页时更快，而且用div+CSS 时，不像以往使用table时，必须把全部table读取完了才显示页面内容，现在是可以读一个div就显示一个效果，大家打开网页不用等。

好处真是明显而强大。

这个优点的确是显著的，凡是使用传统table建的网页，内容多的话，有时候达到30K 左右都有可能，文件打了打开时，肯定就有0.0几秒的延迟。

使用DIV+CSS,由于没有表格使用，你前台打开看到的全是直接内容，CSS文件都是导入链接的，是另一个文件，根本和HTML文件大小没关系，这种生成的HTML文件，一个也就10K左右大小。

文件数量少时看不出来，但是文件万级以上时，还是会节约几十M大小的。

但是使用table制作网页框架和表格时，全是选择化制作的，也就是说不用大家去写代码，很简单输入边框和行数列数就可以达到制作出来的要求，但是使用div+CSS时，完全是靠手写代码，一个表格写四行代码的话，如果一个页面涉及十多个div表格生成，手写代码将超过50行，而且如果你数学不好，或是逻辑思维能力不强的话，你手写出来的表格将是乱78糟，出现表格重叠和位置完全不正确。

因为用div+css写表格时，表格间的逻辑排列关系完全是靠自己手写代码判断，如果你没有很强的手写代码能力和逻辑性，你所花费的时间，比你用table制作时间至少是4倍左右。

基本上一个页面定义的ID和class类，完整页面是不会少于20个的，一个ID或class手写5句，你制作一个HTML页面将超过100句代码，当然其中很多是可以存成一个CSS文件来重复调用的。

也就是说相同的页面内容的话，排版一样的情况下，可以直接导入链接CSS来实现。

这个就很像之前生成HTML时，制作一个网页模板。

但制作这个模板花的时间是用table制作时的几倍。

这里有些人要说，但是我改版的时候，就只需要再写一个css就可以了，不用再生成HTML了。

那么我要说，当你再写一个CSS文件改版时，我可能都已经用table制作好一个页面模板，而且还自动生成HTML全站的页面了。

这不是不可能的。

第二点改版网站更简单容易了，不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。

DIV+CSS对于门户网站来说改版就像换件衣服一样简单容易，改版时，不用改动全站HTML页面，只需要重新写CSS，再用新CSS覆盖以前的CSS就可以实现改版了。

方便吧。

第三点搜索引擎更友好，排名更容易靠前。

DIV+CSS需要注意的问题1. 检查HTML元素是否有拼写错误、是否忘记结束标记即使是老手也经常会弄错div的嵌套关系。

2. 检查CSS是否正确检查一下有无拼写错误、是否忘记结尾的} 等。

3. 确定错误发生的位置假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

4. 利用border属性确定出错元素的布局特性使用float属性布局一不小心就会出错。

这时为元素添加border属性确定元素边界，错误原因即水落石出。

5. float元素的父元素不能指定clear属性假如对float的元素的父元素使用clear属性，四周的float元素布局就会混乱。

6. float元素务必指定width属性很多浏览器在显示未指定width的float元素时会有bug。

所以不管float元素的内容如何，一定要为其指定width属性。

7. 是否重设了默认的样式？某些属性如margin、padding等，不同浏览器会有不同的解释。

因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

CSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。

完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xh tml1/DTD/xhtml1-transitional.dtd“>严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。

完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “/TR/xhtml1/DTD/xhtml1-strict.dtd“>框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。

完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “/TR/xhtml1/DTD/xhtml1-frameset.dtd“>理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。

因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2. 指定语言及字符集：为文档指定语言：<html xmlns=”/1999/xhtml” lang=”en”>为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：常用的语言定义：<meta http-equiv=”Content-Type”content=”text/html; charset=utf-8″/> 标准的XML文档语言定义：<?xml version=”1.0″encoding=”utf-8″?>针对老版本的浏览器的语言定义：<meta http-equiv=”Content-Language”content=”utf-8″/>为提高字符集，建议采用“utf-8”。

3. 调用样式表：外部样式表调用：页面内嵌法：就是将样式表直接写在页面代码的head区。

如：<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。

如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

4、选用恰当的元素：根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。

例如，使用P 元素来包含文字段落，而不是为了换行。

如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；避免过渡使用div和span。

少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；5、派生选择器：可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：.mainMenu ul li {background:url(images/bg.gif;)}6、辅助图片用背影图处理：这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。

将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}7、结构与样式分离：在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写：页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。

如：<div id=”mainMenu”><ul><li><a href=”#”>首页</a></li><li><a href=”#”>介绍</a></li><li><a href=”#”>服务</a></li></ul></div>/*=====主导航=====*/#mainMenu {width:100%;height:30px;background:url(images/mainMenu_bg.jpg) repeat-x;}#mainMenu ul li {float:left;line-height:30px;margin-right:1px;cursor:pointer;}/*=====主导航结束=====*/9、鼠标手势：在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;”二．注释书写规范1、行间注释：直接写于属性值后面，如：.search{border:1px solid #fff;/*定义搜索输入框边框*/background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/}2、整段注释：分别在开始及结束地方加入注释，如：/*=====搜索条=====*/.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}/*=====搜索条结束=====*/三．样式属性代码缩写1、不同类有相同属性及属性值的缩写：对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。