《div+css网页设计规范总结》由会员分享，可在线阅读，更多相关《div+css网页设计规范总结（29页珍藏版）》请在金锄头文库上搜索。
1、DIV+CSS 布局的好处1 内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给 CSS 来处理。生成的 HTML 文件代码精简，更小打开更快。2 改版网站更简单容易了，不用重新设计排版网页，甚至于不用动原网站的任何HTML 和程序页面，只需要改动 CSS 文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。3 搜索引擎更友好，排名更容易靠前。第一 内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给 CSS 来处理。生成的 HTML 文件代码精简，更小打开更快。这个是 DIV+CSS 技术最现著的特点，也是 CSS 存在的根源。完全的颠覆现在传统(table
2、)网页设计的技术。所有现在用 table 制作的内容，都可以用 CSS 来解决掉，而且解决的更完美，更强大。不需要大家再表格套表格，只需要用 div 套 div 就可以实现以往表格套表格所有的美工，这样的结果就是使用 div+CSS 技术，让生成的网页文件大小更精简，更小。table 时代，一个页面表格达到 10 个以上是非常普遍的事情，但是现在用DIV+CSS，一个 table 都可以不用，就完全达到之前的效果，这就直接导致网页文件大小比使用 table 时减少 50%-80%，更节约各位站长的硬盘空间，访问者打开网页时更快，而且用 div+CSS 时，不像以往使用 table 时，必须把全
3、部 table 读取完了才显示页面内容，现在是可以读一个 div 就显示一个效果，大家打开网页不用等。好处真是明显而强大。这个优点的确是显著的，凡是使用传统 table 建的网页，内容多的话，有时候达到30K 左右都有可能，文件打了打开时，肯定就有 0.0 几秒的延迟。使用 DIV+CSS,由于没有表格使用，你前台打开看到的全是直接内容，CSS 文件都是导入链接的，是另一个文件，根本和 HTML 文件大小没关系，这种生成的 HTML 文件，一个也就 10K 左右大小。文件数量少时看不出来，但是文件万级以上时，还是会节约几十 M 大小的。但是使用 table 制作网页框架和表格时，全是选择化制作
4、的，也就是说不用大家去写代码，很简单输入边框和行数列数就可以达到制作出来的要求，但是使用 div+CSS 时，完全是靠手写代码，一个表格写四行代码的话，如果一个页面涉及十多个 div 表格生成，手写代码将超过 50 行，而且如果你数学不好，或是逻辑思维能力不强的话，你手写出来的表格将是乱 78 糟，出现表格重叠和位置完全不正确。因为用 div+css 写表格时，表格间的逻辑排列关系完全是靠自己手写代码判断，如果你没有很强的手写代码能力和逻辑性，你所花费的时间，比你用 table 制作时间至少是 4 倍左右。基本上一个页面定义的 ID 和class 类，完整页面是不会少于 20 个的，一个 ID
5、 或 class 手写 5 句，你制作一个 HTML页面将超过 100 句代码，当然其中很多是可以存成一个 CSS 文件来重复调用的。也就是说相同的页面内容的话，排版一样的情况下，可以直接导入链接 CSS 来实现。这个就很像之前生成 HTML 时，制作一个网页模板。但制作这个模板花的时间是用table 制作时的几倍。这里有些人要说，但是我改版的时候，就只需要再写一个 css 就可以了，不用再生成 HTML 了。那么我要说，当你再写一个 CSS 文件改版时，我可能都已经用 table 制作好一个页面模板，而且还自动生成 HTML 全站的页面了。这不是不可能的。第二点 改版网站更简单容易了，不用重
6、新设计排版网页，甚至于不用动原网站的任何 HTML 和程序页面，只需要改动 CSS 文件就完成了所有改版。DIV+CSS 对于门户网站来说改版就像换件衣服一样简单容易，改版时，不用改动全站 HTML 页面，只需要重新写 CSS，再用新 CSS 覆盖以前的 CSS 就可以实现改版了。方便吧。第三点 搜索引擎更友好，排名更容易靠前。DIV+CSS 需要注意的问题1. 检查 HTML 元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错 div 的嵌套关系。 2. 检查 CSS 是否正确 检查一下有无拼写错误、是否忘记结尾的 等。 3. 确定错误发生的位置 假如错误影响了整体布局，则可以逐个
7、删除 div 块，直到删除某个 div 块后显示恢复正常，即可确定错误发生的位置。 4. 利用 border 属性确定出错元素的布局特性 使用 float 属性布局一不小心就会出错。这时为元素添加 border 属性确定元素边界，错误原因即水落石出。 5. float 元素的父元素不能指定 clear 属性 假如对 float 的元素的父元素使用 clear 属性，四周的 float 元素布局就会混乱。 6. float 元素务必指定 width 属性 很多浏览器在显示未指定 width 的 float 元素时会有 bug。所以不管 float 元素的内容如何，一定要为其指定 width 属性
8、。 7. 是否重设了默认的样式？ 某些属性如 margin、padding 等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的 margin、padding 设置为 0、列表样式设置为 none 等。 CSS 书写规范及方法一. 常规书写规范及方法1. 选择 DOCTYPE：XHTML 1.0 提供了三种 DTD 声明可供选择：过渡的(Transitional):要求非常宽松的 DTD，它允许你继续使用 HTML4.01 的标识(但是要符合 xhtml 的写法) 。完整代码如下：严格的(Strict):要求严格的 DTD，你不能使用任何表现层的标识和属性，例如。完整代码如下：框架的(F
9、rameset):专门针对框架页面设计使用的 DTD，如果你的页面中包含有框架，需要采用这种 DTD。完整代码如下：理想情况当然是严格的 DTD，但对于我们大多数刚接触 web 标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择( 包括本站，使用的也是过渡型 DTD)。因为这种 DTD 还允许我们使用表现层的标识、元素和属性，也比较容易通过 W3C 的代码校验。2. 指定语言及字符集：为文档指定语言：为了被浏览器正确解释和通过 W3C 代码校验，所有的 XHTML 文档都必须声明它们所使用的编码语言；如：常用的语言定义：标准的 XML 文档语言定义：针
10、对老版本的浏览器的语言定义：为提高字符集，建议采用“utf-8 ”。3. 调用样式表：外部样式表调用：页面内嵌法：就是将样式表直接写在页面代码的 head 区。 如：外部调用法：将样式表写在一个独立的.css 文件中，然后在页面 head 区用类似以下代码调用。在符合 web 标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css 文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。4、选用恰当的元素：根据文档的结构来选择 HTML 元素，而不是根据 HTML 元素的样式来选择。例如，使用P 元素来包含文字段落，而不是为了换行。如果在
11、创建文档时找不到适当的元素，则可以考虑使用通用的 div 或者是 span；避免过渡使用 div 和 span。少量、适当的使用 div 和 span 元素可以使文档的结构更加清晰合理并且易于使用样式；尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；5、派生选择器：可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：.mainMenu ul li background:url(images/bg.gif;)6、辅助图片用背影图处理：这里的”辅助图片”是指那些不是作
12、为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过 CSS 样式来进行改动，如：#logo background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;7、结构与样式分离：在页面里只写入文档的结构，而将样式写于 css 文件中，通过外部调用 CSS 样式表来实现结构与样式的分离。8、文档的结构化书写：页面 CSS 文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：首页介绍服务/*=主导航=*/#mainMenu width:100%;height:30px;backgr
13、ound: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、行间注释：直接写于属性值后面，如：.searchborder:1px solid #fff;/*定义搜索输入框边框*/background:ur
14、l(./images/icon.gif) no-report #333;/*定义搜索框的背景*/2、整段注释：分别在开始及结束地方加入注释，如：/*=搜索条=*/.search border:1px solid #fff;background:url(./images/icon.gif) no-repeat #333;/*=搜索条结束=*/三样式属性代码缩写1、不同类有相同属性及属性值的缩写：对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：#mainMenu backg
15、round:url(./images/bg.gif);border:1px solid #333;width:100%;height:30px;overflow:hidden;#subMenu background:url(./images/bg.gif);border:1px solid #333;width:100%;height:20px;overflow:hidden;两个不同类的属性值有重复之处，刚可以缩写为：#mainMenu,#subMenu background:url(./images/bg.gif);border:1px solid #333;width:100%;over
16、flow:hidden;#mainMenu height:30px;#subMenu height:20px;2、同一属性的缩写：同一属性根据它的属性值也可以进行简写，如：.search background-color:#333;background-image:url(./images/icon.gif);background-repeat: no-repeat;background-position:50% 50%;.search background:#333 url(./images/icon.gif) no-repeat 50% 50%;3、内外侧边框的缩写：在 CSS 中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：.btn margin-top:10px;margin-right:8px;margin-bottom
