DIV CSS实例教程要点总结

开发 前端
本文向大家介绍一下DIV CSS实例教程要点总结,从事DIV CSS页面重构工作,从局部细节到页面的整合,然后再看整体系统的结构。在各个步骤,都有不同的处理技巧和重构的思想方式。

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

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、盒模型内嵌套浮动,解决高度的自动伸展:
底部加<div class="clear"></div>
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超出高度可自动扩展。
 

【编辑推荐】

  1. DIV CSS的XHTML代码结构浅谈
  2. 解析DIV布局之四大属性用法
  3. Html中DIV和Span的区别揭秘
  4. 使用Div CSS构架的三大好处
  5. Div CSS实例教程:页面制作方法全程指导

 
 

 

责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-08-17 10:48:12

Div CSS实例

2009-09-18 11:44:05

Scala实例教程Kestrel

2010-08-25 12:47:40

DIVCSS

2014-08-26 11:46:46

QtAndroid实例教程

2019-06-17 15:25:17

expandunexpandLinux

2011-07-25 16:03:47

XCode 编译

2013-01-04 16:17:33

Android开发图像特效图像处理

2009-09-08 14:18:35

NFS服务器

2010-08-24 10:32:34

DIV+CSS

2010-08-27 14:05:40

DIV+CSS

2013-01-14 17:05:55

UCUI设计菜单栏

2011-05-17 09:51:27

Div+CSS

2010-08-16 15:19:35

DIV+CSS教程

2010-08-25 17:08:18

实例教程

2009-07-30 14:18:02

ASP.NET实例教程

2010-09-13 13:12:57

CSS定位

2010-09-14 09:18:28

DIVCSS

2013-08-15 09:14:55

2013-07-25 14:44:48

sqlite实例教程iOS开发学习sqlite打造词典

2010-06-18 15:55:47

UML建模
点赞
收藏

51CTO技术栈公众号