首页
欢迎页
Latest images
搜索
注册
登录
网页设计规范
网页设计规范
design_ss 28/02/12, 04:20 am
中国移动手机支付网页设计规范
本规范的目的是为了方便在中国移动手机支付网站建设中，制作出通用的、易于维护、高效率的制作WEB页面。
一. 目录建立、文件夹命名规则：
01. 目录：
除非有特殊情况外，目录应使用小写字母，并且以字母开头其中不得包含汉字、空格与特殊字符。
目录命名请尽量英文为指导，不要以拼音作为目录名称。
以下为一些常用目录的推荐英文名称：
image 放网站不同栏目的页面都要用到的公共图片
media 放 flash、avi、quicktime 等多媒体文件
public 放公共文件
style 放 css 样式文件
js放js文件
temp 放一些策划与设计中使用的原始资料与备份文件
在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个 images 和 medias 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。temps目录中的文件与网上无关，请杜绝非内容的上传。
02. 文件：
除非有特殊情况外，目录应使用小写字母，并且以字母开头其中不得包含汉字、空格与特殊字符，否则在网页读取过程中可能会出现错误；请尽量英文为指导，不要以拼音作为目录名称。
以下为一些常用文件命名的格式推荐：
首页类文件 index(_******).后缀名 [index_wealth.html]
列表类文件 list(_******).后缀名 [list.html]
内容类文件 detail(_******).后缀名 [detail.html]
表单类文件 post(_******).后缀名 [post.html]
表单反馈类文件 result(_******).后缀名 [result.html]
图片类文件文件类型_***xx(图片序号)(背景).后缀名 (详见以下)
广告图片动画类文件 ******_widthxheight.后缀名 (详见以下)
03 图片文件：
透明的1x1像素图片名称为：c.gif
图片的分类及命名规则：
广告类 banner banner_vnvbiz_500x400.swf | banner_vnvbiz_680x100.swf
标志类 logo logo.gif | logo_newyear2007.gif
按钮类 button button_01.gif | button_01bg.gif
菜单类 menu menu_aboutus.gif | menu_job.gif
装饰类 pic pic_01.gif | pic_02.gif
栏目类 title title_top01.gif | title_top02bg.gif
04 命名规则
两种方式：下划线连接法、驼峰法。选择其中一种方式即可
如：index_menu.html
indexMenu.html
二设计规范：
01. 整体规范：
中国移动手机支付网站统一采用950像素的宽
网站页面长度建议1屏半到2屏。原则上长度不超过3屏，宽度不超过1屏。根据用户习惯和网站需要，站点首页、分栏首页可设计超过3屏。
02. 图片标准尺寸：
除了布局类文件没有限制外，其它的广告、产品等图片，基本满足以下三种规格：
1x1 => 正方比例；
4x3 => 黄金比例；
另外还有一种的特定图片尺寸。
以下为一些常见图片的推荐尺寸：
全尺寸banner => 468×60px；
半尺寸banner => 234×60px；
产品缩略图片 => 100×75px；
内容图片 => 50×50px 120×90px
图片文件大小一般保持在 5k 以内；大尺寸的banner文件大小保持在15k 以内。
03. 文字规范：
网页中总体上使用：
字体 font-family:宋体
字号 font-size:12px
字色 普通：color:#333 浅色：color:#666
大字体设置上请多使用双尾数值，比如 12px 14px 16px 22px：
一般标题宋体粗体12px
模块标题宋体粗体14px
内容标题宋体粗体16px
文字的行间距也请多使用双尾数值：
12号字体常用行间中距 18px│20px│22px
14号宋体常用行间中距 24px│26px│28px
文字的颜色请使用216安全色，方便定义和规范颜色，即类似于 "#000000 | #CC6666 | #66CCFF"
04. 链接规范：
新闻、信息类通常用新开窗口方式打开。
顶部导航、底部导航通常采取在本页打开，特殊栏目和功能可新开窗口。
链接带下划线为链接通常的默认风格，顶部导航或特殊位置为了观赏性可用样式表取消下划线。
链接的颜色可配合主题颜色风格改变，通常为蓝色、暗蓝色、黑色，但激活后的链接颜色、鼠标移动其上时的链接颜色要同本身颜色进行区分。
三 XHTML制作规范：
01. 制作规范总论：
每个网页都应注明 DTD 版本信息，并且放在网页的最上面。
所有xhtml标签都必须使用小写，并且必须有属性值，且加双引号。
所有xhtml标签都必须闭合。
"网页大小"定义为网页的所有文件大小的总和，包括html文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在70K以下为合适，40K以下更好。
为了更好的控制代码长度与代码的可读性，尽量使用手写代码来完成书写，并且使用tab来控制代码缩进（严禁使用空格键）。
所有的文件联接与链接都使用绝对路径的形式，如：/news/detail.aspx?id=1111
在制作页面时，请先全局性的了解一下页面的结构，然后按粗放到细致的顺序去完成页面。最后是同一栏目使用同时制作，从而减少ＣＳＳ的代码量。
02. 网页文件通用模板：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" contect="zh-CN" />
<title>
/title>
</head>
<body>
</body>
</html>
03. 页首head区代码规范：
网站简介：
<meta name="description" content="网站的简介" />
必需
搜索关键字：
<meta name="keywords" content="关键字1,关键字2..." /> 必需
搜索机器人：
<meta name="robots" content="all" />(all,none,index,noindex,follow,nofollow)
网页著作者： <meta name="author" content="" />
网页版权注释： <meta name="copyright" content="joinDeer,Inc 04/2010 " />
网页定时跳转： <meta http-equiv="refresh" content="10; url=http://yourlink" />
网页间转换时加入效果：
<meta http-equiv="page-enter" content="revealtrans(duration=10, transition=50)" />
<meta http-equiv="page-exit" content="revealtrans(duration=20, transition=6)" />收藏夹图片：
<link type="image/x-icon" rel="icon" href="/favicon.ico" />
<link type="image/x-icon" rel="shortcut icon" href="/favicon.ico" />RSS文件代码：
<link type="application/rss+xml" rel="alternate" title="" href="rss/feed.rss" />
04. CSS调用规范：
<link type="text/css" rel="stylesheet" href="style/style.css" />
所有的css的尽量采用外部调用：
代码较长的首页和重要栏目首页可直接内嵌css，避免调用时间太长，使页面未及时调用css风格而显得凌乱。
某些独立存在的单页也可以使用以上的方法。
在类似换模板的css调用时，请遵守前后顺序的规定。
05. JS调用规范：
<script type=" text/javascript" src=" commons/***xx.js"></script>
所有的javascript脚本尽量采取外部调用：
某些独立存在的单页也可以使用直接内嵌JS。
JS的编写每个人都有自己的习惯用法，所以请在编写时加注释信息，方便其它同事可以阅读与修改。
06. img标签规范：
<img src="" width="" height="" alt="" />
所有img标签除了程序控制宽高值外，都应该 width="" height=""，这样在图形文件未被读取时，保证浏览器预留图形占用的空间，防止网页最终显示时出现抖动现象。
所有带链接的img标签都应该 border="0"。
一般img标签都应该设置 alt=""，alt的内容尽量贴近图的内容。
07. a标签规范：
<a href="" title="" class=""></a>
所有a标签都应该有 title="" 的值，title的内容尽量贴近链接的内容。
除了默认的链接ＣＳＳ，其它的特别链接都应该有自己的class值，以方便其它链接调用。
希望可以使用三段式的ＣＳＳ设置，未点前 | 点击中 | 已点后 这三种状态，以方便用户可以清楚的知道那些是已经点过的。
一般链接到某一目录下的缺省文件的链接路径不必写全名，如：
<a href="/aboutus/index.html"> 可以写为 <a href="/aboutus/">
08. form标签与表单相关标签规范：
<form method="post | get" action=""></form>
<input type="text | password | radio | checkbox | submit | button | reset | image | file | hidden" name="" value="" size="" />
maxlength="" // 允许输入的最大宽值
checked="checked" // radio checkbox类型中的选中
isabled="disabled" // 灰色不可选
readonly="readonly" // 只读
<select name="" disabled="disabled"></select>
size="" // 拉长转为高度状态
multiple="multiple" // 可复选
<option value="" disabled="disabled"></option>
selected="selected" // 默认值
<textarea name="" disabled="disabled" readonly="readonly"></textarea>
rows="" // 高度
cols="" // 宽度
<label for=""></label>
<button type="button | submit | reset" name="" value="" disabled="disabled"></button>
其中灰色文字代表的是可以选择性输入的部分。
所有form标签都应该有 method="" 的值，默认请使用post。
可以使用label标签来关联表单标签。
可以使用table标签来控制表单的内容形式。
请尽量把form标签放在table中间使用，
如：< table><form><tr><td></td></tr></form></table>
09. table标签规范：
<table border="0" cellpadding="0" cellspacing="0" width="" height="" rules="groups">
<caption align="" valign=""> </caption>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td width="" height="" colspan="" rowspan=""></td>
<td width="">
<table border="0" cellpadding="0" cellspacing="0">
f
<tr><td></td></tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr><td></td></tr>
</tfoot>
</table>
使用div+css并不代表不可以再使用table，只是table不在用于结构与布局。
除了以下几个table标签属性外，其它的table标签属性最好放弃使用，因为其存在兼容性问题。
以下为表格的嵌套格式：
1.) 对于单独的一个<table>来说，<table><tr>对齐，<td>缩进一个tab。
2.) 对于存在<thead> <tbody> <tfoot>的<table>来说，<table> 与<thead><tbody><tfoot>对齐，<tr>缩进一个tab。
3.) 如果<td>中没有任何嵌套的表格，</td>结束标记应该与<td>处于同一行，不要换行。4.) 如果<td>中出现嵌套表格，<td>下面的<table>缩进一个tab。
5.) 如果<tr>下内有一个<td>，并且<td>没有任何嵌套，可以让<tr><td>都处于同一行中。原则上，不赞同使用超过三次的table嵌套，如出现这样的样式，都尝试使用div等其它方式。
嵌套的表格大小尽量给定width和height数值，以便于浏览器加快解释的速度，以下为设置宽高的基本原则，一行或一列都只存在一个width或height的值
10. 列表相关标签规范：
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
<dl>
<dt></dt>
<dd></dd>
</dl>
1)使用<li>、<dd>等格式控制时必须加注<ul></ul>和<dl></dl>，不准单独使用<li>、<dd>。
2) 在一般情况下，列表中的margin padding 都应该在css中设置为0，list-stype设置为 none。
3) 文字 + 行高 + 列表头控制 + 列表头图片统一写入样式，列表头符号不加链接。
11. 其它：
为swf设置一个 <param name="wmode" value="transparent" /> 就可以解决swf总是浮动在总最上面的问题了，但同时在制作swf动画时，按实际需要设置一个实色的底色框。因为marquee的兼容性问题，所以请暂停使用本标签，可以使用javascript来完成滚动。font标签也已经被w3c抛弃，所以建议用CSS来替换使用。
四 CSS制作规范
01. 一般常用CSS样式的范本：
* { background:#fff; margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color: #000; }
ul, ol, menu, dl { list-style:none; }
p {text-indent:2em;}
a:link { color:#333; text-decoration:none; }
a:visited { color:#333; text-decoration:none; }
a:hover { color:#C60; text-decoration:underline; }
a:active { color:# C60; text-decoration:underline; }
02. 常用CSS缩写形式：
字体缩写：
font:normal normal normal 12px/18px 宋体;
背景缩写：
background:red url(images/bg.gif) repeat-y top right;
列表缩写：
l
ist-style : list-style-image || list-style-position || list-style-type
list-style:url(images/icon.gif) 0 0;
边框缩写：
border:1px solid black;
Box模形缩写：
(上)(右)(下)(左) | (上)(左右)(下) | (上下)(左右) 这几种表现方式。
color缩写：
如果使用216安全色，就可以使用 #FFF, #F06这样的表达形式。
03. 常用布局形式：
为了兼容IE6、Firefox，在布局的时候请使用以下格式：
居中：margin:0 auto;
居右：margin:0 0 0 auto;
居左：margin:0 auto 0;
左浮动：float:left; clear:left;
右浮动：float:right; clear:right;
04. CSS语意性设置：
<h1>可以设置为与网页的 title 一样，不过可以通过 display:none; 隐藏，这样做可以方便搜索引擎的提取；
<h2>可以设置文章的标题；
<h3>可以用于分栏目的标题；
<p>可以放置文章的内容；
<label>可以与表单框对应使用；
<ul>可以用来做一层的菜单；
<dl>可以用来做二层的菜单；
05. CSS常用命名规则：
命名含义命名含义命名含义
header 头部
container 内容部分
footer 尾部
nav 导航
menu 菜单
crumb 当前位置
left 左侧部分
center 中间部分
right 右侧部分
login 登录
regsiter 注册
search 搜索
06. CSS设置的注意事项：
Hack的问题：
IE6采用 _解决
IE7采用 *+解决
五搜索引擎优化：
使用flash或者图片作为导航菜单的时候，会影响搜索引擎对其内容的搜索，所以可以使用图片替换文字的方式来做导航菜单.
每个分栏都应该精心设计其的meta标签、meta关键字。
本规范的目的是为了方便在中国移动手机支付网站建设中，制作出通用的、易于维护、高效率的制作WEB页面。
一. 目录建立、文件夹命名规则：
01. 目录：
除非有特殊情况外，目录应使用小写字母，并且以字母开头其中不得包含汉字、空格与特殊字符。
目录命名请尽量英文为指导，不要以拼音作为目录名称。
以下为一些常用目录的推荐英文名称：
image 放网站不同栏目的页面都要用到的公共图片
media 放 flash、avi、quicktime 等多媒体文件
public 放公共文件
style 放 css 样式文件
js放js文件
temp 放一些策划与设计中使用的原始资料与备份文件
在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个 images 和 medias 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。temps目录中的文件与网上无关，请杜绝非内容的上传。
02. 文件：
除非有特殊情况外，目录应使用小写字母，并且以字母开头其中不得包含汉字、空格与特殊字符，否则在网页读取过程中可能会出现错误；请尽量英文为指导，不要以拼音作为目录名称。
以下为一些常用文件命名的格式推荐：
首页类文件 index(_******).后缀名 [index_wealth.html]
列表类文件 list(_******).后缀名 [list.html]
内容类文件 detail(_******).后缀名 [detail.html]
表单类文件 post(_******).后缀名 [post.html]
表单反馈类文件 result(_******).后缀名 [result.html]
图片类文件文件类型_***xx(图片序号)(背景).后缀名 (详见以下)
广告图片动画类文件 ******_widthxheight.后缀名 (详见以下)
03 图片文件：
透明的1x1像素图片名称为：c.gif
图片的分类及命名规则：
广告类 banner banner_vnvbiz_500x400.swf | banner_vnvbiz_680x100.swf
标志类 logo logo.gif | logo_newyear2007.gif
按钮类 button button_01.gif | button_01bg.gif
菜单类 menu menu_aboutus.gif | menu_job.gif
装饰类 pic pic_01.gif | pic_02.gif
栏目类 title title_top01.gif | title_top02bg.gif
04 命名规则
两种方式：下划线连接法、驼峰法。选择其中一种方式即可
如：index_menu.html
indexMenu.html
二设计规范：
01. 整体规范：
中国移动手机支付网站统一采用950像素的宽
网站页面长度建议1屏半到2屏。原则上长度不超过3屏，宽度不超过1屏。根据用户习惯和网站需要，站点首页、分栏首页可设计超过3屏。
02. 图片标准尺寸：
除了布局类文件没有限制外，其它的广告、产品等图片，基本满足以下三种规格：
1x1 => 正方比例；
4x3 => 黄金比例；
另外还有一种的特定图片尺寸。
以下为一些常见图片的推荐尺寸：
全尺寸banner => 468×60px；
半尺寸banner => 234×60px；
产品缩略图片 => 100×75px；
内容图片 => 50×50px 120×90px
图片文件大小一般保持在 5k 以内；大尺寸的banner文件大小保持在15k 以内。
03. 文字规范：
网页中总体上使用：
字体 font-family:宋体
字号 font-size:12px
字色 普通：color:#333 浅色：color:#666
大字体设置上请多使用双尾数值，比如 12px 14px 16px 22px：
一般标题宋体粗体12px
模块标题宋体粗体14px
内容标题宋体粗体16px
文字的行间距也请多使用双尾数值：
12号字体常用行间中距 18px│20px│22px
14号宋体常用行间中距 24px│26px│28px
文字的颜色请使用216安全色，方便定义和规范颜色，即类似于 "#000000 | #CC6666 | #66CCFF"
04. 链接规范：
新闻、信息类通常用新开窗口方式打开。
顶部导航、底部导航通常采取在本页打开，特殊栏目和功能可新开窗口。
链接带下划线为链接通常的默认风格，顶部导航或特殊位置为了观赏性可用样式表取消下划线。
链接的颜色可配合主题颜色风格改变，通常为蓝色、暗蓝色、黑色，但激活后的链接颜色、鼠标移动其上时的链接颜色要同本身颜色进行区分。
三 XHTML制作规范：
01. 制作规范总论：
每个网页都应注明 DTD 版本信息，并且放在网页的最上面。
所有xhtml标签都必须使用小写，并且必须有属性值，且加双引号。
所有xhtml标签都必须闭合。
"网页大小"定义为网页的所有文件大小的总和，包括html文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在70K以下为合适，40K以下更好。
为了更好的控制代码长度与代码的可读性，尽量使用手写代码来完成书写，并且使用tab来控制代码缩进（严禁使用空格键）。
所有的文件联接与链接都使用绝对路径的形式，如：/news/detail.aspx?id=1111
在制作页面时，请先全局性的了解一下页面的结构，然后按粗放到细致的顺序去完成页面。最后是同一栏目使用同时制作，从而减少ＣＳＳ的代码量。
02. 网页文件通用模板：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" contect="zh-CN" />
<title>
/title>
</head>
<body>
</body>
</html>
03. 页首head区代码规范：
网站简介：
<meta name="description" content="网站的简介" />
必需
搜索关键字：
<meta name="keywords" content="关键字1,关键字2..." /> 必需
搜索机器人：
<meta name="robots" content="all" />(all,none,index,noindex,follow,nofollow)
网页著作者： <meta name="author" content="" />
网页版权注释： <meta name="copyright" content="joinDeer,Inc 04/2010 " />
网页定时跳转： <meta http-equiv="refresh" content="10; url=http://yourlink" />
网页间转换时加入效果：
<meta http-equiv="page-enter" content="revealtrans(duration=10, transition=50)" />
<meta http-equiv="page-exit" content="revealtrans(duration=20, transition=6)" />收藏夹图片：
<link type="image/x-icon" rel="icon" href="/favicon.ico" />
<link type="image/x-icon" rel="shortcut icon" href="/favicon.ico" />RSS文件代码：
<link type="application/rss+xml" rel="alternate" title="" href="rss/feed.rss" />
04. CSS调用规范：
<link type="text/css" rel="stylesheet" href="style/style.css" />
所有的css的尽量采用外部调用：
代码较长的首页和重要栏目首页可直接内嵌css，避免调用时间太长，使页面未及时调用css风格而显得凌乱。
某些独立存在的单页也可以使用以上的方法。
在类似换模板的css调用时，请遵守前后顺序的规定。
05. JS调用规范：
<script type=" text/javascript" src=" commons/***xx.js"></script>
所有的javascript脚本尽量采取外部调用：
某些独立存在的单页也可以使用直接内嵌JS。
JS的编写每个人都有自己的习惯用法，所以请在编写时加注释信息，方便其它同事可以阅读与修改。
06. img标签规范：
<img src="" width="" height="" alt="" />
所有img标签除了程序控制宽高值外，都应该 width="" height=""，这样在图形文件未被读取时，保证浏览器预留图形占用的空间，防止网页最终显示时出现抖动现象。
所有带链接的img标签都应该 border="0"。
一般img标签都应该设置 alt=""，alt的内容尽量贴近图的内容。
07. a标签规范：
<a href="" title="" class=""></a>
所有a标签都应该有 title="" 的值，title的内容尽量贴近链接的内容。
除了默认的链接ＣＳＳ，其它的特别链接都应该有自己的class值，以方便其它链接调用。
希望可以使用三段式的ＣＳＳ设置，未点前 | 点击中 | 已点后 这三种状态，以方便用户可以清楚的知道那些是已经点过的。
一般链接到某一目录下的缺省文件的链接路径不必写全名，如：
<a href="/aboutus/index.html"> 可以写为 <a href="/aboutus/">
08. form标签与表单相关标签规范：
<form method="post | get" action=""></form>
<input type="text | password | radio | checkbox | submit | button | reset | image | file | hidden" name="" value="" size="" />
maxlength="" // 允许输入的最大宽值
checked="checked" // radio checkbox类型中的选中
isabled="disabled" // 灰色不可选
readonly="readonly" // 只读
<select name="" disabled="disabled"></select>
size="" // 拉长转为高度状态
multiple="multiple" // 可复选
<option value="" disabled="disabled"></option>
selected="selected" // 默认值
<textarea name="" disabled="disabled" readonly="readonly"></textarea>
rows="" // 高度
cols="" // 宽度
<label for=""></label>
<button type="button | submit | reset" name="" value="" disabled="disabled"></button>
其中灰色文字代表的是可以选择性输入的部分。
所有form标签都应该有 method="" 的值，默认请使用post。
可以使用label标签来关联表单标签。
可以使用table标签来控制表单的内容形式。
请尽量把form标签放在table中间使用，
如：< table><form><tr><td></td></tr></form></table>
09. table标签规范：
<table border="0" cellpadding="0" cellspacing="0" width="" height="" rules="groups">
<caption align="" valign=""> </caption>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td width="" height="" colspan="" rowspan=""></td>
<td width="">
<table border="0" cellpadding="0" cellspacing="0">
f
<tr><td></td></tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr><td></td></tr>
</tfoot>
</table>
使用div+css并不代表不可以再使用table，只是table不在用于结构与布局。
除了以下几个table标签属性外，其它的table标签属性最好放弃使用，因为其存在兼容性问题。
以下为表格的嵌套格式：
1.) 对于单独的一个<table>来说，<table><tr>对齐，<td>缩进一个tab。
2.) 对于存在<thead> <tbody> <tfoot>的<table>来说，<table> 与<thead><tbody><tfoot>对齐，<tr>缩进一个tab。
3.) 如果<td>中没有任何嵌套的表格，</td>结束标记应该与<td>处于同一行，不要换行。4.) 如果<td>中出现嵌套表格，<td>下面的<table>缩进一个tab。
5.) 如果<tr>下内有一个<td>，并且<td>没有任何嵌套，可以让<tr><td>都处于同一行中。原则上，不赞同使用超过三次的table嵌套，如出现这样的样式，都尝试使用div等其它方式。
嵌套的表格大小尽量给定width和height数值，以便于浏览器加快解释的速度，以下为设置宽高的基本原则，一行或一列都只存在一个width或height的值
10. 列表相关标签规范：
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
<dl>
<dt></dt>
<dd></dd>
</dl>
1)使用<li>、<dd>等格式控制时必须加注<ul></ul>和<dl></dl>，不准单独使用<li>、<dd>。
2) 在一般情况下，列表中的margin padding 都应该在css中设置为0，list-stype设置为 none。
3) 文字 + 行高 + 列表头控制 + 列表头图片统一写入样式，列表头符号不加链接。
11. 其它：
为swf设置一个 <param name="wmode" value="transparent" /> 就可以解决swf总是浮动在总最上面的问题了，但同时在制作swf动画时，按实际需要设置一个实色的底色框。因为marquee的兼容性问题，所以请暂停使用本标签，可以使用javascript来完成滚动。font标签也已经被w3c抛弃，所以建议用CSS来替换使用。
四 CSS制作规范
01. 一般常用CSS样式的范本：
* { background:#fff; margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color: #000; }
ul, ol, menu, dl { list-style:none; }
p {text-indent:2em;}
a:link { color:#333; text-decoration:none; }
a:visited { color:#333; text-decoration:none; }
a:hover { color:#C60; text-decoration:underline; }
a:active { color:# C60; text-decoration:underline; }
02. 常用CSS缩写形式：
字体缩写：
font:normal normal normal 12px/18px 宋体;
背景缩写：
background:red url(images/bg.gif) repeat-y top right;
列表缩写：
l
ist-style : list-style-image || list-style-position || list-style-type
list-style:url(images/icon.gif) 0 0;
边框缩写：
border:1px solid black;
Box模形缩写：
(上)(右)(下)(左) | (上)(左右)(下) | (上下)(左右) 这几种表现方式。
color缩写：
如果使用216安全色，就可以使用 #FFF, #F06这样的表达形式。
03. 常用布局形式：
为了兼容IE6、Firefox，在布局的时候请使用以下格式：
居中：margin:0 auto;
居右：margin:0 0 0 auto;
居左：margin:0 auto 0;
左浮动：float:left; clear:left;
右浮动：float:right; clear:right;
04. CSS语意性设置：
<h1>可以设置为与网页的 title 一样，不过可以通过 display:none; 隐藏，这样做可以方便搜索引擎的提取；
<h2>可以设置文章的标题；
<h3>可以用于分栏目的标题；
<p>可以放置文章的内容；
<label>可以与表单框对应使用；
<ul>可以用来做一层的菜单；
<dl>可以用来做二层的菜单；
05. CSS常用命名规则：
命名含义命名含义命名含义
header 头部
container 内容部分
footer 尾部
nav 导航
menu 菜单
crumb 当前位置
left 左侧部分
center 中间部分
right 右侧部分
login 登录
regsiter 注册
search 搜索
06. CSS设置的注意事项：
Hack的问题：
IE6采用 _解决
IE7采用 *+解决
五搜索引擎优化：
使用flash或者图片作为导航菜单的时候，会影响搜索引擎对其内容的搜索，所以可以使用图片替换文字的方式来做导航菜单.
每个分栏都应该精心设计其的meta标签、meta关键字。
design_ss- 帖子数 : 122
积分 : 373
威望 : 0
注册日期 : 11-12-28
您在这个论坛的权限：
您不能在这个论坛回复主题
» javascript 函数的方法call()和apply()
» JS中typeof与instanceof的区别
» JS中的构造函数解析
» js对象属性方法大总结
» js中的值类型和引用类型小结 文字说明与实例
» CSS3中轻松实现渐变效果
» jQUery 常用实例
» mask_layer 遮照