DIV+CSS 网站设计的研究和探讨

文/张英1 引言

DIV+CSS 是网站标准（或称“WEB标准”）中的常用术语之。div 是html（超文本语言）中的一个元素，div+css 是一种网页布局的方法。

2 CSS的样式及引用

（1）样式定义放在一个单独的后缀名为.CSS 文件中。

元素{ 属性color：值red；} 在head 段使用<link> 标记，引用语法：<link rel=”stylesheet”type=”text/css” href=”样式表地址” />

（2）嵌入式样式表：

<style> 元素段必须出现在head 段内，有一个开始和结束标记， 并且可以有多个<style> 段语法格式： <style type=”text/css”>

（3）在嵌入式样式表中我们可以使用@import 导入一个外部样式表<style type=”text/css”>@import url( 外部样式表URL)；……其它嵌入式的样式定义……</style>

3 DIV+CSS实例及技巧

3.1 div css布局中CSS图片大小自动等比例缩小图片不变形的解决技巧第一种，让图片和布局宽度高度成等比例，这样CSS 设置死宽度和高度，图片也是等比例缩小，图片也不会变形。第二种， 使用CSS max-width 和maxheight实现图片自动等比例缩小很简单我们要使用到max-width 和maxheight,这样即可设置对象的图片最大宽度和最大高度，这样图片就会等比例缩放图片，而图片相对不变形清晰。

3.2 DIV CSS无法显示背景颜色问题分析解决

（1）由于使用float 造成浮动产生无法显示css 背景颜色。如果对一个对象设置了background 背景颜色样式，该对象内部盒子有使用float 浮动属性样式，这个时候该对象浮动产生，会导致该对象不能撑开，所以css 背景颜色就不能无法正常显示，解决方法有三种，一个是设置clear 清除浮动、设置css 高度、设置cssoverflow 样式。

（2）由于高度限制造成了背景颜色不能显示完整。

假如你有个对象没有计算好高度，因不确定内容有多少，当内容超过你设置高度限制，这个时候超出部分背景就可能无法显示，这样只要设置够高的高度，或者取消删除高度样式即可；如果你想限制高度，又不想内容过多溢出你设置高度限制，那我们可以设置对应样式overflow:hidde，这样设置后，假如DIV 对象设置一定宽度高度，此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。

3.3 DIV重叠问题的解决

重叠样式需要主要CSS 样式解释

（1）z-index 重叠顺序属性。

（2）position:relative 和position:absolute设置对象属性为可定位（可重叠）。

（3）left right top bottom 绝对定位具体位置设置。配合的样式

（1）css width。

（2）css height。

（3）background 为了观察效果，我们对不同DIV 设置不同背景颜色进行区别。接下来我们要让DIV 按自己意愿重叠、叠加。下面我们通过一个例子来解决，新建4 个DIV 盒子，一个大的DIV 盒子，CSS 命名为“.div-relative”， 三个小DIV 盒子放于第一个大DIV 对象盒子内，DIV 命名分别为“.div-A”、“.div-B”、“.div-C”。效果A：未排序、为排顺序DIV 层叠重叠我们可使用position 实现绝对定位，对父级设置position:relative 属性，对其子级设置position:absolute 加上left 或right 和top 或bottom 实现子级在父级内的任意定位。在原始情况下重叠是按DIV 代码本身顺序排列的，越后输入的DIV盒子就越靠前（浮在最上面）。除了改变源代码本身div 代码在html 中的顺序，我们还可以使用css z-index 实现DIV 层排列顺序。

效果B：通过CSS 控制DIV 重叠顺序我们使用以上绝对定位实例代码，只需要对“.div-A”、“.div-B”、“.div-C”分别加入z-index 样式即可实现任意顺序的排列。index 的值为正整数值，数字越大对应对象层越浮上层越靠前。

3.4 jQuery适用技巧笔记整合

（1）关于网页元素的引用。

通过jQuery 的$() 引用元素包括通过ID、CLASS、元素名以及元素的层级关系及dom 或者xpath 条件等方法，且返回的对象为jQuery 对象（集合对象），不能直接调用dom定义的方法。

（2）jQuery 对象与dom 对象的转换。只有jquery 对象才可以使用jquery 定义的方法。dom 对象和jquery 对象是有区别的，调用方法的时候要注意操作的是dom 对象还是jquery 对象，普通的dom 对象可以通过$()转换成jquery 对象。但由于jquery 对象本身是一个集合，所以如果jquery 对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

（3）如何获取jQuery 集合中的某一项。对于获取的元素集合，获取其中的某一项可以使用eq 或get(n) 或者索引号的方法获取，要注意的是，eq 返回的是jquery 对象，而get(n) 和索引则返回的是dom 元素对象。对于jquery 对象只能使用jquery 的方法，而dom 对象只能使用dom 的方法。

参考文献

[1] 上一篇             下一篇