html+css文档

1、部落窝文档部落窝 ui/ue 组 负责人：贾楠html+css 规范文档一、基本概要总体要求1 网页制作最基本要求：页面效果，既与psd设计稿效果达到统一。注： 如果在 psd 设计稿效果无法实现，或者效果很难实现的情况下，可以修改psd 设计稿。2 代码尽量简洁，符合w3c 标准；达到符合多个主流浏览器标准效果；注： 此文档实例都是在w3c 标准下实现效果，如果不在w3c 标准下，某些效果可能会有差别。多个浏览器标准网页效果是基于浏览器来实现的，所以在不同的浏览器中，达到统一的页面效果是非常重要的。不同开发商的浏览器，或者同一开发商推出的不同版本浏览器之间，存在着对html+css 的解释差

2、别，也就是不同浏览器之间的兼容问题，所以在制作+测试的时候，要统一不同浏览器之间的效果。1.当前主流浏览器，有 ie6.0 、ie7.0 、 firefox ( 火狐 ) 、遨游 (maxthon)、 opra.基于浏览器内核，测试页面至少要达到 ie6.0 、ie7.0 、firefox (火狐 ) 效果相同。目前浏览器使用状况大致如下: 2.一般来说，版本越高的浏览器，对代码的解释及兼容越好，测试时检查出错误的机会也就越小。3.在代码没有要求的情况下，可以针对浏览器，单独写一些css 具体属性，以达到浏览器效果统一，比如 !important、 *+、+ 、_不过建议尽量不用这种hack

3、技术；html+css 编辑工具以及代码格式a)html+css 编辑器，一般的文本编辑器即可对html+css 进行编辑。b)dreamweaver 版本，制作与维护人员最好使用相同的版本，不同的版本之间的兼容性会有差别，版本越高兼容性越好，但是当其他人员使用低版本的dreamweaver 时，就是出现一些问题，比如：编码规则，解释属性。c)html+css代码书写时，要结构清晰，能够手动书写，尽量少用 套用源格式 (dreamweaver中优化格式 ) 部落窝文档部落窝 ui/ue 组 负责人：贾楠如：在 html 代码中，父级标签跟子级标签，最好换行之后空出2 个空格 ( 套用源格式的本

4、质) 在 css 代码中，第一种书写方法，可以用空格划分各属性。body background:#fff; font-size:12px; color:#000; margin:0px; padding:0px; 第二种方法，相同类型的属性可以放在同一行中，分别几行表示属性。body background:#fff; font-size:12px; color:#000; margin:0px; padding:0px; 一般这种情况，代码量的多少，决定文件的大小，同时也决定书写格式。d)编码规则 gb2312 、 “gbk 、 utf-8在不做特殊要求的情况下，默认的编码使用 utf-8 。

5、代码注释良好的 html、css 注释，不仅可以使得代码的结构、层次更加清晰，同样会为日后维护，修改带来很大的方便。注： 注释的内容，可以使用具有一定意义的英文 、中文拼音 、汉字 。使用前提，如果编码规则统一，编辑器版本统一的情况下，可以使用汉字 进行注释，其他情况下，推荐使用英文、中文拼音 注释，这样可以避免页面出现乱码，以至于页面样式错乱。文件存放位置总体来说每个栏目有单独文件夹，这样方便管理； 公用的图片和css 放在根目录里， 每个栏目单独的文件放在单独的栏目文件夹里；以栏目为例，在每个栏目的根目录下，有以下文件。静态页面images( 图片文件夹 ) css(css 样式表文件夹

6、) js ( 页面调用的js 方法文件夹 ) 注： 文件存放方式，决定栏目统一调试，维护。制作思路1 制作页面的基本是效果，思路则是拆分。如何拆分页面结构：a) 以内容、功能、样式为模块逐步 划分，将页面按所需结构用不同的层(div 、table.)封装。b) 页面内的 所有元素 都可以用css 样式表控制。2 布局结构完成后，在来更改css 样式表，设置页面样式。3 利用 iedom、firebug等插件，进行页面调试。浏览器插件测试，以ie dom explorer为例。左侧区域：页面结构中间区域：页面html 代码右侧区域：所有样式属性(html 样式属性 +css 样式属性 ) 注：

7、在测试页面效果时部落窝文档部落窝 ui/ue 组 负责人：贾楠首先检查页面的结构，当前浏览页面是否与自己所写结构相同，从而判断html代码是否出现标签层级关系选择错误，或标签结束位置是否正确。其次检查页面样式属性( 右侧区域 )，当前浏览样式属性，是否与设置属性相同，设置样式属性与当前浏览样式不同，可能原因如下：一. 修改样式表内属性位置是否正确。二. 添加的属性书写是否正确。三. 样式书写是否标准，如结束标签是否完整，属性之前是否使用; 分隔，是否有多余字符. 可以在中间区域做临时修改属性，以判断某些属性设置是否正确。部落窝文档部落窝 ui/ue 组 负责人：贾楠二、html 布局1、htm

8、l 常用标签 . . . . . . . . . 注：标签的选择使用注意层级关系，标签对中，一定不能含有标签对、 标签对， 标签对下不能含有标签对。为了避免不必要的麻烦标签对中可以使用 、 等标签对，但是尽量不要在 标签对、 标签对中使用 等高级别标签对。2页面布局 : 总体要求 页面内的 所有元素 都可以用 css 样式表控制根据 psd 设计稿按以下步骤布局。部落窝文档部落窝 ui/ue 组 负责人：贾楠a)根据 整体功能 可以将页面划分 结构布局 b)根据 结构布局内容 可以将每层再次划分 c)根据 样式结构 可以再次划分表格式 九宫格 结构 部落窝文档部落窝 ui/ue 组 负责人：贾

9、楠 上、中、下3 层嵌套 div 结构 注：以上结构仅供参考，具体结构需根据psd 设计稿来布局。具体选择拼图方式，可以根据代码量与背景图片的文件大小来衡量。 表格式 九宫格 结构适合，样式相同但宽度不同的n个模块，该模块总宽度由最外层定义，或者更高层定义。具体 css 样式：.module_j margin-bottom:5px; .modhead_j width:100%; table-layout:fixed;( 定义表格内元素锁定，即td 的宽度具有实质意义。) .mhl_j height:100%; (td的 高度满 空间 ，铺背 景时有 意义。 )width:5px; backgr

10、ound:url(images/mhl.jpg) no-repeat right bottom; .mhc_j height:100%; background:url(images/mhc.jpg) repeat-x left bottom; .inmhc_j height:100%; display:block; overflow:hidden; zoom:1; .mhr_j height:100%; width:5px; background:url(images/mhr.jpg) no-repeat left bottom; .modbody_j width:100%; table-la

11、yout:fixed; .mbl_j height:100%; width:5px; background:url(images/mbl.jpg) repeat-y right top; .mbc_j height:100%; background:url(images/mbc.jpg) repeat left top; .mbr_j height:100%; width:5px; background:url(images/mbr.jpg) repeat-y left top; .modfoot_j width:100%; table-layout:fixed; .mfl_j height:

12、100%; width:5px; background:url(images/mfl.jpg) no-repeat right top; .mfc_j height:100%; background:url(images/mfc.jpg) repeat-x left top; .mfr_j height:100%; width:5px; background:url(images/mfr.jpg) no-repeat left top; 注： 考虑背景与当前层宽度、高度是否相同，所以当前背景位置要与相连层背景相接。背景位置right bottom left bottom left bottom

13、 背景所在层位置上左上中上右背景位置right top left top left top 背景所在层位置中左中中中右背景位置right top left top left top 背景所在层位置下左下中下右 上、中、下3 层嵌套 div 结构，使用情况相同的模块样式只有一个或者很少部落窝文档部落窝 ui/ue 组 负责人：贾楠.div_jhead background:url(images/mhead.jpg) no-repeat center bottom; .div_jbody background:url(images/mbody.jpg) repeat-y center top; .

14、div_jfoot background:url(images/mfoot.jpg) no-repeat center top; 注： 背景拼图并不是只能适用于当前并列的n 层，也可以当前层与上级层实现拼接，以达到效果，但一定要注意层级关系，当前层有可能会覆盖上级层的背景，具体决定于当前层所在位置 、宽、高，所以注意上下层之间的背景覆盖问题。部落窝文档部落窝 ui/ue 组 负责人：贾楠三、css 规范1css基本规则a)css 命名 ：css 名称的选择，要能体现出当前层所表示的意义或功能、或内容、或样式。b)css 注释 ：css 注释以功能、内容、样式为单位做起始、结束注释，达到当前层与

15、当前样式同时移动到其他位置可以达到相同样式。c)css 样式统一 ：css 样式统一，具有相同样式、或者相近样式的层，使用同一css 控制样式，不同的样式，通过其他css 名称来控制，这样可以达到相同样式统一修改, 不同样式单独修改的目的。d)css 优先级 ：页面 html 代码标签内 style(css属性 )优先级最高， 页面内联样式 与外联样式 相同属性以最后书写属性为主。 当在内联样式 与外联样式 中时 ，css 属性解释是按照书写的顺序先后解释，优先级相同时，相同的css 属性后面的覆盖之前的属性，当优先级不同时，解释的属性都是以优先级最高为主。 当前层之间优先级：div widt

16、h: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; (

17、此句是以 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 具有相同优先级关系。父级层、子级层之间属性结合使用的优

18、先级：部落窝文档部落窝 ui/ue 组 负责人：贾楠子级层优先级相同的情况下，即定义属性的标签名、类名 、id 名、相同的情况下，属性取决于父级层定义，既与当前层之间优先级相同。同理，父级层优先级相同情况下，属性取决于子级层优先级。#div .span01 .div01 .span01 div .span01 #div #span #div.span01 #div span 当同一层处于不同层之下时： 当相同一层 在不同层 与 下时，.span01 width:50px; height:100px; (所有含类名span01 的层， 都是高度 50px、宽度 100px) .div01 .sp

19、an01 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的属性，在.d

20、iv03层下就具有 .div03的属性），.div01 .span01与.div02 .span01或者.div03 .span01，谁在书写顺序在后，则以谁为主。简单的说就是： 同一层 .span01 在其 1 层 时，就具有 其 1 层 的属性， 在 其 2 层时就具有 其 2 层的属性。注：以上例子是在不加任何附加条件!important下适用，如果属性中含有!important那此属性优先级最高。e)css 属性的一些特殊写法: css 特殊写法举例!important（优先级改为最高） ：相同属性以含有!important为主。#div #span color:#f00; div s

21、pan color:#fff!important; 虽然 #div #span 的优先级高于div span，但是由于 !important的关系 color:#fff!important;属性优先级最高。注：!important只针对具体属性，并不可以针对某层属性。.name color:#000!important;(针对具体属性 ) .name color:#000;!important (针对某层属性，错误写法。)部落窝文档部落窝 ui/ue 组 负责人：贾楠!important（针对浏览器实现不同效果）.span01 color:#fff!important; color:#000;

22、 含有 !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

23、.0 解释属性时以最后一个属性为主(这里并不存在优先级问题，只是不同写法，浏览器不识别。) _( 详细解释请见background:;中 png 背景 ) 注：在同一句 css 里相同属性，无论优先级如何， ie6.0 以最后一个属性为主、 ie7.0 、firefox ( 火狐 ) 则考虑 css 属性优先级，以优先级最高为主。1.css常用属性详解a.- . backgroundbackground:; (当前层背景综合属性) background-attachment:; ( 背景是否锁定、滚动) background-color:; ( 背景颜色 ) background-image:

24、; ( 背景图片 ) background-position:; (背景图片位置 ) background-repeat:; (背景图片是否重复平铺) background-attachment:fixed ; 背景与浏览器位置相对锁定，即背景不随浏览器滚动条滚动而变换位置。 background-attachment:scroll; 默认属性，背景与当前层位置相对锁定。background-color:#000000; 背景颜色为16 进制代码 ( #000000、#0000ff 、#00ffff) ，或为少数英文拼写 ( #red、 #black 、#blue )，也可以为16 进制代码简

25、写 ( #000、#0ff 、#0ff ) background-image:url(img.jpg)、none; 相对于 css 的图片路径或者没有背景图片，图片格式为 jpg 、gif 、png。注：png 格式图片在 ie6 下并不支持，只能通过滤镜来实现半透明效果，具体书写格式为background:url(bg.png ) no-repeat left top!important; 此属性针对ie7 、firefox定义背景图。background: none; 此属性针对ie6 定义背景图为无。_filter:progid:dximagetransform.microsoft.al

26、phaimageloader(src=bg.png ,sizingmethod=scale); 此属性针对ie6 使用滤镜定义背景图， _ 特殊写法正对ie6 写法， ie7、 firefox不识别。position: relativestatic;此属性针对ie6 使用滤镜后产生bug 问题，应用滤镜的当前层使用。relative当前层没有精确定位情况下使用，如果当前层正处于精确定位中，那就使用static。ie6 使用滤镜的 png 背景并不支持宽度、高度、平铺、位置设置，当前层的宽度、高度决定png最后效果， ( 当前层宽度、高度即是最后png 图片滤镜显示的宽度、高度) 所以要做到pn

27、g 背景效果最佳，要达到png 图的大小与当前层的宽度、高度相同。部落窝文档部落窝 ui/ue 组 负责人：贾楠background-position:top 、 right、 bottom 、 left、 center; 背景图与当前层的相对位置，每组 2 个参数，默认为left top( 左上角 )。 background-position:10px 20px ; 背景图片位置以像素定位，以left top ( 左上角 ) 为起始点，第一个参数为相对left坐标，第二个参数为相对top 坐标。也可以用 %来定义， background-position:10% 20% ; 也可以结合使用，

28、background-position:50% top; background-position:50% 10px; background-repeat:no-repeat 、 repeat、 repeat-x、 repeat-y; 背景图在当前层内是否平铺，no-repeat背景图不平铺， repeat背景图在当前层全层平铺（沿 x 轴、y 轴平铺），repeat-x （沿x 轴都平铺），repeat-y （沿 y 轴都平铺）。background:#fff url(images/bg.jpg) no-repeat center top; 注：背景图平铺时与当前层的相对位置，只是定义背景图平

29、铺的起始点，并不意味着相对起始点的左与上 没有背景图。b.- .border border:; (当前层边框综合属性) border-color:; (当前层边框颜色) border-style:; (当前层边框样式) border-width:; (当前层边框宽度) border-collapse:; (当前层下所有相邻层边框是否合并) border-spacing:; (当前层边框间距 ) border-color:#f00 ; 边框颜色与背景颜色相同，都为16 进制代码。border-style:solid 、dashed.; 边框样式solid实线 、dashed 虚线。border-

30、width:10px; 边框宽度。border-collapse:collapse ; 当前层下所有相邻层边框边框合并。 左 11111 中 22222 右 33333 左 中 右 border-spacing:1px; 当前层下所有相邻层边框边框边距。(cellspacing=1是html 代码样式 ) ( border-spacing:1px;是 css 代码样式 ) 左 11111 中 22222 右 33333 左 中 右 注：border-spacing:;属性 firefox支持，但 ie 并不支持， cellspacing=1都支持。c.-.clear clear:; (当前层是

31、否清除浮动，即当前层左右两侧是否有浮动层。) clear:none、 both 、 left、 right;注：详细解释请见 float 属性。d.-.color color:; ( 当前层字体颜色 ) 注：字体颜色可以分 普通文本 颜色与 文本链接 颜色，含有 color:;属性且与 文本层级关系最近的一层决定。 普通文本 颜色 文本链接 颜色 文本链接 颜色(无论 span 定义颜色如何，都以 a 颜色为主。 ) 文本链接 颜色(无论 a 定义颜色如何， 都以span 颜色为主。 ) 如果当前层无字体颜色，则继承上级字体颜色，若上级也无字体颜色，则继承最近一层含有字体颜色的字体颜色属性。e

32、.-.cursor cursor:; ( 当鼠标经过当前层时，鼠标显示样式。) cursor:auto 、default、move. ; f.- .display display:; (当前层显示效果) display:inline; (内联对象的默认值，即在同行显示。) display:none; (隐藏对象) display:block ; (块对象的默认值，即在不同行显示。) 当前层存在float浮动属性 且为 块元素 时，针对上级层有margin-left:;或者 marin-right:;的距离属性时； ie6 会存在距离翻倍的效果，所以此时可以更改当前层的display:;的显示属

33、性， 使浏览器达到统一效果。 部落窝文档部落窝 ui/ue 组 负责人：贾楠一、居左 50px 二、居左 50px 第一层 div 存在浮动属性float又存在相对上级层居左margin-left:50px;属性，同事第一层div 为块元素，所以在 ie6 浏览第一层div 居左的距离翻倍。第二层 div 虽然也具有浮动属性float，也是 div 块元素，但是居左margin-left:50px;属性是针对第一层的距离，所以在 ie6 浏览时没有距离翻倍的样式。所以解决方式一，将第一层div 显示属性改为display:inline;即内联对象 ，在 ie6 浏览时则没有距离翻倍的样式。 一

34、、居左 50px 二、居左 50px方法二是针对浏览器写不同属性，虽然效果相同，但是此方法并不推荐。 一、居左 50px 二、居左 50px如果将第一层div 换成 span 会是什么样？ 一、居左 50px 二、居左 50px 因为 span 本身显示属性就是display:inline;即内联对象 ，所以第一层 span 在 ie6 浏览时没有距离翻倍的样式。g.- .float float:; (当前层是否具有浮动属性) float:left; (当前层浮动到父级层左侧) float:right; ( 当前层浮动到父级层右侧) float:none; (当前层不浮动 ) 注：以下为具体实

35、例1 单层浮动div01 左浮动 div02 不浮动 文本样式一 文本样式二 部落窝文档部落窝 ui/ue 组 负责人：贾楠 文本样式一 文本样式二 div01 左浮动 div02 清除左侧浮动同理： div01 右浮动 div02 不浮动， div01 右浮动 div02 清除右侧浮动。 文本样式一 文本样式二 文本样式一 文本样式二 div01 不浮动 div02 浮动 文 本 样 式 一 文本样式二 文 本 样 式 一 文本样式二 因为 div01 没有浮动，所以div02 浮动将换行。 clear 此时并无意义，因为div02 之前的一层div01并无浮动。 含有 clear属性的当前

36、层在页面html 代码中，之前的一层是否具有浮动属性，如果具有浮动属性，则clear产生效果，如果不具有浮动属性，则不变化。clear:left;清除左浮动，只针对之前层的float:left;左浮动有作用， 如果之前层float:right;右浮动，clear:left;并无效果， 同理 clear:right;也是相同效果。2 两层浮动div01 、div02 同时左浮动 文本样式一 部落窝文档部落窝 ui/ue 组 负责人：贾楠 文本样式二 文本样式一 文本样式二 div01 、div02 同时左浮动属性， 但是 div01 之前并无浮动层， 所以 div01 加上 clear:left

37、;属性并不起作用，而div02 之前具有左浮动层div01 ，所以 div02 的 clear:left;属性可以使div02 换行显示。同理： div01 、div02 同时右浮动， div02 具有 clear:right;属性时，会改变样式。 文本样式一 文本样式二 文本样式一 文本样式二 注： 当使用 clear:;属性时，就意味着含有clear属性的当前层可能会换行，所以一般并列的几层具有浮动属性关系，如果发现其中一层换行，首先看是否是clear引起，如果排除clear属性，在进行其他属性检查。div01 左浮动、 div02 同时右浮动 文本样式一 文本样式二 文本样式一 文本样式

38、二 此时只有 firefox识别此属性，对于浏览器之间的兼容性问题，第一种解决方法，采用针对浏览器不同写法， 部落窝文档部落窝 ui/ue 组 负责人：贾楠文本样式一 文本样式二 第二种方法，采用一种浏览器都识别的属性。 文 本 样 式 一 文本样式二 所以无论任何属性对浏览器之间存在兼容问题，都可以使用这两种方法。一、针对浏览器写不同属性。( 不推荐 ) 二、采用浏览器都是别的属性进行样式设置。3 三层浮动div01 、div02 、div03 同时左浮动 一、左浮动 二、左浮动 三、左浮动 div01 、div02 、div03 同时右浮动 一、右浮动 二、右浮动 三、右浮动 注意同时右浮

39、动先后显示顺序div01 、div02 同时左浮动， div03 同时右浮动。 一、左浮动 二、左浮动 三、右浮动 注： 左、左、左 ，右、右、右 ， 左、左、右 ，3 种浮动虽然都可以实现效果，但是之间也存在部落窝文档部落窝 ui/ue 组 负责人：贾楠区别。 左、左、左 ，右、右、右 之间的显示顺序不同，可以区别选择。左、左、 右 中的 右浮动的层，是针对上级层右侧显示，所以当上级层宽度变化时( 宽度大于各浮动层宽度总合) ， 右浮动层，始终是与上级层右侧相连，但是左、左、 左中，最后 左 浮动层的相对位置，始终是与本列第二个左浮动左 层相连，如果与上几层右侧相连则需要控制各浮动层之间的m

40、argin:;来实现效果。页面最终效果，其实是html+css之间的组合搭配，虽然效果可能相同，但是html 的结构或者css样式可能不同。例一： 三、右浮动 一、左浮动 二、左浮动 2、右浮动 1、左浮动 父级层 下的 5 层 div 结构，通过每层div 之间的结构顺序与css 的样式属性结合，实现页面效果。 三、右浮动 一、左浮动 二、左浮动 2、右浮动 1、左浮动 相同的结构，不同的样式属性，虽然在 firefox下，可以实现效果，但是在ie6 、ie7 下效果并不理想，这时，第一种解决方法，使用针对浏览器的单独写法( 不推荐 ) ，代码如下： 三、右浮动 一、左浮动 二、左浮动 2

41、、右浮动 1、左浮动 部落窝文档部落窝 ui/ue 组 负责人：贾楠第二种解决方法，在浮动层之间使用一层清除浮动，代码如下： 三、右浮动 一、左浮动 二、左浮动 2、右浮动 1、左浮动 相对结构并没有改变，只是多加了一层清除浮动。第三种方法，直接改变下相对结构，第一行就用一层div 来包含，第二行同样使用一层来包含，代码如下： 三、右浮动 一、左浮动 二、左浮动 2、右浮动 1、左浮动 不同的结构，相同的样式属性，同样可以实现效果。所以 html 页面结构与css 样式属性之间组合搭配，以实现理想效果。h.- .font font:; ( 当前层文本综合样式)font-family:; ( 当

42、前层文本字体样式)font-size:; ( 当前层文本字体大小)font-style:; ( 当前层文本样式)font-variant:; ( 当前层文本字母缩小大写)font-weight:; ( 当前层文本加粗) font-family:arial, verdana, 宋体 ; 当前层文本字体font-size:12px; 当前层文本大小font-style:italic; 当前层文本斜体font-style:small-caps ; 当前文本字母缩小大写部落窝文档部落窝 ui/ue 组 负责人：贾楠 大写 a，缩小大写a font-weight:bold ; 当前字体加粗，相当于标签.

43、 加粗字 加粗字 i.- .height-width height:; ( 当前层高度 )width:; ( 当前层宽度 )min-height:; ( 当前层最小高度 )min-width:; ( 当前层最小宽度 )max-height; ( 当前层最大高度 )max-width:; ( 当前层最大宽度 ) height:100px; width:100% ; 当前层为块元素即display:;属性为 display:block ; 时，height:; width:;属性具有实质意义，如果当前层为内联元素即display:;属性为display:inline; 时，height:; wid

44、th:;属性并不起作用， ( 当前层浮动除外 ) ，如果当前层具有浮动属性，即float:left; float:right;时，由于在 ie6下的显示效果不同，所以当前层属性可能为display:inline; 但是此时的height:; width:;就具有实质意义了，所以可以理解为，当前层 既不浮动也不是块元素display:block;时， height:; width:;不起作用。min-height:; min-width:; max-height; max-width:;ie7、firefox支持此属性， ie6此属性并不支持，需要针对浏览器写单独属性实现效果。min-heigh

45、t:; min-width:; max-height; max-width:;属性实现效果可分为两种情况，第一、针对 图片宽度、高度 400 ? 400: true);( 此条件语句是针对ie6实现图片最大宽度，解释为：当前图片宽度( this.width 400 ? ) 是否大于400，如果当前图片宽度大于 400，即此判断条件成立，那么当前图片的宽度就为( 400: true )400 ，如果当前图片宽度小于400，即此判断条件不成立，那么当前图片的宽度则为真实宽度true) 同理其他各属性min-height:; min-width:; max-height; max-width:;写法

46、: img src=images/j_01.jpg style=min-width:400px; width:expression(this.width 400 ? 400: true); img src=images/j_01.jpg style=min-height:400px; width:expression(this.height 第二、针对 当前层宽度、高度，即.、.等等举例：高度自适应，即当前层最小高度。 注： 此时 overflow:hidden;属性不能使用。当不使用 overflow:hidden;属性时， height:;高度属性对 ie7 、firefox来说，超出he

47、ight:;范部落窝文档部落窝 ui/ue 组 负责人：贾楠围的部分隐藏，而ie6 则根据内容多少决定，如果内容高度 小于当前 设置 height:;高度，那么则以当前 设置 height:;高度为主，如果当前内容高度 大于 设置 height:;高度，那么实际高度由内容高度决定，也就是说在不使用overflow:hidden;属性时，height:;高度在 ie6下相当于最小高度。j.- .letter-spacing letter-spacing:; (当前层字符间距) letter-spacing:20px; 当前层字符间距字符之间的距离 k.- .line-height line-he

48、ight:; (当前层文本行间距) line-height:22px; 当前层文本行间距 当前层文本行间距 l.- .ul-li list-style:; (列表项标记样式综合属性 ) list-style-image:; (列表标记以图片代替) list-style-position:; (列表标记位置 ) list-style-type:; (列表标记样式 ) list-style-image:url(images/dot.gif); 列表标记使用图片， 与背景不同的是位置不可修改。list-style-position:outside 、inside ; 列表标记在列表ul 的外部、内部

49、显示。 列表外部 列表内部 list-style-image:disc 、circle、square.; 列表标记样式。disc ( 默认值，黑圆点 ) 、circle( 空心圆点 ) 、square (小黑方块 ) 。m.- .margin margin:; (当前层对其周围元素距离综合属性) margin-top:; (当前层居上距离 ) margin-right:; (当前层居右距离 ) margin-bottom:; (当前层居下距离 ) margin-left:; (当前层居左距离) n.- .padding padding:; (当前层对其内元素距离综合属性) padding-to

50、p:; (当前层对其内元素上边距) padding-right:; (当前层对内元素右边距) 部落窝文档部落窝 ui/ue 组 负责人：贾楠padding-bottom:; (当前层对内元素下边距) padding-left:; (当前层对内元素左边距) 实现一个页面效果最主要的就是布局，也就是每个元素在页面中的位置，具体如何来实现页面的布局，一、元素的高度、宽度。二、浮动属性float、清除浮动属性clear 。三、元素的居外、局内距离。无论是对外距离还是对内距离，都需要参照点，即当前层对哪个元素之间的距离。举例： 文本位置一 文本位置二 文本位置一 文本位置二 文本位置一 文本位置二 文本位置一 文本位置二 注：与 width:; height:;属性相似，具有padding:;属性的当前层是块元素时，padding:;占有一定空间，而当前层为内联元素display:inline;时，只有浮动情况下，padding:;才会占有一定空间。 文本位置一 文本位置二 文本 位 置 一 文本位置二 文本位置一 部落窝文档部落窝 ui/ue 组 负责人：贾楠 文本位置二 文本位置一 文本位置二 注：如果想精确的定位一个层，那么最简便、最好的实现方法，就是让当前层d