div+css 网站设计的研究和探讨

《div+css 网站设计的研究和探讨 》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、DIV+CSS网站设计的研究和探讨文/张英1引言DIV+CSS是X站标准（或称“ARGIN:0cm0cm0pt;mso-layout-grid-align:none"class=MsoNormalalign=left>2CSS的样式及引用（1）样式定义放在一个单独的后缀名为.CSS文件中。元素{属性color：值red；}在head段使用<link>标记，引用语法：<linkrel=”stylesheet”type=”text/css”href=”样式表地址”/>（2）嵌入式样式表：<style>元素段必须出现

2、在head段内，有一个开始和结束标记，并且可以有多个<style>段语法格式：<styletype=”text/css”>（3）在嵌入式样式表中我们可以使用import导入一个外部样式表<styletype=”text/css”>importurl(外部样式表URL)；……其它嵌入式的样式定义……</style>3DIV+CSS实例及技巧3.1divcss布局中CSS图片大小自动等比例缩小图片不变形的解决技巧第一种，让图片和布局宽度高度成等比例，这样CSS设置死宽度和高度，图片也是等比例缩小，图片也

3、不会变形。第二种，使用CSSmax-axheight实现图片自动等比例缩小很简单我们要使用到max-axheight,这样即可设置对象的图片最大宽度和最大高度，这样图片就会等比例缩放图片，而图片相对不变形清晰。3.2DIVCSS无法显示背景颜色问题分析解决（1）由于使用float造成浮动产生无法显示css背景颜色。如果对一个对象设置了background背景颜色样式，该对象内部盒子有使用float浮动属性样式，这个时候该对象浮动产生，会导致该对象不能撑开，所以css背景颜色就不能无法正常显示，解决方法有三种，一个是设置clear清除浮动、设置cs

4、s高度、设置cssoverflo0cm0pt;mso-layout-grid-align:none"class=MsoNormalalign=left>（2）由于高度限制造成了背景颜色不能显示完整。假如你有个对象没有计算好高度，因不确定内容有多少，当内容超过你设置高度限制，这个时候超出部分背景就可能无法显示，这样只要设置够高的高度，或者取消删除高度样式即可；如果你想限制高度，又不想内容过多溢出你设置高度限制，那我们可以设置对应样式overflo0cm0pt;mso-layout-grid-align:none"class=MsoNormalali

5、gn=left>3.3DIV重叠问题的解决重叠样式需要主要CSS样式解释（1）z-index重叠顺序属性。（2）position:relative和position:absolute设置对象属性为可定位（可重叠）。（3）leftrighttopbottom绝对定位具体位置设置。配合的样式（1）css0cm0pt;mso-layout-grid-align:none"class=MsoNormalalign=left>（2）cssheight。（3）background为了观察效果，我们对不同DIV设置不同背景颜色进行区别。接下来我们要让DIV按自

6、己意愿重叠、叠加。下面我们通过一个例子来解决，新建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代码本身顺序排列的，越后输入的D

7、IV盒子就越靠前（浮在最上面）。除了改变源代码本身div代码在中的顺序，我们还可以使用cssz-index实现DIV层排列顺序。效果B：通过CSS控制DIV重叠顺序我们使用以上绝对定位实例代码，只需要对“.div-A”、“.div-B”、“.div-C”分别加入z-index样式即可实现任意顺序的排列。index的值为正整数值，数字越大对应对象层越浮上层越靠前。3.4jQuery适用技巧笔记整合（1）关于X页元素的引用。通过jQuery的$()引用元素包括通过ID、CLASS、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象

8、为jQuery对象（集合对象），不能直接调用dom定义的方法。（2）jQuery对象与dom对象的转换。只有jquery对象才可以使用j