DIVCSS实例教程要点总结

本文和大家重点讨论一下DIV CSS实例教程中的要点，此文为DIV CSS实例教程，还有DIV CSS实例之常见错误及DIV CSS实例初级常见错误，希望对你的学习有所帮助。

10年积累的成都网站制作、网站设计、外贸网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站后付款的网站建设流程，更有大英免费网站建设让你可以放心的选择与我们合作。

DIV CSS实例教程要点总结

从事页面重构工作，从局部细节到页面的整合，然后再看整体系统的结构。在各个步骤，都有不同的处理技巧和重构的思想方式。此文为DIV CSS实例教程，还有DIV CSS实例之常见错误及DIV CSS实例初级常见错误，原创总结了自己犯的一些错误，和细节处理的问题，以便让您更灵活的掌握这门技术，提高制作效率和可用性。认真阅读，我想你会有收获的。

◆DIV CSS实例教程：文档类型（DOCTYPES）对浏览器影响

定义文档类型：

1、所有单位属性必须指明 例如：{font-size:3px; margin:5px;}；（当值为0时可不指定单位)
2、影响盒模型，指定宽度和高度的时，要减去Padding，如一个DIV的显示高度为200，而其Padding为：10px ，则div的Height不能定为200px，而应该是：180px;

未定义文档类型：

1、所有的单位默认为px，因此当不指定时等价于px,例如margin:5;。 （当值为0时可不指定单位)
2、指定宽度和高度的时候，Padding不影响
3、所有IE版本支持统一。

◆DIV CSS实例教程：浮动要点

用更合理的方式对浮动进行控制。

1、IE6下浮动浮动方向和magrin方向一致，且浮动的元素是块元素时.会引发双倍的magrin值~此时应用display:inline；可解决浮动驱动margin的值。我以前应用IE6 hack "_"不合理；

2、clear 清除浮动各个适应代码：.clear{clear:both;font-size:1px;width:1px;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0}/*ie and firefox1.5*/；

3、盒模型内嵌套浮动，解决高度的自动伸展：
底部加

IE:height:1%;FF:.runrunrun:after{　/*在pelement这个元素的后边*/ content: "."　/*写入一个点*/display:block;/*块级布局方式*/clear:both;　/*清除左右浮动*/ height:0;visibility:hidden;/*不可见*/ }

◆DIV CSS实例教程：圆角样式实现几种方法

页面最常用的设计圆角的方式，重要在扩展性和自适应性。例子 biaoshi.rar (1.07 KB)
biaoshi.rar (1.07 KB)
获取附件：runner.web#gmail.com
1、用position: relative; 和position: absolute;用圆角图片进行绝对定位；在设置border:1px solid #ccc; 应用margin负值进行定位，如：margin:-1px;
2、应用div{border:0 solid #A5DA94;font-size:0;height:1px;margin:0 1px;overflow:hidden;}；更爱maring值，和border-width:进行渐变效果；

◆DIV CSS实例教程：玩转表格

附件:表格的应用10例子  web-table.rar (65.93 KB) web-table.rar (65.93 KB)

获取附件：runner.web#gmail.com
1、根据需求利用表单各个元素：thead,tfoot,tbody,caption（说明）,col,th,summary(摘要)
2、IE6不支持CSS控制背景变色。#box-table-a tr:hover td(IE6不支持非A的hvoer伪类)

◆DIV CSS实例教程：网页文字设置

1、字体全部是E文时，font-family: Arial, Helvetica, sans-serif; 否则特殊符号显示变形。（需要定义内容为英文字体）
2、UTF-8模式下，宋体容易变成乱码，原因在于编辑器使用时，要注意重新输入。
3、文章列表在使用“⋅”时，font-family应该设置为宋体（）
4、对字体大小单位的定义为px，有一定的局限性。（从用户体验讲 用EM***）

◆DIV CSS实例教程：常用浏览器HACK

附件:CSS hack浏览器兼容一览表
1、“_property:value” 适应IE6一下
2、“*property:value” 适应所有IE
3、“*+html div ” 适应IE7 ie5

◆DIV CSS实例教程：布局隐藏的技巧

1、使用text-indent的负值;例如{text-indent:-9999px;} （值不用设置太大 太大会影响渲染速率）
2、使用display:none,将和模型整体隐藏。不影响其它样式。
3、超出的部分隐藏;可以设置{overflow:hidden;}；
4、使用font设置超小字体，达到隐藏内容的目的，例{font-size:0;}。

◆DIV CSS实例教程：DIV自适应布局方法

1、背景的合理应用，从视觉达到自适应的目的；
2、自动居中显示技巧：父级别设置：text-align:center;字模型设置：width:*px; margin:0 auto;
3、min-height IE6不支持（其实再IE6中height的值即为最小高度.），需要hack设置高度。例：_height:*px; IE6超出高度可自动扩展。

标题名称：DIVCSS实例教程要点总结
URL地址：http://www.shufengxianlan.com/qtweb/news18/303818.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联