html+css文档
- 格式：doc
- 大小：308.50 KB
- 文档页数：24
Html+Css规范文档一、基本概要总体要求1．网页制作最基本要求：页面效果，既与psd设计稿效果达到统一。
注：如果在psd设计稿效果无法实现，或者效果很难实现的情况下，可以修改psd设计稿。
2．代码尽量简洁，符合W3C标准；达到符合多个主流浏览器标准效果；注：此文档实例都是在W3C标准下实现效果，如果不在W3C标准下，某些效果可能会有差别。
多个浏览器标准网页效果是基于浏览器来实现的，所以在不同的浏览器中，达到统一的页面效果是非常重要的。
不同开发商的浏览器，或者同一开发商推出的不同版本浏览器之间，存在着对html+css的解释差别，也就是不同浏览器之间的兼容问题，所以在制作+测试的时候，要统一不同浏览器之间的效果。
1.当前主流浏览器，有 "IE6.0"、"IE7.0"、"Firefox (火狐)"、"遨游 (Maxthon)"、"Opra"...基于浏览器内核，测试页面至少要达到 "IE6.0"、"IE7.0"、"Firefox (火狐)"效果相同。
目前浏览器使用状况大致如下:2.一般来说，版本越高的浏览器，对代码的解释及兼容越好，测试时检查出错误的机会也就越小。
3.在代码没有要求的情况下，可以针对浏览器，单独写一些css具体属性，以达到浏览器效果统一，比如 "!important"、"*+"、"+"、"_"不过建议尽量不用这种hack技术；HTML+CSS 编辑工具以及代码格式a)html+css编辑器，一般的文本编辑器即可对html+css进行编辑。
b)dreamweaver版本，制作与维护人员最好使用相同的版本，不同的版本之间的兼容性会有差别，版本越高兼容性越好，但是当其他人员使用低版本的dreamweaver时，就是出现一些问题，比如：编码规则，解释属性。
c)html+css代码书写时，要结构清晰，能够手动书写，尽量少用"套用源格式" (dreamweaver中优化格式)如：在html代码中，父级标签跟子级标签，最好换行之后空出"2个空格" (套用源格式的本质) <div><p></p><p></p></div>●在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"。
代码注释良好的html、css注释，不仅可以使得代码的结构、层次更加清晰，同样会为日后维护，修改带来很大的方便。
注：注释的内容，可以使用具有一定意义的"英文" 、"中文拼音" 、"汉字"。
使用前提，如果编码规则统一，编辑器版本统一的情况下，可以使用"汉字"进行注释，其他情况下，推荐使用"英文"、"中文拼音"注释，这样可以避免页面出现乱码，以至于页面样式错乱。
文件存放位置总体来说每个栏目有单独文件夹，这样方便管理；公用的图片和css放在根目录里，每个栏目单独的文件放在单独的栏目文件夹里；以栏目为例，在每个栏目的根目录下，有以下文件。
●静态页面●images(图片文件夹)●css(css样式表文件夹)●js(页面调用的js方法文件夹)注：文件存放方式，决定栏目统一调试，维护。
制作思路1．制作页面的基本是效果，思路则是拆分。
如何拆分页面结构：a) 以内容、功能、样式为模块逐步划分，将页面按所需结构用不同的层(div、table...)封装。
b) 页面内的所有元素都可以用css样式表控制。
2．布局结构完成后，在来更改css样式表，设置页面样式。
3．利用iedom、firebug等插件，进行页面调试。
浏览器插件测试，以ie dom explorer为例。
左侧区域：页面结构中间区域：页面html代码右侧区域：所有样式属性(html样式属性+css样式属性)注：在测试页面效果时首先检查页面的结构，当前浏览页面是否与自己所写结构相同，从而判断html代码是否出现标签层级关系选择错误，或标签结束位置是否正确。
其次检查页面样式属性(右侧区域)，当前浏览样式属性，是否与设置属性相同，设置样式属性与当前浏览样式不同，可能原因如下：一.修改样式表内属性位置是否正确。
二.添加的属性书写是否正确。
三.样式书写是否标准，如结束标签"{}"是否完整，属性之前是否使用";"分隔，是否有多余字符...可以在中间区域做临时修改属性，以判断某些属性设置是否正确。
二、Html布局1、Html常用标签<1><table cellpadding="0" cellspacing="0" border="0"><tr><td valign="top"></td><td valign="top"></td></tr><tr><td valign="middle"></td><td valign="middle"></td></tr></table><2><div>...</div><h>...</h><p>...</p><span>...</span><b>...</b><font>...</font><label>...</label><a>...</a>...<3><ul> <ol><li></li> <li></li><li></li> <li></li></ul> </ol><4><dl><dt></dt><dd></dd></dl>注：标签的选择使用注意层级关系，<p></p>标签对中，一定不能含有<div></div>标签对、<h></h>标签对，<a></a>标签对下不能含有<a></a>标签对。
为了避免不必要的麻烦<div></div>标签对中可以使用<span></span> 、<p></p> 等标签对，但是尽量不要在<span></span>标签对、 <h></h>标签对中使用<div></div>等高级别标签对。
2．页面布局:总体要求所有元素根据psd设计稿按以下步骤布局。
a)根据整体功能可以将页面划分结构布局<body><div class="wrap"><div class="topBar"></div><div class="head"></div><div class="ad"></div><div class="menu"></div><div class="body"></div><div class="foot"></div></div></body>b)根据结构布局内容可以将每层再次划分●<div class="topBar"><span class="floatLeft"></span><span class="floatRight"></span></div>●<div class=“head”><p></p><p></p></div>●<div class="menu"><ul class="ul_jmenu"><li><a href="#" title=" "></a></li><li><a href="#" title=" "></a></li></ul></div>●<div class="body"><div class="colLeft"></div><div class="colRight"></div></div>c)根据样式结构可以再次划分●表格式"九宫格"结构<div class="module_j mod_j01 div_jflash"><table class="modhead_j" cellpadding="0" cellspacing="0" border="0"><tr><td class="mhl_j" valign="top"></td><td class="mhc_j" valign="top"><div class="inmhc_j"></div></td><td class="mhr_j" valign="top"></td></tr></table><table class="modbody_j" cellpadding="0" cellspacing="0" border="0"><tr><td class="mbl_j" valign="top"></td><td class="mbc_j" valign="top"><div class="inmbc_j"></div></td><td class="mbr_j" valign="top"></td></tr></table><table class="modfoot_j" cellpadding="0" cellspacing="0" border="0"><tr><td class="mfl_j" valign="top"></td><td class="mfc_j" valign="top"></td><td class="mfr_j" valign="top"></td></tr></table></div>●上、中、下3层嵌套div结构<div class="div_jmod"><div class="div_jhead"></div><div class="div_jbody"></div><div class="div_jfoot"></div></div>注：以上结构仅供参考，具体结构需根据psd设计稿来布局。
