div+css(5)原创

第三章【DIV】div——block块状对象（块级元素），显示为一个方块，默认状态下占据一行，其他对象将在下一行显示。

in-line行间对象（内联元素），允许下一个对象与之共享一行进行显示。

【XHTML标签与功能】-----------结构标签-----------html 根元素head 头部区域body 主体区域div 区块定义标签span 行间区块定义标签-----------Meta信息-----------DOCTYPE 文档类型指定title 浏览器标题栏link 链接到扩展资源meta Meta信息vstyle 样式表区域-----------文本控制-----------p 段落h1~h6 标题1~6级strong 加重重点em 重点/强调abbr 定义文本的简写词acronym 定义首字母简写词address 标签联系信息bdo 字母顺序左右反转blockguote 块状引用内容cite 行间引用内容q 行间小型的引用-----------链接-----------a 链接vbase 基础链接类-----------图像和对象-----------img 插入图像area 图像热区细节map 图像热区object 插入对象patam 对象的参数-----------列表-----------ul 无序列表ol 有序列表li 列表项dl 带描述的列表dt 描述列表中的名词dd 描述列表中的描述-----------表格-----------table 表格tr 行td 单元格th 表头tbody 表格主体thead 表格头部tfoot 表格底部col 表格列colgroup 表格列的集合caption 表格的标题-----------表单-----------form 表单区域input 输入框textarea 文本域select 下拉列表option 下拉列表项optgroup 下拉列表项集合button 按钮label 标签fieldset 标签页legent 标签页的标题-----------脚本-----------script 脚本区域noscript 无法执行脚本的替代-----------表现-----------b 加粗i 斜体tt 打字机字体sub 下标sup 上标big 加大small 减小hr 分割线【定位】--------------------------------- 【两列右侧自适应】--------------------------------- #left{background-color:#999;border:2px #000 solid;width:100px;height:300px;float:left;}#right{background-color:#999;border:2px #000 solid;height:300px;}---------------------------------绝对定位position:static;（默认）absolute;（漂浮，可使用top，right，bottom，left）relative;---------------------------------【三列，左右两列固定，中间列自适应】主要在blog中应用，大型网站设计较少使用。

---------------------------------* {margin:0px;padding:0px;}#left{background-color:#999;border:2px #000 solid;width:100px;height:300px;position:absolute;left:0px;top:0px;}#right{background-color:#999;border:2px #000 solid;width:100px;height:300px;position:absolute;right:0px;top:0px;}#center {background-color:#0F9;border:#0C0 2px solid;height:300px;margin-left:104px;margin-right:104px;}---------------------------------【高度自适应】根据浏览器解析规则，一个对象的高度是否可以使用百分比显示，取决于对象的父级对象。

给父级html,body{height:100%;}，达到浏览器兼容效果。

IE—html对象默认100%高度；FF—html对象不是默认100%高度。

---------------------------------html,body {margin:0px;height:100%;}#left {height:100%;width:300px;background-color:#CCC;}---------------------------------【Box Model】margin叠加（空白边叠加规则）：当上下两个对象都设置了margin属性，则两者间的距离为两者设定较大的那个margin值。

但当对象设置了float属性后，空白边叠加则失效。

或IE6情况下，盒对象左右margin会加倍。

此时使用display:inline;（强制对象按照一种显示模式进行解析）针对IE6（本人在IE7/FF中测试代码无效，margin不叠加。

）---------------------------------* {margin:0px;padding:0px;}#left {height:100px;width:100px;background-color:#CCC;border:#00F 5px solid;margin:10px;float:left;display:inline;}#right {height:100px;width:100px;background-color:#666;border:#00F 5px solid;margin:10px;float:left;clear:left;display:inline;}---------------------------------【Float浮动定位】文档流：对于一个XHTML网页，body元素下的任意元素，根据其前后顺序，组成了一个个上下关系，这就是文档流。

浏览器根据这些元素的顺序去显示它们在网页之中的位置。

文档流是浏览器的默认显示规则。

clear拒绝浮动当需要网站有较强的对分辨率及内容大小的适应能力时，采用浮动定位。

主要针对非固定类型的网页进行设计。

从实际工作看，80%的情况下都是围绕浮动布局进行设计的。

使用margin、padding、border等属性进行控制。

【绝对定位】position:absolute;脱离了文档流与浮动模型。

z-index深度：设置重叠次序。

即Z轴顺序。

以数值大小为准，大值对象的层次位于小值对象之上。

如 z-index:1; z-index:0;用于网页位置全部固定，且不希望采用margin，padding，border等进行控制。

如不规则网页设计；在画面上的设计；交互式设计（下拉菜单，鼠标悬停显示）。

【相对定位】position:relative;浮动定位与绝对定位的扩展。

使被设置的元素保持与其原始位置相对，并不破坏其原始位置的信息。

原始位置会占位。

注意：父级设置有效的宽高值影响子对象的top、left。

【一些网址】（margin:0 auto;）（两列）（左列宽度自适应）（两栏居中）（三列布局）（三列都自适应，不是很科学但很强大）UXMagazine（复杂布局的代表，对屏幕分辨率的考虑周全）书中P85，P99各有一处错误。

CSS-第四章 1.导航【导航】横向导航：门户网站主导航常用。

纵向导航：多用于表达产品分类。

下拉导航：主要用于功能复杂的网站。

帮助用户直接找到产品的相关内容。

【display:block;】将显示方式文本对象改为块状对象。

修改后可设置宽度、高度、内外边距和边框。

此项针对a、span标签（默认为行内内联对象而非div的块状对象）。

--------------------【导航栏默认选中】使用ul形式--------------------#nav {height:26px;width:614px;margin:0 auto;border-bottom:2px #00F solid;}#nav li{list-style:none;float:left;}#nav li a {text-decoration:none;display:block;margin-left:2px;width:100px;height:22px;padding-top:4px;text-align:center;background:#999;color:#000;}#nav li a:hover {background:#00F;color:#FFF;}#nav li a#nav_home{background:#00f;color:#FFF;}-----------------------------------<ul id="nav"><li><a href="#" id="nav_home">首页</a></li><li><a href="#">文章</a></li><li><a href="#">参考</a></li><li><a href="#">Blog</a></li><li><a href="#">论坛</a></li><li><a href="#">联系</a></li></ul>-----------------------------------注意：根据Xhtml中元素间的css属性继承，nav_home必须先无条件执行#nav li a{}的样式，再执行#nav li a#nav_home{}的样式。