文档介绍：页面制作规范
一、图片
1、gif与jpg格式：gif格式的图片占的空间小，网页制作过程中通常用gif格式，但对于质量要求比较高的图片（如果渐变的比较多）用jpg格式的例如：
（jpg格式34k，较清晰） （gif格式7k，较模糊）
且GIF支持基本的透明特性，这意味着你能够使图片的某些像素“不可见”。在其被放置到网页中时，我们就可以看到通过这些不可见区域看到此图片后面的背景颜色。这点是jpg做不到的。
2、png格式：支持透明、半透明特性，质量相对于gif好很多，例如：
（gif格式）（png格式）
目前市场上主流的浏览器对PNG格式都有很好的支持，这包括：IE*, Firefox, Safari, Opera, and Konqueror。但是IE6及IE6以下的浏览器对PNG透明背景的支持并不好。需要相关的javascript代码来控制。
二、界面符合多种分辨率、浏览器
1、页面要求符合三种基本分辨率（1280*1024、1024*768、800*600），和三种基本浏览器ie7、ie6、firefox,也就是相关重要改动要浏览9次。这里要提出的是系统界面由于要求尺寸自适应，比固定宽度的页面制作起来要复杂些。在800*600情况下为了使页面元素不挤在一起，需要设置页面最小宽度
，可以比较一下各图，例如：
( 800*600 ie7 )
( 800*600 firefox )
( 800*600 ie6 )
( 1024*768 ie7 )
( 1024*768 firefox )
( 1024*768 ie6 )
( 1280*1024 ie7 )
( 1280*1024 firefox )
( 1280*1024 ie6 )
三、css重用、子选择器和组选择器：
可以根据自己的写作代码****惯和具体系统，设置一些能拆出来的样式组合着用。例如：
/*颜色*/
.red{color:red;}
.grey{color:#999;}
/*文本*/
.font10{font-size:10px;}
.font12{font-size:12px;}
.font14{font-size:14px;}
/*行高*/
.pLineHeight{line-height:150%;}
.pLineHeight2{line-height:180%;}
.pLineHeight3{line-height:200%;}
/*边距*/
.marginTop5{margin-top:5px;}
.marginTop10{margin-top:10px;}
.marginTop15{margin-top:15px;}
比如字体的颜色和加粗。网页中可能同时出现三种情况：
这时我们只需要定义前两个css：
.red{color:red;}
.b{font-weight:bold;}
第三种情况时用<div class="red b"></div>
针对具体的体统界面，尽量提出公用的css进行重用例如：
以下两图中两个蓝色的框，可以用一套代码
（图一）
（图二）
子选择器:
相对来说，简化html文件的代码更加重要，因此在css中使用子选择器非常有益，同时也使css代码更加容易理解。比如下面的代码：
<div id="sub_nav">
<ul>
<li> <a href="#">Item 1</a></li>>
<li> <a href="#">Item 2</a></li>
<li> <a href="#">Item 3</a></li>
</ul>
</div>
如果div li a都有各自的式样,采用子选择器,可以省略代码中li 和a 的class属性，从而简化代码：
#sub_nav { /* Some styling */ }
#sub_nav li { /* Some styling */ }
#sub_nav a { /* Some styling */ }
组选择器：
当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
例如：定义所有标题的字体、颜色和margin，你可以这样写：
h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;