HTML-CSS基础笔记

文章目录

HTML-CSS基础笔记
一、html的发展历程
二、常用声明方式
三、 HTML的注释
四、常用的标签
- 4.1、img标签
- 4.2、 a标签
- 4.3、 em标签
- 4.4、 strong和b 标签
- 4.5、 pre标签
- 4.6、 font标签
- 4.7、ul无需列表和ol有序列表
- 4.8、 dl定义列表
- 4.9、embed音乐
- 4.10、meta
- 4.11、设置icon图标
- 4.12、table表格
- 4.13、表单
- 4.14、标签语义化
五、常用选择器
- 5.1、 id选择器
- 5.2、 class选择器（类选择器）
- 5.3、子选择器
- 5.4、选择器分组
- 5.5、后代选择器
- 5.6、伪类选择器
- 5.7、伪元素
- 5.8、属性选择器
- - 5.8.1、[属性名]
  - 5.8.2、[属性名=“属性值”]
  - 5.8.3、[属性名^="属性值"]
  - 5.8.4、[属性名$="属性值"]
  - 5.8.5、[属性名*=“属性值”]
  - 5.8.6、title属性。
  - 5.8.7、`:first-child`
  - 5.8.8、`:last-child`
  - 5.8.9、`:nth-child`
  - 5.8.10、`:first-of-type`
  - 5.8.11、`:last-of-type`
  - 5.8.12、`:nth-of-type`
  - 5.8.13、`:last-child`和`:last-of-type`对比
- 5.9、后一个兄弟元素选择器
- 5.10、否定伪类
- 5.11、样式的继承
- 5.12、选择器的优先级
- 5.12、 a的伪类
六、 CSS样式的书写方式
- 6.1、内联样式
- 6.2、内部样式
- 6.3、css书写到外部文件中（推荐使用）
七、内联元素和块元素
- 7.1、块元素
- 7.2、内联元素（行内元素）
- 7.3、内联元素和块元素的主要作用
八、文本样式
九、盒子模型
- 9.1、盒子的4个部分
- 9.2、盒子的简单设置
- - 9.2.1、设置模型的边框的三要素
  - 9.2.2、盒子的大小
- 9.3、内边距padding
- 9.4、外边距margin
- - 9.4. 1、基本设置
  - 9.4.2、设置外边距盒子移动的特点
  - 9.4.3、外边距设置为auto时
  - - 1、margin在水平上设置为auto
    - 2、margin在垂直上设置为auto就相当于设置为0
  - 9.4.4、margin值得数量
  - 9.4.5、垂直外边距的重叠
  - - 1、兄弟元素：
    - 2、父子元素：
    - 3、设置子元素垂直方向相邻的外边距不设置为父元素的方法：
十、默认样式
十一、内联样式与盒子模型
十二、CSS常见属性
- 12.1、基本属性
- 12.2、visibility属性
- 12.3、overflow属性
- 12.4、display属性
- 12.5、文本元素
- 12.6、背景属性
- - 背景属性连写
- 12.7、CSS初始化
十三、文档流
- 13.1、文档流的特点
十四、浮动和BFC
- 14.1、浮动
- - 14.1.1、开启浮动后块元素和内联元素的特点
  - 14.1.2、浮动后造成高度塌陷
  - 14.1.3、清除浮动
- 14.2、BFC 的相关信息
十五、定位
- 15.1、静态定位
- 15.2、绝对定位
- 15.3、相对定位
- 15.4、固定定位
十六、综合练习

一、html的发展历程

1991年：HTML推出
1993年6月：HTML+
1995年11月：HTML2.0
1997年1月：HTML3.2（W3C推荐）
1999年12月HTML4.01（W3C推荐）
2000年底：XHTML1.0（W3C推荐）
2012年：HTML5（W3C推荐）
2013年XMTL5

二、常用声明方式

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

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

三、 HTML的注释

<!-- 这就是HTML的注释内容 ，浏览器不会编译。--><!-- -->/* 这就是css注释的内容，浏览器不会编译*/ /* */

设置网页的编码：<meta charset="utf-8" />书写在head标签中

四、常用的标签

4.1、img标签

属性：
src：照片的路径
alt：当照片不存在时显示文字

title：提示文本鼠标放到图片上显示的文字

with：照片宽度
height：照片的高度
图片的格式

JPEG(JPG)·JPG支持的颜色比较多，图片可以压缩，但是不支持图片透明·一般用来保存颜色丰富的照片
GIF·GIF支持的颜色比较少，支持简单透明，支持动态图·一般用于颜色比较点单一或者动态度
PNG·PNG支持的颜色比较多，但支持复杂透明·可以用于颜色复杂的透明图片

4.2、 a标签

属性：

href：跳转的路径
target：打开连接的位置
text-decoration: overline: 上划线
text-decoration: underline:下划线
text-decoration: none:去掉下划线
a标签的四种状态

_blank：打开一个新的网页
_parent：在父窗口中打开
_self：当前窗口打开（默认值）
_parent：在父窗口中打开
a标签的位置移动

<a href="index.html#top"><"/a>跳转到index.html页面的id属性值为top的位置
<a href="#top"><"/a>跳转到当前页面的id属性值为top的位置。

打开电子邮件

<a href="mailto:wm76868@sina.com">发送电子邮件</a>

注意： 计算机必须有电子邮件才可以打开

4.3、 em标签

表示字体倾斜

<em>这就是em标签</em>

4.4、 strong和b 标签

都表示字体加粗

<strong>这是strong标签</strong>
<b>这是b标签</b>

4.5、 pre标签

pre表示一个预格式标签，保存格式的，不会忽略空格
code标签专门用来标示代码，但是不保存格式，所以一般pre和code一起使用

<pre class="code">范例：<code>这标示一段代码，但是这里写js代码依然可以执行。</code>
</pre>

4.6、 font标签

font-size：————字体大小
font-family: 华文彩云;————字体样式
font-style: italic;————文字倾斜
font-weight: bold;————文字加粗
line-height: 30px;————行高。行间距 = 行高 - 字体大小

例如：font: 30px/60px "微软雅黑";字体30px,行高60px 可以简写成：font: italic bold 60px "微软雅黑";

**注意：**字体位于一行的中央，行高的大小等于字体的大小+字体到一行的上边距离+字体到一行的下边距离。

范例：

font{font-size: 50px;font-family: 华文彩云;font-style: italic;文字倾斜font-weight: bold;文字加粗
}
font{font: italic small-caps bold 60px "微软雅黑";font: 30px/60px "微软雅黑";/*字体30px,行高60px*/
}

4.7、ul无需列表和ol有序列表

list-style-type:none;去掉前面的图标
margin:0;设置外边距为0
padding:0;设置内边距为0
display:block;列表垂直显示
display:inline;列表水平显示

<ul><li>这是无序列表</li><li>这是无序列表</li><li>这是无序列表</li><li><ol><li>这是有序列表</li><li>这是有序列表</li><li>这是有序列表</li></ol></li>
</ul>

4.8、 dl定义列表

定义列表用来对一些词汇或内容的定义

dt：被定义的内容

dd：对定义内容的描述

<dl><dt>这是标题</dt><dd>这是对标题的描述1</dd><dd>这是对标题的描述2</dd><dt>这又是标题</dt><dd>这又是对标题的描述</dd>
</dl>

4.9、embed音乐

范例：

<embed src="E:\音乐\DJ Leek - 千年等一回ProgHouse Remix [mqms].mp3" hidden="false" >

4.10、meta

关键字

<meta name="keywords" content="网站开发,java培训,大前端开发,UI设计培训">

网页描述

<meta name="description" content="这是一个小团队，主要负责Java培训，大前端培训，UI设计培训的团队">

网页重定向

 <meta http-equiv="refresh" content="5;http://baidu.com">

4.11、设置icon图标

<link rel="icon" href="0.jpg">

4.12、table表格

tr：表示行

th：表格标题、边框颜色、内容垂直对齐

td：表示列

caption：表头

border：边框

width：表格宽度

height：表格高度

cellspacing：单元格与单元格的距离

cellpadding：内容距边框的距离

colspan：合并同一行上的单元格

rowspan：合并同一列上的单元格

align=”left | right | center”

如果直接给表格用align=”center” 表格居中

如果给tr或者td使用，tr或者td内容居中。

bgcolor=”red” 背景颜色。

border-color：边框颜色

valign：内容垂直对齐方式 top：上，middle中，bottom：下

<table><caption>表头</caption><tr><td valign="top">第一列</td><td>第二列</td><td>第三列</td></tr><tr><td>第一列</td><td>第二列</td><td>第三列</td></tr>
</table>

4.13、表单

属性：

action：表单提交路径

method=”get | post” 提交方式

get通过地址栏提供（传输）信息，安全性差。

post安全性高。

文本输入框

maxlength="6" 限制输入字符长度

readonly=”readonly” 将输入框设置为只读状态（不能编辑）

disabled="disabled" 输入框未激活状态

name="username" 输入框的名称

value="大前端" 将输入框的内容传给处理文件

placeholder：提示文字

密码输入框

密码：<input type="password" name="pwd" placeholder="请输入密码">

单选框

<input type="radio" name="gender" checked="true" value="男">男
<input type="radio" name="gender" value="女">女

**注意：**只有将name的值设置相同的时候，才能实现单选效果。

checked=”checked” 设置默认选择项。

下拉列表

<select multiple="multiple"><option>北京</option><option>南京</option><option selected="selected">天津</option><option>上海</option>
</select>

multiple=”multiple” 将下拉列表设置为多选项

selected=”selected” 设置默认选中项目

下拉列表分组

<select multiple="multiple"><option>北京</option><optgroup label="地址"><option>南京</option><option selected="selected">天津</option><option>上海</option></optgroup>
</select>

optgroup：对下拉列表进行分组。

label：分组名称。

checked=”checked”：设置默认选中项

多行文本框

<textarea cols="130" role="500"></textarea>

cols 控制输入字符的长度。

rows 控制输入的行数

文件上传控件

<input type="file" name="file">

文件提交按钮

点击可以提交该表单的数据

<input type="submit" value="提交">

普通按钮

<input type="button" value="普通按钮">

一般情况需要配合js一起使用

图片按钮

<input type="image" src="3.jpg">

重置按钮

将信息重置到默认状态

<input type="reset">

表单信息分组

<form action="#" method="POST"><fieldset><legend>员工信息</legend>姓名：<input type="text" name="name" placeholder="请输入姓名"><br>年龄：<input type="text" name="age" placeholder="请输入年龄"><br></fieldset><fieldset><legend>公司</legend>公司名称：<input type="text" name="company" placeholder="请输入公司名称"><br>成立时间：<input type="date" name="datetime" placeholder="请输入公司成立时间"></fieldset>
</form>

fieldset：对表单信息分组

legend：表单信息分组名称

html5补充表单控件

<!-- 日期控件 -->
<input type="date">
<!-- 时间控件 -->
<input type="time">
<!-- 滑块控件 -->
<input type="range">

4.14、标签语义化

好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。

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

标签语义化意义：

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）。

五、常用选择器

5.1、 id选择器

通过元素的id属性选中唯一的元素（id是唯一的不能重复）
ID 选择器前面有一个 # 号也称为棋盘号或井号

范例：

HTML里边：<div id="intro"></div>
css样式里边：
#intro {font-weight:bold;
}

5.2、 class选择器（类选择器）

class选择器和id选择器类似，但是class选择器可以重复 class选择器前面用 **.**开头

范例：

HTML里边：<div class="intro"/>
css样式里边：
.intro{font-weight:200px;
}

5.3、子选择器

子选择器就只能选中第一级子元素。后代选择器可以选择后代的所有元素，但是子选择器只能选择第二代元素>

.div1 > span{background-color: yellow;
}

<div class="div1">这是第一级元素<span>这是第二级元素</span><div><span>这是第三级元素</span></div>
</div>

执行结果：

5.4、选择器分组

通过选择器分组可以选中多个选择器对应的元素
语法：选择器1 , 选择器2,选择器N{}

#top,p,h1{background-color: yellow;
}

5.5、后代选择器

选中指定元素的后代元素

div span{background-color: yellow;
}

注意：div span 前面没有 #

<div><span>这是选中的数据</span><em>这是元素在div中，但是没有在span元素中，所以没有选中</em><span>这里的数据呢？</span>
</div>

5.6、伪类选择器

表示元素的一种特殊的状态
**例如：**点击过的超链接，点击时的超链接，访问后的超链接，获取焦点失去焦点……

:link： 未访问时的状态（鼠标点击前显示的状态）
:visited： 访问过的链接这个元素里面只能加字体颜色
:active：超链接点击时的状态IE6之前不支持
:hover ：鼠标移动上去的状态IE6之前不支持
:focus ：取焦点时状态
::selection：选中文本的状态

范例：

a:link{background-color: red;
}
a:visited{color: yellow;
}
a:hover{color: lightcoral;
}
p::selection{background-color: #8B4513;
}

5.7、伪元素

伪元素表示元素中一些特殊的位置。

:first-letter ：表示第一个字
:first-line ：表示第一行
:before ：表示显示在最前面
:after ：表示显示在最后面的内容

范例：

p:first-letter{color: red;font-size: 30px;
}
p:first-line{background-color: royalblue;
}p:before{color: red; content: "这是现实在最前面的内容";
}
p:after{color: yellow;content: "这是显示在最后面的内容";
}

5.8、属性选择器

**作用：**可以根据元素中的属性或者属性值选取指定的元素。

5.8.1、[属性名]

选取含有指定属性的元素。

 span[title]{  /*选中具有title属性的*/color: red;
}

 <span>这是p标签1</span>             <!-- 没有选中，因为没有title属性 --><span title="hello">这是p标签2</span>  <!-- 选中了，因为只选中title属性的，与属性值没有关系 --><span title="abc">这是p标签3</span>

5.8.2、[属性名=“属性值”]

选取含有属性名等于属性值的元素。属性值的双引号加不加都可以（推荐不加）

span[title=hello]{  /*选中具有title属性并且属性值等于hello的*/color: red;
}

 <span>这是p标签1</span>             <!-- 没有选中，因为没有title属性 --><span title="hello">这是p标签2</span>  <!-- 选中了，因为只选中title属性的，与属性值没有关系 --><span title="abc">这是p标签3</span>

5.8.3、[属性名^=“属性值”]

选取该属性的属性值以XX 开头的元素

span[title^="ab"]{/* 选取title属性值以ab开头的元素 */color: slateblue;
}

<span title="abbb">这是属性选择器</span>
<span title="abcc">这是属性选择器</span>
<span title="xdfa">这是属性选择器</span>

5.8.4、[属性名$=“属性值”]

选取该属性的属性值以XX 结尾的元素

span[title$="wx"]{/* 选取title属性值以wx结尾的元素 */color: lightcoral;
}

<span title="abwx">这是属性选择器</span>
<span title="abswx">这是属性选择器</span>
<span title="xdfa">这是属性选择器</span>

5.8.5、[属性名*=“属性值”]

选取该属性的属性值包含XX 的元素

span[title*="c"]{/* 选取包含c的元素 */color: red;
}

<span title="abcwx">这是属性选择器</span>
<span title="abswcx">这是属性选择器</span>
<span title="xdfa">这是属性选择器</span>

5.8.6、title属性。

元素包含title属性值得，鼠标移到上面显示title的属性值。

<span title="鼠标移动上去显示该文字">鼠标移动上来呀。</span>

5.8.7、`:first-child`

选中父元素的第一个子元素

p:first-child{/* 选中父元素中的第一个p元素 */background-color: red;
}

范例1：

<body><p>p元素1</p><p>p元素2</p><p>p元素3</p>
</body>

注意：p元素1被选中，因为 body的第一个父元素是 p元素1

范例2

<body><p>p元素1</p><!-- 父元素是body，p元素是body的第一个子元素.选中 这个子元素是body的第一个子元素 --><p>p元素2</p><!-- 父元素是body，但是这个p元素是body的第二个子元素。不选中选中 --><p>p元素3</p><!-- 父元素是body，但是这个p元素是body的第三个子元素。不选中选中 --><div><p>p元素4</p><!-- 父元素是div，p元素是div的第一个子元素.选中 这个子元素是body的第一个子元素 --><p>p元素5</p><!-- 父元素是div，但是这个p元素是div的第二个子元素。不选中选中 --></div>
</body>

范例3

body > p:first-child{   /* 必须是body的第一级子元素中第一个p元素 */background-color: saddlebrown;
}

<body><p>这是第一个p元素</p><!-- 父元素是body，p元素是body的第一个子元素.选中 这个子元素是body的第一个子元素 --><p>这是第一个p元素</p><!-- 父元素是body，但是这个p元素是body的第二个子元素。不选中选中 --><p>这是第一个p元素</p><!-- 父元素是body，但是这个p元素是body的第三个子元素。不选中选中 --><div><p>这是第一个p元素</p><!-- p元素是div的第一个子元素.但是是body的第二级子元素，所以不选中这个子元素是body的第一个子元素 --><p>这是第一个p元素</p><!-- p元素是div的第二个子元素并且是body的第二季子元素。不选中 --></div>
</body>

5.8.8、`:last-child`

选中父元素的最后一个子元素

p:last-child{/* 父元素的最后一个p元素 */background-color: red;
}

<body><p>p元素1</p><p>p元素2</p><p>p元素3</p><div><p>p元素4</p><p>p元素5</p></div>
</body>

5.8.9、`:nth-child`

:nth-child(N)

选中父元素的第N个子元素

p:nth-child(2){ /* 选中父元素的第二个子元素 */background-color: red;
}

<p>p元素1</p>
<p>p元素2</p>
<p>p元素3</p>
<div><p>p元素4</p><p>p元素5</p>
</div>
<p>p元素6</p>
<p>p元素7</p>

:nth-

:nth-child(even)

选中父元素的偶数位置的子元素

p:nth-child(even){/* 选中父元素偶数位置的子元素 */background-color: red;
}

    <p>p元素1</p><p>p元素2</p><p>p元素3</p><div><p>p元素4</p><p>p元素5</p></div><p>p元素6</p><p>p元素7</p>

:nth-child(odd)

选中父元素的奇数位置的子元素

p:nth-child(odd){/* 选中父元素偶数位置的子元素 */background-color: red;
}

<p>p元素1</p>
<p>p元素2</p>
<p>p元素3</p>
<div><p>p元素4</p><p>p元素5</p>
</div>
<p>p元素6</p>
<p>p元素7</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fqswV217-1578805877270)(C:\Users\start\AppData\Roaming\Typora\typora-user-images\image-20200111131902521.png)]

5.8.10、`:first-of-type`

选中当前类型中的第一个

p:first-of-type{background-color: red;
}

<p>p元素1</p>
<p>p元素2</p>
<p>p元素3</p>
<div><p>p元素4</p><p>p元素5</p>
</div>
<p>p元素6</p>
<p>p元素7</p>

5.8.11、`:last-of-type`

选中当前类型中的最后一个

p:last-of-type{background-color: red;
}

<p>p元素1</p>
<p>p元素2</p>
<p>p元素3</p>
<div><p>p元素4</p><p>p元素5</p>
</div>
<p>p元素6</p>
<p>p元素7</p>

5.8.12、`:nth-of-type`

:nth-of-type(N)

选中了类型中的的N个

p:nth-of-type(4){background-color: red;
}

<p>p元素1</p>
<p>p元素2</p>
<p>p元素3</p>
<div><p>p元素4</p><p>p元素5</p>
</div>
<p>p元素6</p>
<p>p元素7</p>

:nth-of-type(even)

p:nth-of-type(even){background-color: red;
}

<p>p元素1</p>
<p>p元素2</p>
<p>p元素3</p>
<div><p>p元素4</p><p>p元素5</p>
</div>
<p>p元素6</p>
<p>p元素7</p>

:nth-of-type(odd)

p:nth-of-type(odd){background-color: red;
}

<p>p元素1</p>
<p>p元素2</p>
<p>p元素3</p>
<div><p>p元素4</p><p>p元素5</p>
</div>
<p>p元素6</p>
<p>p元素7</p>

5.8.13、`:last-child`和`:last-of-type`对比

:last-child：只能查找父元素下面的第一个元素
:last-of-type：只能查找当前元素的第一个，不管是父元素下的第几个

5.9、后一个兄弟元素选择器

可以选中后一个指定的元素

p+span：选中p标签后面的第一个span标签

范例：

p + span {/* 选中紧挨着p标签的span标签 */background-color: red;
}

<p>这是一个p标签</p>
<p>这是一个p标签</p>
<span>这是一个span标签哟，千万别看错了哈。<span>
<p>这是一个p标签</p>

修改一下代码

<p>这是一个p标签</p>
<p>这是一个p标签</p>
<div>这是一个div</div>
<span>这是一个span标签哟，千万别看错了哈。<span>
<p>这是一个p标签</p>
<!-- span标签就选不中了，因为span和p表中中就一个div隔着,因为只能选中紧挨着p标签的span -->

p ~ span：选中p标签后面的所有span标签

p ~ span { /* 选中p标签后面的所有span标签 */background-color: red;
}

<p>这是一个p标签</p>
<p>这是一个p标签</p>
<div>这是一个div</div>
<span>这是一个span标签哟，千万别看错了哈。<span>
<span>这是一个span标签哟，千万别看错了哈。<span>
<p>这是一个p标签</p>
<!-- 只要是在p标签后面的所有span标签都被选中，无论中有什么隔着都可以。 -->
</body>

5.10、否定伪类

选中多个元素，但除掉某些元素

语法：:not(选择器)

p:not(.hello){/* 选中全部的p元素，但是除了class=“hello”的元素 */background-color: saddlebrown;
}

<p>这是一个p标签</p>
<p class="hello">这是一个p标签</p>
<p>这是一个p标签</p>

5.11、样式的继承

在CSS样式中祖先元素的样式也会被后代元素所继承。

**注意：**背景相关的都不能继承，只要被最先元素设置了背景，后代元素不设置。后代元素的背景和祖先元素的背景一样，是因为背景默认是透明的。

<body><divstyle="color: red; font-size: 20px;">这是div中的元素<span>这是div的后代元素，这里会继承祖先元素中的所有样式，所以这里的字体会变红，字体会变到20px</span></div><span>这个的祖先元素是body，body没有样式，所以这里也不会有任何样式。</span>
</body>

5.12、选择器的优先级

当不同的选择器选择同一个元素，设置不同的样式时，最终执行优先级高的选择器。同一种选择器重复设置多次，后面的选择器会把前面的覆盖掉。

优先级如下

选择器	优先级	范例
内联样式	1000
id选择器	100
类和伪类	10
元素选择器	1	p/div

5.12、 a的伪类

a的伪类没有优先级，但是写的时候有顺序关系。

a:link : 未访问过

a:visited： 访问过

a:hover ： 鼠标移到上面

a:active : 点击时

六、 CSS样式的书写方式

6.1、内联样式

内联样式就是把css样式和html代码写在一起，不方便维护（不推荐使用）

例如：

<font color="red"></font>

6.2、内部样式

内部样式就是书写在body标签的外部

<style type="text/css">.top{color:red;}.longName {margin: 40px;color: deepskyblue;font-size: 40px;}</style>

6.3、css书写到外部文件中（推荐使用）

将样式书写到外部css文件中，然后通过link标签引入。

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

七、内联元素和块元素

7.1、块元素

块元素：独占一行的元素，无论数据有多少都独占一整行。例如：p、h1、h2……
**div：**这个标签没有任何语义，就是一个纯粹的块元素，并且不会对里面的数据设置任何默认值。

7.2、内联元素（行内元素）

内联元素指的是只占自身的大小的元素，不会占一整行数据，

常见的内联元素 a、img、iframe、span……

7.3、内联元素和块元素的主要作用

块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式。
一般情况下，只使用块元素包含内联元素，不会使用内联元素包含块元素。

注意：a标签中可以包含任意元素，但是不能包含它本身
p元素不能包含任何块元素

八、文本样式

添加文本的装饰效果，如：下划线、删除线……

text-transform:属性：

属性值：

lowercase:所有字母小写

uppercase:所有字母大写

capitalize:首字母大写

none:默认值，该大写就大写，该小写就小写。

text-decoration:属性：

属性值：

none————不添加任何线（默认值）
underline————下划线
overline————上划线
line-through————删除线

letter-spacing

letter-spacing: 0px

设置字符间距。————默认为0px

word-spacing

word-spacing: 0px

设置单词之间的距离，以空格区分，默认为0px text-align:————文本对其方式
属性值：

left—————文本靠左
right————文本靠右
center————文本居中
justify————两端对其，是通过文本空格的大小实现的

text-indent

text-indent: 2em;

指定文字缩进（单位：em或者px） Xem————移动X个文字

指定一个正直时，向右移动指定的像素或者X个文字

指定一个负值时，向左移动指定的像素或者X个文字

九、盒子模型

查看盒子的位置

9.1、盒子的4个部分

例如：在一个盒子里放一台电视机，电视机与盒子的边框之间隔着一层泡沫板，为了防止电视机摔坏。

1、内容区（content）——盒子里放东西的地方。内容区相当于电视机存放的位置。

2、内边距（padding）——盒子里放东西的地方到盒子边框的位置。内边距相当于电视机与盒子中间的距离，泡沫板的厚度。

3、边框：（border）——盒子的厚度。

4、外边距：（margin）—— 一个盒子与另一个盒子的距离。

9.2、盒子的简单设置

9.2.1、设置模型的边框的三要素

设置边框

border-width: ;边框的宽度;

一个值：四边的宽度。

两个值：上、下宽度

三个值：上、左和右、下宽度

四个值时：上、右、下、左宽度。成顺时针方向。

范例：

border-width: 2px;
border-width: 2px 50px;
border-width: 30px 60px 2px;
border-width: 1px 20px 10px 0px;

border-top-width: 20px;上边框

border-right-width:20px ;右边框

border-bottom-width:20px ;下边框

border-left-width:20px ;左边框

设置边框颜色

border-color: 边框的颜色;————变换和边框宽度类似

设置边框样式

border-style: 边框的样式；————变换和边框宽度类似

**solid:**实线
**double：**双线
**dotted：**点线
**dashed：**虚线

简写：

border：1px solid red;
border-left:1px solid red;
border-right: 3px double yellow;
border-top: 10px solid red;
border-bottom: 30px solid blue;

9.2.2、盒子的大小

width和height只设置盒子内容区的大小，而不是盒子的大小

盒子的大小 = 盒子内容区大小 + 盒子边框

9.3、内边距padding

指盒子的内容区与盒子边框的距离，元素的背景会延伸到内边距的位置，但是子元素不能占据父元素的内边距， 内边距会影响盒子的大小。

padding-top: ;：内容区到上边框的距离
padding-right: ;：内容区到有边框的距离
padding-bottom: ;：内容区到下边框的距离
padding-left: ;：内容区到左边框的大小

注意： 当子元素沾满父元素时，不会占据父元素的内边距的位置，只能占据内容区的位置。因为子元素是保存在内容区里面的。

范例：

.box1{width: 200px;height: 200px;border: 10px solid red;background-color: seagreen;padding-top: 100px;/*设置上内边距*/
}
.box2{width: 100%;height: 100%;/*把父元素的内容区沾满，但是不能占据内边距的位置*/background-color: yellow;
}

<div class="box1"><div class="box2"></div>
</div>

padding值的数量

一个值：四边的宽度。

两个值：上、下宽度

三个值：上、左和右、下宽度

四个值时：上、右、下、左宽度。成顺时针方向。

padding: 20px;
padding: 20px 1px;
padding: 20px 1px 100px;
padding: 100px 50px 1px 0px;

9.4、外边距margin

9.4. 1、基本设置

外边距：指当前盒子与其他盒子之间的距离，不会影响可见框的大小，但会影响盒子的位置 。

margin-top: ;盒子到上方的距离
margin-right: ;盒子到右方的距离
margin-bottom: ;盒子到下方的距离
margin-left: ;盒子到左方的距离
值为正数时，象右移动指定的位置。
值为负数时，象左移动指定的位置。

9.4.2、设置外边距盒子移动的特点

由于页面中的元素都是靠左、靠上摆放的。
注意：当设置上和左外边距时，会导致盒子自身的位置发生改变。但是，如果设置下、右外边距会改变其他盒子的位置，自身盒子的位置不会发生改变。

9.4.3、外边距设置为auto时

1、margin在水平上设置为auto

例如： margin: auto;左右外边距相等，也就是在父元素中居中
margin-left: auto;左外边距为最大。左边的外边距能设置多大，就自动设置为多大。
margin-right: auto;右边距为最大。右边的外边距能设置多大，就自动设置为多大

2、margin在垂直上设置为auto就相当于设置为0

9.4.4、margin值得数量

一个值：四边的宽度。

两个值：上、下宽度

三个值：上、左和右、下宽度

四个值时：上、右、下、左宽度。成顺时针方向。

特例：margin：0 auto；上下的外边距为0，左右相等，就是在父元素中居中。

9.4.5、垂直外边距的重叠

在网页中垂直方向的相邻外边距会发生外边距的重叠。所谓的外边距重叠

1、兄弟元素：

指兄弟元素之间的相邻外边距会取最大值而不是取和
如果不是相邻的或者不是垂直方向的是不会重叠的。

2、父子元素：

如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。

3、设置子元素垂直方向相邻的外边距不设置为父元素的方法：

让相邻的元素变为不相邻。

①可以在子元素和父元素之间添加一个其他的元素。
②把父元素的边框设置出来，不要设置为0px，证明有边框线隔着，就不相邻了
③把父元素的内边距设置出来，不要设置为0px，证明有内边距隔着，就不相邻了

让父元素和子元素不垂直：

可以在父元素设置向上的内边距，因为子元素值占据内容区，增大向上的内边距，内容区就自然向下移动了。border-top: 1px solid red;添加父元素的边框，是父元素和子元素不相邻
padding-top: 1px;添加父元素的内边距，使父元素和子元素不相邻
padding-top: 100px;添加父元素的内边距，父元素的内容区就自然向下移动，因为子元素只能存放在内容区里面。

范例：相邻的兄弟元素设置外边距（会重叠去最大值）

.box1,.box2{width: 100px;height: 100px;border: 1px solid red;
}
.box1{margin-bottom: 50px;
}
.box2{margin-top: 100px;
}

<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
<p>这里有内容，这两个盒子不是相邻的，所以外边距不会重叠</p>
<div class="box2"></div><!-- 现在两个box1和box2的距离为150px，因为不是相邻的盒子，垂直方向上的外边距上不会重叠的。 -->

范例：父子元素设置外边距（子元素设置垂直外边距会设置给父元素）

.box3{width: 200px;height: 200px;background-color: #FFDEAD;
}
.box4{width: 100px;height: 100px;background-color: yellow;margin-top: 100px;/* 给子元素设置上面的外边距，子元素的外边距会设置该父元素，所以相当于给box4设置了上面的外边距 */
}

<div class="box3"><div class="box4"></div>
</div>

更改html代码

<div class="box3"><p>这里有元素了，子元素和父元素就不是相邻的了，所以子元素的外边距就不会设置给父元素</p><div class="box4"></div>
</div>

第一个div的下面外边距设置为100px，那么下面这个div与上面box1这个 div的距离为100px。同时给box2设置上外边距时，不会用box1的下外边距加上box2的外边距。而是这两个外边距重叠在一起选择最大的外边距。

十、默认样式

浏览器为了在浏览中没有样式时，也可以有一个比较好的显示结果。所以为很多元素都设置了一些默认的margin和padding。而它的这些样式，一般情况下我们是不许要使用的。所以我们在编写代码之前需要将浏览器中的默认margin和padding去掉。

*{margin: 0px;padding: 0px;
}

清除浏览器默认样式（性能不是很好，以后有更好的方式）

十一、内联样式与盒子模型

内联样式不能设置width和height

盒子分为：内容区、内边距、边框、外边距

范例：

.box{width: 100px;height: 100px;background-color: yellow;
}

<span class="box">这是一个内联元素</span>

这样设置没用，因为内联元素不能设置宽高

设置水平方向的内边距，但是可以影响页面布局

如果内联元素的左边和右边都存在其他的元素时，设置左右内联元素会影响到元素的位置。

padding-left: 100px;
padding-right: 100px;

设置垂直方向上的内边距，但是不会影响到页面布局

如果内联元素的上下有其他的元素时，设置上下的内边距，不会影响到页面的元素的位置，只能覆盖到挡住的部分。

padding-top: 100px;
padding-bottom: 100px;

内联元素设置边框

设置边框会影响到水平方向上的布局，但不会影响到垂直方向上的布局。

设置水平方向上的外边距

水平方向上的外边距不会重叠，而是求和。

内联元素不支持垂直方向上的外边距

十二、CSS常见属性

12.1、基本属性

**写法：**选择器{属性:值；属性:值;}

属性	解释
width:20px;	宽
height:20px;	高
background-color:red;	背景颜色
font-size:24px;	文字大小
text-align:left \| center\| right	内容的水平对齐方式
text-indent:2em;	首行缩进
color:red;	文字颜色

12.2、visibility属性

属性值：

visible 显示页面中的元素

hidden 隐藏页面中的元素，但是依然占据页面中的位置

12.3、overflow属性

子元素默认存在父元素的内容区中，如果子元素比父元素大，超出父元素的部分会在父元素外边显示，这部分超出去的内容称为溢出的内容。overflow属相就是给溢出的内容做处理的。

属性值：

visible默认值，不会做任何处理
hidden把溢出的部分剪切掉，不会显示溢出的内容
scroll在父元素添加滚动条，拖动滚动条可以显示完整信息。无论内容是否溢出都会显示垂直和水平的滚动条
auto自动添加滚动条，需要时显示滚动条，不需要时就不显示滚动条

12.4、display属性

该属性可以修改元素的类型

属性值：

block；设置为块元素
inline；设置为内联元素
inline-block；设置为行内块元素 none隐藏元素。不在页面中显示，并不会占据页面中的位置。

行内块元素：可以使一个元素既有内联元素的特点，又有块元素的特点
既可以设置宽高，但是有不会独占一行

display: block;

12.5、文本元素

属性

font-size:16px; 文字大小

font-weight: 700 ; 值从100-900，文字粗细，不推荐使用font-weight:bold;

font-family:微软雅黑; 文本的字体

font-style: normal | italic; normal 默认值 italic 斜体

line-height: 行高

文本属性连写

font: font-style font-weight font-size/line-height font-family;

注意：font:后边写属性的值。一定按照书写顺序，文本属性连写文字大小和字体为必写项。

Font:italic 700 16px/40px  微软雅黑;

12.6、背景属性

background-color：背景颜色

background-image：背景图片

方位值只写一个的时候，另外一个值默认居中。

background-position: right;

写2个方位值的时候，顺序没有要求。

background-position: right bottom;

写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。

 background-position: 20px 30 px;

background-attachment ：背景是否滚动 scroll | fixed

背景属性连写

 background: red url("0.jpg") no-repeat 30px 40px scroll;

12.7、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; }

十三、文档流

文档流处在网页中的最底层，表示一个页面的位置，所创建的元素默认的在文档流中。

13.1、文档流的特点

块元素

1、块元素在文档流中会独占一行，自动向上到下垂直排列注意：要在文档流中才会垂直排列
2、块元素的默认宽度是父元素的100%
3、块元素默认高度是子元素的内容撑开的大小
注意：当元素的宽度设置为auto时，指定内边距不会影响到可见框的大小而会自动调整宽度来适应内边距。

内联元素

1、内联元素在文档流中只占自身的大小，自动从左到右排列。如果一行不能排列，则自动换下一行从左到右排列。
2、在文档中内联元素的宽度和高度都是被内容撑开的大小

十四、浮动和BFC

14.1、浮动

块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以使块元素脱离文档流。
使用float来使元素浮动，从而脱离文档流。

当元素设置浮动以后（float否none值），元素会立即脱离文档流，向左或者向右漂浮，止到遇到父元素的边框或者其他的浮动元素。不会在文档流中占据位置，下面的元素会占据该元素。
如果浮动元素上面是一个没有浮动的块元素，则浮动元素不会超过块元素。没有浮动的块元素在文档流中就像一堵墙，浮动元素上不去。浮动元素不会超过他上边的兄弟元素，最多只能一边齐。

浮动的作用

文本绕图
制作导航
网页布局

float属性值：
none默认值，元素默认在文档流中排列
left元素立即脱离文档，向页面的左侧浮动
right元素立即脱离文档，向页面的右侧浮动

浮动的元素不会覆盖文档流中的文字，文字会环绕浮动元素周围
可以制造文字环绕图片的效果。

范例：

.box1{height: 100px;width: 600px;background-color: yellow;float: left;
}
.box2{height: 100px;width: 800px;background-color: red;float: left;
}
.box3{height: 100px;width: 300px;background-color: saddlebrown;float: right;
}

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

box1的位置足以存放box3的大小，但是box3出现于box2一行。因为box3的上面一个兄弟元素为box2，浮动元素不会超过他上面的兄弟元素

14.1.1、开启浮动后块元素和内联元素的特点

块元素

1、在文档流中，子元素的宽度默认占满父元素的全部

2、当元素设置浮动后，会全部脱离文档流，块元素的高度和宽度都被内容撑开

内联元素

1、内联元素脱离文档流后会变成块元素，可以设置宽和高。

14.1.2、浮动后造成高度塌陷

该块元素开启浮动后所造成的高度塌陷

在文档流中，父元素的高度是被子元素撑开的，子元素的高度有多高，父元素的高度就有多高。
当子元素设置浮动后，子元素会完全脱离文档，子元素无法撑起父元素的高度，导致父元素的高度塌陷
由于父元素的高度塌陷，父元素一下的元素都会向上移动，导致页面布局混乱
所以在开发中一定有避免高度塌陷的问题

老套解决方法：

1、该父元素设置高度，一旦父元素写死，会出现子元素的溢出。不推荐
2、不要让子元素浮动

14.1.3、清除浮动

当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。清除浮动不是不用浮动，清除浮动产生的不利影响。

清除浮动的方法

clear: left | right | both

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

额外标签法

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

<div class="main"><div class="content"></div><div class="sideber"></div><divstyle="clear:both"></div>
</div>

给父集元素使用overflow:hidden;

14.2、BFC 的相关信息

避免高度塌陷的方法

根据W3C的标准，在页面中元素都有一个隐含的属性叫Blook Formatting Context.块、格式化、上下文。简称：BFC 该属相可以设置打开或者关闭，默认为关闭。

开启BFC具有以下特点：

1、父元素垂直外边距不会和子元素重叠

如果不开启BFC，当父元素也没有设置边框或者内边距时，设置子元素的外边距会自动传递个父元素，父元素会移动。

2、开启BFC的元素不会被浮动元素所覆盖

如果上面有一个div1，宽高都为100px,下面也有一个div2宽高都为100px。当div1浮动时，div2就会向上移动被div1挡住。开启BFC后div2会排列在div1的旁边

3、开启BFC的元素可以包含浮动的子元素

父元素的宽和高都没有设置，子元素的宽和高都设置后，没有开启BFC时，子元素不会撑起父元素的高度。开启BFC后可以撑起父元素的高度。

如何开启元素的BFC

1、设置元素浮动

-块元素的在文档流中宽度默认为父元素的大小。当浮动后就脱离文档流，导致宽度丢失。

-下面的元素也会向上移动。

2、设置元素绝对定位

3、设置元素为inline-block

-在设置display: inline-block;属相，子元素可以撑起父元素，下面的文档也向上移动，但是父元素的默认宽度丢失。

4、将元素的overflow设置为非visible 的值，IE6不支持该方式。
推荐把overflow设置为overflow: hidden;时副作用最小的。定位后期再讲解

十五、定位

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

15.1、静态定位

position:static; 默认值，就是文档流。

15.2、绝对定位

position:absolute;

特点：

元素使用绝对定位之后不占据原来的位置（脱标）
元素使用绝对定位，位置是从浏览器出发。
嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）

15.3、相对定位

position: relative;

特点：

使用相对定位，位置从自身出发。
还占据原来的位置。
子绝父相（父元素相对定位，子元素绝对定位）
行内元素使用相对定位不能转行内块

15.4、固定定位

position:fixed;

特点：

固定定位之后，不占据原来的位置（脱标）
元素使用固定定位之后，位置从浏览器出发。
元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）

范例

.one{position: fixed;right:30px;width:100px;height: 100px;background: red;}
.two{width: 130px;height: 100px;background: #333;}
span{position: fixed;height:100px;width:100px;background: red;
}

    <div class="one"></div><div class="two"></div><span>文字</span>

范例

*{
margin:0;
padding:0;
}
.box{width:600px;height:150px;background-image:url("banner_bg.jpg");margin:0 auto;
}.nav{background-image:url("nav_bg.jpg");height:32px;
}li{list-style:none;float:left;
}li a{height:32px;width:80px;display:inline-block;background-image:url("a_bg.jpg");line-height:32px;text-align:center;text-decoration:none;
}li a:hover{background-image:url("button2.jpg");
}

<div class="box"><img src="banner1.jpg"><div class="nav"><ul><li><a href="#">首页导航</a></li><li><a href="#">首页导航</a></li><li><a href="#">首页导航</a></li><li><a href="#">首页导航</a></li><li><a href="#">首页导航</a></li><li><a href="#">首页导航</a></li></ul></div>
</div>

十六、综合练习

body,div,p,ul,li{margin: 0;padding: 0;font:12px 宋体;
}
img,input{border: 0 none;
}
input{outline-style: none;
}a{color:#000;text-decoration: none;
}ul,li{list-style: none;
}
.clearfix:after{display: block;content: ".";height: 0;line-height: 0;visibility: hidden;clear: both;
}
.clearfix{zoom:1;
}
/*顶部导航*/
.fl{float: left;
}
.fr{float: right;
}
.top-nav{height: 26px;border-top: 1px solid #D8D8D8;border-bottom: 1px solid #D8D8D8;background: #F7F7F7;}
.t-n-con,.search,.nav,.banner,.bud,.pro,.baby,.flink,.copyright{width: 970px;margin: 0 auto;}.l-t-con,.r-t-con li{height: 26px;line-height: 26px;
}
.r-t-con li{float: left;background: url("../images/sj.png") no-repeat right;}
.r-t-con li a{display: inline-block;height: 26px;padding: 0 10px;
}
/*logo搜索*/
.search{margin-top: 12px;
}
.logo{width: 200px;height: 84px;
}
.r-search{width: 528px;height: 40px;border: 1px solid #C9C9C9;background: #f5f5f5;margin-top:30px;
}
.r-search input[type="text"]{width: 419px;height: 28px;border: 1px solid #A6A6A6;float: left;margin: 5px 0 0 4px;
}
.r-search input[type="button"]{width: 99px;height: 32px;background: url("../images/serch.png");float: left;margin-top: 5px;
}/*主导航*/
.nav{border-bottom: 3px solid #0266A2;height: 25px;margin-top: 12px;
}
.nav li{float: left;}
.nav li a{display: inline-block;height: 25px;line-height: 25px;padding: 0 16px;color:#2F6CAD;}
.nav li a:hover{background: #2F6CAD;color: #fff;
}
/*banner开始*/
.banner{margin-top: 10px;margin-bottom: 15px;
}
.l-banner{width: 200px;height: 210px;background: #EBF0F6;
}
.l-banner-title{height: 30px;line-height: 30px;color: #fff;padding-left: 20px;background: #0266A2;
}
.l-banner ul{margin-top: 5px;
}
.l-banner li{height: 28px;line-height: 28px;padding-left: 40px;
}
.c-banner{width: 520px;height: 212px;
}.l-banner li.icon1{background: url("../images/icon_1.png") no-repeat 9px;
}
.l-banner li.icon2{background: url("../images/icon_2.png") no-repeat 9px;
}
.l-banner li.icon3{background: url("../images/icon_3.png") no-repeat 9px;
}
.l-banner li.icon4{background: url("../images/icon_4.png") no-repeat 9px;
}
.l-banner li.icon5{background: url("../images/icon_5.png") no-repeat 9px;
}
.l-banner li.icon6{background: url("../images/icon_6.png") no-repeat 9px;
}
.pic1-r-banner{width: 229px;height: 95px;margin-bottom: 10px;border-right: 1px solid #DFE6F0;
}
/*建筑材料*/
.bud{width:948px;height: 34px;background: #EBF0F6;border-top: 2px solid #C3D6E4;padding-left: 22px;font-weight: 700;font-size: 14px;line-height: 34px;margin-bottom: 10px;
}
/*建筑材料产品*/
.pro{height: 344px;
}
.l-pro{width: 727px;height: 344px;border: 1px solid #D8D8D8;
}.t-l-pro{width: 666px;height: 142px;margin: 15px 0 15px 26px;
}
.l-t-l-pro{width: 331px;height: 142px;
}
.t-left-sidebar{width: 97px;height: 63px;padding: 19px 0 18px 0;border: 1px solid #CACACA;text-align: center;margin-bottom: 15px;
}
.b-left-sidebar input{width: 99px;height: 26px;background: url("../images/buy.png");
}
.right-sidebar{height: 142px;width: 220px;margin-left: 10px;
}
.right-sidebar p {font-size: 14px;
}
.right-sidebar del{font-size: 12px;
}
.right-sidebar span{color: red;font-weight: 700;
}
.right-sidebar p.one{height: 38px;line-height: 38px;
}
.right-sidebar p.two{height: 45px;
}
.right-sidebar p.three{height: 41px;
}
.line{margin: 14px 5px;height: 1px;background: #eee;
}
.r-pro{width: 228px;height: 344px;border: 1px solid #DFE6F0;
}
.top-r-pro{height: 28px;border-bottom: 1px solid #DFE6F0;background: #FBFBFB; line-height: 28px;padding-left: 15px;
}
.r-pro ul{margin-top: 11px;
}
.r-pro li{height: 24px;line-height: 24px;padding-left: 25px;background: url("../images/li_bg.png") no-repeat 10px;
}
.r-pro li a:hover{color: #ff0000;text-decoration: underline;
}
.children{margin-top: 12px;
}
/*儿童安全座椅图片列表*/
.baby{height: 326px;
}
.l-baby{width: 722px;height: 326px;
}
.t-l-baby{height: 25px;background: url("../images/et.png") no-repeat;font-size: 14px;font-weight: 700;line-height: 25px;color:#00b0e7;text-align: right;
}
.b-l-baby{height: 301px;border: 1px solid #CACACA;border-top: 2px solid #01B0E7;
}
.pic-baby{margin:5px 0 0  13px;
}
.et01,.et02,.et03,.et04{text-align: center;
}
.et01{height: 43px;margin-top: 9px;
}
.et02,.et03{height: 24px;
}
.pic-baby del,.pic-baby span{color: #990000;
}
.baby-b{border:1px solid #CBCBCB;margin-bottom: 15px;
}
.light{margin: 14px 10px 10px;height: 75px;color: #999;
}
.light img{float: left;margin-right: 7px;
}
.flink{border-top:1px solid #DDD;border-bottom: 3px solid #097EC3;height: 100px;margin-top: 10px;
}
.flink li{float: left;padding: 0 4px;margin-bottom: 15px;
}
.flink-con{margin-top:30px;
}
.txt-flink{float: left;height: 37px;
}
.flink a:hover{color:red;text-decoration: underline;
}
.copyright{text-align: center;
}
.copyright ul{width: 690px;margin: 0 auto;
}
.copyright li{float: left;padding: 0 10px;border-right: 1px solid #ccc;margin-top: 15px;
}
.copyright p{margin: 10px 0;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/index.css">
</head>
<body><!-- 顶部导航 --><div class="top-nav"><div class="t-n-con"><div class="l-t-con fl">您好，欢迎来到素材网</div><div class="r-t-con fr"><ul><li><a href="#">网站导航</a></li><li><a href="#">客服中心</a></li><li><a href="#">建材服务</a></li><li><a href="#">我的收藏</a></li><li><a href="#">我的商务室</a></li><li><a href="#">素材网首页</a></li></ul></div></div></div><!-- .search>.logo>img[src="data:images/1.png"]+^.r-search>input[type="text"]+input[type="button"] --><!-- logo和搜索 --><div class="search clearfix"><div class="logo fl"><img src="images/1.png" alt=""></div><div class="r-search fr"><input type="text" value="请输入关键字"><input type="button"></div></div><!-- 主导航 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">建筑材料</a></li><li><a href="#">儿童安全座椅</a></li><li><a href="#">工艺美术品</a></li></ul></div><!-- banner部分开始 --><div class="banner clearfix"><div class="l-banner fl"><div class="l-banner-title">商机市场</div><ul><li class="icon1"><a href="#">建筑材料</a></li><li class="icon2"><a href="#">儿童安全座椅</a></li><li class="icon3"><a href="#">工艺美术品</a></li><li class="icon4"><a href="#">建筑材料</a></li><li class="icon5"><a href="#">儿童安全座椅</a></li><li class="icon6"><a href="#">工艺美术品</a></li></ul></div><div class="c-banner fl"><img src="images/center.png" alt=""></div><div class="r-banner fr"><div class="pic1-r-banner"><img src="images/center-r.png" alt=""></div><div class="pic1-r-banner"><img src="images/center-r2.png" alt=""></div></div></div><!-- 建筑材料 --><div class="bud">建筑材料</div><!-- 建筑材料产品 --><div class="pro"><div class="l-pro fl"><!-- 上一排好太太 --><div class="t-l-pro"><div class="l-t-l-pro fl"><div class="left-sidebar fl"><div class="t-left-sidebar"><img src="images/c1.png" alt=""></div><div class="b-left-sidebar"><input type="button"></div></div><div class="right-sidebar fl"><p class="one">好太太晾衣架 铝钛合金 升降双杆</p><p class="two">自动换挡 安全耐用 <br>稳定性好 抗氧化强</p><p class="three"><span>239.00</span> <del>¥386.00</del></p><p class="four">限量<span>99</span>件已售出<span>20</span>件</p></div></div><div class="l-t-l-pro fr"><div class="left-sidebar fl"><div class="t-left-sidebar"><img src="images/c1.png" alt=""></div><div class="b-left-sidebar"><input type="button"></div></div><div class="right-sidebar fl"><p class="one">好太太晾衣架 铝钛合金 升降双杆</p><p class="two">自动换挡 安全耐用 <br>稳定性好 抗氧化强</p><p class="three"><span>239.00</span> <del>¥386.00</del></p><p class="four">限量<span>99</span>件已售出<span>20</span>件</p></div></div></div><div class="line"></div><!-- 下一排好太太 --><div class="t-l-pro"><div class="l-t-l-pro fl"><div class="left-sidebar fl"><div class="t-left-sidebar"><img src="images/c1.png" alt=""></div><div class="b-left-sidebar"><input type="button"></div></div><div class="right-sidebar fl"><p class="one">好太太晾衣架 铝钛合金 升降双杆</p><p class="two">自动换挡 安全耐用 <br>稳定性好 抗氧化强</p><p class="three"><span>239.00</span> <del>¥386.00</del></p><p class="four">限量<span>99</span>件已售出<span>20</span>件</p></div></div><div class="l-t-l-pro fr"><div class="left-sidebar fl"><div class="t-left-sidebar"><img src="images/c1.png" alt=""></div><div class="b-left-sidebar"><input type="button"></div></div><div class="right-sidebar fl"><p class="one">好太太晾衣架 铝钛合金 升降双杆</p><p class="two">自动换挡 安全耐用 <br>稳定性好 抗氧化强</p><p class="three"><span>239.00</span> <del>¥386.00</del></p><p class="four">限量<span>99</span>件已售出<span>20</span>件</p></div></div></div></div><!-- 右边盒子 --><div class="r-pro fr"><div class="top-r-pro">建材资讯</div><ul><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li></ul></div></div><!-- 儿童安全座椅 --><div class="bud children">儿童安全座椅</div><!-- 儿童安全座椅图片列表 --><div class="baby"><div class="l-baby fl"><div class="t-l-baby">详情请点击&gt;&gt;</div><div class="b-l-baby"><div class="pic-baby fl"><img src="images/et01.png" alt=""><p class="et01">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p><p class="et02">适合年龄9个月-4岁</p><p class="et03">市场价：<del>¥5580</del></p><p class="et04">直销价:<span>¥3380</span></p></div><div class="pic-baby fl"><img src="images/et01.png" alt=""><p class="et01">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p><p class="et02">适合年龄9个月-4岁</p><p class="et03">市场价：<del>¥5580</del></p><p class="et04">直销价:<span>¥3380</span></p></div><div class="pic-baby fl"><img src="images/et01.png" alt=""><p class="et01">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p><p class="et02">适合年龄9个月-4岁</p><p class="et03">市场价：<del>¥5580</del></p><p class="et04">直销价:<span>¥3380</span></p></div><div class="pic-baby fl"><img src="images/et01.png" alt=""><p class="et01">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p><p class="et02">适合年龄9个月-4岁</p><p class="et03">市场价：<del>¥5580</del></p><p class="et04">直销价:<span>¥3380</span></p></div></div></div><div class="r-baby fr"><img class="baby-b" src="images/et_right.png" alt=""><br><img src="images/et_right_bottom.png" ></div></div><!-- 工艺艺术品 --><div class="bud children">工艺艺术品</div><!-- 工艺艺术品图片列表 --><div class="pro"><div class="l-pro fl"><!-- 上一排好太太 --><div class="t-l-pro"><div class="l-t-l-pro fl"><div class="left-sidebar fl"><div class="t-left-sidebar"><img src="images/c1.png" alt=""></div><div class="b-left-sidebar"><input type="button"></div></div><div class="right-sidebar fl"><p class="one">好太太晾衣架 铝钛合金 升降双杆</p><p class="two">自动换挡 安全耐用 <br>稳定性好 抗氧化强</p><p class="three"><span>239.00</span> <del>¥386.00</del></p><p class="four">限量<span>99</span>件已售出<span>20</span>件</p></div></div><div class="l-t-l-pro fr"><div class="left-sidebar fl"><div class="t-left-sidebar"><img src="images/c1.png" alt=""></div><div class="b-left-sidebar"><input type="button"></div></div><div class="right-sidebar fl"><p class="one">好太太晾衣架 铝钛合金 升降双杆</p><p class="two">自动换挡 安全耐用 <br>稳定性好 抗氧化强</p><p class="three"><span>239.00</span> <del>¥386.00</del></p><p class="four">限量<span>99</span>件已售出<span>20</span>件</p></div></div></div><div class="line"></div><!-- 下一排好太太 --><div class="t-l-pro"><div class="l-t-l-pro fl"><div class="left-sidebar fl"><div class="t-left-sidebar"><img src="images/c1.png" alt=""></div><div class="b-left-sidebar"><input type="button"></div></div><div class="right-sidebar fl"><p class="one">好太太晾衣架 铝钛合金 升降双杆</p><p class="two">自动换挡 安全耐用 <br>稳定性好 抗氧化强</p><p class="three"><span>239.00</span> <del>¥386.00</del></p><p class="four">限量<span>99</span>件已售出<span>20</span>件</p></div></div><div class="l-t-l-pro fr"><div class="left-sidebar fl"><div class="t-left-sidebar"><img src="images/c1.png" alt=""></div><div class="b-left-sidebar"><input type="button"></div></div><div class="right-sidebar fl"><p class="one">好太太晾衣架 铝钛合金 升降双杆</p><p class="two">自动换挡 安全耐用 <br>稳定性好 抗氧化强</p><p class="three"><span>239.00</span> <del>¥386.00</del></p><p class="four">限量<span>99</span>件已售出<span>20</span>件</p></div></div></div></div><!-- 右边盒子 --><div class="r-pro fr"><div class="top-r-pro">建材商社</div><div class="light"><img src="images/subtitle.png" alt="">在装灯具时，如果装上分开关，可以省去很多烦恼，因为如果只有一个总开关</div><ul ><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li></ul></div></div><!-- 友情链接 --><div class="flink"><div class="flink-con"><div class="txt-flink">友情链接：</div><ul><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li></ul></div></div><!-- 版权部分 --><div class="copyright"><ul class="clearfix"><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li></ul><br><p>中国建网 版权所有 2020 服务热线：0571-98899898 请与我们联系：123@163.com</p><p>建材网会员互动群：12312313213本网实名:中建网</p></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">/*css初始化*/body,div,ul,li,input,p,h1,h2,h3,h4,h5,h6{margin: 0;padding: 0;font:12px simsun;color:#000;}ul,li{list-style: none;}input{border:0 none;outline-style: none;}a{text-decoration: none;color:#000;}img{border: 0 none;}.fl{float: left;}.fr{float: right;}.clearfix:after{content: ".";display: block;height: 0;line-height: 0;visibility: hidden;clear:both;}.clearfix{zoom:1;}/*顶部导航开始*/.top-nav{height: 26px;background: #F7F7F7;border-bottom: 1px solid #D8D8D8;}.top-nav-con{width: 970px;margin: 0 auto;height: 26px;}.top-nav-r ul li{float: left;height: 26px;line-height: 26px;}.top-nav-l{height: 26px;line-height: 26px;}.top-nav-r ul li a{display: inline-block;height: 26px;background: url("images/sj.png") no-repeat right;padding:0 10px;}/*logo部分开始*/.logo{width: 970px;height: 84px;margin: 0 auto;}.logo-pic{width: 200px;height: 84px;}.search{width: 519px;height: 30px;border: 1px solid #C9C9C9;background: #F9F9F9;margin-top: 28px;padding:5px 5px 5px 4px;}.search input[type="text"]{width: 419px;height: 28px;border:1px solid #A6A6A6;border-right: 0 none;vertical-align: middle;}.search input[type="button"]{width: 99px;height: 30px;background: url("images/serch.png");vertical-align: middle;}/*主导航开始*/.nav{   width: 970px;height: 25px;margin: 10px auto;border-bottom: 2px solid #0266a3;}.nav li{float: left;}.nav li a{display: inline-block;height: 25px;line-height: 25px;padding:0 15px;color: #0266a3;}.nav li a:hover{background:#0266a3;color:#fff;}.mar{width: 970px;height: 210px;margin: 0 auto;}.mar-left{width: 200px;height: 210px;background: #EBF0F6;}.mar-title{height: 30px;background: #0266a3;line-height: 30px;color:#fff;padding-left: 20px;}.mar-list{margin-top: 5px;}.mar-list li{height: 28px;line-height: 28px;padding-left: 39px;}.mar-list li.icon1{background: url("images/icon_1.png") no-repeat 9px ;}.mar-list li.icon2{background: url("images/icon_2.png") no-repeat 9px;}.mar-list li.icon3{background: url("images/icon_3.png") no-repeat 9px;}.mar-list li.icon4{background: url("images/icon_4.png") no-repeat 9px;}.mar-list li.icon5{background: url("images/icon_5.png") no-repeat 9px;}.mar-list li.icon6{background: url("images/icon_6.png") no-repeat 9px;}.mar-right{width: 234px;height: 210px;text-align: right;}.mar-right img[src="data:images/center-r.png"]{margin-bottom: 21px;border-right:1px solid #E0E6F0;}/*建筑材料部分开始*/.bud{height: 34px;width: 948px;margin: 14px auto 11px ;background: #ECF1F7;border-top: #C3D7E4 2px solid;font-size: 14px;font-weight: 700;line-height: 34px;padding-left: 22px;}/*建筑材料图片列表*/.pro{width: 970px;height: 344px;margin:0 auto;}.pro-left{width: 727px;height: 344px;border: 1px solid #D8D8D8;}.pro-right{width: 228px;height: 344px;border: 1px solid #D8D8D8;}.pro-left-t{width: 656px;height: 142px; margin:15px 0px 14px 26px;}.pro-pic-l{width: 318px;height: 142px;}.pro-pic-r{width: 318px;height: 142px;}.pro-pic-ll{width: 97px;height: 142px;}.pro-pic-llt{width: 97px;height: 100px;text-align: center;border: 1px solid #CACACA;}.pro-pic-llt img{margin-top:17.5px;}.pro-pic-btn input{width: 98px;height: 26px;background: url("images/buy.png");margin-top: 15px;}.pro-pic-lr p{margin-left: 10px;font-size:14px;}.pro-pic-lr p span{color:#ff0000;font-weight: 700;}.pro-pic-lr p del{font-size: 12px;}.pro-pic-lr p.txt1{height: 28px;margin-top:10px;}.pro-pic-lr p.txt2{height: 49px;}.pro-pic-lr p.txt3{height: 38px;}.pro-line{border-top: 1px solid #eee;margin: 0 5px;}.pro-right-title{height: 28px;line-height: 28px;padding-left: 15px;background: #FBFBFB;border-bottom: 1px solid #E0E6F0;}.pro-right ul{margin-top: 17px;}.pro-right ul li{padding-left: 25px;height: 24px;background: url("images/li_bg.png") no-repeat 10px 6px;}.pro-right ul li a:hover{color:#ff0000;text-decoration: underline;}.child{width: 970px;height: 326px;margin: 0 auto;}.child-left{width: 722px;height: 326px;}.child-l-t{height: 23px;background: url("images/et.png") no-repeat;border-bottom: 2px solid #00B0E7;}.child-l-b{height: 301px;border: 1px solid #CACACA;}.child-l-t h3{width: 100px;text-align:right;font-size: 14px;color:#00B0E7;font-weight: 700;height: 23px;line-height: 23px;margin-left: auto;}.child-pic{width: 164px;text-align: center;margin: 5px 0 0 13px;}.child-pic p.et1{height: 43px;margin-top: 9px;}.child-pic p.et2,.child-pic p.et3{color:#999;height: 24px;}.child-pic p.et3 del,.child-pic p.et4 span{color:#990000;}.child-right{width: 218px;height: 326px;}.child-right img[src="data:images/et_right.png"]{border: 1px solid #CBCBCB;margin-bottom: 20px;}.pro-right li.subtitle{height: 75px;background: none;padding-left: 10px;padding-right: 10px;margin-bottom: 24px;}.pro-right li.subtitle p{color: #777;}.pro-right li.subtitle img{float: left;margin-right: 5px;}.friendlink{width: 970px;height: 102px;border-top: 1px solid #DDDDDD;border-bottom: 3px solid #0A7EC3;margin: 10px auto 0;}.friendlink .frlink{height: 38px;}.friendlink .frlink,.friendlink ul{margin-top: 30px;}.friendlink .frlink,.friendlink li{float: left;}.friendlink li{margin-bottom: 14px;padding:0 4px;}.friendlink li a:hover{color: #ff0000;text-decoration: underline;}.copyright{height: 91px;}.copyright ul{width: 700px;height: 14px;margin: 15px auto 13px;}.copyright ul li{height: 14px;float: left;padding: 0 10px;background: url("images/footer_bg.png") no-repeat right;}.copyright{text-align: center;}.copyright p.copy{height: 24px;margin-top: 13px;}</style>
</head>
<body><!-- 顶部导航开始 --><div class="top-nav"><div class="top-nav-con"><div class="top-nav-l fl">您好，欢迎来到素材网</div><div class="top-nav-r fr"><ul><li><a href="#">网站导航</a></li><li><a href="#">客服中心</a></li><li><a href="#">建材服务</a></li><li><a href="#">我的收藏</a></li><li><a href="#">我的商务室</a></li><li><a href="#">素材网首页</a></li></ul></div></div></div><!-- 顶部导航结束 --><!-- logo部分开始 --><div class="logo"><div class="logo-pic fl"><img src="images/1.png" alt=""></div><div class="search fr"><input type="text" value="请输入关键字"><input type="button"></div></div><!-- 主导航开始 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">建筑材料</a></li><li><a href="#">儿童安全座椅</a></li><li><a href="#">工艺美术品</a></li></ul></div><!-- 商机市场开始 --><div class="mar"><!-- 商机市场左盒子 --><div class="mar-left fl"><div class="mar-title">商机市场</div><div class="mar-list"><ul><li class="icon1"><a href="#">建筑材料</a></li><li class="icon2"><a href="#">儿童安全座椅</a></li><li class="icon3"><a href="#">工艺美术品</a></li><li class="icon4"><a href="#">建筑材料</a></li><li class="icon5"><a href="#">儿童安全座椅</a></li><li class="icon6"><a href="#">工艺美术品</a></li></ul></div></div><!-- 商机市场中间盒子 --><div class="mar-cen fl"><img src="images/center.png" alt=""></div><div class="mar-right fr"><img src="images/center-r.png" alt=""><img src="images/center-r2.png" alt=""></div></div><!-- 建筑材料开始 --><div class="bud">建筑材料</div><!-- 建筑材料列表 --><div class="pro"><!-- 左边大盒子 --><div class="pro-left fl"><!-- 左边大盒子上部分 --><div class="pro-left-t"><!-- 左上大盒子左边盒子 --><div class="pro-pic-l fl"><div class="pro-pic-ll fl"><div class="pro-pic-llt"><img src="images/c1.png" alt=""></div><div class="pro-pic-btn"><input type="button"></div></div><div class="pro-pic-lr fl"><p class="txt1">好太太晾衣架 铝钛合金 升降双杆</p><p class="txt2">自动换挡 安全耐用<br> 稳定性好 抗氧化强</p><p class="txt3"><span>239.00</span> <del>¥386.00</del></p><p class="txt4">限量<span>99</span>件已售出<span>20</span>件</p></div></div><div class="pro-pic-l fr"><div class="pro-pic-ll fl"><div class="pro-pic-llt"><img src="images/c1.png" alt=""></div><div class="pro-pic-btn"><input type="button"></div></div><div class="pro-pic-lr fl"><p class="txt1">好太太晾衣架 铝钛合金 升降双杆</p><p class="txt2">自动换挡 安全耐用<br> 稳定性好 抗氧化强</p><p class="txt3"><span>239.00</span> <del>¥386.00</del></p><p class="txt4">限量<span>99</span>件已售出<span>20</span>件</p></div></div></div><!-- 左边大盒子中线 --><div class="pro-line"></div><!-- 左边大盒子下部分 --><div class="pro-left-t"><!-- 左上大盒子左边盒子 --><div class="pro-pic-l fl"><div class="pro-pic-ll fl"><div class="pro-pic-llt"><img src="images/c1.png" alt=""></div><div class="pro-pic-btn"><input type="button"></div></div><div class="pro-pic-lr fl"><p class="txt1">好太太晾衣架 铝钛合金 升降双杆</p><p class="txt2">自动换挡 安全耐用<br> 稳定性好 抗氧化强</p><p class="txt3"><span>239.00</span> <del>¥386.00</del></p><p class="txt4">限量<span>99</span>件已售出<span>20</span>件</p></div></div><div class="pro-pic-l fr"><div class="pro-pic-ll fl"><div class="pro-pic-llt"><img src="images/c1.png" alt=""></div><div class="pro-pic-btn"><input type="button"></div></div><div class="pro-pic-lr fl"><p class="txt1">好太太晾衣架 铝钛合金 升降双杆</p><p class="txt2">自动换挡 安全耐用<br> 稳定性好 抗氧化强</p><p class="txt3"><span>239.00</span> <del>¥386.00</del></p><p class="txt4">限量<span>99</span>件已售出<span>20</span>件</p></div></div></div></div><!-- 右边大盒子 --><div class="pro-right fr"><div class="pro-right-title">建材资讯</div><ul><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li></ul></div></div><div class="bud">儿童安全座椅</div><!-- 儿童安全座椅列表 --><div class="child"><div class="child-left fl"><div class="child-l-t"><h3>详情请点击>></h3></div><div class="child-l-b"><div class="child-pic fl"><img src="images/et01.png" alt=""><p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p><p class="et2">适合年龄9个月-4岁</p><p class="et3">市场价：<del>¥5580</del></p><p class="et4">直销价：<span>¥3380</span></p></div><div class="child-pic fl"><img src="images/et01.png" alt=""><p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p><p class="et2">适合年龄9个月-4岁</p><p class="et3">市场价：<del>¥5580</del></p><p class="et4">直销价：<span>¥3380</span></p></div><div class="child-pic fl"><img src="images/et01.png" alt=""><p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p><p class="et2">适合年龄9个月-4岁</p><p class="et3">市场价：<del>¥5580</del></p><p class="et4">直销价：<span>¥3380</span></p></div><div class="child-pic fl"><img src="images/et01.png" alt=""><p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p><p class="et2">适合年龄9个月-4岁</p><p class="et3">市场价：<del>¥5580</del></p><p class="et4">直销价：<span>¥3380</span></p></div></div></div><div class="child-right fr"><img src="images/et_right.png" alt=""><img src="images/et_right_bottom.png" alt=""></div></div><div class="bud">工艺艺术品</div><!-- 工艺艺术品 --><div class="pro"><!-- 左边大盒子 --><div class="pro-left fl"><!-- 左边大盒子上部分 --><div class="pro-left-t"><!-- 左上大盒子左边盒子 --><div class="pro-pic-l fl"><div class="pro-pic-ll fl"><div class="pro-pic-llt"><img src="images/c1.png" alt=""></div><div class="pro-pic-btn"><input type="button"></div></div><div class="pro-pic-lr fl"><p class="txt1">好太太晾衣架 铝钛合金 升降双杆</p><p class="txt2">自动换挡 安全耐用<br> 稳定性好 抗氧化强</p><p class="txt3"><span>239.00</span> <del>¥386.00</del></p><p class="txt4">限量<span>99</span>件已售出<span>20</span>件</p></div></div><div class="pro-pic-l fr"><div class="pro-pic-ll fl"><div class="pro-pic-llt"><img src="images/c1.png" alt=""></div><div class="pro-pic-btn"><input type="button"></div></div><div class="pro-pic-lr fl"><p class="txt1">好太太晾衣架 铝钛合金 升降双杆</p><p class="txt2">自动换挡 安全耐用<br> 稳定性好 抗氧化强</p><p class="txt3"><span>239.00</span> <del>¥386.00</del></p><p class="txt4">限量<span>99</span>件已售出<span>20</span>件</p></div></div></div><!-- 左边大盒子中线 --><div class="pro-line"></div><!-- 左边大盒子下部分 --><div class="pro-left-t"><!-- 左上大盒子左边盒子 --><div class="pro-pic-l fl"><div class="pro-pic-ll fl"><div class="pro-pic-llt"><img src="images/c1.png" alt=""></div><div class="pro-pic-btn"><input type="button"></div></div><div class="pro-pic-lr fl"><p class="txt1">好太太晾衣架 铝钛合金 升降双杆</p><p class="txt2">自动换挡 安全耐用<br> 稳定性好 抗氧化强</p><p class="txt3"><span>239.00</span> <del>¥386.00</del></p><p class="txt4">限量<span>99</span>件已售出<span>20</span>件</p></div></div><div class="pro-pic-l fr"><div class="pro-pic-ll fl"><div class="pro-pic-llt"><img src="images/c1.png" alt=""></div><div class="pro-pic-btn"><input type="button"></div></div><div class="pro-pic-lr fl"><p class="txt1">好太太晾衣架 铝钛合金 升降双杆</p><p class="txt2">自动换挡 安全耐用<br> 稳定性好 抗氧化强</p><p class="txt3"><span>239.00</span> <del>¥386.00</del></p><p class="txt4">限量<span>99</span>件已售出<span>20</span>件</p></div></div></div></div><!-- 右边大盒子 --><div class="pro-right fr"><div class="pro-right-title">建材资讯</div><ul><li class="subtitle"><img src="images/subtitle.png" alt=""><p>在装灯具时，如果装上分开关，可以省去很多烦恼，因为如果只有一个总开关</p></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li><li><a href="#">贵阳钢铁市场7月17日价格行情</a></li></ul></div></div><!-- 友情链接 --><div class="friendlink"><div class="frlink">友情链接:</div><ul><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li><li><a href="#">爱加盟网</a></li></ul></div><div class="copyright"><ul><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li><li><a href="#">关于我们</a></li></ul><p>中国建网 版权所有 2020 服务热线：0571-98899898 请与我们联系：123@163.com</p><p class="copy">建材网会员互动群：12312313213本网实名:中建网</p></div>
</body>
</html>