zoukankan      html  css  js  c++  java
  • DIV+CSS网页设计规范

    1、网页HTML代码最前面必须包括W3C声明,以便符合标准:

    一般网页:

    <!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">

    框架页:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    2、网页编码声明:

    简体中文网页为gb2312

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    繁体中文网页为big5

    <meta http-equiv="Content-Type" content="text/html; charset= big5" />

    英文网页为utf-8

    <meta http-equiv="Content-Type" content="text/html; charset= utf-8" />

    3、采用CSS链接方式,全站使用同一个CSS文件,实现内容与表现分离:

    <link href="images/style.css" rel="stylesheet" type="text/css">

    不要将样式直接写在页面html代码中,页面中不得使用<font></font>、<style>等标签。

    4、CSS文件中需要对一些基本的标签进行定义或重置:

    *{

           padding:0;

           margin:0;

    }

    body,td,th,div {

           font-family: 宋体;

           font-size: 12px;

           color: #000000;

    }

    body {

           background:#FFFFFF;

    }

    p{

           line-height:150%;

    }

    a:link {

           color: #000000;

           text-decoration: none;

    }

    a:visited {

           color: #000000;

           text-decoration: none;

    }

    a:hover {

           color: #ff0000;

           text-decoration: underline;

    }

    a:active {

           color: #000000;

           text-decoration: none;

    }

    h1{

           color:#000000;

           line-height:150%;

           font-size:24px;

    }

    li{

           list-style:none;

           word-break: keep-all;

           white-space: nowrap;

    }

    5、网页设计完成后,必须分别在Internet Explorer 6.0和Firefox3.0进行兼容性测试,确保页面表现在这两个主流浏览器中保持完全一致,无错位、重叠现象。

    6、解决兼容性问题常用CSS代码有:

    1)div对齐方式有居左、居中、居右三种方式,居中的要清除浮动:clear:both; 否则就会有重叠现象。

    2)隐藏超出部分:overflow:hidden;

    3)设置固定宽度:100px。除特殊需要外,div一般不设置高度,宽度、高度不能使用百分比,以免在各浏览器中出现较大误差。

    4)给div临时加边框:border:1px solid;

    5)用!important;为IE和FF设置不同样式,如:100px!important; 102px; 前面是FF样式,后面是IE样式。

    6)判断IE浏览器版本调用不同的样式表。

    <!--[if lte IE 6]>

    <LINK rel="stylesheet" type="text/css" href="images/css.css" />

    <![endif]-->

    <!--[if IE 7]>

    <LINK rel="stylesheet" type="text/css" href="images/css2.css" />

    <![endif]-->

    <!--[if IE 8]>

    <LINK rel="stylesheet" type="text/css" href="images/css3.css" />

    <![endif]-->

    7)屏蔽IE7。

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    7、信息列表用ul,li形式,减少代码冗余。如:

    <div>

           <ul>

                  <li></li>

           </ul>

    </div>

    8、W3C验证。通过W3C组织官方网站可以验证CSS是否符合标准,网址是:

    http://jigsaw.w3.org/css-validator/check/referer

    1)所有标签都必需使用小写

    2)所有标签内之属性都要有值且不可省略双引号或单引号

    3)所有标签必须成对, 若非成对需加上/在最后

    4)一个网页最少要包含的标签

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset= gb2312" />

    <title>标题</title>

    </head>

    <body>

    内容

    </body>

    </html>

    5)若要显示<、>、&的话, 需输入:&lt; &gt;

    若要显示&于网页中的话,则需输入:&amp;

    6)标签顺序不可错乱,应该是:<b><p>文字</p></b>

    7)注释文字中不可包含----,HTML注释形式:<!--注释文字-->,CSS注释形式:/*注释文字*/

    在页面中除了开始、结束、JavaScript代码处需要加一些必要的注释外,其他地方尽量少写注释,有时注释太多也会引起一些问题。

    在样式表中可以适当加些注释,简要说明样式的用途、范围等。

    8、页面引用样式时使用class=”style1”,而不是id=”style1”,把id留给程序员使用,提高样式可重用性,减小CSS文件体积。

    9、html代码要适当缩进(可在代码前按TAB键,或页面全部做完后,在DW代码视图中执行“套用源格式”,不要有空白行。

      

    10、网页中图片的使用。

    1)网页中最好使用gif、jpg格式图片,由于png图片在浏览器中的兼容性还有问题,故不建议使用。

    2)栏目标题背景、圆角背景、边框背景、标题前的icon图标等可以写在background:url( );里。

    3)网站logo、more、new、hot、广告位等图片需使用<img>标签,以便为其添加链接。

    11、网页整体必须在浏览器中居中显示,即:div{margin:0 auto;}。

    12、如果网页中同时有飘浮图片、下拉菜单、弹出对话框、Flash,前三者要位于Flash上方。需在Flash中加以下透明代码:

    <param name="WMODE" value="transparent"> //IE

    <embed wmode="transparent"> //Firefox

    13、设置网页滚动条的样式:

    html {

           scrollbar-face-color:#f6f6f6;

           scrollbar-highlight-color:#fff;

           scrollbar-shadow-color:#eeeeee;

           scrollbar-3dlight-color:#eeeeee;

           scrollbar-arrow-color:#000;

           scrollbar-track-color:#fff;

           scrollbar-darkshadow-color:#fff;

    }

    14、英文、数字在FF下不自动换行,需加以下代码:

    word-wrap:break-word;

    15、注意水平、垂直方向的对齐、留白问题。

    16、网页宽度。

    一般窄屏宽为760px,宽屏为950px。

    17、样式的命名应该符合语义化要求,即一看样式名就可知道这个样式大概用在什么地方、有什么用途,方便以后调用、维护。如顶部样式则为.header。

    www.mini88s.com

    www.xianhzw.com

    mini88s.taobao.com

  • 相关阅读:
    MongoDB慢查询性能分析
    redis的LRU算法(二)
    Skynet服务热点火焰图分析
    内存爆灯
    时区问题
    与机器共生
    bug狩猎
    Lesson Learned
    下划线引起的血案
    Intel的CPU漏洞:Spectre
  • 原文地址:https://www.cnblogs.com/zeze/p/7114806.html
Copyright © 2011-2022 走看看