HTML学习2
（一）、CSS选择器
1.1标签选择器（TAG选择器）
css：div{} html：
<div></div>
使用场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中，如 层次选择器
1.2群组选择器（分组选择器）
可以通过逗号 的方式，给多个不同的选择器添加统一的css样式，来达到代码复用
如：div,#text,.title{background:red}
1.3通配选择器
*{ }
注：尽量避免使用通配选择器，因为会给所有的标签添加样式。
使用场景：
去掉所有标签的默认样式时
1.4层次选择器
后代： M N{ }
父子： M>N { }
兄弟： M~N{ } 当前M下面的所有兄弟N标签
相邻： M+N{ } 当前M相邻的N标签（下面相邻的）
1.5属性选择器
M[attr] {}
=：完全匹配
*=：部分匹配
^=：起始匹配
$=：结束匹配
[][][][]：组合匹配
1.6 hover等伪类选择器
CSS伪类用于向某些元素添加特殊的效果。一般初始样式添加不上时，才用伪类来添加。
M：伪类{}
:link 访问前的样式 （只能添加给a标签）
:visited 访问后的样式 （只能添加给a标签）
:hover 鼠标移入时的样式 （可以添加给所有标签）
:active 鼠标按下时的样式 （可以添加给所有标签）
注：一般网站只设置
a{} a:hover{}
1.7 after等伪类选择器
:after、:before （后和前） 通过伪类的方式给元素添加一段文本内容，使用content属性
:checked、:disabled、:focus (针对表单元素)（选中时，无法选中，光标到达时显示）
1.8 结构性伪类选择器
:nth-of-type() :nth-child()
角标是从1开始的，1表示第一项，2表示第二项| n值 表示从0到无穷大 （在括号里填）
:first-of-type :first-child
:last-of-type :last-child
:only-of-type :only-child
nth-of-type和nth-child的区别
type：同一个类型中的第几个
child：所有同一级中的第几个
（二）、CSS样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承（默认不能继承，但是可以设置继承属性 inherit值）
如：列表的样式不能继承
（三）、CSS优先级
3.1 相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
3.2 内部样式与外部样式优先级
内部样式与外部样式优先级相同，如果都设置了相同的样式，那么后写的引入方式优先级高
3.3 单一样式优先级
style行间>id>class>tag（标签）>*>继承
注：style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
3.4 !important
提升样式优先级，非规范方式，不建议使用。（不能针对继承的属性进行优先级的提升）
3.5 标签+类与单类
标签+类> 单类
3.6 群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高
3.7 层次优先级
1.权重比较
2.约分比较（同类型约掉）
（四）、CSS盒子模型
标准盒子模型：
组成：content padding border margin （由内向外的顺序）
物品 填充物 包装盒 盒子与盒子之间的间距
content：内容区域 width和height组成的
padding：内边距（内填充）
写一个值： 30px（上下左右）
写两个值： 30px 40px（上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）
单一样式只能写一个值：
padding-left、right、top、bottom
margin：外边距（外填充）
写一个值： 30px（上下左右）
写两个值： 30px 40px（上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）
单一样式只能写一个值：
margin-left、right、top、bottom
注：
1.背景颜色会填充到margin以内的区域（不包括margin区域）
2.文字会在content区域
3.padding不能出现负值，margin是可以出现负值
box-sizing
盒尺寸，可以改变盒子模型的展示形态
默认值： content-box：width、weight -> content
border-box： width 、 weigh t -> content padding border（三部分分配）
使用场景：
1、不用进行一些计算
2、解决一些百分比问题
（五）、CSS盒子模型的一些问题
5.1 margin的叠加问题
出现在上下margin同时存在的时候。会取上下中较大的值作为叠加的值。
解决方案：
1. BFC规范
2.想办法只给一个元素添加间距
5.2 margin的传递问题
出现在嵌套的结构中，只是针对margin-top的问题
解决方案：
1.BFC规范
2.给父容器加边框
3.margin换成padding
父子关系，给子加外边距但作用于父身上
方法1：给父盒子加内边距padding
方法2：给父盒子设置边框
方法3：加浮动
方法4：父盒子加overflow：hidden
（六）、盒子模型的扩展
1.margin左右自适应是可以的，上下自适应不行（auto）
2.width、height不设置的时候，对盒子模型的影响:会自动计算容器的大小，节省代码。
（七）、标签分类
7.1 按类型划分标签
block（块）：div、p、ul、ki、h1
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形
inline（内联）：span、a、em、strong、img…
1.挨在一起的
2.有些样式不支持，如：width、height、margin、padding
3.不写宽的时候，宽度由内容决定
4.所占区域不一定是矩形
5.内联标签之间会产生空隙，原因：换行产生的
解决方法：1.可以把代码放在一行 2.在父容器设置font-size:0然后再去设置内联标签
inline—block（内联块）：input、select…
挨在一起，但是支持宽高
注：布局一般用块标签，修饰文本一般用内联标签
7.2 按内容划分标签
Flow：流内容
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的
可以在W3C官网查询各模块包含的标签
###7.3 按显示划分标签
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。（要通过设置属性才能显示）
img、input…
非替换元素：将内容直接告诉浏览器，将其显示出来。（可以直接显示的标签）
div、h1、p…
（八）、显示框类型
dispaly： block inline inline-block none…
区别：
dispalay：none 不占空间的隐藏
visibility：hidden 占空间的隐藏
（九）、标签嵌套规范
如：ul、li
dl、dt、dd
table、tr、td
1.块能够嵌套内联
如：
<div>
<span></span>
<a href=""></a>
</div>
2.块不一定能够嵌套块
如：
<p>
<div></div>
</p>
3.内联是不能嵌套块的
特殊情况：
<a href="">
<div></div>
</a>
注：a标签不能嵌套a标签
（十）、溢出隐藏
overflow
visible：默认
hidden：直接截取隐藏溢出部分
scroll：直接出现滚动条（无论内容是否溢出）
auto：当有溢出内容时才会自动显示滚动条
x轴、y轴
overflow-x、overflow-y针对两个轴分别设置
inherit：遵从父元素继承overflow的值
省略号隐藏：
pre：显示空格，回车，不换行
pre-wrap：显示空格，回车，换行
pre-line：显示回车，不显示空格，换行
写省略号的三个属性，必须有宽度：
white-space：nowrap
overflow：hidden
text-overflow：ellipsis
（十一）、透明度与手势
opacity：0（透明）~1（不透明）
0.5（半透明）
注：占空间、所有的子内容也会透明
rgba：0~1
注：可以让指定的样式透明，不影响其他的样式
cursor：手势
default：默认箭头
要实现自定义手势：
准备图片： .cur .ico
cursor:url(图片地址),auto;
（十二）、最大和最小宽高
min-width、min-height
max-width、max-widt
%单位换算：根据父容器大小进行换算
一个容器怎么适应屏幕的高：容器加 height：100%； body：100%； html：100%
（十三）、CSS默认样式
没有默认样式的：div、span…
有默认样式的：body、h1、p、a…
（十四）、CSS重置样式
*{margin:0;padding:0;}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能
body，p，h1，ul{margin：0；padding：0；}
ul{list-style:none;}
a{text-decoration:none;color:#999;}
img{display:block}
问题的现象:图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-align:baseline;基线对齐方式，默认值
img{vertical-align:bottom;} 推荐使用这种解决方式
写具体页面的时候或一个布局效果的时候:
1.写结构
2.css重置样式
3.写具体样式
（十五）、float浮动
15.1 float概念
文档流
文档流是文档中可显示对象在排列时所占用的位置
float特性
加浮动的元素，会脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float取值
left
right
none（默认）
15.2 float注意点
1.只会影响后面的元素。
2.内容默认提升半层。
3.默认宽根据内容决定。
4.换行排列。
5.注意给块元素添加，但也可以给内联元素添加。
15.3 清除浮动
上下排列：clear属性（只对块标签起作用，对内联不起作用），表示清除浮动的，left、right、both
嵌套排列：
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow：hidden(BFC规范)，如果有子元素想溢出，那么会受到影响。
display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。
（十六）、position定位
position：
static 默认值
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 黏性定位
relative:
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的
absolute:
使元素完全脱离文档流
使内联元素支持宽高（让内联具备特性）
使块元素默认宽高根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（祖先元素要有这三种定位其中一种，绝对、相对、固定）
fixed:
使元素完全脱离文档流
使内联元素支持宽高（让内联具备特性）
使块元素默认宽高根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky黏性定位：
在指定位置，进行黏性操作
z-index定位层级
默认层级为0
嵌套时候的层级问题（0,1，2…或负数）
（十七）、定位实现下拉菜单
<!DOCTYPE html>
<html lang="ch-ZN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
ul{list-style: none;}
#menu{width: 100px;height: 30px;margin: 20px auto;border: 1px black solid;position: relative;}
#menu ul{width: 100px;border: 1px black solid;position: absolute;left: -1px;top: 30px;background: white;display: none;}
#menu:hover ul{display: block;}
#menu ul li:hover{background: gray;}
p{text-align: center;}
</style>
</head>
<body>
<div id="menu">
卖家中心
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</div>
<p>测试段落测试测试测试测试</p>
</body>
</html>
（十八）、定位实现居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{width: 300px;height: 300px;border: 1px black solid;position: relative;}
#box2{width: 100px;height: 100px;background: red;position: absolute;left: 50%;top: 50%;margin: -50px;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
（十九）、css添加省略号
width
必须有一个固定的宽
white-space:nowrap
不让内容折行
overflow:hidde
隐藏溢出内容
text-overflow:ellipsis
添加省略号
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#content{width: 200px;border: 1px black solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
</style>
</head>
<body>
<div id="content">测试测试测试测试测试测试测试测试测试测试测试测试</div>
</body>
</html>
（二十）、 CSS精灵
CSS Sprite
特性
CSS雪碧也叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处
可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开
（二十一）、CSS圆角设置
border-radius
给标签添加圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{width: 200px;height: 200px;background: red;border-radius: 100px;} /*形成一个圆*/
#box{width: 200px;height: 200px;background: red;border-radius: 50%;} /*百分比写法形成圆*/
#box{width: 200px;height: 200px;background: red;border-radius: 10px 20px /*左上和右下 右上和左下*/;}
#box{width: 200px;height: 200px;background: red;border-radius: 10px 20px 30px 40px /*左上 右上 右下 左下*/;}
#box{width: 200px;height: 200px;background: red;border-radius: 20px / 40px /*相切为椭圆*/;}
#box{width: 200px;height: 200px;background: red;border-radius: 150px 150px 0 0 /*半圆*/;}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
（二十二）、示例
示例效果图1：
html代码部分：
<!DOCTYPE html>
<html lang="ch-ZN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/common.css">
<style>
#banner{position: relative;}
#banner .banner_list{width: 100%;height: 469px;position: relative;}
#banner .banner_list li{width: 100%;width: 100%;background: center 0 no-repeat ;position: absolute;left: 0;top: 0;opacity: 0;z-index: 1;}
#banner .banner_list li.active{opacity: 1;z-index: 10;}
#banner .banner_list a{display: block;width: 100%;height: 469px;}
#banner .banner_btn{width: 100%; position: absolute;bottom: 19px;z-index: 20;font-size: 0;text-align: center;}
#banner .banner_btn li{display: inline-block;width: 12px;height: 12px;border: 2px solid white;border-radius: 50%;box-sizing: border-box;margin: 0 6px;cursor: pointer; }
#banner .banner_btn li.active{background: white;}
#service{overflow: hidden;min-height: 407px;}
#service .service_list{text-align: center;margin-top: 34px;}
#service .service_list li{float: left;width: 250px;margin: 0 10px;}
#service .service_list div{width: 102px;height: 102px;margin: 0 auto;}
#service .service_list li:nth-of-type(1) div{background-image: url(./images/web1.png);}
#service .service_list li:nth-of-type(2) div{background-image: url(./images/graphic1.png);}
#service .service_list li:nth-of-type(3) div{background-image: url(./images/e-bussiness1.png);}
#service .service_list li:nth-of-type(4) div{background-image: url(./images/mail1.png);}
#service .service_list h3{font-size: 18px;color: #434343;line-height: 36px;margin-top: 25px;}
#service .service_list p{font-size: 14px;color: #6d6d6d;line-height: 22px;}
#case{background: #f8f8f8;}
#case .container{min-height: 460px;overflow: hidden;}
#case .area_title{margin-top: 55px;}
#case .area_title h2{color: #66c5b4;}
#case .case_list{margin-top: 28px;}
#case .case_list li{float: left;width: 340px;margin: 0 10px;}
#case .case_btn{width: 176px;height: 37px;background: #66c5b4;margin: 0 auto;border-radius: 25px;line-height: 37px;text-align: center;font-size: 14px;margin-top: 36px;}
#case .case_btn a{display: block;width: 100%;height: 100%;color: white;}
#news{min-height: 450px;overflow: hidden;}
#news .area_title{margin-top: 65px;}
#news dl{margin-top: 48px;}
#news dt{width: 234px;}
#news dd{width: 846px;}
#news .news_list{width: 100%;}
#news .news_list li{width: 50%;float: left;margin-bottom:48px ;}
#news .news_date{width: 71px;height: 70px;border-right:1px solid #dcdcdc;text-align: center;}
#news .news_date i{color: #66c5b4;font-size: 39px;display: block;font-weight: bold;}
#news .news_date span{color: #999999;font-size: 20px;line-height: 36px}
#news .news_text{width: 310px;margin-left: 20px;}
#news .news_text h3{font-size: 14px;}
#news .news_text h3 a{color: #3f3f3f;}
#news .news_text p{color: #a4a4a4;font-size: 12px;line-height: 21px;margin-top: 17px;}
</style>
</head>
<body>
<div id="head" class="container">
<div class="head_logo l" >
<a href="#">
<img src="./images/logo.png" alt="博文尚美" title="博文尚美">
</a>
</div>
<ul class="head_menu r" >
<li>
<a href="">HOME</a>
</li>
<li>
<a href="">ABOUT</a>
</li>
<li>
<a href="">PROTFOLIO</a>
</li>
<li>
<a href="">SERVICE</a>
</li>
<li>
<a href="">NEWS</a>
</li>
<li>
<a href="">CONTACT</a>
</li>
</ul>
</div>
<div id="banner" class="container-fluid" >
<ul class="banner_list">
<li class="active" style="background-image: url(./images/banner.png)">
<a href="#"></a>
</li>
<li class="active" style="background-image:url(./images/banner.png)">
<a href="#"></a>
</li>
<li class="active" style="background-image:url(./images/banner.png)">
<a href="#"></a>
</li>
<li class="active" style="background-image:url(./images/banner.png)">
<a href="#"></a>
</li>
</ul>
<ol class="banner_btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div id="service" class="container">
<div class="area_title">
<h2>服务范围</h2>
<p>OUR SERVICES</p>
</div>
<ul class="service_list">
<li>
<div></div>
<h3>1.WEB DESIGN</h3>
<p>
企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
</p>
</li>
<li>
<div></div>
<h3>2.GRAPHIC DESIGN</h3>
<p>
标志LOGO设计/产品宣传册设计
<br>
企业广告/海报设计
</p>
</li>
<li>
<div></div>
<h3>3.E-BUSINESS PLAN</h3>
<p>
淘宝/天猫装修设计及运营推广
<br>
企业微博/微信营销
</p>
</li>
<li>
<div></div>
<h3>4.MAILBOX AGENTS</h3>
<p>
腾讯/网易企业邮箱品牌代理
<br>
个性化邮箱定制开发
</p>
</li>
</ul>
</div>
<div id="case" class="container-fluid">
<div class="container">
<div class="area_title">
<h2>{ 客户案例 }</h2>
<p>With the best professional technology,to design the best innovative web site</p>
</div>
<ul class="case_list clear">
<li>
<a href=""><img src="./images/20141121095528549.png" alt=""></a>
</li>
<li>
<a href=""><img src="./images/20141121095216750.png" alt=""></a>
</li>
<li>
<a href=""><img src="./images/20141121105856226.png" alt=""></a>
</li>
</ul>
<div class="case_btn">
<a href="#">VIEW MORE</a>
</div>
</div>
</div>
<div id="news" class="container">
<div class="area_title">
<h2>最新资讯</h2>
<p>THE LATEST NEWS</p>
</div>
<dl>
<dt class="l">
<img src="./images/xs1.png" alt="">
</dt>
<dd class="l">
<ul class="news_list">
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明</a></h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</li>
</ul>
</dd>
</dl>
</div>
<div id="foot" class="container-fluid">
<div class="container">
<p class="l">Copyright 2006-2014 Bowensahngmei Culture All Rights Reserved</p>
<div class="r">
<a href="#">HOME</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a>
</div>
</div>
</div>
</body>
</html>
css部分：
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}/*把前面的点去掉*/
img{display: block;}/*图片转块*/
a{text-decoration: none;color: #646464;}/*去下划线，加颜色*/
h1,h2,h3{font-size: 16px;}/*字体大小*/
body{font-family: Arial;}/*字体类型*/
.l{float: left;}
.r{float: right;}
.clear::after{content: "";display: block;clear: both;}/*清除浮动*/
.container{width: 1080px;margin: 0 auto;position: relative;}/*版心*/
.container-fluid{width: 100%;}/*通栏*/
#head{height: 81px;}
#head .head_logo{width: 162px;height: 44px;margin-top: 19px;}
#head .head_menu{font-size: 14px;line-height: 81px;}
#head .head_menu li{float: left;margin-left: 58px;}
#foot{background-color: #66c5b4;}
#foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white;}
#foot div a{color: white;margin: 0 10px;}
.area_title{margin-top:60px;text-align: center;}
.area_title h2{height: 20px;line-height: 20px;font-size: 20px;color: #363636;background:url('../images/title_bg.png') no-repeat center 7px;font-weight: normal;}
.area_title p{color: #9f9f9f;font-size: 14px;line-height: 34px;}
示例效果图2：
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/common.css">
<style>
#main{background: url(./images/R-C1.png) no-repeat center 0;}
#nav{height: 236px;background: url(./images/直线.png) repeat-x,url(./images/OIP-C.png) no-repeat center 0;}
#nav .nav_logo{width: 138px;height: 112px;margin: 0 auto;}
#nav dl{position: absolute;top: 0;}
#nav dt{height: 66px;}
#nav dt a{width: 100%;height: 100%;display: block;text-indent: -9999px;overflow: hidden;}
#nav dd{line-height: 27px;font-size: 12px;text-align: center;}
#nav dd a{color: white;position: relative;}
#nav dd a:hover{color: red;text-decoration: underline;}
#nav dd a.hot:after{content: "";display: block;width: 12px;height: 12px;background: url(./images/主页点击2.png) no-repeat;position: absolute;right: -12px;top: -2px;}
#nav dd a.new:after{content: "";display: block;width: 12px;height: 12px;background: url(./images/主页点击2.png) no-repeat;position: absolute;right: -12px;top: -2px;}
#nav .nav_index{width: 65px;left: 0;}
#nav .nav_zl{width: 69px;left: 98px;}
#nav .nav_ss{width: 74px;left: 203px;}
#nav .nav_hd{width: 68px;left: 225px;}
#nav .nav_sc{width: 65px;left: 670px;}
#nav .nav_sp{width: 65px;left: 750px;}
#nav .nav_wj{width: 65px;left: 850px;}
#nav .nav_kf{width: 85px;left: 970px;}
#link{height: 175px;}
#link a{width: 463px;height: 100%;display: block;margin: 0 auto;}
#banner{height: 276px;background: url(./images/背景.png) no-repeat;}
#banner .banner_download p{margin-top: 40px;margin-left: 60px;color: white;}
#banner .banner_user img{margin-top: 40px;margin-left: 60px;border-radius: 50px;}
#banner .banner_user p{color: white;margin-top: 30px;margin-left: 15px;}
#banner .banner_user a{color: #32f1d0;}
#banner .banner_list{width: 497px;height: 253px;overflow: hidden;margin: 13px 0 0 4px}
#banner .banner_list_ul{width: 2000px;}
#banner .banner_list_ul li{width: 497px;height: 253px;float: left;}
#banner .banner_bottomline{width: 498px;height: 37px;background:rgba(0, 0, 0, .5) ;border-top:1px #514b55 solid;position: absolute;bottom: 0;}
#banner .banner_bottomline_ul{text-align: center;margin-top: 11px;}
#banner .banner_bottomline_ul li{display: inline-block;width: 15px;height: 15px;background: url(./images/未选中圆点.png) no-repeat;cursor: pointer;}
#banner .banner_bottomline_leftbtn{width: 12px;height: 22px;position: absolute;left: 5px;top: 5px;background: url(./images/向左箭头\ \(1\).png) no-repeat ;cursor: pointer;}
#banner .banner_bottomline_rightbtn{width: 12px;height: 22px;position: absolute;right: 5px;top: 5px;background: url(./images/向右箭头\ \(1\).png) no-repeat ;cursor: pointer;}
#banner .banner_list_lt{width: 12px;height: 12px;background: url(./images/左上.png) no-repeat;position: absolute;left: 190px;top: 8px;}
#banner .banner_list_rt{width: 12px;height: 12px;background: url(./images/右上.png) no-repeat;position: absolute;left: 685px;top:6px;}
#banner .banner_list_rb{width: 12px;height: 12px;background: url(./images/右下.png) no-repeat;position: absolute;left: 685px;top: 265px;}
#banner .banner_list_lb{width: 12px;height: 12px;background: url(./images/左下.png) no-repeat;position: absolute;left: 190px;top: 265px;}
#banner .banner_right{width: 209px;height: 255px;position: relative;margin: 12px 0 0 12px;}
</style>
</head>
<body>
<div id="head" class="container-fluid">
<div class="container">
<div class="head_logo l"></div>
<div class="head_ad l">
<a href="#">
<img src="./images/ad.png" alt="" style="height: 41px; width: 41px;">
</a>
</div>
<div class="head_menu r">
<div class="head_menu_czh l">
<img src="./images/主页点击1.png" alt="" style="float: left;">
<a href="#">成长守护平台</a>
</div>
<div class="head_menu_top l">
<img src="./images/主页点击1.png" alt="" style="float: right;">
<a href="#">腾讯游戏排行榜</a>
</div>
</div>
</div>
</div>
<div id="main" class="container-fluid">
<div id="nav" class="container-fluid">
<div class="container">
<div class="nav_logo">
<a href="#">
<img src="./images/R-C (1).png" alt="QQ飞车" title="QQ飞车">
</a>
</div>
<dl class="nav_index">
<dt>
<a href="#">首页</a>
</dt>
</dl>
<dl class="nav_zl">
<dt></dt>
<dd><a href="#">新手指引</a></dd>
<dd><a class="hot" href="#">官方漫画</a></dd>
<dd><a class="new" href="#">飞车手游</a></dd>
<dd><a href="#">精美壁纸</a></dd>
<dd><a href="#">游戏下载</a></dd>
</dl>
<dl class="nav_zx">
<dt></dt>
<dd><a class="hot" href="#">scc</a></dd>
<dd><a href="#">谁是车王</a></dd>
<dd><a href="#">全民争霸赛</a></dd>
</dl>
<dl class="nav_hd">
<dt></dt>
<dd><a class="hot" href="#">版本专区</a></dd>
<dd><a href="#">合作专区</a></dd>
<dd><a href="#">cdk兑换</a></dd>
</dl>
<dl class="nav_sc">
<dt></dt>
<dd><a href="#">紫钻专区</a></dd>
<dd><a href="#">道聚城</a></dd>
<dd><a href="#">点券充值</a></dd>
</dl>
<dl class="nav_sp">
<dt></dt>
<dd><a href="#">教学视频</a></dd>
<dd><a href="#">视频中心</a></dd>
</dl>
<dl class="nav_wj">
<dt></dt>
<dd><a href="#">官方论坛</a></dd>
<dd><a class="hot" href="#">掌上飞车</a></dd>
<dd><a href="#">兴趣部落</a></dd>
<dd><a href="#">官方微信</a></dd>
<dd><a href="#">官方微博</a></dd>
</dl>
<dl class="nav_kf">
<dt></dt>
<dd><a href="#">客服中心</a></dd>
<dd><a class="hot" href="#">安全信用体系</a></dd>
<dd><a href="#">封号查询</a></dd>
<dd><a href="#">游戏安全评测</a></dd>
<dd><a class="hot" href="#">道具删除找回</a></dd>
</dl>
</div>
</div>
<div id="link" class="container">
<a href="#"></a>
</div>
<div id="banner" class="container">
<div class="banner_left l">
<div class="banner_download">
<p>下载游戏</p>
<p>DOWNLOAD</p>
</div>
<div class="banner_user">
<img src="./images/头像.png" alt="">
<p>欢迎<a href="">登录</a>。进入飞车世界</p>
</div>
</div>
<div class="banner_center l">
<div class="banner_list">
<ul class="banner_list_ul">
<li>
<a href=""><img src="./images/广告1.png" alt=""></a>
</li>
<li>
<a href=""><img src="./images/广告2.png" alt=""></a>
</li>
<li>
<a href=""><img src="./images/广告1.png" alt=""></a>
</li>
</ul>
<div class="banner_bottomline">
<ul class="banner_bottomline_ul">
<li></li>
<li></li>
<li></li>
</ul>
<div class="banner_bottomline_leftbtn"></div>
<div class="banner_bottomline_rightbtn"></div>
</div>
<i class="banner_list_lt"></i>
<i class="banner_list_rt"></i>
<i class="banner_list_rb"></i>
<i class="banner_list_lb"></i>
</div>
</div>
<div class="banner_right l">
<a href="#"><img src="./images/图片1.png" alt=""></a>
<i class="banner_right_lt"></i>
<i class="banner_right_lt"></i>
<i class="banner_right_lt"></i>
<i class="banner_right_lt"></i>
</div>
</div>
</div>
</body>
</html>
css代码：
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
img{display: block;}
a{text-decoration: none;color: #464646;}
h1,h2,h3{font-size: 16px;}
body{font-family: Arial,'宋体';}
.l{float: left;}
.r{float: right;}
.clear::after{content: "";display: block;clear: both;}
.container{width: 980px;margin: 0 auto;position: relative;}
.container-fluid{width: 100%;}
#head{background: url(../images/VCG41N1169547761.png) repeat-x;}
#head .container{height: 41px;}
#head .head_logo{width: 110px;height: 41px;background: url(../images/logo.png) no-repeat;}
#head .head_logo a{display: block;width: 100%;height: 100%;overflow: hidden;margin-left: 100px;margin-top: 10px}
#head .head_ad {margin-left: 8px;}
#head .head_menu{font-size: 12px;}
#head .head_menu div{height: 12px;margin-top: 10px;padding-left: 26px;}
#head .head_menu_czsh{margin-right: 26px;}
#head .head_menu .head_menu_top a{margin-left: 13px;}
锚点（实现本页面的跳转功能）：
<a href="#锚点名字"></a>
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
