订阅汇聚素材网Feed

网页重构规范

css样式reset重置示例

注意! 使用时,按需配置,去除冗余

精简版推荐
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin:0}
body,button,input,select,textarea{font:12px/1.5 tahoma,'\5b8b\4f53',sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%}
em,b{font-style:normal}
a{text-decoration:none}
a:hover{text-decoration:underline}
img{border:0}
button,input,select,textarea{font-size:100%;outline:none}
table{border-collapse:collapse;border-spacing:0}
td,th,ul,ol{padding:0}
通用版(基本适用于所有的页面)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
通用版(支持html5)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
table{border-collapse:collapse;border-spacing:0}
audio,canvas,video { display: inline-block;*display: inline;*zoom: 1;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}

页面文字

基本字体
body{font:12px/1.5 tahoma,'\5b8b\4f53',sans-serif;}
中文字体

说明:出于有可能乱码而导致字体解析错误的原因,font-family中用到中文字体时,建议优先使用unicode码方式,英文别名方式为备选方案
禁止使用中文方式

font-family:'\5FAE\8F6F\96C5\9ED1';	/*推荐*/
font-family:'Microsoft Yahei';	/*备选*/

样式名

所有xhtml标签、css、class、id都需小写。class、id命名要有意义。可以是英文或拼音的缩写。能通过名称看出元素的大概用途。 需要联调的部分,不要用ID的形式定义样式,以免ID名变化,引起页局错乱。

IE6下半透明png24图片的处理

方案1: png8

说明:将背景切进图片中,导出为png8格式

方案2: AlphaImageLoader滤镜
selectors{
background: url(image.png);
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}

此方案适用于页面透明png24较少的情况下使用,并且不可以是聚合图

方案3: DD_belatedPNG

使用示例:

<!--[if IE 6]>
<script src="DD_belatedPNG-min.js"></script>
<script>
DD_belatedPNG.fix('.example1,.example2');
</script>
<![endif]-->

说明:建议优先选择方案1,如方案1不行,选择方案2,方案3为最后的方案。另外可以建议用FW工具导出alpha透明的png8格式在ie6下不会有灰底。

DD_belatedPNG-min.js
下载:

DD_belatedPNG-min.js124 次Downloads

其他:

代码内不可有过多无意义空格、换行,tab缩进允许。

图片规范

图片标签

图片标签必须写上宽度、高度和alt属性,宽高为图片的原大小,例如:

<img src="" width="500" height="200"  alt=""/>

图片质量

图片体积不能超过150K,图片格式包括.jpg/.gif/.png
jpg图片必须压缩,一般60%品质即可,如果图片质量不好,可提高到80%

切图要求

  • 合并当前页面中出现的小图片,尽可能减少页面请求数;
  • 辅助图片(修饰、间隔、提醒的图片)作为背景图处理,通过css的background定义;
  • 各类按钮、文字、标题要尽量从背景中分离;能重复利用的部分尽量提取;
  • 页面需具有扩展性,特殊情况除外;
  • 合理切图,需要程序后台动态生成的图片,必须单独切割出来

测试标准

浏览器兼容性测试

兼容IE6、IE7、IE8、IE9、Firefox、chrome,TT浏览器。并且拖大和缩小窗口,页面布局不会发生错位;

显示器分辨率测试

1024×768、1440×900

可读性测试

  • 在屏蔽js、css后,页面要仍然具有良好的可读性。
  • 表现与结构分离,代码中不要涉及表现元素,如:style、font、bgColor、border等。
  • 选用恬当的元素,标题使用h1~h6,h1为网页一级标题,一个页面中只出现一次;
  • 分大块使用div,段落使用p。数据列表使用table/ul/ol/dd等,关键字使用strong
7 人Likes
  

文章转载请注明:网页重构规范-汇聚素材网

本文固定链接:http://www.webhj.com/hj-1501.html  +复制链接

网页重构规范:等您坐沙发呢!

发表评论

*

*

7 + 5

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍