html+css文档Word格式文档下载.docx
《html+css文档Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《html+css文档Word格式文档下载.docx（31页珍藏版）》请在冰豆网上搜索。
div>
<
p>
<
/p>
/div>
●在css代码中，第一种书写方法，可以用空格划分各属性。
body{background:
#fff;
font-size:
12px;
color:
#000;
margin:
0px;
padding:
}
●第二种方法，相同类型的属性可以放在同一行中，分别几行表示属性。
font-size:
margin:
一般这种情况，代码量的多少，决定文件的大小，同时也决定书写格式。
d）编码规则"
gb2312"
、“gbk"
、"
utf-8"
在不做特殊要求的情况下，默认的编码使用"
。
代码注释
良好的html、css注释，不仅可以使得代码的结构、层次更加清晰，同样会为日后维护，修改带来很大的方便。
注释的内容，可以使用具有一定意义的"
英文"
、"
中文拼音"
汉字"
使用前提，如果编码规则统一，编辑器版本统一的情况下，可以使用"
进行注释，其他情况下，推荐使用"
注释，这样可以避免页面出现乱码，以至于页面样式错乱。
文件存放位置
总体来说每个栏目有单独文件夹，这样方便管理；
公用的图片和css放在根目录里，每个栏目单独的文件放在单独的栏目文件夹里；
以栏目为例，在每个栏目的根目录下，有以下文件。
●静态页面
●images（图片文件夹）
●css（css样式表文件夹）
●js（页面调用的js方法文件夹）
文件存放方式，决定栏目统一调试，维护。
制作思路
1．制作页面的基本是效果，思路则是拆分。
如何拆分页面结构：
a）以内容、功能、样式为模块逐步划分，将页面按所需结构用不同的层（div、table...）封装。
b）页面内的所有元素都可以用css样式表控制。
2．布局结构完成后，在来更改css样式表，设置页面样式。
3．利用iedom、firebug等插件，进行页面调试。
浏览器插件测试，以iedomexplorer为例。
左侧区域：
页面结构
中间区域：
页面html代码
右侧区域：
所有样式属性（html样式属性+css样式属性）
在测试页面效果时
首先检查页面的结构，当前浏览页面是否与自己所写结构相同，从而判断html代码是否出现标签层级关系选择错误，或标签结束位置是否正确。
其次检查页面样式属性（右侧区域），当前浏览样式属性，是否与设置属性相同，设置样式属性与当前浏览样式不同，可能原因如下：
一.修改样式表内属性位置是否正确。
二.添加的属性书写是否正确。
三.样式书写是否标准，如结束标签"
{}"
是否完整，属性之前是否使用"
;
"
分隔，是否有多余字符...
可以在中间区域做临时修改属性，以判断某些属性设置是否正确。
二、Html布局
1、Html常用标签
<
1>
tablecellpadding="
0"
cellspacing="
border="
>
tr>
tdvalign="
top"
/td>
/tr>
middle"
/table>
2>
...<
h>
/h>
span>
/span>
b>
/b>
font>
/font>
label>
/label>
a>
/a>
...
3>
ul>
ol>
li>
/li>
/ul>
/ol>
4>
dl>
dt>
/dt>
dd>
/dd>
/dl>
标签的选择使用注意层级关系，<
标签对中，一定不能含有<
标签对、<
标签对，<
标签对下不能含有<
标签对。
为了避免不必要的麻烦<
标签对中可以使用<
、<
等标签对，
但是尽量不要在<
标签对、<
标签对中使用<
等高级别标签对。
2．页面布局:
总体要求所有元素
根据psd设计稿按以下步骤布局。
a）根据整体功能可以将页面划分结构布局
body>
divclass="
wrap"
topBar"
head"
ad"
menu"
body"
foot"
/body>
b）根据结构布局内容可以将每层再次划分
●
spanclass="
floatLeft"
floatRight"
●<
divclass=“head”>
ulclass="
ul_jmenu"
ahref="
#"
title="
"
colLeft"
colRight"
c）根据样式结构可以再次划分
●表格式"
九宫格"
结构
module_jmod_j01div_jflash"
tableclass="
modhead_j"
cellpadding="
tdclass="
mhl_j"
valign="
mhc_j"
inmhc_j"
mhr_j"
modbody_j"
mbl_j"
mbc_j"
inmbc_j"
mbr_j"
modfoot_j"
mfl_j"
mfc_j"
mfr_j"
●上、中、下3层嵌套div结构
div_jmod"
div_jhead"
div_jbody"
div_jfoot"
以上结构仅供参考，具体结构需根据psd设计稿来布局。
具体选择拼图方式，可以根据代码量与背景图片的文件大小来衡量。
表格式"
结构适合，样式相同但宽度不同的N个模块，该模块总宽度由最外层<
module_j"
定义，或者更高层<
定义。
具体css样式：
.module_j{margin-bottom:
5px;
.modhead_j{width:
100%;
table-layout:
fixed;
（定义表格内元素锁定，即td的宽度具有实质意义。
）}
.mhl_j{height:
（td的高度满空间，铺背景时有意义。
）width:
background:
url（images/mhl.jpg）no-repeatrightbottom;
.mhc_j{height:
url（images/mhc.jpg）repeat-xleftbottom;
.inmhc_j{height:
display:
block;
overflow:
hidden;
zoom:
1;
.mhr_j{height:
width:
url（images/mhr.jpg）no-repeatleftbottom;
.modbody_j{width:
.mbl_j{height:
url（images/mbl.jpg）repeat-yrighttop;
.mbc_j{height:
url（images/mbc.jpg）repeatlefttop;
.mbr_j{height:
url（images/mbr.jpg）repeat-ylefttop;
.modfoot_j{width:
.mfl_j{height:
url（images/mfl.jpg）no-repeatrighttop;
.mfc_j{height:
url（images/mfc.jpg）repeat-xlefttop;
.mfr_j{height:
url（images/mfr.jpg）no-repeatlefttop;
考虑背景与当前层宽度、高度是否相同，所以当前背景位置要与相连层背景相接。
背景位置rightbottomleftbottomleftbottom
背景所在层位置上左上中上右
背景位置righttoplefttoplefttop
背景所在层位置中左中中中右
背景所在层位置下左下中下右
上、中、下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属性）优先级最高，页面内联样式<
style>
/style>
与外联样式<
link>
相同属性以最后书写属性为主。
div01"
style="
background:
styletype="
text/css"
--
.div01{background:
#f00;
-->
linktype="
rel="
stylesheet"
href="
css.css"
/>
当在内联样式<
中时，css属性解释是按照书写的顺序先后解释，优先级相同时，相同的css属性后面的覆盖之前的属性，当优先级不同时，解释的属性都是以优先级最高为主。
div01div02div03"
id="
div"
span01span02span03"
span"
●当前层之间优先级：
div{width:
100px;
height:
200px;
}（此句是以标签名div定义属性，宽100px、高200px）
.div01{width:
}（此句是以class类名div01定义，宽200px、高200px）
类名div01优先级>
标签名div优先级，所以无论先书写哪句，最后相同属性都以.div01为主。
.div02{width:
300px;
}（此句是以class类名div02定义，宽300px、高200px）
.div03{width:
400px;
}（此句是以class类名div03定义，宽400px、高200px）
类名div01、类名div02、类名div03优先级相同，所以相同属性，都以最后书写的一条为主。
#div{width:
500px;
}（此句是以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
当同一层处于不同层之下时：
div01div02"
span01"
span02"
div01div03"
span03"
当相同一层<
在不同层<
与<
下时，
.span01{width:
50px;
}（所有含类名span01的层，都是高度50px、宽度100px）
.div01.span01{width:
}（所有即含类名span01又在类名div01下的层，都是高度100px、宽度依然100px）
.div02.span01{width:
}（所有即含类名span01又在类名div02下的层，都是高度200px、宽度依然100px）
.div03.span01{width:
}（所有即含类名span01又在类名div03下的层，都是高度300px、宽度依然100px）
.div02.span01与.div03.span01（不同层不存在优先级，在.div02层下就具有.div02的属性，在.div03层下就具有.div03的属性），.div01.span01与.div02.span01或者.div03.span01，谁在书写顺序在后，则以谁为主。
简单的说就是：
同一层.span01在"
其1层"
时，就具有"
的属性，在"
其2层"
时就具有"
的属性。
以上例子是在不加任何附加条件!
important下适用，如果属性中含有!
important那此属性优先级最高。
e）css属性的一些特殊写法:
css特殊写法举例
●!
important（优先级改为最高）：
相同属性以含有!
important为主。
#div#span{color:
divspan{color:
#fff!
important;
虽然#div#span的优先级高于divspan，但是由于!
important的关系color:
属性优先级最高。
important只针对具体属性，并不可以针对某层属性。
.Name{color:
#000!
}（针对具体属性）
}!
important（针对某层属性，错误写法。
）
important（针对浏览器实现不同效果）
.span01{color:
color:
含有!
important的文本颜色color属性，对"
3个浏览器优先级都是最高的，所以文本为白色#fff，但是"
解释属性时以最后一个属性为主，（同一层css样式里的相同属性），所以可以达到"
效果相同与"
效果不同。
●"
*+color:
含有"
的字体颜色color属性，"
并不识别，所以"
只解释到color:
为止，而"
解释属性时以最后一个属性为主（这里并不存在优先级问题，只是不同写法，浏览器不识别。
（详细解释请见background:
中png背景）
在同一句css里相同属性，无论优先级如何，"
以最后一个属性为主、"
则考虑css属性优先级，以优先级最高为主。
1.css常用属性详解
A.-----------
.background{background:
（当前层背景综合属性）
background-attachment:
（背景是否锁定、滚动）
background-color:
（背景颜色）
background-image:
（背景图片）
background-position:
（背景图片位置）
background-repeat:
（背景图片是否重复平铺）
●background-attachment:
背景与浏览器位置相对锁定，即背景不随浏览器滚动条滚动而变换位置。
background-attachment:
scroll;
默认属性，背景与当前层位置相对锁定。
●background-color:
#000000;
背景颜色为16进制代码（#000000、#0000
升级会员 