HTML、CSS篇

将来Severus

已于 2023-11-14 15:18:50 修改

阅读量945

点赞数 3

分类专栏： HTML&CSS 文章标签： html 学习前端 css

于 2022-10-20 22:20:51 首次发布

本文链接：https://blog.csdn.net/qq_74103873/article/details/127334291

版权

HTML&CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

概述

HTML、CSS作为网站开发的基础语言。
由n个网页组成网站，每一个网页为.html文件。
结构层：HTML 超文本语言
表现层：CSS 层叠样式表
行为层：Javascript 脚本语言
VS Code ，全称 Visual Studio Code ，来自微软，是一个开源的、基于Electron的轻量代码编辑器。
VS Code 下载地址
拓展插件：Chinese、open in browser、view in borwser
VS Code 快捷键：

ctrl + s : 保存
ctrl + a : 全选
ctrl + x : 剪切
ctrl + v : 粘贴
ctrl + c : 复制
ctrl + z : 撤销
ctrl + y : 前进（反撤销）
shift + end : 从头选中一行
shift + home : 从尾部选中一行
shift + alt + ⬇ ：快速复制一行
alt + ⬆/⬇ ：快速移动一行
tab : 向后缩进
tab + shift : 向前缩进
多光标： alt + Mouse1
ctrl + d : 选择相同元素的下一个
谷歌浏览器下载地址（Google Chrome）
企业网站开发的职位有
UI设计师：设计稿；

web前端开发工程师（H5开发）：
设计稿➡代码
数据库里的数据➡显示到页面
HTML + CSS
[ HTML : 结构 , CSS ：样式 , JavaScript（JS） : 行为 ];

web后端开发工程师
基本流程
先写HTML结构，再写CSS样式美化，最后加JS交互行为。
web三大核心技术：
HTML、CSS、JavaScript

注

1、文字中加<br>为回车

HTML

定义：
超文本标记语言（Hyper Text Markup Language），标准通用标记语言下的一个应用。

HTML基础结构与属性

(1)超文本：文本内容 + 非文本内容（图片、视频、音频等）
(2)标记（标签）：<单词>
```
例如 ： <header> 、 <footer>
写法分成两种：单标签 <header> ; 双标签 <header> </header>
```
(3)语言：编程语言
创建标签的快捷键： tab + 单词 ➡ <单词>
标签是可以上下排列,也可以组合嵌套。
HTML常见标签
标签的属性 : 来修饰标签的,设置当前标签的一些功能。
格式 : <标签属性=“值” 属性2=“值2” …>

HTML初始代码

HTML初始代码的快捷键:
! + tab : 快速的创建html的初始代码
初始代码的分析 :

<!DOCTYPE html>				    文档声明 : 告诉浏览器这是一个html文件
<html lang="en">                html文件的最外层标签 : 包裹着所有html标签代码 . 注 : lang="en" 表示是一个英文网站 ; lang="zh-CN" 表示是一个中文网站
<head> ➡ 头部区域
    <meta charset="UTF-8">      元信息 : 是编写网页中的一些赋值信息 ; charset="UTF-8" 国际编码,让网页不出现乱码的情况
    <title>Document</title>     设置网页的标题
</head>
<body> ➡ 身体区域
                                显示网页内容的区域
</body>
</html>

HTML注释

HTML注释

定义 : 注释的代码，只有在文件中看得到，但是浏览器显示不出来

HTML注释写法： 在浏览器中看不到，只能在代码中看到注释的内容。
HTML注释意义：
（1）把暂时不用的代码注释起来，方便以后使用。
（2）对开发人员进行提示。
HTML注释快捷添加注释与删除注释：
(1) ctrl + /
(2) shift + alt + a
注：二者有细微区别

HTML语义化

定义：所谓HTML语义化指的是，根据网页中内容的结构，选择合适的HTML标签进行编写。

优点 :
（1）在没有CSS的情况下，页面也能呈现出很好的内容结构。
（2）有利于SEO，让搜索引擎爬虫更好的理解网页。
（3）方便其他设备解析（如屏幕阅读器，盲人阅读器等）。
（4）便于团队开发与维护。

标题与段落

（1）标题（h标签）➡双标签： <h1></h1> ...... <h6></h6>重要性呈递减
（2）在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。
（3）h5、h6标签在网页中不经常使用。
（4）段落（p标签）➡双标签： <p></p> 注：每一个段落一个标签，不要把很多段落写入一个标签。

文本修饰标签

文本修饰标签
强调➡双标签： <strong></strong> : 表示强调，会对文本进行加粗
<em></em> : 表示强调，会对文本进行斜体
区别 : （1）写法和展示效果是有区别的，一个加粗、一个斜体。
（2）strong的强调性更强，em的强调性稍弱。
下标➡双标签：<sub></sub>
上标➡双标签：<sup></sup>
删除文本➡双标签：<del></del>
插入文本➡双标签：<ins></ins> 注：一般情况下，删除文本都是和插入文本配合使用的。

图片标签与图片属性

图片标签➡单标签：<img>
属性：
（1）src : 引入图片的地址。
（2）alt : 当图片出现问题的时候，可以显示一段友好的提示文字。
（3）title : 提示信息。
（4）width、height : 图片的大小。（CSS也可以完成）

引入文件的地址路径

（1）相对路径（相对于当前这个文件进行引入，更好移植）：
- 在路径中表示当前路径 : .
- 在路径中表示上一级路径 : ..
（2）绝对路径（工程之下）：
尽量避免写反斜线

跳转链接

链接标签➡双标签： <a></a>
属性：
href : 链接的地址
target : 可以改变链接打开的方式，默认的情况下（在当前页面打开：_self , 新窗口打开_blank）
base➡单标签：<base>
作用: 改变链接的默认行为的。

跳转锚点

方法一：# + id属性
方法二：# + name属性（注意name属性加给的是a标签）

特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符，如®（注册商标）、©(版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。

特殊字符

方法：& + 字符
作用：解决冲突，如左右尖括号、添加多个空格的实现

列表标签

无序列表：
<ul>、<li> : 列表的最外层容器、列表项（符合嵌套的规范）。
注：ul和li必须是组合出现的，他们之间是不能有其他标签的。
type属性：改变前面标记的样式（一般都是用CSS去控制）。
有序列表：
<ol>、<li> : 列表的最外层容器、列表项（一般用的比较少，可以用无序列表来实现）。
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。
type属性：改变前面标记的样式（一般都是用CSS去控制）。
定义列表：（列表项需要添加标题和对标题进行描述的内容）
dl：定义列表
dt：定义专业术语或名词
dd：对名词进行解释和描述

嵌套列表

列表之间可以互相嵌套形成多层级列表。

注：三种列表形式都可以嵌套

表格标签

table：表格的最外层容器
tr：定义表格行
th：定义表头
td：定义表格单元
caption：定义表格标题
注：之前是有嵌套关系的，要符合嵌套规范。
语义化标签：<tHead>、<tBody>、<tFood>
注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。

表格属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式（左left、中center、右right）
valign：上下对齐方式（上top、中middle、下bottom）

表单标签

<form>：表单的最外层容器
<input>➡单标签：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
input代码展示：

 <form action="http://baidu.com">
        <h2>
            输入框：
        </h2>
        <input type="text" placeholder="请输入用户名">
        <h2>
            密码框：
        </h2>
        <input type="password" placeholder="请输入密码">
         <h2>
            复选框
        </h2>
        <input type="checkbox" checked="checked">吉他
        <input type="checkbox" checked>钢琴
        <input type="checkbox" disabled>竹笛
        <h2>
            单选框
        </h2>
        <input type="radio" name="gender">喜欢
        <input type="radio" name="gender">不喜欢
        <h2>
            上传文件
        </h2>
        <input type="file">
        <h2>
            提交按钮
        </h2>
        <input type="submit">
        <h2>
            重置按钮
        </h2>
        <input type="reset">
    </form>

<textarea>：多行文本框
<select>、<option>：下拉菜单
<label>：辅助表单
还有一些常见的属性：checked、disabled、name、for…

代码展示：

<form action="http://baidu.com">
		<h2>
            多行文本框
        </h2>
        <textarea cols="30" rows="10"></textarea>
        <h2>
            下拉菜单
        </h2>
        <select>
            <option selected disabled>请选择</option>
            <option>
                北京
            </option>
            <option>
                上海
            </option>
            <option>
                杭州
            </option>
        </select>
        <select size="2">
            <option>
                北京
            </option>
            <option>
                上海
            </option>
            <option>
                杭州
            </option>
        </select>
        <select multiple>
            <option>
                北京
            </option>
            <option>
                上海
            </option>
            <option>
                杭州
            </option>
        </select>
        <input type="file" multiple>

        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>

</form>

表格表单组合

表格表单之间可以互相组合形成数据展示效果。

表单表格组合(表单对嵌套没有要求，但表格对嵌套有要求)
<form >
            <table border="1" cellpadding="30">
                <tbody>
                    <tr align="center">
                        <td rowspan="4">
                            总体信息
                        </td>
                        <td colspan="2">
                            用户注册
                        </td>
                    </tr>
                    <tr align="right">
                        <td>
                            用户名：
                        </td>
                        <td>
                            <input type="text" placeholder="请输入用户名">
                        </td>
                    </tr>
                    <tr align="right">
                        <td>
                            密码：
                        </td>
                        <td>
                            <input type="password" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr align="center">
                        <td colspan="2">
                            <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="resrt">
                        </td>
                    </tr>
                </tbody>
            </table>

 </form>

div与span

div（块）：

div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相
当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。（做一个区域划分的块）

span（内联）：

用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。（对文字进行修饰的）

CSS语法格式

CSS基础语法：
（1）格式：选择器{属性1：值1；属性2：值2}
（2）单位：px -> 像素（pixel）、 % -> 百分比、外容器 -> 600px 当前容器 50% -> 300px
（3）基本样式：width(宽)、height(高)、background-color(背景颜色)

<style>
        div{width: 100px;height: 100px;background-color: red;}
</style>

CSS注释（和HTML的快捷键相同）： /* CSS注释的内容 */

内联样式与内部样式

1.CSS样式的引入方式
（1）内联（行内、行间）样式

在html标签上添加style属性来实现的

（2）内部样式

在<style>标签内添加的样式
注：内部样式的优点，可以复用代码

区别：内部样式的代码可以复用、符合W3C的规范标准，进行让结构和样式分开处理。

代码展示：

<!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>
        div{width: 100px;height: 100px;background-color: red;}
    </style>

</head>
<body>
    <!-- 内联的： -->
    <div style="width: 100px;height: 100px;background-color: red;">这是一个块</div> 
</body>
</html>

外部样式及两种写法

外部样式：

引入一个单独的CSS文件，name.css。

（1）通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。
（2）通过@import方式引入外部样式。
注：这种方式有很多问题，不建议使用。

CSS中的颜色表示法

方法
（1）单词表示法：red、blue、green、yellow…
（2）十六进制表示法：#000000(min)、#ffffff(max)
注：二进制（01）、十进制（0123456789）、十六进制（0123456789abcdef）
（3）RGB三原色表示法：rgb(255，255，255);
取值范围：0~255
获取颜色的工具
（1）提取颜色的下载地址
注：需要联网，该工具无法识别本地文件。
（2）Ps[Photoshop]

背景样式

CSS背景样式
（1）background-color:背景颜色
（2）background-image:背景图片
url(背景地址)
注：默认会水平垂直都铺满背景图
（3）background-repeat:背景图片的平铺方式
repeat-x（x轴平铺）、repeat-y（y轴平铺）、repeat（x，y 都进行平铺，默认值）、no-repeat（都不平铺）
（4）background-position:背景图片的位置
x y（填px、%，正的往右下，负的往左上）、单词：x：left、center、right . y：top、center、bottom
（5）background-attachment:背景图随滚动条的移动方式
scroll：默认值（背景位置是按照当前元素进行偏移的） . fixed：固定（背景位置是按照浏览器进行偏移的）

边框样式

border-style:边框的样式
solid :实线、dashed :虚线、dotted :点线
border-width:边框的大小
px......
border-color:边框的颜色
red......
注:
（1）一般三个都写。
（2）针对某一条边进行单独设置
border-right-style：中间是方向，如left、right、top、bottom

代码展示：

<!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>
        div{width: 300px;height: 300px;border-style: solid ;border-color: cyan;border-width: 30px;}
        div{width: 300px;height: 300px;border-style: dashed ;border-color: cyan;border-width: 30px;}
        div{width: 300px;height: 300px;border-right-style: dotted ;border-color: cyan;border-width: 30px;}
        div{width: 300px;height: 300px;border-top-style: dotted ;border-color: cyan;border-width: 30px;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

透明颜色：transparent

family字体类型

CSS文字样式
font-family：字体类型
英文字体：Arial、‘Times New Roman’
中文字体（默认微软雅黑）：微软雅黑（‘Microsoft YaHei’）、宋体（SimSun）
注：英文只支持英文，但中文中英文都支持。
衬线体与非衬线体
比如宋体是衬线体，微软雅黑是非衬线体。
注意事项：
（1）设置多字体方式（目的是让计算机有备选方案，如果计算机中没有该字体则向后进行匹配，可以适应更多的设备）
（2）引号的问题（当字体出现空格时必须用引号括起来，视为整体）

字体大小粗细样式

font-size：文体大小
默认大小：16px
写法：像素（px）、单词（small、large…）
注：单词写法展示（字体大小一般为偶数，为了更好的实现文字对齐等操作）
font-weight：文体粗细
两种模式：正常（normal）、加粗（bold）
写法：单词（normal、bold）、数值（100、200…900，其中100到500都是正常的，而600到900都是加粗的）
font-style：文体样式
两种模式：正常（normal）、斜体（italic）
写法：单词（normal、italic）
注：oblique也是表示斜体，用的比较少，一般了解即可，两个斜体的区别在于（1）italic带有倾斜属性的字体的才可以设置倾斜操作。（2）oblique没有倾斜属性的字体也可以设置倾斜操作。
color：字体颜色

CSS段落样式

文本修饰与文本大小写
（1）text-decoration：文本装饰
写法：下划线（underline）、上划线（overline）、删除线（line-through）、不添加任何装饰（none）
添加多个文本修饰：用空格隔开
（2）text-transform：文本大小写（针对英文段落）
写法：小写（lowercase）、大写（uppercase）、只针对首字母大写（capitalize）
文本缩进与文本对齐
（1）text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同
（2）text-align：文本对齐方式
对齐方式：left、right、center、justify（两端点对齐）
文本的行高
line-height：定义行高
定义：一行文字的高度，上边距和下边距的等价关系
默认行高：不是固定值，而是变化的，根据当前字体的大小在不断的变化。
取值：数值（px）、scale（比例值，跟文字大小成比例的）
文本间距与英文折行
（1）letter-spacing：字之间的间距
（2）word-spacing：词之间的间距（针对英文）
强制折行(针对英文和数字不自动折行的问题）
（1） word-break : break-all;(非常强烈的折行)
（2）word-wrap ：break-word;（不是那么强烈的折行，会产生一些空白区域）

CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。

注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式，这样样式才不会被覆盖掉。

复合样式的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border，有的是需要关心顺序，例如font。
（1）background：red url() repeat 0 0;
（2）border：1px red solid;
（3）font：最少要有两个值 size family
weight style size family √
style weight size family √
weight style size/line-height family √

CSS选择器

ID选择器及注意事项
css：#elem{}
html：id = “elem”
注:
（1）在一个页面中，ID值是唯一的，只能出现一次，出现多次是不符合规范的。
（2）命名规范，字母 _ - 数字(命名的第一位不能是数字)。
（3）命名方式，驼峰式（大驼峰如SearchButton、小驼峰如searchButton）、下划线式（如search_small_button）、短线式（如search-small-button）。
CLASS选择器及注意事项
css：.elem{}
html：class = “elem”
注:
（1）class选择器是可以复用的。
（2）可以添加多个class样式。
（3）多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
（4）标签+类的写法。
标签群组通配等选择器
（1）标签选择器（TAG选择器）
css：div{}
html：<div>
使用的场景：去掉某些标签的默认样式时；复杂的选择器中，如：层次选择器。
（2）群组选择器（分组选择器）
css：div，p，span{}
注：可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。
代码展示：

<!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>
        div,#text,.title{background:red;}
    </style>
</head>
<body>
    <div>111</div>
    <p id="text">222</p>
    <h2 class="title">333</h2>
</body>
</html>

（3）通配选择器
*{} -> div，ul，li，p，h1，h2…{}
注:尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景：去掉所有标签的默认样式时。

层次选择器
后代：M N{ }
父子：M > N{ }
兄弟：M ~ N （当前M下面的所有兄弟N标签）
相邻：M + N （当前M下面相邻的N标签）
属性选择器

M[attr] {}
= ：完全匹配
*= ：部分匹配
^= ：起始匹配
$= ：结束匹配
[ ][ ][ ] ：组合匹配
代码展示：

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

        div[class*=box]{background-color: red;}
    </style>
</head>
<body>
    <div>4444</div>
    <div class="box">4444</div>
    <div class="title">4444</div>
    <div class="box-search">4444</div>
    <div class="search-box">4444</div>
</body>
</html>

伪类选择器

CSS伪类用于向某些元素添加特殊来的效果。一般用于初始样式添加不上的时候，用伪类来添加。
M：伪类{ }

（1）:link -> 访问前的样式 (只能添加给a标签)
（2）:visited -> 访问后的样式 (只能添加给a标签)
（3）:hover -> 鼠标移入时的样式 (可以添加给所有的标签)
（4）:active -> 鼠标按下时的样式 (可以添加给所有的标签)
注：
其一、link visited 只能给a标签加，hover和active 可以给所有的标签加。
其二、如果四个伪类都生效，一定要注意顺序：LVHA。
其三、一般网站只这样去设置：a{} a:hover{}。

<!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>
        div{width: 2000px;height: 200px;background-color: red;}
        div:hover{background-color: blue;}
        div:active{background-color: green;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

（5）:after、:before ->通过伪类的方式给元素添加一段文本内容，使用content属性。
（6）:checked、:disabled、:focus ->都是针对表单元素的。
（7）结构性伪类选择器
: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优先级

相同样式优先级：
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
内部样式与外部样式：
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

（1）单一样式优先级
style行间 > id > class > tag > * > 继承
注：
style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1
（2）important群组等优先级
!important

提升样式优先级，非规范方式，不建议使用。（不能针对继承的属性进行优先级的提升）

标签+类与单类

标签 + 类 > 单类

群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高。

层次优先级
（1）权重比较（等级比较）
例：
ul li .box p input{ } ->1+1+10+1+1
.hello span #elem{ } ->10+1+100
（2）约分比较
ul li .box p input{ } ->li p input{ }
.hello span #elem{ } ->#elem{ }

CSS盒子模型

1. CSS标准盒子模型
注：
（1）背景颜色会填充到margin以内的区域(不包括margin区域)。
（2）文字会在content区域。
（3） padding不能出现负值，margin是可以出现负值。

组成：content(物品) -> padding(填充物) -> border(包装盒) -> margin(盒子与盒子之间的间距)

content：内容区域，由width和height组成的
border：边框
padding：内边距（内填充）
只写一个值：30px(上下左右)
写两个值：30px 40px(上下、左右)
写四个值：30px 40px 50px 60px(上、右、下、左)
单一样式只能写一个值：
padding-left、padding-right、padding-top、padding-bottom
margin：外边距（外填充）
只写一个值：30px(上下左右)
写两个值：30px 40px(上下、左右)
写四个值：30px 40px 50px 60px(上、右、下、左)
单一样式只能写一个值：
margin-left、margin-right、margin-top、margin-bottom

box-sizing改变盒模型

box-sizing 属性允许您以特定的方式式定义匹配某个区域的特定元素。取值为
content-box（默认值）| border-box。

盒尺寸，可以改变盒子模型的展示形态。
content-box（默认值）：width、height -> content
border-box ：width、height -> content、padding、border

使用的场景:
（1）不用再去计算一些值
（2）解决一些100%的问题

盒模型之margin叠加问题

当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。

解决方案：
（1）BFC规范。
（2）想办法只给一个元素添加间距。

盒模型之margin传递问题

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。

解决方案：
（1）BFC规范.
（2）给父容器加边框。
（3）margin换成padding。

CSS盒子模型之扩展
margin自适应居中
不设置content的现象

扩展:
（1）margin左右自适应是可以的，但是上下自适应是不行的。（如果想实现上下自适应的话，需要在第二大部分来进行学习）
（2）width、height不设置的时候，对盒子模型的影响，会自动去计算算容器的大小，节省代码。

盒子模型的一些问题：
（1）margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。
（2）margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。

标签分类

按类型划分标签

block（块） :div、p ul li h1…
（1）独占一行
（2）支持所有样式
（3）不写宽的时候，跟父元素的宽相同
（4）所占区域是一个矩形
inline（内联）：span、a、em strong、img…
（1）挨在一起的
（2）有些样式不支持，例如:width、height、margin、padding
（3）不写宽的时候，宽度由内容决定
（4）所占的区域不一定是矩形
（5）内联标签之间会有空隙，原因:换行产生的
inline-block（内联块）：input select…
挨在一起，但是支持宽高

注：布局一般用块标签，修饰文本一般用内联标签。

按内容划分标签
Flow:流内容
Metadata:元数据
Sectioning:分区
Heading:标题
Phrasing:措辞
Embedded:嵌入的
Interactive:互动的

W3C：动态图片

3.按显示划分标签
（1）替换元素:浏览器根据元素的标签和属性，来决定元素的具体显示内容。
img、input…
（2）非替换元素 :将内容直接告诉浏览器，将其显示出来。
div、h1、p…

显示框类型

display：block、inline、inline-block、none…
区别:
display:none 不占空间的隐藏
visibility:hidden 占空间的隐藏

标签嵌套规范

块标签可以嵌套内联标签
块标签不一定能嵌套块标签
内联标签不能嵌套块标签
注：a标签是一个例外

代码展示

ul、li
dl、dt、dd 
table、tr、td
块能够嵌套内联
<div>
	<span></span>
	<a href="#"></a>
	</div>
块嵌套块
<div>
	<div></div>
</div>
特殊:
	错误的写法:
	<p>
		<div></div>
	</p >
内联是不能嵌套块
	错误的写法:
	<span>
		<div></div>
	</span>
	特殊:
	正确的写法:
	<a href="#">
		<div></div>
	</a>

溢出隐藏

overflow：
visible：默认
hidden
scroll
auto
x轴、y轴
overflow-x、overflow-y针对两个轴分别设置

透明度与手势

（1）opacity：0(透明)~ 1(不透明)
0.5(半透明)
注:占空间、所有的子内容也会透明
（2）rgba()：0~1
注:可以让指定的样式透明，而不影响其他样式
（3）cursor：手势
default：默认箭头
要实现自定义手势：
准备图片：.cur、.ico
cursor：url(./img/cursor.ico),auto；

最大最小宽高

min-width、min-height
max-width、max-height

%单位：换算 -> 以父容器的大小进行换算的

一个容器怎么适应屏幕的高：
容器加height：100%；body：100%；html：100%；

html，body{ height：100%；}
.contrainer{ height：100%；}

CSS默认样式

有些标签有默认样式，有些标签没有默认样式。

没有默认样式：
div、span…
有默认样式：
（1）body->marign：8px
（2）h1…h6->
margin：上下 21.440px
font-weight：bold
（3）p->margin：上下 16px
（4）ul->
margin :上下16px
padding：左40px
默认点：list-style：disc
（5）a->text-decoration：underline；

CSS重置样式（CSS reset）

*{ 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{ dispaly:block}
问题的现象:图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-align:baseline;基线对齐方式，默认值
img{ vertical-align:bottom;}解决方式是推荐的
写具体页面的时候或一个布局效果的时候:
（1）写结构
（2）css重置样式
（3）写具体样式

float浮动概念及原理

文档流

文档流是文档中可显示对象在排列时所占用的位置。

float特性

加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值：
left、right、none( 默认 )
float注意点：
只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列。
主要给块元素添加，但也可以给内联元素添加。
如何清除浮动?
（1）上下排列：clear属性，表示清除浮动的，left、right、both
（2）嵌套排列，利用clear属性清除float浮动：
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动门也会影响到后面的元素。
overflow：hidden(BFC规范)，如果有有子元素想溢出，那么会受到影响。
display：inline-block(BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签:不推荐，会多添加一个标标签。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。
（clear属性只会操作块标签，对内联标签不起作用）

position定位

position特性：
css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
position取值：
static（默认）
relative
absolute
fixed
sticky

relative相对定位

如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的

absolute绝对定位

使元素完全脱离文档流
使内联元素支持高 (让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联的特性)
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

fixed和sticky及zlndex

（1）fixed固定定位

使元素完全脱离文档流
使内联元素支持宽高(让内联具备块特性)
使块元素默认常机据内容决定(让块具备内联的特性)
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

（2）sticky粘性定位

在指定的位置，进行黏性操作

（3）z-index定位层级

默认层级为0
嵌套时候的层级问题

CSS绝对定位与浮动的区别

绝对定位与浮动都会使元素脱离文档流，但是在文档流中的其他元素会忽略绝对定位元素的存在而直接穿过绝对定位元素，而文档流中的其他元素并不会忽略浮动元素的存在，会绕开浮动元素

定位实现下拉菜单

<!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>
    *{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>
    #damo1{width: 300px;height: 300px;border: 1px black solid;position: relative;}
    #damo2{width: 100px;height: 100px;background: gray;position: absolute;left: 50%;top: 50%;margin: -50px 0 0 -50px;}
    </style>
</head>
<body>
    <div id="damo1">
        <div id="damo2"></div>
    </div>
</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>
    ul{list-style: none;}
    #menu ul li{padding-left: 18px;position: relative;}
    #menu ul li:before{content: "";display: block;width: 3px;height: 3px;background: red;position: absolute;left: 8px;top: 50%;}
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ul>
    </div>
</body>
</html>

CSS添加省略号

width：
必须有一个固定的宽
white-space：nowrap
不让内容折行
overflow：hidden
隐藏溢出的内容
text-overflow：ellipsis
添加省略号

CSS精灵及好处

CSS Sprite
特性：CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处：可以减少图片的质量，网页的图片加载速度快，减少图片的请求的次数，加快网页的打开。

CSS圆角设置

border-radius
给标签添加圆角

PC端企业类型整页制作

通栏：自适应浏览器的宽度。
版心：固定一个宽度，并且让容器居中。
方法：将相同的CSS样式单独加到一个文件中进行导入，可以减少代码字数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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%; height:100%; background:center 0 no-repeat; position: absolute; le
    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:100%;}
    #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/mail1.png);}
    #service .service_list li:nth-of-type(3) div{ background-image: url(./images/graphic1.png);}
    #service .service_list li:nth-of-type(4) div{ background-image: url(./images/e-bussiness1.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 style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
            <li 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.mailboxagents</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/20141121095216750.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/20141121095528549.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>TEH 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 Bowenshangmei 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>

*{ 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: #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;}

PC端游戏类型整页制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
    #main{ background:url(./images/bg20190104.jpg) no-repeat center 0;}
    #nav{ background:url(./images/nav_down_re.png) repeat-x,url(./images/nav.png) no-repeat center 0;}
    #nav .container{min-height: 236px; overflow: hidden;}
    #nav .nav_logo{ width:138px; height:112px; margin:15px 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 , #nav dd a.new:after{ content:""; display: block; width:12px; height:12px; background: url(./images/nav_tips.png) no-repeat; position: absolute; right:-15px; top: 0;}
    #nav dd a.hot:after{ background-position: 0 -12px;}
    #nav dd a.new:after{ background-position: 0 0;}
    #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:325px;}

    #link{ height:175px;}
    #link a{ width:463px; height:100%; display: block; margin: 0 auto;}

    #banner{ height:276px; background:url(./images/top.png) no-repeat; margin-top: 20px;}
    #banner .banner_left{ width:240px; height:310px; background:url(./images/down_user_spr.png) no-repeat; margin: -20px 0 0 7px;}
    #banner .banner_download p{ width:91px; height:25px; background:url(./images/down_user_spr.png) no-repeat; margin:0 auto; text-indent: -9999px; overflow: hidden;}
    #banner .banner_download p:first-child{ background-position: -253px 0; margin-top:44px;}
    #banner .banner_download p:last-child{ background-position: -253px -25px;}

    /* CSS3简单的动画 */

    #banner .banner_download:hover p:first-child{ animation:1s upMove;}    
    @keyframes upMove{
        0%{ transform : translateY(-40px); opacity: 0; }
        100%{ transform : translateY(0); opacity: 1; }
    }
    #banner .banner_download:hover p:last-child{ animation:1s downMove;}    
    @keyframes downMove{
        0%{ transform : translateY(40px); opacity: 0; }
        100%{ transform : translateY(0); opacity: 1; }
    }

    /* CSS3简单的动画 */

    #banner .banner_user div{ width:56px; height:56px; border-radius: 50%; margin:80px auto 0 auto; border:4px #283257 solid; box-sizing: border-box; overflow: hidden;}
    #banner .banner_user img{ width:100%; height:100%;}
    #banner .banner_user p{ text-align: center; font-size:12px; color:white; margin-top: 25px;}
    #banner .banner_user a{ color:#34f1d0;}

    #banner .banner_list{ width:497px; height:253px; overflow: hidden; margin:13px 0 0 4px; position: relative;}
    #banner .banner_list_ul{ width:2000px;}
    #banner .banner_list_ul li{ width:497px; height:253px; float:left;}
    #banner .banner_bottomline{ width:100%; height:37px; background:rgba(0,0,0,.5); border-top:1px #514b55 solid; position: absolute; bottom: 0; left: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/top.png) no-repeat -603px -299px; cursor: pointer;}
    #banner .banner_bottomline_ul li.active{ background-position: -581px -299px;}
    #banner .banner_bottomline_leftbtn, #banner .banner_bottomline_rightbtn{ width:12px; height:22px; position: absolute; top:5px; background:url(./images/top.png) no-repeat; cursor: pointer;}
    #banner .banner_bottomline_leftbtn{ left:5px; background-position: -542px -296px;}
    #banner .banner_bottomline_rightbtn{ right:5px; background-position: -554px -296px;}
    #banner .banner_bottomline_leftbtn:hover{ background-position: -542px -325px;}
    #banner .banner_bottomline_rightbtn:hover{ background-position: -554px -325px;}
    #banner .banner_list_lt,#banner .banner_list_rt,#banner .banner_list_rb, #banner .banner_list_lb{ width:12px; height:12px; background:url(./images/top.png) no-repeat; position: absolute;}
    #banner .banner_list_lt{ left:-2px; top:-4px; background-position: -621px -299px;}
    #banner .banner_list_rt{ right:-2px; top:-4px; background-position: -634px -299px;}
    #banner .banner_list_rb{ right:-2px; bottom:-5px; background-position: -634px -312px;}
    #banner .banner_list_lb{ left:-2px; bottom:-5px; background-position: -621px -312px;}

    #banner .banner_right{ width:209px; height:255px; position: relative; margin:12px 0 0 12px;}
    #banner .banner_right_lt,#banner .banner_right_rt,#banner .banner_right_rb,#banner .banner_right_lb{ width:15px; height:15px; background:url(./images/top.png) no-repeat; position: absolute;}
    #banner .banner_right_lt{ left:-4px; top:-4px; background-position: -681px -298px;}
    #banner .banner_right_rt{ right:-4px; top:-4px; background-position: -696px -298px;}
    #banner .banner_right_rb{ right:-4px; bottom:-6px; background-position: -696px -313px;}
    #banner .banner_right_lb{ left:-4px; bottom:-6px; background-position: -681px -313px;}
    </style>
</head>
<body>
    <div id="head" class="container-fluid">
        <div class="container">
            <div class="head_logo l">
                <a href="#">腾讯游戏</a>
            </div>
            <div class="head_ad l">
                <a href="#">
                    <img src="./images/ad.jpg" alt="">
                </a>
            </div>
            <div class="head_menu r">
                <div class="head_menu_czsh l">
                    <a href="#">成长守护平台</a>
                </div>
                <div class="head_menu_top l">
                    <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/inside_logo.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_ss">
                    <dt></dt>
                    <dd><a class="hot" href="#">SSC</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>
            </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">
                    <div>
                        <img src="./images/56x56.jpg" alt="">
                    </div>
                    <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="http://ossweb-img.qq.com/upload/adw/image/20190510/6ae827443c667576e26fa4d48d93e199-80.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="http://ossweb-img.qq.com/upload/adw/image/20190508/178c724ac47ee0f74e32b4a386dd5808-80.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="#"><img src="http://ossweb-img.qq.com/upload/adw/image/20190513/f7aa08a33c9ee8f1d66d543b10cba86b-80.jpg" alt=""></a>
                        </li>
                    </ul>
                    <div class="banner_bottomline">
                        <ul class="banner_bottomline_ul">
                            <li class="active"></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/bebae86c3d1f64d50a53434ed5458d22-80.jpg" alt=""></a>
                <i class="banner_right_lt"></i>
                <i class="banner_right_rt"></i>
                <i class="banner_right_rb"></i>
                <i class="banner_right_lb"></i>
            </div>
        </div>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </div>
</body>
</html>

*{ 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/head_bg.png') repeat-x;}
#head .container{ height:41px;}
#head .head_logo{ width:220px; height:41px; background:url(../images/ost-bg.png) no-repeat 0 -38px;}
#head .head_logo a{ display: block; width:100%; height:100%; text-indent: -9999px; overflow: hidden;}
#head .head_ad{ margin-left: 8px;}
#head .head_menu{ font-size: 12px;}
#head .head_menu div{ height:18px; margin-top:13px; background:url(../images/ost-bg.png) no-repeat;}
#head .head_menu .head_menu_czsh{ margin-right: 26px; padding-left:20px; background-position:left -92px; }
#head .head_menu .head_menu_top{ padding-right:17px; background-position:right -89px; }