HTML编码规范

 

 html概念:hyper Text Markup Language (超文本标记语言)

Html标签分类：1双标签 2 单标签
Html标签之间的关系: 1 嵌套关系 2 并列关系
Html单标记：
横线标记 <hr> 换行标记<br>
注释标记<!– 注释文本--> ctrl+/
图片标记<img src=“” alt=“” title=“”>
Src属性:文件名称 alt属性:图片描述 title属性:鼠标移上 去显示文字

 

Html双标记
-标题标记 <hn></hn> n 取值1-6
-段落标记<p></p>
-文字格式化标记:

Html特殊标记符号

无序列表
<ul><li></li></ul>
有序列表
<ol><li></li></ol>
自定义列表
<dl>
<dt></dt>
<dd></dd>
<dl>

Meta标签介绍

2:meta 的属性有两种：name和http- equiv。
name属性主要用于描述网页，对应于content（网页内容）
1、<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；
　　2、<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词；
　　3、<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容；
　　4、<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者；
　　5、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">
其中的属性说明如下：
　　设定为all：文件将被检索，且页面上的链接可以被查询；
　　设定为none：文件将不被检索，且页面上的链接不可以被查询；
　　设定为index：文件将被检索；
　　设定为follow：页面上的链接可以被查询；
　　设定为noindex：文件将不被检索，但页面上的链接可以被查询；
　　设定为nofollow：文件将不被检索，页面上的链接可以被查询。

关键字 ：

网页描述：

网页重定向：

链接外部样式：

设置icon图标：

http-equiv属性 

<meta http-equiv="Content-Type" contect="text/html"; charset=gb_2312">
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
网页重定向
link标签：
1:引用外部css
2: 引用title图片 （icon) 例如： <link rel="icon" href="1.icon">
字符集（charset）:
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312
gb2312 简单中文
GBK包含全部中文字符 繁体
BIG5 繁体中文
UTF-8则包含全世界所有国家需要用到的字符

表格(table)

表格的属性：填充属性和间距属性

表格中的属性

表格标准结构：

<table border="1">
        <thead>
            <tr>
                <td>表头</td>
                <td>表头</td>
                <td>表头</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>表体</td>
                <td>表体</td>
                <td>表体</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表脚</td>
                <td>表脚</td>
                <td>表脚</td>
            </tr>
        </tfoot>
    </table>

caption 元素定义表格标题
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

表单(form)

语法：

Name ：定义表单的名称
Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get ；
Action ：用来指定表单处理程序的位置(服务器端脚本处理程序） 
Fieldset：把表单分组
Legend：分组名称

 input控件

 

在上面的语法中，<input />标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标记还可以定义很多其他的属性，其常用属性如下表所示。

textarea控件

如果需要输入大量的信息，就需要用到<textarea></textarea>标记。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

Cols:相当于宽度
Rows:相当于高度

select控件

在HTML中，要想制作如下图所示的下拉菜单，就需要使用select控件

值得一提的是，在HTML中，可以为<select>和<option>标记定义属性，以改变下拉菜单的外观显示效果，具体如下表所示。

组合表单
<fieldset> 标签没有必需的或唯一的属性
<legend> 标签为 fieldset 元素定义标题

  
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10 <form action="1.php" method="POST">
11     <fieldset>
12         <legend>分组信息</legend>
13     <!-- 文本输入框 -->
14     用户名：<input type="text" maxlength="6" name="username" value="前端">
15     <br><br>
16     <!-- 密码输入框 -->
17     密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd">
18     <br><br>
19     <!-- 单选框 -->
20     <input type="radio" name="gender" checked="checked">男
21     <input type="radio" name="gender">女
22     <br><br>
23     <!-- 下拉列表 -->
24     省（市）：<select name="">
25                 <option value="河北">河北</option>
26                 <option value="山西">山西</option>
27                 <option value="山东">山东</option>
28                 <option value="北京" selected="selected">北京</option>
29              </select>
30     <!-- 下拉列表多选 -->
31     <select multiple="multiple">
32         <option value="河北">河北</option>
33         <option value="山西">山西</option>
34         <option value="山东">山东</option>
35         <option value="北京" selected="selected">北京</option>
36     </select>
37     市（区）：
38     <!-- 下拉列表信息分组 -->
39     <select name="" id="">
40         <optgroup label="北京市">
41             <option value="">昌平区</option>
42             <option value="">海淀区</option>
43             <option value="">朝阳区</option>
44             <option value="">大兴区</option>
45         </optgroup>
46         <optgroup label="广州市">
47             <option value="">白云区</option>
48             <option value="">天河区</option>
49             <option value="">越秀区</option>
50             <option value="">番禺区</option>
51         </optgroup>
52     </select>
53     <br><br>
54     <!-- 多选框 -->
55     <input type="checkbox" checked="checked">喝酒
56     <input type="checkbox" checked="checked">抽烟
57     <input type="checkbox" checked="checked">烫头
58 
59     <!-- 多行文本框 -->
60     <textarea name="" id="" cols="30" rows="10"></textarea>
61     <br><br>
62     <!-- 文件上传控件 -->
63     <input type="file">
64     <br><br>
65 
66     <!-- 文件提交按钮 -->
67     <input type="submit">
68 
69     <!-- 普通按钮 -->
70     <input type="button" value="普通按钮">
71 
72     <!-- 重置按钮 -->
73     <input type="reset">
74     <br><br>
75     <!-- 图片按钮 -->
76     <input type="image" src="按钮.jpg">
77     </fieldset>
78 </form>
79 </body>
80 </html>
表单

 

   
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <!-- html5表单控件 -->
11     <form action="1.php" method="POST">
12         <!-- 网址控件 -->
13         <input type="url">
14         <br><br>
15         <!-- 日期控件 -->
16         <input type="date">
17         <br><br>
18         <!-- 时间控件 -->
19         <input type="time">
20         <br><br>
21         <!-- 邮件控件 -->
22         <input type="email">
23         <br><br>
24         <!-- 数字控件 -->
25         <input type="number" step="5">
26         <br><br>
27         <!-- 滑块控件 -->
28         <input type="range">
29         <input type="submit">
30     </form>
31 </body>
32 </html>
html5表单控件

 

 

 

标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

标签语义化意义：
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护

标签语义化（注意事项）

1：尽可能少的使用无语义的标签div和span；

2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

3：不要使用纯样式标签，如：b、font、u等，改用css设置。

4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；

 

 

文本属性连写：

font: font-style font-weight font-size/line-height font-famlily;
font-family: microsoft yahei; //微软雅黑

写字体英文名

unicode 编码（系统可以直接解读）

 


不需要记住在控制台输入escape("字体")直接返回unicode编码，

将%U改为\就可以

 链接伪类

a:link{属性:值;}   链接默认状态   a{属性:值;}是一样的

a:visited{属性:值;} 链接访问之后的状态

a:hover{属性:值;}  鼠标放上去显示的状态

a:active{属性:值;}    链接激活的状态

:focus{属性:值;}       获取焦点

注意:如果四个链接伪类都使用，按顺序书写。

背景属性的连写

语法

不分先后顺序

background:bg-colorbg-imageposition/bg-sizebg-repeatbg-originbg-clipbg-attachmentinitial|inherit;
值说明CSS
background-color 指定要使用的背景颜色 1
background-position 指定背景图像的位置 1
background-size 指定背景图片的大小 3
background-repeat 指定如何重复背景图像 1
background-origin 指定背景图像的定位区域 3
background-clip 指定背景图像的绘画区域 3
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-image 指定要使用的一个或多个背景图像 1

 

CSS选择器权重：

权重值是256进制数，有多个选择器权重值相加

这只是为了便于理解，才写了一串权重数字。严格意义上来说就算100个标签也干不过一个类。

 

!important Infinity
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0

 

◆浏览器默认文字大小

浏览器默认文字大小：16px

行高：是基线与基线之间的距离

行高=文字高度+上下边距

 

 

一行文字行高和父元素高度一致的时候，垂直居中显示。

◆垂直方向外边距合并

两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。

    <div class="one"></div>
    <div class="two"></div>
        .one{
            width: 300px;
            height: 300px;
            background: red;
            margin-bottom: 20px
        }
        .two{
            width: 300px;
            height: 300px;
            background: orange;
            margin-top: 100px;
        }

◆嵌套的盒子外边距塌陷 (margin)

解决方法:  1  给父盒子设置边框

　　　　　（给父盒子设置border就会把这个盒子当作一个整体，就会依据父盒子运动；没有设置border，子盒子就会以浏览器为依据运动。）

           　　2给父盒子overflow:hidden;   bfc 格式化上下文

http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

.father{
    width: 300px;
    height: 300px;
    background: red;
}
.son{
    width: 100px;
    height: 100px;
    background: orange;
    padding-top: 30px;
}

 

 
padding会改变盒子的大小，并不会改变盒子的位置。
  
.father{
    width: 300px;
    height: 300px;
    background: red;
}
.son{
    width: 100px;
    height: 100px;
    background: orange;
    margin-top: 30px;
}

 

 


 
外边距塌陷  

 

 

１.1 默认文字大小

  16px

１.2 行高

行高=文字大小+上下间距

在盒子内，一行文字行高和盒子的高度相等，这行垂直居中。

行高是可以继承的。

◆行高单位

嵌套盒子的行高继承

行高单位

父盒子文字大小

子盒子文字大小

子盒子行高

60px

20px

40px

60px

2em

20px

40px

40px

250%

20px

40px

50px

3

20px

40px

120

 

 

 

 

２  盒子模型

作用：页面布局。

２.1 Border

  border-style  

          solid    实线

          dotted   点线

          Dashed  虚线

２.2 连写

  Border: 1px  solid  #006600;

 Border-left | right | bottom | top

２.3 border-collapse:collapse;  边框合并

２.4 内边距(padding)

Padding:  left  | right  |  bottom  |  top

２.5 内边距连写

Padding:  0  12px  13px  14px;

Padding:  12px  20px  30px;

２.6 影响盒子大小

border会影响盒子大小

内边距影响盒子大小。

盒子宽度=定义宽度+边框粗细+左右内边距

嵌套关系时，子盒子不超过父盒子宽度，只要内边距不超过父盒子宽度，内边距不会撑大父盒子。

２.7 外边距(margin)

Margin:  left | right | top  |bottom

２.8 外边距连写

Margin: 12px 13px 14px 15px;

Margin:12px  13px  14px;

２.9 垂直方向外边距合并

2个盒子垂直方向，同时定义了垂直方向外边距，发生合并，取的是最大值。
   

２.10    外边距塌陷

解决方案:

◆给父盒子加border

◆overflow:hidden;  bfc

 

２.11    行内元素可以定义左右的内外边距，上下会被忽略掉。

  行内块可以定义内外边距。

 

文档流（标准流）

元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。

浮动布局

float:  left   |   right

特点：

★元素浮动之后不占据原来的位置（脱标）

★浮动的盒子在一行上显示

★行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）

 

１.1 浮动的作用

◆文本绕图

◆制作导航

◆网页布局

初始化标签，尽量减少使用用通配符 * ，因为它会解读所有标签，消耗浏览器资源。

　　li会继承ul的 

 

清除浮动

当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。

◆清除浮动不是不用浮动，清除浮动产生的不利影响。

◆清除浮动的方法

clear: left  |  right  | both

工作里用的最多的是clear:both;

★额外标签法

 在最后一个浮动元素后添加标签,。

如果有多个浮动，这样会影响浏览器效率

 

★给父集元素使用overflow:hidden;    bfc

  如果有内容出了盒子，不能使用这个方法。

 

★伪元素清除浮动  推荐使用

 

 IE浏览器亲测有效：

        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .clearfix{
            zoom: 1;
        }

 

 

CSS初始化

 

腾讯：

 

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

 

body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}

 

a{color:#2d374b;text-decoration:none}

 

a:hover{color:#cd0200;text-decoration:underline}

 

em{font-style:normal}

 

li{list-style:none}

 

img{border:0;vertical-align:middle}

 

table{border-collapse:collapse;border-spacing:0}

 

p{word-wrap:break-word}

 

 

 

新浪：

 

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}

 

body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}

 

ul,ol{list-style-type:none;}

 

select,input,img,select{vertical-align:middle;}

 

a{text-decoration:none;}

 

a:link{color:#009;}

 

a:visited{color:#800080;}

 

a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

 

 

淘宝：

 

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

 

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

 

h1, h2, h3, h4, h5, h6{ font-size:100%; }

 

address, cite, dfn, em, var { font-style:normal; }

 

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

 

small{ font-size:12px; }

 

ul, ol { list-style:none; }

 

a { text-decoration:none; }

 

a:hover { text-decoration:underline; }

 

sup { vertical-align:text-top; }

 

sub{ vertical-align:text-bottom; }

 

legend { color:#000; }

 

fieldset, img { border:0; }

 

button, input, select, textarea { font-size:100%; }

 

table { border-collapse:collapse; border-spacing:0; }

 

 

 Overflow

定位

定位方向: left  | right  | top  | bottom

◆position:static;  静态定位。默认值，就是文档流。

◆绝对定位

Position:absolute;

特点：

★元素使用绝对定位之后不占据原来的位置（脱标）

★元素使用绝对定位，位置是从浏览器出发。

★嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。

★嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。

★给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）

◆相对定位

Position: relative;

特点：

★使用相对定位，位置从自身出发。

★还占据原来的位置。

★子绝父相（父元素相对定位，子元素绝对定位）

★行内元素使用相对定位不能转行内块

◆固定定位

Position:fixed;

特点：

★固定定位之后，不占据原来的位置（脱标）

★元素使用固定定位之后，位置从浏览器出发。

★元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）

 

定位的盒子居中显示

★:margin:0 auto;  只能让标准流的盒子居中对齐。

★定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)

 标签包含规范

◆div可以包含所有的标签。

◆p标签不能包含div h1等标签。

◆h1可以包含p，div等标签。

◆行内元素尽量包含行内元素，行内元素不要包含块元素。

 

规避脱标流

◆尽量使用标准流。

◆标准流解决不了的使用浮动。

◆浮动解决不了的使用定位。

标准流：margin-left:auto; 左边往右边冲，冲不动了，停下来

margin-left:auto margin-right:auto  margin: 0 auto;文档流左右往中间冲，势均力敌停下来

 

 
<div class="father">
    <div class="son"></div>
</div>

 

 

 

vertical-align图片和文字垂直居中对齐

vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;

 

 

Css可见性

overflow:hidden;   溢出隐藏   

visibility:hidden;   隐藏元素    隐藏之后还占据原来的位置。

display:none;      隐藏元素    隐藏之后不占据原来的位置。

display:block;     元素可见

display:none  和display:block  常配合js使用。

 

    
    <a href="#div1">div1</a>
    <a href="#div2">div2</a>
    <a href="#div3">div3</a>
    <div class="box">
        <div class="div1" id="div1">div1</div>
        <div class="div2" id="div2">div2</div>
        <div class="div3" id="div3">div3</div>
    </div>
    .box,.div1,.div2,.div3{
        width: 300px;
        height: 300px;
        overflow: hidden;
    }
    .div1{
        background: red;
    }
    .div2{
        background: blue;
    }
    .div3{
        background: green;
    }

 

css之内容移除（网页优化）

◆使用text-indent:-5000em;

 设置h1对SEO更友好：

 

   
    <div class="logo">
        <h1><a href="#">搜狐</a></h1>
    </div>
    .logo{
        width: 143px;
        height: 76px;
        background: url(logo.png);
    }
    a{
        display: inline-block;/*行内元素不可以设置宽高和缩进*/
        text-indent: -5000em;
    }

 

◆将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏。



１  emmet快捷键：

emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。

２  html:

２.1 生成结构的快捷键：

！+ tab,可以生成html5的结构代码。

２.2 生成id名和类名

标签名.类名#id名+tab

没有标签名.类名+tab ==>div

２.3 生成同级元素：

标签名+标签名+标签名 “+”tab

２.4 生成子类标签

标签名>子标签名>子标签名>子标签名+tab

标签名>子标签名>子标签名>子标签名^^子标签名+tab

２.5 带固定数量的标签:

    ul>li*5+tab

２.6 带有序号名称   

ul>li.abc$*3 + tab

２.7 生成带有内容的标签：

ul>li>a{item}*5

３  css

width:30px==>w30+tab

  Height:30px==>h30+tab

  Margin:30px==>mg30+tab

Padding:30px==> pd30+tab

Line-height:12px==>lh12px+tab

Background==>bg+tab

案例首页

    
  1 <body>
  2     <div class="header clearfix">
  3         <div class="logo fl"><img src="images/logo.jpg" alt=""></div>
  4         <div class="search fr"><input type="text"><input type="button"></div>
  5     </div>
  6 
  7     <div class="nav clearfix">
  8         <div class="nav-con">
  9             <ul>
 10                 <li><a href="#">首页</a></li>
 11                 <li><a href="#">智能</a></li>
 12                 <li><a href="#">手机</a></li>
 13                 <li><a href="#">电脑</a></li>
 14                 <li><a href="#">配件</a></li>
 15                 <li><a href="#">服务支持</a></li>
 16                 <li><a href="#">关于尚合</a></li>
 17             </ul>
 18         </div>
 19     </div>  
 20 
 21     <div class="banner clearfix"><img src="images/banner.jpg" alt=""></div>
 22 
 23     <div class="mes clearfix">
 24         <div class="mes-con">
 25             <div class="mes-con-l fl">最新公告：尚合Aone智能手机入网证已获取工信部门审批下发。尚合官网</div>
 26             <div class="mes-con-r fr">
 27                 <img src="images/zone.png" alt="">
 28                 <img src="images/weibo.png" alt="">
 29                 <img src="images/xinlang.png" alt="">
 30                 <img src="images/renren.png" alt="">
 31             </div>
 32         </div>
 33     </div>
 34 
 35     <div class="news clearfix">
 36         <div class="news-left fl">
 37             <div class="pro">
 38                 <img src="images/o.jpg" alt="">
 39                 新品发布
 40             </div>
 41             <div class="pro-pic"><img src="images\home_hot_01.png" alt=""></div>
 42             <div class="sj-l"><img src="images/left.png" alt=""></div>
 43             <div class="sj-r"><img src="images/right.png" alt=""></div>
 44         </div>
 45         <div class="news-cen fl">
 46             <div class="pro">
 47                 <img src="images/o.jpg" alt="">
 48                 新闻中心
 49             </div>
 50             <ul>
 51                 <li><a href="#" class="sorry">致歉公告</a></li>
 52                 <li><a href="#">首批尚合Aonet已全部售馨!</a></li>
 53                 <li><a href="#">【媒体报导】国产高性价比 尚合Aonet四核手机评测</a></li>
 54                 <li><a href="#">我司产品已经通过了国家强制性产品3C认证</a></li>
 55                 <li><a href="#">尚合Aone智能手机入网证已经获工信部门审批下发.</a></li>
 56                 <li><a href="#">我司通过ISO9001:2008国际质量管理体系认证</a></li>
 57             </ul>
 58         </div>
 59         <div class="news-right fr">
 60                 <div class="pro">
 61                     <img src="images/o.jpg" alt="">
 62                     技术与支持
 63                 </div>
 64                 <div class="tec">
 65                     <ul>
 66                         <li><a href="#">售后服务</a></li>
 67                         <li><a href="#">售后服务</a></li>
 68                         <li><a href="#">售后服务</a></li>
 69                         <li><a href="#">售后服务</a></li>
 70                     </ul>
 71                     <p>深圳市汇聚众合科技发展有限公司</p>
 72                     <p>服务热线：400-633-7922</p>
 73                 </div>
 74         </div>
 75     </div>
 76 
 77     <div class="footer">
 78         <div class="footer-con">
 79             <dl>
 80                 <dt>尚和首页</dt>
 81                 <dd>返回首页</dd>
 82             </dl>
 83             <dl>
 84                 <dt>尚和首页</dt>
 85                 <dd>返回首页</dd>
 86             </dl>
 87             <dl>
 88                 <dt>尚和首页</dt>
 89                 <dd>返回首页</dd>
 90             </dl>
 91             <dl>
 92                 <dt>尚和首页</dt>
 93                 <dd>返回首页</dd>
 94             </dl>
 95         </div>
 96     </div>
 97     <div class="bot">
 98             深圳市会居中和优先公司深圳市会居中和优先公司深圳市会居中和优先公司深圳市<br>
 99             会居中和优先公司深圳市会居中和优先公司深圳市会居中和优先公司
100     </div>
101     
102 </body>
html结构

 

 
  1  body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,input{
  2             margin: 0;
  3             padding: 0;
  4         }
  5         img{
  6             border: 0 none;
  7         }
  8         li{
  9             list-style: none;
 10         }
 11         input{
 12             border: 0 none;
 13             outline-style: none;
 14         }
 15         .fl{
 16             float: left;
 17         }
 18         .fr{
 19             float: right;
 20         }
 21         .header{
 22             width: 980px;
 23             height: 39px;
 24             margin: 20px auto 0px;
 25         }
 26         .header .logo{
 27             width: 179px;
 28             height: 39px;
 29         }
 30         .search{
 31             width: 195px;
 32             height: 30px;
 33             border: 1px solid #ececec;
 34         }
 35         .search input[type="text"]{
 36             width: 165px;
 37             height: 30px;
 38             vertical-align: top;
 39         }
 40         .search input[type="button"]{
 41             width: 30px;
 42             height: 30px;
 43             vertical-align: top;
 44             background: url("images/search2.jpg") no-repeat;
 45         }
 46         .nav{
 47             height: 55px;
 48             border-top: #e1e1e1 solid 1px;
 49             background: url("images/nav_bg.png");
 50         }
 51         .nav .nav-con{
 52             width: 980px;
 53             margin: 0 auto;
 54         }
 55         .nav-con li{
 56             float: left;
 57         }
 58         .nav-con ul li a{
 59             display: inline-block;
 60             height: 55px;
 61             padding: 0 30px;
 62             line-height: 55px;
 63             color: #000;
 64             text-decoration: none;
 65             background: url("images/nav_bg-line.png") no-repeat right;
 66         }
 67         .nav-con ul li a:hover{
 68             color: #7db70b;
 69         }
 70         .banner{
 71             width: 980px;
 72             margin: 0 auto;
 73         }
 74         .mes{
 75             height: 32px;
 76             border: #efefef solid 1px;
 77             background: #fbfbfb;
 78             margin-bottom: 15px;
 79         }
 80         .mes-con{
 81             width: 980px;
 82             height: 32px;
 83             overflow: hidden;
 84             margin: 0 auto;
 85         }
 86         .mes-con-l{
 87             font-size: 12px;
 88             height: 32px;
 89             line-height: 32px;
 90         }
 91         .mes-con-r{
 92             height: 16px;
 93             margin-top: 8px;
 94         }
 95         .news{
 96             width: 980px;
 97             margin: 0 auto 15px;
 98         }
 99         .news-left,.news-cen,.news-right{
100             border: #e4e4e4 solid 1px;
101             height: 224px;
102         }
103         .news-left{
104             width: 310px;
105             position: relative;
106         }
107         .news-cen{
108             width: 373px;
109             margin-left: 12px;
110         }
111         .news-right{
112             width: 268px;
113         }
114         .pro{
115             margin: 14px 0 0 6px;
116         }
117         .pro-pic{
118             position: absolute;
119             left: 45px;
120             top: 54px;
121         }
122         .news-left .sj-l{
123             position: absolute;
124             left: 20px;
125             bottom: 75px;
126         }
127         .news-left .sj-r{
128             position: absolute;
129             right: 20px;
130             bottom: 75px;
131         }
132         .news-cen ul{
133             margin: 10px 17px 0;
134 
135         }
136         .news-cen ul li{
137             height: 27px;
138             line-height: 27px;
139             border-bottom: #dcdcdc 1px dashed;
140         }
141         .news-cen ul li a{
142             text-decoration: none;
143             color: #111;
144             font-size: 12px;
145         }
146         .news-cen ul li a.sorry{
147             color: red;
148             font-weight: 700;
149         }
150         .tec{
151             margin: 10px 0 30px 28px;
152         }
153         .tec ul{
154             margin-bottom: 30px;
155         }
156         .tec li{
157             height: 12px;
158             border-left: 3px solid #7ab800;
159             margin-top: 10px;
160             padding-left: 5px;
161             line-height: 12px;
162             font-size: 12px;
163         }
164         .tec li a{
165             color: #111;
166             text-decoration: none;
167         }
168         .tec p{
169             line-height: 18px;
170             font-size: 12px;
171         }
172 
173         .footer{
174             height: 280px;
175             background: #2d2d2d;
176             border: 1px dashed #414141;
177         }
178         .footer-con{
179             width: 980px;
180             margin: 0 auto;
181         }
182         .footer-con dl{
183             float: left;
184             margin-top: 20px;
185             margin-right: 40px;
186             font-size: 12px;
187         }
188         .footer-con dl dt{
189             color: #c0c0c0;
190         }
191         .footer-con dl dd{
192             color: #707070;
193             margin-top: 20px;
194         }
195         .bot{
196             background: #2d2d2d;
197             height: 54px;
198             text-align: center;
199             padding-top: 30px;
200             font-size: 12px;
201         }
202 
203         .clearfix:after{
204             content: "";
205             display: block;
206             clear: both;
207         }
208         .clearfix{
209             zoom: 1;
210         }
css样式

 

 

 

 

posted @ 2018-08-05 01:33  清扬0_0  阅读(304)  评论(0)  编辑  收藏  举报