DIV+CSS网页设计规范

小灰灰 2021-03-22 12:48 579阅读 0赞

### 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">
````
### 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;

}

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）设置固定宽度：width:100px。除特殊需要外，div一般不设置高度，宽度、高度不能使用百分比，以免在各浏览器中出现较大误差。

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

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

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

````
<!--[if lte IE 6]>

<![endif]-->

<!--[if IE 7]>

<![endif]-->

<!--[if IE 8]>

<![endif]-->
````

### 7）屏蔽IE7。 ###
````
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
````
7、信息列表用ul,li形式，减少代码冗余。如：
````
<div>

<ul>

</ul>

</div>
````
### 8、W3C验证。通过W3C组织官方网站可以验证CSS是否符合标准，网址是： ###

[http://jigsaw.w3.org/css-validator/check/referer][http_jigsaw.w3.org_css-validator_check_referer]

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

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

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

4）一个网页最少要包含的标签
````
<html>

<head>

</head>

<body>

内容

</body>

</html>
````
5）若要显示<、>、&的话, 需输入：< >

若要显示&于网页中的话，则需输入：&

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

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。

[http_jigsaw.w3.org_css-validator_check_referer]: http://jigsaw.w3.org/css-validator/check/referer

DIV+CSS网页设计规范

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 DIVCSS使用要点是什么

相关关于divcss的使用详细介绍

相关 DIVCSS技术如何入门

相关 Web 网页设计规范

相关 MySQL规范，设计规范，索引规范，开发规范，操作规范

相关 Mysql - 设计规范

相关网页设计的基本规范

相关接口设计规范

相关网页设计基本规范

相关 DIV+CSS网页设计规范