收藏

下载资源 加入VIP,免费下载

第1页 / 共31页

第2页 / 共31页

第3页 / 共31页

第4页 / 共31页

第5页 / 共31页

b）根据结构布局内容可以将每层再次划分

●

●

●

●

c）根据样式结构可以再次划分

●表格式"九宫格"结构

●上、中、下3层嵌套div结构

注：

以上结构仅供参考，具体结构需根据psd设计稿来布局。

具体选择拼图方式，可以根据代码量与背景图片的文件大小来衡量。

●<1>表格式"九宫格"结构适合，样式相同但宽度不同的N个模块，该模块总宽度由最外层定义，或者更高层定义。

具体css样式：

.module_j{margin-bottom:

5px;}

.modhead_j{width:

100%;table-layout:

fixed;（定义表格内元素锁定，即td的宽度具有实质意义。

）}

.mhl_j{height:

100%;（td的高度满空间，铺背景时有意义。

）width:

5px;background:

url（images/mhl.jpg）no-repeatrightbottom;}

.mhc_j{height:

100%;background:

url（images/mhc.jpg）repeat-xleftbottom;}

.inmhc_j{height:

100%;display:

block;overflow:

hidden;zoom:

1;}

.mhr_j{height:

100%;width:

5px;background:

url（images/mhr.jpg）no-repeatleftbottom;}

.modbody_j{width:

100%;table-layout:

fixed;}

.mbl_j{height:

100%;width:

5px;background:

url（images/mbl.jpg）repeat-yrighttop;}

.mbc_j{height:

100%;background:

url（images/mbc.jpg）repeatlefttop;}

.mbr_j{height:

100%;width:

5px;background:

url（images/mbr.jpg）repeat-ylefttop;}

.modfoot_j{width:

100%;table-layout:

fixed;}

.mfl_j{height:

100%;width:

5px;background:

url（images/mfl.jpg）no-repeatrighttop;}

.mfc_j{height:

100%;background:

url（images/mfc.jpg）repeat-xlefttop;}

.mfr_j{height:

100%;width:

5px;background:

url（images/mfr.jpg）no-repeatlefttop;}

注：

考虑背景与当前层宽度、高度是否相同，所以当前背景位置要与相连层背景相接。

背景位置rightbottomleftbottomleftbottom

背景所在层位置上左上中上右

背景位置righttoplefttoplefttop

背景所在层位置中左中中中右

背景位置righttoplefttoplefttop

背景所在层位置下左下中下右

●<2>上、中、下3层嵌套div结构，使用情况相同的模块样式只有一个或者很少

.div_jhead{background:

url（images/mhead.jpg）no-repeatcenterbottom;}

.div_jbody{background:

url（images/mbody.jpg）repeat-ycentertop;}

.div_jfoot{background:

url（images/mfoot.jpg）no-repeatcentertop;}

注：

背景拼图并不是只能适用于当前并列的N层，也可以当前层与上级层实现拼接，以达到效果，但一定要注意层级关系，当前层有可能会覆盖上级层的背景，具体决定于当前层所在位置、宽、高，所以注意上下层之间的背景覆盖问题。

三、Css规范

1．Css基本规则

a）css命名：

css名称的选择，要能体现出当前层所表示的意义或功能、或内容、或样式。

b）css注释：

css注释以功能、内容、样式为单位做起始、结束注释，达到当前层与当前样式同时移动到其他位置可以达到相同样式。

c）css样式统一：

css样式统一，具有相同样式、或者相近样式的层，使用同一css控制样式，不同的样式，通过其他css名称来控制，这样可以达到相同样式统一修改,不同样式单独修改的目的。

d）css优先级：

页面html代码标签内style（css属性）优先级最高，页面内联样式与外联样式相同属性以最后书写属性为主。

●

#000;">

●

--

.div01{background:

#f00;}

-->

●

当在内联样式与外联样式中时，css属性解释是按照书写的顺序先后解释，优先级相同时，相同的css属性后面的覆盖之前的属性，当优先级不同时，解释的属性都是以优先级最高为主。

●当前层之间优先级：

div{width:

100px;height:

200px;}（此句是以标签名div定义属性，宽100px、高200px）

.div01{width:

200px;height:

200px;}（此句是以class类名div01定义，宽200px、高200px）

类名div01优先级>标签名div优先级，所以无论先书写哪句，最后相同属性都以.div01为主。

.div02{width:

300px;height:

200px;}（此句是以class类名div02定义，宽300px、高200px）

.div03{width:

400px;height:

200px;}（此句是以class类名div03定义，宽400px、高200px）

类名div01、类名div02、类名div03优先级相同，所以相同属性，都以最后书写的一条为主。

#div{width:

500px;height:

200px;}（此句是以id名div定义，宽500px、高200px）

ID名#div优先级>类名.div01优先级>标签名div优先级，所以无论先书写哪句，最后相同属性都以#div01为主。

同样span、.span01、.span02、.span03、#span具有相同优先级关系。

●父级层、子级层之间属性结合使用的优先级：

子级层优先级相同的情况下，即定义属性的标签名、类名、id名、相同的情况下，

属性取决于父级层定义，既与当前层之间优先级相同。

同理，父级层优先级相同情况下，属性取决于子级层优先级。

#div.span01{}>.div01.span01>div.span01

#div#span{}>#div.span01>#divspan

当同一层处于不同层之下时：

当相同一层

在不同层与下时，

.span01{width:

50px;height:

100px;}（所有含类名span01的层，都是高度50px、宽度100px）

.div01.span01{width:

100px;}（所有即含类名span01又在类名div01下的层，都是高度100px、宽度依然100px）

.div02.span01{width:

200px;}（所有即含类名span01又在类名div02下的层，都是高度200px、宽度依然100px）

.div03.span01{width:

300px;}（所有即含类名span01又在类名div03下的层，都是高度300px、宽度依然100px）

.div02.span01与.div03.span01（不同层不存在优先级，在.div02层下就具有.div02的属性，在.div03层下就具有.div03的属性），.div01.span01与.div02.span01或者.div03.span01，谁在书写顺序在后，则以谁为主。

简单的说就是：

同一层.span01在"其1层"时，就具有"其1层"的属性，在"其2层"时就具有"其2层"的属性。

注：

以上例子是在不加任何附加条件!

important下适用，如果属性中含有!

important那此属性优先级最高。

e）css属性的一些特殊写法:

css特殊写法举例

●!

important（优先级改为最高）：

相同属性以含有!

important为主。

#div#span{color:

#f00;}

divspan{color:

#fff!

important;}

虽然#div#span的优先级高于divspan，但是由于!

important的关系color:

#fff!

important;属性优先级最高。

注：

!

important只针对具体属性，并不可以针对某层属性。

.Name{color:

#000!

important;}（针对具体属性）

.Name{color:

#000;}!

important（针对某层属性，错误写法。

）

●!

important（针对浏览器实现不同效果）

.span01{color:

#fff!

important;color:

#000;}

含有!

important的文本颜色color属性，对"IE6.0"、"IE7.0"、"Firefox（火狐）"3个浏览器优先级都是最高的，所以文本为白色#fff，但是"IE6.0"解释属性时以最后一个属性为主，（同一层css样式里的相同属性），所以可以达到"IE7.0"、"Firefox（火狐）"效果相同与"IE6.0"效果不同。

●"*+"

.span01{color:

#fff;*+color:

#000;}

含有"*+"的字体颜色color属性，"Firefox（火狐）"并不识别，所以"Firefox（火狐）"只解释到color:

#fff;为止，而"IE6.0"、"IE7.0"解释属性时以最后一个属性为主（这里并不存在优先级问题，只是不同写法，浏览器不识别。

）

●"_"（详细解释请见background:

;中png背景）

注：

在同一句css里相同属性，无论优先级如何，"IE6.0"以最后一个属性为主、"IE7.0"、"Firefox（火狐）"则考虑css属性优先级，以优先级最高为主。

1.css常用属性详解

A.-----------

.background{background:

;（当前层背景综合属性）

background-attachment:

;（背景是否锁定、滚动）

background-color:

;（背景颜色）

background-image:

;（背景图片）

background-position:

;（背景图片位置）

background-repeat:

;（背景图片是否重复平铺）

}

●background-attachment:

fixed;背景与浏览器位置相对锁定，即背景不随浏览器滚动条滚动而变换位置。

background-attachment:

scroll;默认属性，背景与当前层位置相对锁定。

●background-color:

#000000;背景颜色为16进制代码（#000000、#0000