网页的相关概念

网页

网站是网页的集合。

网页是网站中的一页，通常是HTML格式的文件，要通过浏览器阅读。

通常以.htm或.html后缀结尾的文件，因此俗称HTML文件。

HTML

超文本标记语言(Hyper Text Markup Language)，描述网页的一种语言.

非编程语言,是标记语言.

标记语言是一套标记标签.(markup tag)

常用的浏览器

浏览器内核

即渲染引擎：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器	内核	备注
IE	Trident	IE、猎豹、360极速浏览器、百度浏览器
firefox	Gecko	火狐浏览器内核
Safari	Webikit	苹果浏览器内核
chrome/Opera	Blink	chrome/opera浏览器内核.Blink其实是WebKit的分支。

Web标准

Web标准是一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

Web标准的功能

遵循Web标准可以让不同开发人员写出的页面更标准、统一外，还有以下优点。

前景广阔
广泛设备访问
更容易搜索引擎
降低网站流量费用
使网站更易于维护
提高页面浏览速度

Web标准的构成

包括：结构，表现，行为

结构：对网页元素进行分类和整理，HTML
表现：网页元素的版式、颜色、大小等外观样式，CSS
网页模型的定义和交互的编写，Javascript

Web标准的最佳体验方案：结构，样式、行为相分离

HTML标签

HTML语法规范

1.HTML标签是由尖括号包围的关键字，例如<html>.

2.标签通常是成对出现的，例如<html>和</html>，前者为开始标签，后者为结束标签。

3.单标签：有些特殊的标签必须是单个标签，如<br/>

标签的关系

包含或嵌套关系。

1
2
3

<head>
	<title></title>
</head>

并列关系

1 2	<head></head> <body></body>

HTML的基本结构标签

第一个HTML网页

每个网页都会有一个基本的结构标签（骨架标签），页面内容是在基本标签上写的，HTML页面也称为HTML文档。

标签名	定义	说明
`<html></html>`	HTML标签	最大标签，根标签
`<head></head>`	文档的头部	在head的标签中我们必须设置的标签是tiltle
`<title></title>`	文档的标题	网页标题（再看一下嘛，不要走）
`<body></body>`	文档主体	元素包含文档的所有内容，页面内容基本搜索放到body里面的

案例：

<html>
      <head>
	<title>第一个页面</title>
      </head>
      <body>
	此岸花未，彼岸花开。
      </body>
</html>

开发工具

vscode

文档类型声明标签

作用是告诉浏览器使用哪种HTML版本来显示网页。

eg：
用html5来显示网页，必须写在第一行，它不是HTML标签，它既是文档类型声明标签

lang语言种类

en–英文

zh-CN–中文

fr–法文

字符集

1	<meta charset="UTF-8">

必须要写，否则可能引起乱码的情况，一般情况下，统一使用UTF-8万国码）

PS:GB2312（简体中文）、BIG5（繁体）、GBK（简繁）

HTML常用标签

标题标签`<h1>-<h6>`

1	<h1> 一级标题 </h1>

分段和换行标签

1 2	<p> 段落 </p> <br/>

文本格式化标签

粗体，斜体，下划线等效果

语义	标签	说明
加粗	`<strong></strong>or<b></b>`	推荐前者
斜体	`<em></em>or<i></i>`	推荐前者
删除线	`<del></del>or<s></s>`	推荐前者
下划线	`<ins></ins>or<u></u>`	推荐前者

盒子标签

1 2	<div> 这是头部 </div> 分割，分区 <span> 今日价格 </span> 跨度

特点：

div用来布局，但是一行只能放一2个div，大盒子
span标签用来布局，一行上可以多个span，小盒子

图像标签和路径

1.图像标签

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时显示文字
title	文本	提示文本，鼠标放到图像上，显示文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

1	<img src="图像URL" />

1	<h4> 图像标签的使用：</h4><img src="img.jpg"/><h4> alt 替换文本，图像显示不出来的时候用文字替换：</h4><img src="img1.jpg" alt="这是彼岸花的图片" />

相对路径

上一级：../

上两级：../../

eg:../images/img.jpg

绝对路径

超链接标签

语法格式

1	<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

a：锚

两个属性的作用如下：

属性	作用
href	用于指定链接目录的url地址，（必须属性）
target	用于指定链接页面的打开方式，_self默认值，__blank在新窗口中打开

链接分类：

1.外部链接，如百度

2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。

3.空连接

4.下载链接

5.网页元素链接：在网页中的各种网页元素，如文本，图像，表格，视频都可以添加链接

6.锚点链接：点击链接，可以快速定位到页面中的某个位置

在链接文本的href属性中，设置属性值为**#名字**的形式
找到目标位置的标签，里面添加一个id属性=刚才的名字

<!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>超链接标签</title></head><body>    <h4>1.外部标签</h4>    <a href="http://bler.top">我的博客</a><br />    <a href="http://bler.top" target="_blank">我的博客</a><br />    <h4>2.内部标签</h4>    <a href="03-vscode创建页面.html">hh</a><br />    <a href="03-vscode创建页面.html" target="_blank">hh</a><br />     <h4>3.空链接</h4>    <a href="#">无地点</a><br />    <h4>4.下载链接 下载的链接是 文件.exe或者是zip等压缩包形式</h4>    <a href="hh.zip">下载文件</a>    <h4>5.网页元素的链接</h4>    <a href="http://bler.top"><img src="images/hh.jpg"/></a></body></html>

注释

注释以”“结束

快捷键：ctrl+/

特殊字符

一些特殊的符号很难或者不方便直接使用，可用下面的字符代替。

空格：&nbsp；

<:&lt；

大于:&gt；

表格标签

1.基本语法

```html

//定义表格标签//定义表格的行标签，必须嵌套在table标签中//单元格，必须嵌套


字母td指的是表格数据table data，即数据单元格内容

#### 表格单元标签

表头单元格里面的文本内容加粗居中显示。



```html
<th>

标签表示HTML表格的表头部分(table head缩写)

表格属性

这部分实际开发不常用，之后通过CSS来设置。

目的：

记住这些英文单词，后面CSS会用
直观感受表格的外观形态

属性名	属性值	描述
align	left,center,right	规定表格相对周围元素的对齐方式
border	1or””	规定表格单元是否拥有边框，默认为“”,表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值or百分比	规定表格的宽度

|但是这些属性要写到表格标签table里面

《table》《/table》	表格标签	就是一个四方的盒子
《tr》《/tr》	表格行标签	行标签要再table标签内部才有意义
《td></td》	单元格标签	单元格标签是个容器级元素，可以放任何东西
《th></th》	表头单元格标签	它还是一个单元格，但是里面的文字会居中且加粗
《caption></caption》	表格标题标签	表格的标题，跟着表格
clospan 和 rowspan	合并属性	用来合并单元格的

表格结构标签

把表格分割成表格头部和表格主体两大部分。

头部区域：《thead>,必须有tr标签，一般位于第一行

主体区域：《tbody>，主要用于存放数据本体

以上标签是放在table标签中。

小说排行榜案例

<!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>今日小说排行榜</title></head><body>    <table align="center" width="500" height="249" border="1" cellspacing="0">        <thead>            <tr>                <th>排名</th>                <th>关键词</th>                <th>趋势</th>                <th>进入搜索</th>                <th>最近七日</th>                <th>相关链接</th>            </tr>        </thead>        <tbody>            <tr>                <td>1</td>                <td>三体</td>                <td><img src="上箭头.png" width=16></td>                <td>456</td>                <td>123</td>                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>            </tr>            <tr>                <td>2</td>                <td>明朝那些事儿</td>                <td><img src="下箭头.png" width=16></td>                <td>456</td>                <td>123</td>                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>            </tr>            <tr>                <td>3</td>                <td>围城</td>                <td><img src="上箭头.png" width=16></td>                <td>456</td>                <td>123</td>                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>            </tr>            <tr>                <td>4</td>                <td>杀死一只知更鸟</td>                <td><img src="上箭头.png" width=16></td>                <td>456</td>                <td>123</td>                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>            </tr>            <tr>                <td>6</td>                <td>人类简史</td>                <td><img src="下箭头.png" width=16></td>                <td>456</td>                <td>123</td>                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>            </tr>            <tr>                <td>7</td>                <td>红楼梦</td>                <td><img src="上箭头.png" width=16></td>                <td>456</td>                <td>123</td>                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>            </tr>            <tr>                <td>8</td>                <td>白鹿原</td>                <td><img src="上箭头.png" width=16></td>                <td>456</td>                <td>123</td>                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>            </tr>        </tbody>            </table></body></html>

合并单元格

方式

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=”合并单元格的个数”

目标单元格(写合并代码)

跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三部曲

确定跨行还是跨列
找到目标单元格，写上合并方式=合并单元格数量。比如<td colspan=”2”》</td》。
删除多余的单元格

<!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>合并单元格</title>        <table width="500" height="249" border="1" cellspacing="0">            <tr>                <td></td>                <td colspan="2"></td>            </tr>            <tr>                <td rowspan="2"></td>                <td></td>                <td></td>            </tr>            <tr>                <td></td>                <td></td>            </tr>        </table></head><body>    </body></html>

列表标签

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：

无序列表
有序列表
自定义列表

无序列表

ul标签表示TTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用li标签定义。

无序列表语法格式：

1	<u1> <li>列表1</li> <li>列表2</li> <li>列表3</li> ……<ul>

无序列表是无序的，并列
ul只能嵌套li
li里面可以容纳任何元素

有序列表

ol标签用于定义有序列表，列表排序以数字显示，并且用li标签定义列表项。

有序列表的基本语法格式：

1	<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ……<ol>

性质和无序列表一致。

<!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>有序列表</title></head><body>    <h4>英雄尺寸排行榜</h4>    <ol>        <li>墨燃</li>        <li>梅寒雪</li>        <li>金龙盘玉柱</li>    </ol></body></html>

自定义列表

使用场景：

用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

dl用于定义描述列表（定义列表），该标签会与dt（定义项目/名字）je dd(描述每一个项目/名字)一起使用。

基本语法：

1	<dl> <dt>名词1</dt> <dd>名词解释1</dd> <dd><名词解释2/dd></dl>

注意：

dl里面只能包含dt和dd

dt和dd没有个数限制，经常是一个dt包含多个dd

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=<>>, initial-scale=1.0">    <title>Document</title></head><body>    <dl>        <dt>关注我们</dt>        <dd>新浪微博</dd>        <dd>官方微信</dd>        <dd>联系我们</dd>    </dl></body></html>

表单标签

目的：收集用户信息。

表单的组成

表单域
表单控件（表单元素）
提示信息

表单域

表单域是一个包含表单元素的区域。

form标签用于定义表单域，以实现用户信息的收集和传递。

form会把它范围内的表单元素信息提交给服务器。

1	<form action="url地址" method="提交范式" name="表单域名称"> 各种表单元素控件</form>

常用属性

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务程序的url地址
method	get/post	用于设置表单数据的提交发方式，其取值为get或post
name	名称	用于指定表单名称，以区分同一个页面中多个表单域

ps：

写表单元素之前，应该有个表单域把它们进行包含
表单域是form标签

表单控件

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

input输入表单元素
select下拉表单元素
textarea文本域元素

input表单元素

input标签用于收集用户信息。

在此标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值">

input标签为单标签
type属性设置不同的属性值用来指定不同控件类型

type属性值如下

属性值	描述
button	定义可点击按钮（多数情况下，用于通过javascript启动脚本)
checkbox	定义复选框
file	定义输入字段和”浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码。
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符。

属性	属性值	描述
name	用户自定义	定义input元素的名称
value	用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

name和value是每个表单元素都有的属性值，主要给后台人员使用。
name表单元素的名字，要求单选按钮和复选框要有相同的name值。
checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素。
maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。

eg:

<!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>input 表单域</title></head><body>    <form action="xxx.php" method="get">        <!-- text文本框 用户可以在里面输入任何文字 -->       用户名:<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>       <!-- password 密码框 用户看不见输入的密码 -->       密码:<input type="password" name="pwd"> <br>       <!-- radio 单选按钮 -->       <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name,才可以实现多选1 -->       <!-- 单选框和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮 -->       性别:男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"> <br>       <!-- checkbox 复选框 -->       爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 打豆豆 <input type="checkbox"  name="hobby" value="打豆豆" checked="checked"><br><br>       <!-- 点击了提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器 -->       <input type="submit" value="免费注册">       <!-- 恢复默认状态 -->       <input type="reset" value="重新填写">       <!-- 普通按钮 button 后期结合js到使用 -->       <input type="button" value="获取短信验证码"><br>       <!-- 文件域  -->       上传头像: <input type="file">    </form> </body></html>

效果：

label标签

label标签为input元素定义标注（标签）

label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

1	<label for="sex">男</label><input type="radio" name="sex" id="sex" />

核心：lable标签的for属性应当与相关元素的id属性相同

<!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>label标签</title></head><body>    <label for="text">用户名:</label> <input type="text" id="text">    <input type="radio" id="man" name="sex"> <label for="man">男</label>    <input type="radio" id="woman" name="sex"> <label for="woman">女</label></body></html>

select 下拉表单元素

使用场景：多个选项供用户选择，用此标签可以借用页面空间.我们可以使用select定义下拉列表。

语法：

1	<select> <ootion>选项1</ootion> <ootion>选项2</ootion> <ootion>选项3</ootion> ……</select>

ps：在option中定义select=”selected”时，当前项即为默认选中项。

eg：

<!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>select标签</title></head><body>    <form>    籍贯:    <select>        <option>山东</option>        <option>广西</option>        <option>北京</option>        <option  selected="selected">火星</option>        <option>M12</option>    </select>    </form></body></html>

textarea文本域元素

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，我们可以使用textarea标签在表单元素中，textarea标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多文字，该控件常见于留言板，评论。

语法：

1	<textarea rows="3" cols="20"> 文本内容</textarea>

cols和rows控制列数，行数，实际开发不用，一般用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>textarea 文本域</title></head><body>    <form>        留言板:        <textarea cols="50" rows="5">             这里，我期待与你相遇！        </textarea>    </form></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=<>, initial-scale=1.0">    <title>Document</title></head><body>    <h4>青春不常在，抓紧谈恋爱</h4><br>    <table width="500">        <tr>            <td>                性别:</td>            <td>                <input type="radio" name="sex" id="man"><img src="images/男.png" width="16"><label for="man">男</label>                <input type="radio" name="sex" id="woman"><img src="images/女.png" width="16"><label for="woman">女</label><br>            </td>        </tr>            <td>                生日:            </td>            <td>                <select>                    <option>1985</option>                    <option>1986</option>                    <option>1987</option>                    <option>1988</option>                    <option>1989</option>                    <option>1990</option>                    <option selected="selected">-请选择年-</option>                </select>                <select>                    <option>01</option>                    <option>02</option>                    <option>03</option>                    <option>04</option>                    <option>05</option>                    <option>06</option>                    <option selected="selected">-请选择月-</option>                </select>                <select>                    <option>01</option>                    <option>02</option>                    <option>03</option>                    <option>04</option>                    <option>05</option>                    <option>06</option>                    <option selected="selected">-请选择日-</option>                </select><br>            </td>        </tr>        <!-- 第三行 -->        <tr>            <td>                <label for="dq">所在地区:</label>            </td>            <td>                <input type="text" name="adress" id="dq"><br>            </td>        </tr>        <!-- 第四行 -->        <tr>            <td>                婚姻状况            </td>            <td>                <input type="radio" name="marry" id="m"><label for="m">未婚</label>                <input type="radio" name="marry" id="li"><label for="li">离婚</label></label><br>            </td>        </tr>        <!-- 第五行 -->        <tr>            <td>                <label for="degree">学历</label>            </td>            <td>                <input type="text" name="de" id="degree"></label><br>            </td>        </tr>        <!-- 第六行 -->        <tr>            <td>                喜欢的类型            </td>            <td>                <input type="radio" name="kind" id="k"><label for="k">可爱的</label>                <input type="radio" name="kind" id="k"><label for="k">可爱的</label>                <input type="radio" name="kind" id="ki"><label for="ki">妩媚的</label>                <input type="radio" name="kind" id="xiao"><label for="xiao">小鲜肉</label>                <input type="radio" name="kind" id="lao"><label for="lao">老腊肉</label>                <input type="radio" name="kind" id="all"><label for="all">都喜欢</label><br>            </td>        </tr>        <tr>            <td>                自我介绍            </td>            <td>                <textarea cols="50" rows="5">                     自我介绍                </textarea><br>            </td>        </tr>        <tr>            <td></td>            <td>                <input type="submit" value="免费注册"><br>            </td>        </tr>        <tr>            <td></td>            <td>                <input type="checkbox" checked="checked" >我同意服务条款<br>            </td>        </tr>        <tr>            <td></td>            <td>                <a href="#">我是会员，立即登录</a><br>            </td>        </tr>        <tr>            <td></td>            <td>                <h4>我承诺</h4>                <ul>                    <li>年满18，单身</li>                    <li>抱着严肃的态度</li>                    <li>真诚寻找另一半</li>                </ul>            </td>        </tr>    </table>    <form >     </form></body></html>

CSS

css简介

美化布局，页面布局

CSS是层叠样式表的简称。（级联样式表）

CSS也是一种标记语言。

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器用于指定CSS样式的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>体验CSS语法规范</title>    <style>        /* 选择器{样式} */        /* 给谁改样式{改什么样式} */        p{            color: lightcoral;            font-size: 12px;        }    </style></head><body>    <p>有点意思</p></body></html>

CSS代码风格

样式格式书写
样式大小风格
样式空格风格

样式格式书写

①紧凑格式

1	h3 { color: deeppink;font-size: 20px;}

②展开格式

1	h3 { color: deeppink; font-size: 20px;}/更直观/

空格规范

属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格

CSS基础选择器

选择器作用：选择标签用的。

选对人+做对事

选择器分类

选择器分为基础选择器和复合选择器两个大类。

基础选择器是由单个选择器组成的。

基础选择器又包括：标签选择器、类选择器、id选择器和通配选择器

标签选择器

即用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

语法

标签名 {

属性1：属性值1；

属性2：属性值2；

属性3：属性值3；

……

}

<!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>标签选择器</title><style>    p {        color: green;    }    div {        color: pink;    }</style></head><body>    <p>男生</p>    <p>男生</p>    <p>男生</p>    <div>女生</div>    <div>女生</div>    <div>女生</div></body></html>

类选择器

如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用选择器

.类名 {

属性1：属性值1；

……

}

<!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>标签选择器</title><style>    .red {        color: red;    }</style></head><body>    <ul>        <li class="red">男生</li>        <li>男生</li>        <li>男生</li>        <li>女生</li>        <li>女生</li>        <li>女生</li>    </ul>    <div class="red">花花</div></body></html>

ps：

类选择器使用”.”（英文点号）进行标识，后面紧跟类名（自定义）
长名称或词组可以使用横线为选择器命名
不要使用纯数字或中午命名，尽量使用英文命名
命名尽量有意义
命名规范：web前端开发规范手册

下面是常见的命名参考规范：

头部：header

内容：content/container

尾部：footer

导航：nav

侧栏：sidebar

栏目：column

整体布局：wrapper

左右中：left / right / center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：join

指南：guild

服务：service

状态：status

投票：vote

合作伙伴：partner

类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。简单理解就是一个标签有多个名字。

使用方式：用空格隔开即可。

<!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>多类名的使用</title>    <style>        .red {            color: pink;        }        .font-35 {            font-size: 35px;        }    </style></head><body>    <div class="red font-35">花花</div></body></html>

id选择器

id选择器可以为标有特定id的HTML元素指定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

语法：

1	#id名 { 属性1: 属性值1; ……}

和类选择器的区别

类选择器可以被多个对象使用
id选择器就行身份证号码，唯一，不能重复使用
最大区别：使用次数不同
类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

通配符选择器

通配符选择器用“*”定义，它表示页面中所有元素（标签）

语法

1	* { 属性1: 属性值1;}

ps:

通配符选择器不需要调用，自动就给所有元素使用样式。
特殊情况下才使用（后面讲）

<!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>通配符</title>    <style>        * {            color: lightblue;        }    </style></head><body>    <div>落日归山海，山海藏深意</div>    <span>s深爱却迟解，将爱且晚秋</span>    <ul>        <li>            闲坐看云，静听流水.        </li>    </ul></body></html>

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所用相同的标签	不能差异化选择	较多	p {color: red;}
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	.nav {color : red;}
id选择器	一次只能选择一个标签	ID选择器只能在每个HTML文档中出现一次	一般和js搭配	#nav {color: red;}
通配符选择器	选择所有标签	选择的太多，有部分不需要	特殊情况使用	* {color: red;}

如果是修改样式，类选择器是使用最多的。

CSS字体属性

CSS Fonts属性用于字体系列、大小、粗细和文字样式（斜体）

字体更改

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户浏览器中都能正常显示
最常见的几个字体：body{font-family:”Microsoft YaHei”,tohoma,arial,’Hiragino Sans GB’;}

<!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>CSS字体属性系列</title>    <style>        h2 {            font-family: "微软雅黑";        }        p {            font-family: Georgia, 'Times New Roman', Times, serif;        }    </style></head><body>    <h2>山河</h2>    <p>高山流水，知音难觅</p>    <p>山河不足重，重在遇知己.</p>    <p>知己既去，何若玉碎</p>    <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>CSS字体属性系列</title>    <style>        body {            font-size: 16px;        }        /* 标题标签比较特殊，需要单独制定文字大小 */        h2 {            font-size: 16px;        }    </style></head><body>    <h2>山河</h2>    <p>高山流水，知音难觅</p>    <p>山河不足重，重在遇知己.</p>    <p>知己既去，何若玉碎</p>    <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>CSS字体属性系列</title>    <style>        .bold {            /* font-weight: bold; 等价于下面那行*/            /* 实际开发喜欢使用数字改变粗细，不写px */            /* nomal=400 */            font-weight: 700;        }    </style></head><body>    <h2>山河</h2>    <p>高山流水，知音难觅</p>    <p>山河不足重，重在遇知己.</p>    <p class="bold">知己既去，何若玉碎</p>    <p>你若不在了，千山暮雪我孤翼只影向谁去</p></body></html>

属性值	描述
normal	默认值（不加粗)
bold	定义粗体
100-900	400=normal，700=bold，注意这个数字后面不跟单位

实际开发时，喜欢用数字表示粗细。

字体样式

CSS使用font-style属性设置文本风格

p {

font-style: normal;

}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style:normal；
italic	斜体

<!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>CSS字体属性系列</title>    <style>        p {            font-style: italic;        }        em {            font-style: normal;        }    </style>        </head><body>    <h2>山河</h2>    <p>高山流水，知音难觅</p>    <p>山河不足重，重在遇知己.</p>    <p class="bold">知己既去，何若玉碎</p>    <em>你若不在了，千山暮雪我孤翼只影向谁去</em></body></html>

css字体复合属性

节约代码

body {

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

}

<!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>CSS字体属性系列</title>    <style>        div {            /* 复合属性：简写的方式 节约代码 */            /* font: font-style font-weight font-size/line-height font-famliy */            font: italic 700 16px 'Mcrosoft yahei';        }    </style>        </head><body>    <h2>山河</h2>    <p>高山流水，知音难觅</p>    <p>山河不足重，重在遇知己.</p>    <p class="bold">知己既去，何若玉碎</p>    <div>你若不在了，千山暮雪我孤翼只影向谁去</div></body></html>

使用font属性时，必须要按上面的语法格式顺序书写，每个属性用空格隔开。
不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用

CSS文本属性

文本颜色

color 属性用于定义文本颜色

`div {

color: red;

}`

十六进制写法：#a1ebc6双击会出现调色盘

RGB写法：rgb(255,0,0)或rgb(100%,0%,0%)

<!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>CSS文本属性之颜色</title>    <style>        div {            color: #a1ebc6;        }    </style>        </head><body>    <h2>山河</h2>    <p>高山流水，知音难觅</p>    <p>山河不足重，重在遇知己.</p>    <p class="bold">知己既去，何若玉碎</p>    <div>你若不在了，千山暮雪我孤翼只影向谁去</div></body></html>

开发中最常用的是十六进制颜色

对齐文本

text-align属性用于设置内文本内容水平对齐方式

div {

text-align: center;

}

属性值	解释
left	左对齐（默认）
right	右对齐
center	居中对齐

1	<title>CSS文本之文字对齐</title> <style> h1 { text-align: center; } </style></head><body> <h1>居中对齐标题</h1></body>

装饰文本

text-decoration属性规定添加文本的修饰。可以给文本添加下划线、删除线、上划线。

div {

text-decoration: underline:

}

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接a自带下划线（常用）
overline	上划线
line-throngh	删除线

<title>文本属性之装饰文本</title>    <style>        div {            /* text-decoration: underline; */            /* text-decoration: line-through; */            text-decoration: overline;        }        a {            /* 取消a默认的下划线 */            text-decoration: none;            color: #333        }    </style></head><body>    <div>夏天的风</div>    <a href="#">夏天的风</a></body>

重点：添加下划线，删除下划线

文本缩进

text-indent属性用来指定文本的第一行缩进，段落首行缩进

div {

text-indent: 10px;

}

有个特别灵性的单位em

p {

text-indent: 2em;

}

em是一个相对单位，就是当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

<title>文本缩进</title>    <style>        p {            /* text-indent: 20px; */            text-indent: 2em;        }    </style>        </head><body>    <h2>山河</h2>    <p>高山流水，知音难觅</p>    <p>山河不足重，重在遇知己.</p>    <p class="bold">知己既去，何若玉碎</p>    <p>你若不在了，千山暮雪我孤翼只影向谁去.无问归期。十年生死两茫茫，不思量，自难忘。千里孤坟，唯有泪千行。你若不在了，千山暮雪我孤翼只影向谁去.无问归期。十年生死两茫茫，不思量，自难忘。千里孤坟，唯有泪千行。你若不在了，千山暮雪我孤翼只影向谁去.无问归期。十年生死两茫茫，不思量，自难忘。千里孤坟，唯有泪千行。你若不在了，千山暮雪我孤翼只影向谁去.无问归期。十年生死两茫茫，不思量，自难忘。千里孤坟，唯有泪千行。</p></body>

行间距

line-height属性用于设置行间距。

p {

line-height: 26px;

}

<!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>行间距</title>    <style>        div {            /* text-indent: 20px; */            line-height: 26px;        }    </style>        </head><body>    <div>山河</div>    <p>高山流水，知音难觅</p>    <p>山河不足重，重在遇知己.</p>    <p class="bold">知己既去，何若玉碎</p>    <p>你若不在了，千山暮雪我孤翼只影向谁去.无问归期。十年生死两茫茫，不思量，自难忘。千里孤坟，唯有泪千行。你若不在了，千山暮雪我孤翼只影向谁去.无问归期。十年生死两茫茫，不思量，自难忘。千里孤坟，唯有泪千行。你若不在了，千山暮雪我孤翼只影向谁去.无问归期。十年生死两茫茫，不思量，自难忘。千里孤坟，唯有泪千行。你若不在了，千山暮雪我孤翼只影向谁去.无问归期。十年生死两茫茫，不思量，自难忘。千里孤坟，唯有泪千行。</p></body></html>

CSS的引入方式

CSS的三种样式表

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

内部样式表

写到html内部，是将所有CSS代码抽取出来，单独放到一个style标签中。

1	<style> div { color: black; font-size: 16px; }</style>/这句话直接更改博客文章字体颜色，大小/

style标签理论上可以放在html文档的任何地方，但一般会放在文档的head标签中。
此种方式，可以方便控制当前整个页面中的元素样式设置。
代码结构非常清晰，但是并没有实现完全分离
嵌入式引入

行内样式表

是在元素标签内部style属性中设定CSS样式，适用于修改简单样式。

<div style="color: rgb(149, 128, 243); font-size: 12px;"> 最后一捧人间烟火</div>

在双引号中间，写法要符合CSS规范
可以控制当前的标签设置样式

我会改字体颜色啦

外部样式表

实际开发中都是外部样式表，适用于样式比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

引入步骤

新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
在HTML页面中，使用link标签引入这个文件。

新建css

1	/* 只有样式，没有标签 */div { color: pink;}

引入

<!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>外部样式表</title>    <link rel="stylesheet" href="style.css"></head><body>    <div>引入外部css</div></body></html>

实际开发中最常用的方式

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>新闻案例</title>
    <style>
        body {
            font: 16px/28px 'Microsotf yahei';
        }
        h1 {
            /* 文字不加粗 */
            font-weight: 400;
            /* h1文字水平居中对齐 */
            text-align: center;
        }
        a {
            text-decoration: none;
        }
        .gray {
            color: #8888;
            font-size: 12px;
            text-align: center;
        }
        
        .search {
            color: #666;
            width: 170px;
        }
        .btn {
            font-weight: 700;
        }
        p {
            text-indent: 2em;
        }
        .pic {
            /* 想要图片居中对齐，一定要它的父亲p标签添加水平居中对齐 */
            text-align: center;
        }
        .footer {
            color: #888;
            font-size: 12px;
        }
    </style>

<body>

    <h1>北方高温明日达鼎盛,京津冀多地地表温度将超60℃</h1>
    <div class="gray">2019-07-03 16:31:47 来源:<a href="#">中国天气网</a> 
        <input type ="text" value="请输入查询条件..." class="search"> <button class="btn">搜索</button>
    </div>
    <hr>

    <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，
    </p>
    
    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日。</h4>
    <p class="pic">
        <img src="tqyb.jpg">
    </p>

    <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>


    <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中北京和石家庄的最高气温还有望创今年的新高。</p>

    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
    
    <p>中国天气网气象分析师王某介绍，明日，华北，黄淮地区高温天气继续升级。并……</p>

    <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地高温还会天天上岗。
        文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)</p>
    
    <p class="footer">本文来源:中国天气网 责任编辑:刘京_NO5631</p>


</body>
</html>

chrome调试工具

打开调试工具：f12或右键检查

使用调试工具：

ctrl+滚轮可以放大开发者工具代码大小
左边是HTML元素结构，右边是CSS样式
右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色
ctrl+0复原浏览器大小
如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
如果有样式，但是样式前面有黄色叹号提示，则是样式属性属性错误

Emmet语法

它使用缩写，来提高编写html/css的编写速度，vscode内部已经集成该语法。

快速生成HTML结构语法
快速生成CSS样式语法

快速生成HTML结构语法

生成标签直接输入标签名按tab键即可比如 div 按tab 就直接出现尖括号啦
如果想要生成多个相同标签加上* 即可比如 div*3 就可以快速生成3个div
如果有父子级关系的标签，可以用> 比如 ul>li 即可
如果有兄弟关系的标签，用 + 即可比如div+p
如果有生成带有类名或者id名字的，直接写,demo或者#two tab键即可
如果生成的div类名是有顺序的，可以用自增符号$
如果想要在生成的标签内部写内容可以用{}表示

1	.navp.one#banner.demo$5div{我不喜欢这个世界}5div{$}*5

回车会有奇迹发生

快速生成CSS样式语法

css基本采取简写形式即可

比如 w200 按tab 可以生成 width: 200px;
eg: lh 26 按tab 可以生成 line-height: 26px;

快速格式化代码

右键，格式化代码

在首选项中搜索format 在自动格式化保存中勾选即可

CSS复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器可以更准确、高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同方式组合而成的。
常用符合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签洗澡后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。

元素1 元素2 { 样式说明}

上述语法表示选择元素1里面的所有元素2（后代元素）

元素1和元素2中间一定要用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
元素1和元素2可以是任意的基础选择器

<!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>后代选择器</title>
    <style>
        /* 把ol里面的li选出来改为pink */
        ol li {
            color: pink;
        }

        ol li a {
            color: red;
            text-decoration: none;
        }

        .nav li a {
            color: gold;
        }
    </style>
</head>

<body>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">不会变化的</a></li>
    </ul>
    <ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">会变化的</a></li>
        <li><a href="#">会变化的</a></li>
        <li><a href="#">会变化的</a></li>
        <li><a href="#">会变化的</a></li>
    </ul>
</body>

</html>

子选择器

子选择器只能选择作为某元素的最近一级子元素。

元素1 > 元素2 {样式声明}

上述语法表示选择元素1里面的所有直接后代（子元素）元素2

元素1和元素2中间用大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是元素1的亲儿子，其孙子，重孙指令不归它管辖。

<!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>子元素选择器</title>    <style>        .nav>a {            color: red;        }    </style></head><body>    <div class="nav">        <a href="#">我是儿子</a>        <p><a href="#">我是孙子</a></p>    </div></body></html>

并集选择器

并集选择器可以选择多组标签，同时为它们定义相同样式。通常用于集体声明

并集选择器是通过英文逗号，分割的，任何形式的选择器都可以成为并集选择器的一部分。

元素1,元素2 {样式声明}

<!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>并集选择器</title>    <style>        /* div,        p {            color: red;        } */        div,        p,        .pig li {            color: red;        }        /* 约定的语法规范，并集选择器喜欢竖着写 */    </style></head><body>    <div>ws</div>    <p>xe</p>    <span>hh</span>    <ul class="pig">        <li>xzpx</li>        <li>zbb</li>        <li>zmm</li>    </ul></body></html>

伪类选择器

书写特点：用冒号表示。eg:hover, :first-child

分类：链接伪类、结构伪类

链接伪类选择器

a:link 选择所有未被访问的链接

a:visited 选择所有已被访问的链接

a:hover 选择鼠标指针位于其上的链接

a:active 选择活动链接

<title>伪类选择器</title>    <style>        /* 未访问的链接 */        a:link {            color: #333;            text-decoration: none;        }        a:visited {            color: orange;        }        a:hover {            color: skyblue;        }        a:active {            color: green;        }    </style><body>    <a href="#">震惊！阿里高管性侵女员工</a>    <a href="http://www.xxxxxx.com">未知的网站</a></body>

链接伪类选择器注意事项

为确保生效，请按照LVHA的顺序声明：:link- :hover- :active-
记忆法：love hate
因为a链接在浏览器中具有默认样式，所以实际开发工作中都需要给链接单独指定样式

链接伪类选择器在实际开发中的写法

<style>        /* 未访问的链接 */        a {            color: gray;            text-decoration: none;        }        a:hover {            color: #369;            text-decoration: underline;        }    </style><body>    <a href="#">震惊！阿里高管性侵女员工</a>    <a href="http://www.xxxxxx.com">未知的网站</a></body>

:focus伪类选择器

作用：选取焦点的表单元素

焦点就是光标，一般情况input类表单元素才能获取，因此这个选择器也主要针对表单元素来说。

<style>        /* 把获得光标的表单元素选出来 */        input:focus {            background-color: pink;            color: rgb(84, 155, 173);        }    </style><body>    <input type="text">    <input type="text">    <input type="text"></body>

复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格.nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择不同状态的链接	跟链接相关	较多	符号是逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住 a{}和 a:hover的写法
:focus选择器	选择获得光标的表单	跟表单相关	较少	记住input:foucs写法

CSS元素显示模式

更好的布局

元素显示模式

作用：网页的标签非常多，在不同地方会用到不用类型的标签，了解题目==他们的特点可以更好的布局我们的网页。

元素显示模式就是元素以什么方式进行显示，比如div自己独占一行，比如一行可以放多个span

HTML元素一般分为块元素和行内元素两种类型。

块元素

常见：h1~h6，p，div，ul，ol，li’等，其中div标签是最大的块元素

块元素的特点：

比较霸道，自己独占一行
高度，宽度，外边距已经内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素

ps：

文字类的元素内不能使用块级元素
p标签主要用于存放文字，因此p里面不能放块级元素，特别是不能放div
h1~h6等都是块级标签，里面额不能放其他块级元素

行内元素

常见有：a、strong、b、em、i、del、s、ins、span，其中span标签是最典型的行内元素（内联元素）

行内元素特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

1	<span>hh</span><strong>xl</strong>

显示：hhxl

ps：

链接里面不能再放链接
特殊情况链接a里面可以放块级元素，但是a转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签，img，input，td，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元。

行内块元素的特点：

和相邻行内元素（行内块元素）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）
默认宽度就是它本身内容的宽度（行内元素特点）
高度、行高、外边距以及内边距都可以控制（块级元素特点）

显示模式总结

块级元素	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度和高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

元素显示模式转换

特殊情况下，我们需要元素模式的转换，eg：增加连接a的触发范围

转化为块元素： display:block;
转化为行内元素： display:inline;
转化为块元素： display:inline-block;

<style>        a {            width: 150px;            height: 50px;            background-color: pink;            /* 把行内元素a转换为块内元素 */            display: block;        }        div {            width: 300px;            height: 100px;            background-color: rgb(172, 222, 255);            /* 把div块级元素转换为行内元素 */            display: inline;        }        span {            width: 300px;            height: 30px;            background-color: skyblue;            display: inline-block;        }    </style></head><body>    <a href="">金星阿姨</a>    <div>我是块级元素</div>    <span>行内元转换为行内块元素</span></body>

实用小工具 snipaste

快捷方式：

F1可以截图，同时测量大小
F3在桌面置顶显示
点击图片，alt可以取色（shift切换取色模式）qq截图的话，ctrl可以取色
按时esc取消图片显示

综合案例-小米侧边栏

<!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>小米侧边栏</title>    <style>        a {            background-color: #535758;            color: rgb(255, 255, 255);            width: 255px;            height: 48px;            font-size: 14px;            text-indent: 2em;            /* 让行高等于盒子的高度，就能实现文字垂直居中 */            line-height: 48px;            text-decoration: none;            display: block;        }        a:hover {            background-color: #FF6701;        }    </style></head><body>    <a href="">手机 电话卡</a>    <a href="">电视 盒子</a>    <a href="">笔记本 平板</a>    <a href="">出行 穿戴</a>    <a href="">智能 路由器</a>    <a href="">健康 儿童</a>    <a href="">耳机 音响</a></body></html>

当行文字垂直居中原理：

简单理解：行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，文字偏下

CSS背景

通过CSS背景属性，可以给页面元素添加背景样式

背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置、背景图像固定等

背景图片

background-img属性描述了元素的背景图像。实际开发常见于logo或者一些小装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

语法：

background-imge : none | url (url)c

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

1	<style> div { width: 300px; height: 300px; /* 一定要写url */ background-image: url(images/hh.jpg); } </style></head><body> <div></div>

背景平铺

background-repeat属性

background-repeat: repeat | no-repeat | repeat-x | repeat-y

<style>        div {            width: 1000px;            height: 1000px;            /* 一定要写url */            background-image: url(images/hh.jpg);            /* background-repeat: no-repeat; */            /* 默认情况下背景图片是平铺的 */            /* 将图片设置为沿水平方向平铺 */            /* background-repeat: repeat-x; */            /* 将图片设置为沿竖直方向平铺 */            background-repeat: repeat-y;            /* 页面元素既可以添加背景图片也可以添加背景颜色，只不过背景图片会压住背景颜色 */        }    </style></head><body>    <div></div></body>

背景图片的位置

利用background-position属性可以改变图片在背景中的位置。

background-position: x y;

可以使用方位名词或者精确单位。

参数值	说明
length	百分数\|由浮点数字和单位标识符组成的长度值
position	top\|center\|bottom\|left\|center\|right 方位名词

1.参数是方位名词

如果指定两个值都是方位名词，则两个值前后顺序无关，比如 left top和top left效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

<style>        h3 {            width: 118px;            height: 40px;            font-size: 14px;            /* background-color: pink; */            font-weight: 400;            line-height: 40px;            background-image: url(images/icon.png);            background-repeat: no-repeat;            background-position: left center;            text-indent: 3em;        }    </style></head><body>    <h3>        成长守护平台    </h3></body>

王者荣耀背景案例

<title>超大背景图片</title>    <style>        body {            background-image: url(https://ossweb-img.qq.com/upload/webplat/info/yxzj/20210811/27677365680884.jpg);            background-repeat: no-repeat;            background-position: center top;        }    </style></head>

2.参数是精确单位

第一个坐标是x坐标，第二个是y坐标
如果只有一个参数，另一个参数默认垂直居中

3.参数是混合单位

如果指定的两个值是精确单位和方位名词混用，则第一个值是x坐标，第二个值是y坐标

背景固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

可以在后期制作视差滚动效果。

语法：

background-attachemnt : scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动的
fixed	背景图像固定

eg：

<style>        body {            background-image: url(https://ossweb-img.qq.com/upload/webplat/info/yxzj/20210811/27677365680884.jpg);            background-repeat: no-repeat;            background-position: center 40px;            color: #fff;            font-size: 20px;            background-attachment: fixed;        }    </style>

背景的符合写法

为了节约代码量，我们可以将这些属性合并简写在同一个属性background中。

没有特定书写顺序，一般习惯约定顺序为：

background: 背景颜色背景图片地址背景平铺背景图片滚动背景图片位置

注意：中间用空格隔开

<style>        body {            background: black url(images/bg.jpg) no-repeat fixed center top;            color: #fff;            font-size: 20px;        }    </style></head><body>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p>    <p>闲坐看云，静听流水</p></body>

背景颜色半透明

语法：

background: rbga(0,0,0,0.3)；

最后一个参数是alpha透明度，取值范围在0~1之间

可以缩写0.3为 .3

background: rbga(0,0,0,.3)；

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	背景平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x和y的值
background-attachment	背景附着	scroll(背景滚动)/fixed(背景固定)
背景简写	书写方便	背景颜色背景图片地址背景平铺背景滚动背景位置;
背景色半透明	背景颜色半透明	background: rgba(0,0,0,.3) 四个值缺一不可

五彩导航案例

<!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>五彩导航栏</title>    <style>        .nav a {            display: inline-block;            height: 58px;            width: 120px;            background-color: pink;            line-height: 48px;            text-decoration: none;            color: #fff;            text-align: center;        }        .nav .bg1 {            background: url(images/bg1.png);        }        .nav .bg2 {            background: url(images/bg2.png);        }        .nav .bg3 {            background: url(images/bg3.jpg);        }        .nav .bg4 {            background: url(images/bg4.png);        }        .nav .bg5 {            background: url(images/bg5.png);        }        .nav .bg1:hover {            background-image: url(images/bg2.png);        }        .nav .bg2:hover {            background-image: url(images/bg3.jpg);        }        .nav .bg3:hover {            background-image: url(images/bg4.png);        }        .nav .bg4:hover {            background-image: url(images/bg5.png);        }        .nav .bg5:hover {            background-image: url(images/bg1.png);        }    </style></head><body>    <div class="nav">        <a href="#" class="bg1">五彩导航</a>        <a href="#" class="bg2">五彩导航</a>        <a href="#" class="bg3">五彩导航</a>        <a href="#" class="bg4">五彩导航</a>        <a href="#" class="bg5">五彩导航</a>    </div></body></html>

CSS三大特性

分别是：层叠性、继承性、优先级

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

样式冲突，就近原则

继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。

恰当地使用继承可以简化代码，降低CSS样式的复杂性。

1	body { font: 12px/1.5 Microsoft YaHei;}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素文字大小*15
body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器权重如下表示

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,10
ID选择器	0,1,0,0
行内样式 style=””	1,0,0,0
!important 重要的	=无穷大

eg：

<style>        .test {            color: red;        }        div {            color: pink !important;        }        #demo {            color: green;        }    </style></head><body>    <div class="test" id="demo" style="color: blueviolet;">猜猜我是什么颜色</div></body>

优先级注意点：

权重是有4组数字组成，但是不会有进位。
等级判断从左到右，依次比较
简单记忆：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式表为1000，！important无穷大
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

权重虽然会叠加，但永远不会有进位

比如10个0,0,0,1叠加以后是0,0,0,10 而不是0,0,1,0

div ul li —–>0,0,0,3
.nav ul li —->0,0,1,2
a:hover —–>0,0,1,1
.nav a ——->0,0,1,1

盒子模型

页面布局学习三大核心，盒子模型，浮动和定位。

学习好盒子模型能非常好的帮助我们布局页面。

看透网页布局的本质

网页布局过程

1.准备好相关的网页元素，网页元素基本都是盒子BOx

2.利用CSS设置好盒子样式，然后摆放到相应位置

3.往盒子里面装内容

网页布局的核心本质：利用CSS摆盒子

盒子模型组成

border边框

content 内容

padding内边距

外边距 margin

border边框

border可以设置元素的边框。边框有三部分组成：宽度、样式、颜色

语法：

border : border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

<title>盒子模型之边框</title>    <style>        div {            width: 300px;            height: 200px;            /* 边框的粗细 一般情况下都用px */            border-width: 5px;            /* 边框样式 solid 实线边框 */            /* border-style: solid; */            /* border-style: dashed; */            /* border-style: dotted; */            /* border-color: pink; */            /* border: 1px solid red; */            border-top: 1px solid red;            border-bottom: 2px dashed pink;        }    </style></head><body>    <div></div></body>

CSS边框属性允许你指定一个元素边框的颜色和颜色

边框简写：

border : lpx solid red; 无顺序

表格细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse: collapse;

collapse 单词是合并的意思
border-collapse：collapse；表示相邻边框合并在一起

案例：

在之前的小说排行榜前加CSS

1	<style> table { width: 500px; height: 249px; } th { height: 35px; } table, td, th { border: 1px solid pink; border-collapse: collapse; font-size: 14px; text-align: center; } </style>

边框会影响盒子的实际大小

边框会额外增加盒子的实际大小，因此我们有两种解决方案：

测量盒子大小时，不测边框
如果测量的时候包含了边框，则需要width/height减去边框宽度

内边距padding

padding属性用于设置内边距，即边框与内容之间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding简写属性

值的个数	表达意思
padding：5px;	上下左右
padding：5px 10px;	上下，左右
padding：5px 10px 20px;	上，左右，下
padding：5px 10px 20px 30px;	上，右，下，左（顺时针）

注意事项：如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。

解决方案：

让width/height减去多出来的内边距大小即可。

案例：新浪导航栏案例

padding影响盒子好处

<!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>新浪导航</title>    <style>        .nav {            height: 41px;            border-top: 3px solid #ff8500;            border-bottom: 1px solid #edeef0;            background-color: #fcfcfc;            line-height: 41px;        }        .nav a {            display: inline-block;            height: 41px;            padding: 0 20px;            text-decoration: none;            font-size: 12px;            color: #4c4c4c;        }        .nav a:hover {            background-color: #eee;            color: #ff8500;        }    </style></head><body>    <div class="nav">        <a href="#">新浪导航</a>        <a href="">手机新浪网</a>        <a href="">移动客户端</a>        <a href="">微博</a>        <a href="#">三个字</a>    </div></body></html>

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

<title>padding撑大盒子</title>    <style>        h1 {            width: 100%;            height: 200px;            background-color: pink;            padding: 30px;        }        div {            width: 300px;            height: 100px;            background-color: purple;        }        div p {            padding: 30px;            background-color: skyblue;        }    </style></head><body>    <h1></h1>    <div>        <p></p>    </div></body>

外边距margin

margin属性用于设置外边距，即控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

简写方式和padding完全一样。

<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>盒子模型之边框</title>    <style>        div {            width: 200px;            height: 200px;            background-color: pink;        }        /* .one {            margin-bottom: 20px;        } */        .two {            /* margin-top: 20px; */            margin: 30px;        }    </style></head><body>    <div class="one">1</div>    <div class="two">2</div></body>

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定宽度(width)
盒子左右的外边距都设置为auto

.header {wideh: 960px, margin:0 auto；}

常见写法，以下三种都可以：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

1	<style> .header { width: 900px; height: 200px; background-color: pink; margin: 100px auto; } </style></head><body> <div class="header"></div></body>

注意：以上方法是让块级元素水平居中，行内元素或者行内块级元素水平居中给其父元素添加text-align:center即可。

<style>        .header {            width: 900px;            height: 200px;            background-color: pink;            margin: 100px auto;            text-align: center;        }    </style></head><body>    <div class="header">        <span>里面的文字</span>        <img src="images/bg1.png">    </div></body>

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

主要有两种情况

相邻块元素垂直外边距合并
嵌套块元素垂直外边距合并

相邻块元素垂直外边距的塌陷

如果上面的外边距为10，下面的外边距为20，以大的为准，最后合并后两块元素相邻20

<style>        .damao,        .ermao {            width: 200px;            height: 200px;            background-color: pink;        }        .damao {            margin-bottom: 100px;        }        .ermao{            margin-top: 200px;        }    </style></head><body>    <div class="damao">大毛</div>    <div class="ermao">二毛</div></body>

解决：尽量只给一个盒子设置外边距

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素有上下边界同时子元素也有上下外边距，此时父元素会塌陷较大的外边距值。

解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden

<title>Document</title>    <style>        .father {            width: 400px;            height: 400px;            background-color: skyblue;            margin-top: 50px;            /* border: 1px solid transparent; */            /* padding: 1px; */            overflow: hidden;        }        .son {            width: 200px;            height: 200px;            background-color: pink;            margin-top: 100px;        }    </style></head><body>    <div class="father">        <div class="son"></div>    </div></body>

还有其他方法，比如浮动，固定，绝对定位的盒子不会有塌陷问题，后面有总结。

清除内外边距

网页元素有很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除下网页的内外边距。

*{

padding: 0; /清除内边距/

margin: 0; /清除外边距/

}

注意：行内元素为了照顾兼容性，尽量只射手座左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

<style>        /* 这句话是我们第一行代码 */        * {            margin: 0;            padding: 0;        }        span{            background-color: pink;            margin: 20px;/*上下不起效果*/        }    </style></head><body>    123    <ul>        <li>abcd</li>    </ul>    <span>行内元素只设置左右内外边距</span></body>

PS基本操作

因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是在 PS 里面完成。

文件➡打开：可以打开我们要测量的图片
Ctrl+R：可以打开标尺，或者视图➡标尺
右击标尺，把里面的单位改为像素
==Ctrl+ 加号(+)==可以放大视图， ==Ctrl+ 减号(-)==可以缩小视图
按住空格键，鼠标可以变成小手，拖动 PS 视图
用选区拖动可以测量大小
Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

在这里插入图片描述

案例1：产品模块

<!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>        * {            padding: 0;            margin: 0;        }        body {            background-color: #f5f5f5;        }        a {            color: #333;            text-decoration: none;        }        .box {            width: 298px;            height: 415px;            background-color: #fff;            /* 只要盒子有了宽度，margin改成auto就能实现水平居中对齐 */            margin: 100px auto;        }        .box img {            /* 图片的宽度和父亲一样宽 */            width: 100%;        }        .review {            height: 70px;            font-size: 14px;            /* 因为这个段落没有width属性，所以padding不会撑开盒子的宽度 */            padding: 0 28px;            margin-top: 30px;        }        .appraise {            font-size: 12px;            color: #b0b0b0;            margin-top: 20px;            padding: 0 28px;        }        .info {            font-size: 14px;            margin-top: 15px;            padding: 0 28px;        }        .info h4 {            display: inline-block;            font-weight: 400;        }        .info span {            color: #ff6700;        }        .info em {            font-style: normal;            color: #ebe4e0;            margin: 0 3px 0 5px;        }    </style></head><body>    <div class="box">        <img src="images/img.jpg" alt="">        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>        <div class="appraise">来自于117384232的评价</div>        <div class="info">            <h4><a href="#">Redmi AirDots真无线蓝牙…</a></h4>            <em>|</em>            <span>99.9元</span>        </div>    </div></body></html>

案例2:快报模块

去掉li前面的小圆点

语法：

list-style: none;

<!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>新闻快报模块</title>    <style>        * {            margin: 0;            padding: 0;        }        /* 去掉li前面的小圆点 */        li {            list-style: none;        }        .box {            width: 248px;            height: 163px;            border: 1px solid #ccc;            margin: 100px auto;        }        .box h3 {            height: 32px;            border-bottom: 1px dotted rgb(177, 168, 168);            font-weight: normal;            font-size: 14px;            line-height: 32px;            padding-left: 15px;        }        .box ul li a:hover {            text-decoration: underline;        }        .box ul li a {            color: #666;            font-size: 12px;            text-decoration: none;        }        .box ul li {            height: 23px;            line-height: 23px;            padding-left: 20px;        }        .box ul {            margin-top: 7px;        }    </style></head><body>    <div class="box">        <h3>品优快报</h3>        <ul>            <!-- shift+alt往下拉，输入# -->            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>        </ul>    </div></body></html>

圆角边框

border-radius属性用于设置元素外边框圆角

语法：

border-radius：length;

radius半径原理：（椭）圆与边框的交集形成圆角效果

参数值可以为数值或百分比的形式
如果是正方形，想要变成圆，把数值修改为高度或者宽度的一半即可
如果是矩形，设置为高度的一半即可
该属性为简写属性，四个值，分别代表左上角，右上角，右下角，左下角（顺时针）

1	border-top-left-radius: 20px;

盒子阴影（重点）

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

1	box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊距离。
spread	可选，阴影的尺寸。
color	可选，阴影的颜色。
inset	可选，将外部阴影（outset）改为内部阴影

<title>盒子阴影</title>    <style>        div {            width: 200px;            height: 200px;            background-color: pink;            margin: 100px auto;            /* box-shadow: 10px 10px 10px 10px black; */        }        div:hover {            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);        }        /* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 */    </style></head><body>    <div></div>

注意：

默认的是外阴影（outset），但是不可以在后面写这个单词，否则导致阴影无效
盒子阴影不占用空间，不会影响其他盒子排列

文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

1	text-shadow: h-shadow v-shadow blur color

值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊距离
color	可选，阴影的颜色。

<title>文字阴影</title>    <style>        div {            font-size: 50px;            color: orangered;            font-weight: 700;            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);        }    </style></head><body>    <div>        你是阴影,我是火影    </div></body>

CSS浮动

浮动float

网页布局的本质➡用 CSS 来摆放盒子。把盒子摆放到相应位置

CSS 提供了三种传统布局方式：

普通流（标准流）
浮动
定位

标准流

所谓的标准流，就是标签按照规定好默认方式排列

块级元素会独占一行，从上向下顺序排列。
- 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
- 常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式）。

为什么需要浮动

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式.

浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

语法：

选择器 {
float: 属性值;
}

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
网页布局第二准则：先设置盒子大小，之后设置盒子的位置。

<title>什么是浮动</title>    <style>        .left,        .right {            float: left;            width: 200px;            height: 200px;            background-color: pink;        }        .right {            float: right;        }    </style></head><body>    <div class="left">左青龙</div>    <div class="right">右白虎</div></body>

浮动的特性（重难点）

设置了浮动（float）的元素的最重要的特性：

脱标：浮动元素会脱离标准流
浮动元素会一行内显示并且元素顶部对齐
浮动的元素具有行内块元素的特性

设置了浮动的元素最重要特性：

脱离标准普通流的控制（浮）移动到指定位置（动）（俗称脱标）
浮动的盒子不再保留原先的位置

<title>浮动特性1</title>    <style>        /* 设置了浮动（float）的元素会：        1. 脱离标准普通流的控制（浮）移动到指定位置（动）。        2.浮动的盒子不在保留原先的位置 */        .box1 {            float: left;            width: 200px;            height: 200px;            background-color: pink;        }        .box2 {            width: 300px;            height: 300px;            background-color: rgb(0, 153, 255);        }    </style></head><body>    <div class="box1">浮动的盒子</div>    <div class="box2">标准流的盒子</div></body>

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

<title>浮动元素特性-浮动元素一行显示</title>    <style>        div {            float: left;            width: 200px;            height: 200px;            background-color: pink;        }        .two {            background-color: purple;            height: 249px;        }        .four {            background-color: skyblue;        }    </style></head><body>    <div>1</div>    <div class="two">2</div>    <div>3</div>    <div class="four">4</div></body>

3.浮动元素会具有行内块元素特性

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度
浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置, 我们网页布局一般采取的策略是:

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

案例：小米布局

<title>小米布局案例</title>    <style>        .box {            width: 1200px;            height: 460px;            background-color: pink;            margin: 0 auto;        }        .left {            float: left;            width: 230px;            height: 460px;            background-color: purple;        }        .right {            float: left;            width: 970px;            height: 460px;            background-color: skyblue;        }    </style></head><body>    <div class="box">        <div class="left">左侧</div>        <div class="right">右侧</div>    </div></body>

<title>浮动元素搭配标准流父盒子2</title>    <style>        * {            margin: 0;            padding: 0;        }        li {            list-style: none;        }        .box {            width: 1226px;            height: 285px;            background-color: pink;            margin: 0 auto;        }        .box li {            width: 296px;            height: 285px;            background-color: purple;            float: left;            margin-right: 14px;        }        /* 这里必须写 .box .last 要注意权重的问题  20 */        .box .last {            margin-right: 0;        }    </style></head><body>    <ul class="box">        <li>1</li>        <li>2</li>        <li>3</li>        <li class="last">4</li>    </ul></body>

3手机模块

网页布局第二准则：先设置盒子大小，then设置盒子的位置

<title>浮动布局练习3</title>    <style>        .box {            width: 1226px;            height: 615px;            background-color: pink;            margin: 0 auto;        }        .left {            float: left;            width: 234px;            height: 615px;            background-color: purple;        }        .right {            float: left;            width: 992px;            height: 615px;            background-color: skyblue;        }        .right>div {            float: left;            width: 234px;            height: 300px;            background-color: pink;            margin-left: 14px;            margin-bottom: 14px;        }    </style></head><body>    <div class="box">        <div class="left">左青龙</div>        <div class="right">            <div>1</div>            <div>2</div>            <div>3</div>            <div>4</div>            <div>5</div>            <div>6</div>            <div>7</div>            <div>8</div>        </div>    </div></body>

常见网页布局

图略

<title>常见网页布局</title>    <style>        * {            margin: 0;            padding: 0;        }        li {            list-style: none;        }        .top {            height: 50px;            background-color: gray;        }        .banner {            width: 980px;            height: 150px;            background-color: gray;            margin: 10px auto;        }        .box {            width: 980px;            margin: 0 auto;            height: 300px;            background-color: pink;        }        .box li {            float: left;            width: 237px;            height: 300px;            background-color: gray;            margin-right: 10px;        }        .box .last {            margin-right: 0;        }        /* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */        .footer {            height: 200px;            background-color: gray;            margin-top: 10px;        }    </style></head><body>    <div class="top">top</div>    <div class="banner">banner</div>    <div class="box">        <ul>            <li>1</li>            <li>2</li>            <li>3</li>            <li class="last">4</li>        </ul>    </div>    <div class="footer">footer</div></body>

浮动的注意点

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余兄弟元素也要浮动
- 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

why？

我们前面浮动元素有一个标准流的父元素, 他们有一个共同的特点,

都是有高度的.但是, 所有的父盒子都必须有高度吗?

理想中的状态, 让子盒子撑开父亲. 有多少孩子,我父盒子就有多高.

但是不给父盒子高度会有问题吗?..…

为什么要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
理想中的状态，让子盒子撑开父亲，有多少孩子，我父盒子就有多高

清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

语法：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素(清除左侧浮动的影响)
right	不允许右侧有浮动元素(清除右侧浮动的影响)
both	同时清除左右两侧浮动的影响

我们实际工作中，几乎只用clear:both
清除浮动的策略是：闭合浮动
只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

清除浮动的方法

额外标签法也称为隔墙法，是W3C推荐的做法
父级添加 overflow 属性
父级添加 after 伪元素
父级添加双伪元素

额外标签法

额外标签法会在浮动元素末尾添加一个空的标签,例如：
例如<div style="clear:both"></div>，或者其他标签（如</br>等）
注意：**要求这个新的空标签必须是块级元素**
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差

实际工作可能会遇到,但是不常用

<title>清除浮动之额外标签法</title>    <style>        .box {            width: 800px;            border: 1px solid blue;            margin: 0 auto;        }        .damao {            float: left;            width: 300px;            height: 200px;            background-color: purple;        }        .ermao {            float: left;            width: 200px;            height: 200px;            background-color: pink;        }        .footer {            height: 200px;            background-color: black;        }        .clear {            clear: both;        }    </style></head><body>    <div class="box">        <div class="damao">大毛</div>        <div class="ermao">二毛</div>        <div class="ermao">二毛</div>        <div class="ermao">二毛</div>        <div class="ermao">二毛</div>        <!-- <div class="clear"></div> -->        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->        <span class="clear"></span>    </div>    <div class="footer"></div></body>

父元素添加overflow

可以给父级添加overflow属性，将其属性值设置为hidden,auto或scroll
优点：代码简洁
缺点：无法显示溢出的部分

1	.box { overflow: hidden; width: 800px; border: 1px solid blue; margin: 0 auto; }

把上面的代码改成这样即可。

after伪元素法

:after 方式是额外标签法的升级版。也是给父元素添加

.clearfix:after {
content: “”;
dispaly: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6,7专有*/
*zoom : 1;
}

优点：没有增加标签，结构更简单
缺点：需要照顾低版本浏览器
代表网站：百度、淘宝、网易等

在上面的代码最上面加上，在父类调用写即可

1	<div class="box clearfix">

双伪元素

也是给父元素添加

.clearfix:before,.clearfix:after{
content:””;
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}

优点：代码更简洁
缺点：需要照顾低版本浏览器
代表网站：小米、腾讯等

使用方法：

在父元素调用那里添加

1	<div class="box clearfix">

浮动总结

为什么要清除浮动

①：父级没高度

②：子盒子浮动了

③：影响下面布局了，我们就应该清除浮动了。

清除浮动方式	优点	缺点
额外标签法(隔墙法)	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持：after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持：after，兼容性问题

PS切图

ps切图有很多方式：图层切图、切片切图、PS插件切图等。

图层切图

最简单的切图方式：右击图层->快速导出为PNG

合并图层

ctrl+e

切片切图

利用切片选中图片
- 利用切片工具手动划出
导出选中图片
- 文件菜单->导出->存储为web设备所用格式->选择我们要的图片->存储

ps插件切图

我不是完整版，就略过了。

学成在线案例

实际开发中，css顺序：

位置
自身属性
文本
其他

导航栏注意点：我们不会直接用连接a而是用li包含链接(li+a)的做法。

li+a语义更清晰，有条理的列表型内容
如果直接用a，搜索引擎容易引擎容易边表为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎降权风险，从而影响网站排名）

注意：
1. 让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示
2. nav导航栏可以不给宽度，因为后期可能会加上其他的
3. 因为导航栏里面的文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度
一定要清除浮动，否则下一个模块会上去

因为我懒，所以那几个一样的模块我只做了一个哈哈

贴上辛辛苦苦打的代码~

<!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>学成在线首页</title>    <link rel="stylesheet" href="style.css"></head><body>    <!-- 头部 -->    <div class="header w">        <!-- logo部分 -->        <div class="logo">            <img src="images/logo.png" alt="">        </div>        <div class="nav">            <ul>                <li><a href="#">首页</a></li>                <li><a href="#">课程</a></li>                <li><a href="#">职业规划</a></li>            </ul>        </div>        <!-- 搜索模块 -->        <div class="search">            <input type="text" value="输入关键词">            <button>            </button>        </div>        <!-- 用户模块 -->        <div class="user">            <img src="images/qqtx.png" alt="">            qq-lilei        </div>    </div>    <!-- banner -->    <div class="banner">        <!-- 版心 -->        <div class="w">            <div class="subnav">                <ul>                    <li><a href="#">前端开发 <span>&gt</span></a></li>                    <li><a href="#">后端开发 <span>&gt</span></a></li>                    <li><a href="#">移动开发 <span>&gt</span></a></li>                    <li><a href="#">人工智能 <span>&gt</span></a></li>                    <li><a href="#">商业预测 <span>&gt</span></a></li>                    <li><a href="#">云计算&大数据 <span>&gt</span></a></li>                    <li><a href="#">运维&从测试 <span>&gt</span></a></li>                    <li><a href="#">UI设计 <span>&gt</span></a></li>                    <li><a href="#">产品 <span>&gt</span></a></li>                </ul>            </div>            <!-- 课程表模块 -->            <div class="course">                <h2>我的课程表</h2>                <div class="bd">                    <ul>                        <li>                            <h4>继续学习，程序语言设计</h4>                            <p>正在学习-使用对象</p>                        </li>                        <li>                            <h4>继续学习，程序语言设计</h4>                            <p>正在学习-使用对象</p>                        </li>                        <li>                            <h4>继续学习，程序语言设计</h4>                            <p>正在学习-使用对象</p>                        </li>                    </ul>                    <a href="#" class="more">全部课程</a>                </div>            </div>        </div>    </div>    <!-- 精品推荐模块 -->    <div class="goods w">        <h3>精品推荐</h3>        <ul>            <li><a href="#">JQuery</a></li>            <li><a href="#">Spark</a></li>            <li><a href="#">MySQL</a></li>            <li><a href="#">JavaWeb</a></li>            <li><a href="#">MySQL</a></li>        </ul>        <a href="#" class="mod">修改兴趣</a>    </div>    <!-- box1核心内容开始 -->    <div class="box w">        <div class="box-hd">            <h3>精品推荐</h3>            <a href="#">查看全部</a>        </div>        <div class="box-bd">            <ul class="clearfix">                <li><img src="images/pic.png" alt="">                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>                    <div class="info">                        <span>高级</span> • 1125人在学习                    </div>                </li>                <li><img src="images/pic2.png" alt="">                    <h4>Android 网络图片加载框架详解 </h4>                    <div class="info">                        <span>高级</span> • 1125人在学习                    </div>                </li>                <li><img src="images/pic3.png" alt="">                    <h4>Angular 2 最新框架+主流技术+项目实战 </h4>                    <div class="info">                        <span>高级</span> • 1125人在学习                    </div>                </li>                <li><img src="images/pic4.jpg" alt="">                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>                    <div class="info">                        <span>高级</span> • 1125人在学习                    </div>                </li>                <li><img src="images/pic4.jpg" alt="">                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>                    <div class="info">                        <span>高级</span> • 1125人在学习                    </div>                </li>                <li><img src="images/pic.png" alt="">                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>                    <div class="info">                        <span>高级</span> • 1125人在学习                    </div>                </li>                <li><img src="images/pic2.png" alt="">                    <h4>Android 网络图片加载框架详解 </h4>                    <div class="info">                        <span>高级</span> • 1125人在学习                    </div>                </li>                <li><img src="images/pic3.png" alt="">                    <h4>Angular 2 最新框架+主流技术+项目实战 </h4>                    <div class="info">                        <span>高级</span> • 1125人在学习                    </div>                </li>                <li><img src="images/pic4.jpg" alt="">                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>                    <div class="info">                        <span>高级</span> • 1125人在学习                    </div>                </li>                <li><img src="images/pic4.jpg" alt="">                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>                    <div class="info">                        <span>高级</span> • 1125人在学习                    </div>                </li>            </ul>        </div>    </div>    <!-- box2核心内容开始 -->    <div class="box2 w clearfix">        <div class="box2-hd">            <h3>编程入门</h3>            <ul class="clearfix">                <li><a href="#" class="one">热门</a></li>                <li><a href="#" class="two">初级</a></li>                <li><a href="#" class="two">中级</a></li>                <li><a href="#" class="three">高级</a></li>                <li><a href="#" class="all">查看全部</a></li>            </ul>        </div>        <div class="box2-bd">            <div class="box2-bd-left">                <img src="images/php.png" alt="">            </div>            <div class="box2-bd-right">                <div class="header1"><img src="images/hear1.png" alt=""></div>                <ul class="clearfix">                    <li><img src="images/ugui.png" alt="">                        <h4>Android Hybrid APP开发实战 H5+原生！ </h4>                        <div class="info">                            <span>高级</span> • 1125人在学习                        </div>                    </li>                    <li><img src="images/kami.png" alt="">                        <h4>Kami2首页界面切换效果 </h4>                        <div class="info">                            <span>高级</span> • 1125人在学习                        </div>                    </li>                    <li><img src="images/pro.png" alt="">                        <h4>Unity Profiler入门 </h4>                        <div class="info">                            <span>高级</span> • 1125人在学习                        </div>                    </li>                    <li><img src="images/coco.png" alt="">                        <h4>Cocos2d-x 引擎源码中的纹理优化 </h4>                        <div class="info">                            <span>高级</span> • 1125人在学习                        </div>                    </li>                </ul>            </div>        </div>    </div>    <!-- footer模块 -->    <div class="footer">        <div class="w">            <div class="copyright"><img src="images/logo.png" alt="">                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号                </p>                <a href="#" class="app">下载app</a>            </div>            <div class="links">                <dl>                    <dt>关于学成网</dt>                    <dd><a href="#">关于</a></dd>                    <dd><a href="#">管理团队</a></dd>                    <dd><a href="#">工作机会</a></dd>                    <dd><a href="#">客户服务</a></dd>                    <dd><a href="#">帮助</a></dd>                </dl>                <dl>                    <dt>关于学成网</dt>                    <dd><a href="#">关于</a></dd>                    <dd><a href="#">管理团队</a></dd>                    <dd><a href="#">工作机会</a></dd>                    <dd><a href="#">客户服务</a></dd>                    <dd><a href="#">帮助</a></dd>                </dl>                <dl>                    <dt>关于学成网</dt>                    <dd><a href="#">关于</a></dd>                    <dd><a href="#">管理团队</a></dd>                    <dd><a href="#">工作机会</a></dd>                    <dd><a href="#">客户服务</a></dd>                    <dd><a href="#">帮助</a></dd>                </dl>            </div>        </div>    </div></body></html>

还有css~

* {    margin: 0;    padding: 0;}.w {    width: 1200px;    margin: auto;}body {    background-color: #f3f5f7;    /* height: 3000px; */}.header {    height: 42px;    /* background-color: pink; */    /* 注意此处会层叠w里面的margin */    margin: 30px auto;}.logo {    float: left;    width: 198px;    height: 42px;}a{    text-decoration: none;}.clearfix:before,.clearfix:after{    content:"";    display:table;  }  .clearfix:after {      clear:both;  }  .clearfix {   *zoom:1;  }li {    list-style: none;}/* 导航模块 */.nav {    float: left;    margin-left: 60px;}.nav ul li {    float: left;    margin: 0 15px;}.nav ul li a{    display: block;    height: 42px;    padding:0 10px;    line-height: 42px;    font-size: 18px;    color: #050505;}.nav ul li a:hover{    border-bottom: 2px solid #00a4ff;    color: #00a4ff;}/* 搜索模块 */.search {    float: left;    width: 412px;    height: 42px;    /* background-color: skyblue; */    margin-left: 70px;}.search input {    float: left;    width: 345px;    height: 40px;    border: 1px solid #00a4ff;    border-radius: 0;    color: #bfbfbf;    font-size: 14px;    padding-left: 15px;}.search button {    float: left;    width: 50px;    height: 42px;    background: url(images/search.jpg);    /* 按钮button默认有个边框需要我们手动去掉 */    border: 1px solid #00a4ff;}.user {    float: right;    line-height: 42px;    margin-right: 30px;    font-size: 14px;    color: #666;}.banner {    height: 421px;    background-color: #1c036c;}.banner .w {    height: 421px;    background: url(images/banner2.png) no-repeat top center;}.subnav {    float: left;    width: 190px;    height: 421px;    background-color: rgba(0,0,0,0.3);}.subnav li {    height: 45px;    line-height: 45px;    padding: 0 20px;}.subnav ul li a {    font-size: 14px;    color: #fff;}.subnav ul li a span {    float: right;}.subnav ul li a:hover{    color: #00a4ff;}.course {    float: right;    width: 230px;    height: 300px;    background-color: #fff;    /* 浮动的盒子不会有外边距塌陷问题 */    margin-top: 50px;}.course h2{    height: 48px;    line-height: 48px;    text-align: center;    font-size: 18px;    color: #fff;    background-color: #9bceea;    }.course .bd {    padding: 0 20px;    color: #fff;}.course .bd li{    padding: 14px 0;    border-bottom: 1px solid #ccc;}.course .bd h4{    font-size: 16px;    text-align: center;    color: #5f5f5f;}.course .bd p{    font-size: 12px;    text-align: center;    color: #a5a5a5;}.bd .more {    display: block;    height: 38px;    border: 1px solid #00a4ff;    text-align: center;    line-height: 38px;    margin-top: 5px;    color: #00a4ff;    font-size: 16px;    font-weight: 700;}.goods {    height: 60px;    background-color: #fff;    margin-top: 10px;    /* 孩子会继承行高 */    line-height: 60px;    box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1);}.goods h3 {    float: left;    margin-left: 30px;    font-size: 16px;    color: #00a4ff;}.goods ul {    float: left;    margin-left: 30px;}.goods ul li {    float: left;}.mod {    float: right;    margin-right: 30px;    font-size: 14px;    color: #00a4ff;}.goods ul li a {    padding: 0 30px;    font-size: 16px;    color: #050505;    border-left: 1px solid #ccc;}.box {    margin-top: 30px;}.box-hd {    height: 45px;}.box-hd h3 {    float: left;    font-size: 20px;    color: #494949;}.box-hd a {    float: right;    font-size: 12px;    color: #a5a5a5;    margin-top: 10px;    margin-right: 30px;}/* 把li的父亲ul修改得足够宽，一行能装5个盒子，就不会换行了 */.box-bd ul {    width: 1225px;}.box-bd ul li {    float: left;    width: 228px;    height: 270px;    background-color: #fff;    margin-right: 15px;    margin-top: 15px;}/* 让图片正好填充 */.box-bd ul li img {    width: 100%;}.box-bd ul li h4 {    margin: 20px 20px 20px 25px;    font-size: 14;    color: #050505;    font-weight: normal;}.box-bd .info {    margin: 0 20px 0 25px;    font-size: 12px;    color: #999;}.box-bd .info span {    color: #ff7c2d;}.box2 {    margin-top: 30px;}.box2-hd {    height: 45px;    /* background-color: rgb(241, 34, 69); */}.box2-hd h3 {    float: left;    line-height: 45px;    font-size: 20px;    color: #494949;}.box2-hd ul li .one {    float: left;    font-size: 12px;    color: #a5a5a5;    margin-left: 180px;    margin-top: 15px;}.box2-hd ul li .two {    float: left;    font-size: 12px;    color: #a5a5a5;    margin-left: 70px;    margin-top: 15px;}.box2-hd ul li .three {    float: left;    font-size: 12px;    color: #a5a5a5;    margin-left: 70px;    margin-top: 15px;    margin-right: 350px;}.box2-hd ul li .all {    float: right;    font-size: 12px;    color: #a5a5a5;    margin-top: 15px;    margin-right: 30px;}.box2-hd ul li a:hover {    color: #00a4ff;}.box2-bd-left {    float: left;    width: 228px;    height: 392px;    background-color: pink;}.box2 .box2-bd .box2-bd-right {    float: right;    width: 972px;    height: 392px;    /* background-color: rgb(136, 219, 58); */}.box2 .box2-bd .box2-bd-right .header1 {    margin-left: 15px;    height: 100px;    background-color: pink;}.box2-bd ul {    margin-left: 15px;    width: 1200px;}.box2-bd .box2-bd-right ul li {    float: left;    width: 228px;    height: 270px;    background-color: #fff;    margin-right: 15px;    margin-top: 20px;}.box2-bd ul li h4 {    margin: 20px 20px 20px 25px;    font-size: 14;    color: #050505;    font-weight: normal;}.box2-bd .info {    margin: 0 20px 0 25px;    font-size: 12px;    color: #999;}.box2-bd .info span {    color: #ff7c2d;}.footer {    height: 415px;    background-color: #fff;    margin-top: 30px;}.footer .w {    padding-top: 35px;}.copyright {    float: left;}.copyright .app {    display: block;    width: 118px;    height: 33px;    border: 1px solid #00a4ff;    text-align: center;    line-height: 33px;    color: #00a4ff;    font-size: 16px;}.copyright p {    font-size: 12px;    color: #666;    margin: 20px 0 15px 0;}.links {    float: right;}.links dl {    float: left;    margin-left: 100px;}.links dl dt {    font-size: 16px;    color: #333;    margin-bottom: 5px;}.links dl dd a {    font-size: 12px;    color: #333;}

定位

定位可以让多个块级盒子自由地在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。

定位的组成

定位 = 定位模式 +边偏移

定位模式用于指定一个元素在文档中的定位方式
边偏移则决定了该元素的最终位置

定位模式

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素的上边线的距离
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素的下边线的距离

right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离

静态定位static(了解)

静态定位是元素的默认定位方式，无定位的意思
静态定位按照标准流特性摆放位置，它没有边偏移

1	选择器 { position: static;}

相对定位relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：选择器 {position: relative;}
特点：
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待。（不脱标，继续保留原来位置）
- 因此，相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。

绝对定位absolute

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的
语法: {position: absolute;}
特点：
- 如果没有祖先元素，或者祖先元素没定位，则以浏览器为准进行定位(Document 文档)
- 如果祖先元素父级有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占用原先的位置（脱标）

所以绝对定位是脱离标准流的

子绝父相

意思：子级使用绝对定位，父级则需要相对定位

①：子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②：父盒子需要加定位限制子盒子在父盒子内显示

③：父盒子布局时，需要占有位置，因此父亲只能是相对定位。

总结：因为父级需要占有位置，因此是相对定位，子盒子不要占有位置，则是绝对定位

不是绝对的，但是应用最多

固定定位fixd（重要）

固定定位是元素固定于浏览器的可视区的位置

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

特点
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不再占有原先的位置(脱标)

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

1	<title>固定定位</title> <style> .dj { position: fixed; top: 100px; right: 40px; } </style></head><body> <div class="dj"> <img src="images/pvp.png" alt=""> </div></body>

固定定位小技巧

固定定位小技巧：固定在版心右侧位置

小算法：

让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。
让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

即可让固定定位的盒子贴着版心右侧对齐了。

<!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>固定到版心</title>    <style>        .w {            width: 800px;            height: 1400px;            background-color: pink;            margin: 0 auto;        }        .fixed {            position: fixed;            /* 1.浏览器宽度的一半 */            left: 50%;            /* 2.利用margin再走版心宽度的一半 */            margin-left: 405px;            width: 50px;            height: 150px;            background-color: skyblue;        }    </style></head><body>    <div class="fixed"></div>    <div class="w">版心盒子 800像素</div></body></html>

粘性定位 sticky（了解）

粘性定位可以被认为是相对定位和固定定位的混合。

语法：

选择器： {position: sticky; top: 10px;}

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位的特点）
必须添加top，left，right，bottom其中一个才有效。（如果不添加边偏移，就当相对定位来看）

和页面滚定搭配使用，兼容性差，IE不支持

<!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>粘性定位</title>
    <style>
        body {
            height: 300px;
        }

        .nav {
            position: sticky;
            top: 10px;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>

</head>

<body>
    <div class="nav">我是导航栏</div>
</body>

</html>

定位总结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	否
relative	否	相对于自身移动位置	是
absolute	是	带有定位的父级	是
fixed	是	浏览器可视区	是
sticky	否	浏览器可视区	否

两大特点：

是否占有位置（脱标否）
以谁为基准点移动位置

学习定位重点学习子绝父相。

定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠情况，可以使用z-index来控制盒子的前后次序（z轴）

选择器 { z-index: 1; }

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
如果属性值相同，按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

<title>定位堆叠顺序</title>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }

        .one {
            background-color: red;
            z-index: 1;
        }

        .two {
            background-color: green;
            left: 50px;
            top: 50px;
            z-index: 2;

        }

        .three {
            background-color: blue;
            left: 100px;
            top: 100px;
        }
    </style>

定位的拓展

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中

解决：

1.left走50%

2.margin-left: 往左走自己宽度的一半

假如自己：width: 200px；

1
2
3

position: absolute;
left: 50%;
margin-left: -100px;

垂直水平居中,在上面的基础上加：

假如自己height：200px

1 2	top: 50%; margin-top: -100px;

定位的特殊性

绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和高度。
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容大小。
脱标的盒子不会触发外边距塌陷

绝对定位（固定定位）会完全压住盒子

浮动元素不同只用压住他下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有的内容

案例：淘宝焦点图布局制作

大盒子类名为：tb-promo 淘宝广告
里面先放一张图片
左右两个按钮用链接左箭头 prev 右箭头next
底侧小圆点ul做。类型为promo-nav

小细节：一个盒子既有left属性又有right属性，则默认会执行left属性，同理top和bottom会执行top属性

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

        li {
            list-style: none;
        }

        .tb-promo {
            position: relative;
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;
        }

        .tb-promo img {
            width: 520px;
            height: 280px;
        }

        .prev,
        .next {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            /* 加了绝对定位的盒子可以直接设置高度和宽度 */
            width: 20px;
            height: 30px;
            background-color: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 30px;
            color: #fff;
            text-decoration: none;
        }

        .prev {
            position: absolute;
            left: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .next {
            position: absolute;
            right: 0;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .promo-nav {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background-color: rgba(255, 255, 255, .3);
            border-radius: 7px;
        }

        .promo-nav li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
            margin: 3px;
        }
        /* 不要忘记权重问题 */
        .tb-promo .selected {
            background-color: #ff5000;
        }
    </style>
</head>

<body>
    <div class="tb-promo">
        <img src="images/tb.jpg" alt="">
        <a href="#" class="prev">&lt;</a>
        <a href="#" class="next">&gt;</a>
        <ul class="promo-nav">
            <li class="selected"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>
</body>

</html>

网页布局总结

html标签是一个盒子。

通过CSS浮动、定位可以让每个盒子排列称为网页。

一个完整的网页，是由标准流，浮动，定位一起完成布局的，每个都有自己专门的用法。

标准流上下排列or左右排列 垂直的块级盒子显示就用标志流布局
浮动多个块级盒子水平显示
定位最大特点：层叠如果元素自由在某个盒子内移动就用定位布局

元素的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来。

display 显示隐藏
visibility 显示隐藏
overflow 溢出显示隐藏

display属性

设置元素如何显示

display: none; 隐藏对象
display: block; 除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置

visibility 可见性

visibility属性用于指定一个元素应可见还是隐藏。

visibility: visible; 元素可见
visibility: hidden; 元素隐藏

visibility隐藏元素后，继续占有位置

overflow溢出

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，都显示滚动条
auto	自动显示滚动条

<title>显示隐藏元素之overflow</title>
    <style>
        .peppa {
            /* overflow: visible; */
            /* overflow: hidden; */
            /* scroll 溢出的部分显示滚动条  不溢出也显示滚动条 */
            /* overflow: scroll; */
            /* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
            /* overflow: auto; */
            width: 200px;
            height: 200px;
            border: 3px solid pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="peppa">
        《小猪佩奇》，又名《粉红猪小妹》（台湾名为粉红猪），英文名为《Peppa
        Pig》，是由英国人阿斯特利（Astley）、贝克（Baker）、
    </div>

</body>

如果有定位的盒子，慎用overflow:hidden 因为它会隐藏多余部分

案例：土豆网鼠标经过显示遮罩

练习元素的显示与隐藏
练习元素的定位

核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。

遮罩的盒子不占有位置，就需要绝对定位和display配合使用。

<title>仿土豆网显示隐藏遮罩案例</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            /* 隐藏遮罩 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3) url(images/arr.png) no-repeat center;
        }

        /* 鼠标经过遮罩显示 */
        .tudou:hover .mask {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

css技巧部分

精灵图

核心原理：将网页中的一些小背景图片整合到一张大图中，这样服务器只需要一次请求即可。

精灵图（sprites）的使用

使用核心：

精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
这个大图也称为sprites精灵图或者雪碧图
移动背景图片，此时可以使用background-position。
移动的距离就是这个目标图片x和y坐标。注意网页中的坐标有所不同。
因为一般情况下都是往上往左移动，数值为负。

<title>精灵图使用</title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            background: url(images/sprites.png);
            background-position: -182px 0;
        }

        .box2 {
            width: 33px;
            height: 35px;
            margin: 50px auto;
            background: url(images/sprites.png);
            background-position: -153px -98px;
        }
    </style>

</head>

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

注意：

ps用切片工具，切好以后双击切片即可看到坐标和像素值。

一般都是负值。

拼出名字

<title>拼出自己的名字</title>
    <style>
        span {
            display: inline-block;
        }

        .b {
            width: 116px;
            height: 106px;
            background: url(images/abcd.jpg) no-repeat -116px -12px;
        }

        .l {
            width: 104px;
            height: 112px;
            background: url(images/abcd.jpg) no-repeat 0px -275px;
        }

        .e {
            width: 106px;
            height: 118px;
            background: url(images/abcd.jpg) no-repeat -476px 0px;
        }

        .r {
            width: 118px;
            height: 115px;
            background: url(images/abcd.jpg) no-repeat -135px -415px;
        }
    </style>


</head>

<body>
    <span class="b"></span>
    <span class="l"></span>
    <span class="e"></span>
    <span class="r"></span>
</body>

ps 切片大法好

![img](file:///C:\Users\lenovo\Documents\Tencent Files\3032964348\Image\C2C\Image2\K[ZS0OITK$LJRS%4[C4(7LD.png)

字体图标

字体图标的产生

应用场景：主要用于显示网页中通用、常用的一些小图标

精灵图的缺点：

图片文件比较大
图片本身放大缩小会失真
一旦图片制作完毕想要更换非常复杂

解决：字体图标iconfont

展示的是图标，本质属于字体

字体图标的优点

轻量级
灵活性
兼容性

不能代替精灵图，只对工作中图标部分技术的提升和优化

总结：

遇到一些结构和样式比较简单的小图标，就用字体图标
遇到一些结构和样式复杂一点的小图片，就用精灵图

字体图标的下载

icomoon字库 http:///icomoon.io

阿里iconfont字库 http://wwwiconfont.cn/

字体图标的引入

在CSS样式中全局声明字体：简单理解吧这些字体文件通过CSS引入到页面中。

要注意字体文件路径问题。（font文件夹放到页面根目录下）

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?bn5bwv');
  src:  url('fonts/icomoon.eot?bn5bwv#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?bn5bwv') format('truetype'),
    url('fonts/icomoon.woff?bn5bwv') format('woff'),
    url('fonts/icomoon.svg?bn5bwv#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

把上述代码添加到style里，再把官网的小矩形复制一下即可

案例：

<title>字体图标的使用</title>
    <style>
        /* 字体声明 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?bn5bwv');
            src: url('fonts/icomoon.eot?bn5bwv#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?bn5bwv') format('truetype'),
                url('fonts/icomoon.woff?bn5bwv') format('woff'),
                url('fonts/icomoon.svg?bn5bwv#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
            font-size: 100px;
            color: pink;
        }
    </style>
</head>

<body>
    <span>静静子你完了</span>
</body>

</html>

字体图标的追加

把压缩包里的selection.json重新上传，然后选中自己想要的新的图标，重新下载压缩包，并且替换原来的文件即可。

CSS三角

给盒子的宽度，高度都设置为0，给四个边框指定透明颜色，再给其中一个边框指定颜色即可。

<title>CSS三角形</title>
    <style>
        .box {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

案例：京东三角

	<style>
        .jd {
            position: relative;
            width: 120px;
            height: 240px;
            background-color: pink;
        }

        .jd span {
            position: absolute;
            width: 0;
            height: 0;
            top: -10px;
            right: 15px;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="jd">
        <span></span>
    </div>
</body>

CSS用户界面

界面样式：

更改用户操作样式，以便提高更好的用户体验。

更改用户鼠标样式
表单轮廓
防止表单域拖拽

鼠标样式 cursor

li { cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

案例：

<body>
    <ul>
        <li style="cursor: default;">默认小白</li>
        <li style="cursor: pointer;">小手</li>
        <li style="cursor: move;">移动</li>
        <li style="cursor: text;">文本</li>
        <li style="cursor: not-allowed;">禁止</li>
    </ul>
</body>

轮廓线 outline

给表单添加outline: 0; or outline: none; 样式去除默认蓝色边框.

input { outline: none; }

防止拖拽文本域 resize

实际开发中，文本域右下角是不可以拖拽的。

textarea｛ resize: none; }

案例：

 <style> 
        input {
            outline: none;
        }

        textarea {
            resize: none;
        }
    </style>
</head>

<body>
    <!-- 取消表单轮廓 -->
    <input type="text">
    <!-- 防止拖拽文本域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

vertical-align属性应用

CSS的vertical-align属性：经常用于设置图片或者表单（行内块元素）和文字居中对齐。

官方：用于设置一个元素的垂直对齐方式，只针对行内元素和行内块元素有效。

vertical-align: baseline | top | middle | bottom

值	描述
baseline	默认。元素放在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

1
2
3

img {
     vertical-align: middle;
 }

解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素和文字的基线对齐

解决：

给图片添加 vertical-align：middle | top | bottom等（提倡）
把图片转换为块级元素 display: block;

1
2
3

img {
	vertical-align: middle;
}

1
2
3

img {
	display: block;
}

溢出的文字省略号显示

1.单行文本溢出显示省略号–必须满足三个条件

先强制一行内显示文本 white-space: nowrap; (默认normal自动换行)
超出的部分隐藏 overflow: hidden;
文字用省略号替代超出的部分 text-overflow: ellipsis;

<title>单行文本溢出显示省略号</title>
    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        啥也不说，此处省略一万字
    </div>
</body>

多行文本溢出显示省略号

多行文本溢出显示省略号，有较大的兼容性问题，适合webKit浏览器移动端

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

常见布局技巧

margin负值的运用

<title>margin负值的巧妙运用</title>
    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        /* ul li:hover {
           1. 如果盒子没有定位，则鼠标经过添加相对定位即可
        position: relative;
        border: 1px solid blue;

       } */
        ul li:hover {
            /* 2.如果li都有定位，则利用 z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

每个盒子margin往左侧移动 -1px正好压住相邻盒子边框
鼠标经过某盒子，提高当前盒子层级即可（如果无定位，则加z-index）

文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

<title>文字围绕浮动元素</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 70px;
            background-color: pink;
            margin: 0 auto;
            padding: 5px;
        }

        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }

        .pic img {
            width: 100%;
        }
    </style>

</head>

<body>
    <div class="box">
        <div class="pic">
            <img src="images/img.png" alt="">
        </div>
        <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>

</body>

行内块巧妙运用

顶级理解：

行内块元素可以设置宽度，高度

中间有缝隙，不用我们调

给父盒子设置text-align: center;即可设置水平居中对齐

十分方便

<title>行内块的巧妙运用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
        }

        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #cccccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
        }

        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }

        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            /* 取消蓝色边框 */
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">...</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

css三角强化技巧

<title>CSS三角强化巧妙运用</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* 把上边框宽度跳大 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid skyblue; */
            /* 左边和下边的边框宽度设置为0 */
            /* border-bottom: 0 solid blue;
            border-left: 0 solid green; */
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 100px 50px 0 0;
        }
    </style>

</head>

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

有bug，待改进

<title>CSS三角强化巧妙运用</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* 把上边框宽度跳大 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid skyblue; */
            /* 左边和下边的边框宽度设置为0 */
            /* border-bottom: 0 solid blue;
            border-left: 0 solid green; */
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 100px 50px 0 0;
        }

        .price {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 0 auto;
            line-height: 24px;
        }

        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700px;
        }

        .miaosha i {
            position: absolute;
            width: 0;
            height: 0;
            right: 0;
            top: 0;
            border-color: transparent white transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;

        }
    </style>

</head>

<body>
    <div class="box1"></div>
    <div class="price">
        <span class="miaosha">
            ￥1650
            <i></i>
        </span>
        <span class="origin">￥5650</span>
    </div>
</body>

CSS初始化

不同浏览器标签默认值不同，为了兼容性，需要对CSS初始化

即CSS reset

每个网页都必须首先进行CSS初始化

京东为例

unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效避免浏览器解释CSS代码时候出现乱码的问题

比如：

黑体\9ED1\4F53

宋体\5B8B\4F53

微软雅黑\5FAE\8F6F\96C5\9ED1

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

HTML5和CSS3提高导读#

HTML5新特性、

HTML5新增的语义化标签

<header>:头部标签
<nav>:导航标签
<article>:内容标签
<section>:定义文档某个区域
<aside>:侧边栏标签
<footer>:尾部标签

注意：

这种语义化标准主要是针对搜索引擎的
可以使用多次
在IE9中，需要把这些元素转化为块级元素
移动端无兼容性问题
还有其他新增标签

<title>HTML5新增语义化标签</title>
    <style>
        header, nav {
            height: 120px;
            background-color: pink;
            border-radius: 15px;
            width: 800px;
            margin: 15px auto;
        }
        section {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>某个区域</section>
</body>

html5新增的多媒体标签

html5在不使用插件的情况下，也可以原生地支持视频格式文件播放，但支持的格式是有限的。

视频<video>

支持3种格式，尽量用mp4格式

浏览器	MP4	WebM	Ogg
IE	YES	NO	NO
Chrome	YES	NO	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES	YES	YES

语法

<video src=”文件地址” controls=“controls”></video>

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels	设置播放器宽度
height	pixels	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放p
preload	auto(预先加载视频) none (不应加载视频)	规定是否预加载视频（如果有了autoplay就忽略该属性
src	url	视频url地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

音频<audio>

语法

<audio src=”文件地址” controls=“controls”></audio>

浏览器	MP3	Wav	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

谷歌浏览器把音频和视频自动播放禁止了

多媒体标签总结

音频标签和视频便签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
视频标签可以添加muted属性来静音播放视频，音频不可以（用js解决）
视频标签是重点，经常设置自动播放，不使用controls控件，循环和设置大小属性

html5新增的input类型

属性值	说明
type=”email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须被日期类型
type=“time”	限制用户输入必须为时间类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

    <title>html5新增表单</title>
</head>

<body>
    <form action="">
        <ul>
            <li>邮箱：<input type="email" /></li>
            <li>网址：<input type="url" /></li>
            <li>日期：<input type="date" /></li>
            <li>日期：<input type="time" /></li>
            <li>数量：<input type="number" /></li>
            <li>手机号码：<input type="tel" /></li>
            <li>搜索：<input type="search" /></li>
            <li>颜色：<input type="color" /></li>
            <li> <input type="submit" value="提交"></li>
        </ul>
    </form>
</body>

html5新增表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始输入时，浏览器基于之前键入过的值，应该显示在字段中填写的选项。默认已经打开，需要放在表单内，同时加上name属性，同时提交成功
multiple	multiple	可以多选文件提交

代码

<title>HTML5新增表单属性</title>
    <style>
        input::placeholder {
            color: pink;
        }
    </style>
</head>
<body>
    <form action="">
            <input type="search" name="sear" id="" required="required" placeholder="pink老师" autofocus="autofocus" autocomplete="off">
            <input type="file" name="" id="" multiple="multiple">
            <input type="submit" value="提交">
    </form>
  
</body>
</html>

css3新增选择器

css3新增选择器，可以更加方便快捷，更加自由地选择目标元素

属性选择器
结构伪类选择器
伪元素选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=”val”]	选择具有att且属性值等于val的E元素
E[att^=”val”]	匹配具有att属性且值以val开头的E元素
E[att$=”val”]	匹配具有att属性且值以val结尾的E元素
E[att*=”val”]	匹配具有att属性且值中含有val的E元素

<title>CSS3新增属性选择器</title>
    <style>
        /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
    </style>
</head>
<body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->
    <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>

</body>
</html>

ps：注意权重问题

结构伪类选择器

nth-child(n) 选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始
n可以是关键字：even偶数 odd奇数
n可以是公式：常见的公式如下

代码

<title>CSS3新增结构伪类选择器</title>
    <style>
        /* 1. 选择ul里面的第一个孩子 小li */
        ul li:first-child {
            background-color: pink;
        }
        /* 2. 选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: pink;
        }
         /* 3. 选择ul里面的第2个孩子 小li */
         ul li:nth-child(2) {
            background-color: skyblue;
        }
        ul li:nth-child(6) {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>
</html>

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15……
n+5	从第5个开始（包含第5个）到最后
-n+5	前5个（包含第5个）

代码

<title>CSS3新增结构伪类选择器-nth-child</title>
    <style>
        /* 1.把所有的偶数 even的孩子选出来 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2.把所有的奇数 odd的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: gray;
        }
        /* 3.nth-child(n) 从0开始 每次加1 往后面计算  这里面必须是n 不能是其他的字母 选择了所有的孩子*/
        /* ol li:nth-child(n) {
            background-color: pink;
        } */
        /* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
        /* ol li:nth-child(2n) {
            background-color: pink;
        }
        ol li:nth-child(2n+1) {
            background-color: skyblue;
        } */
        /* ol li:nth-child(n+3) {
            background-color: pink;
        } */
        ol li:nth-child(-n+3) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>

</html>

选择符	简介
E:first-child	匹配父元素中第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child	匹配父元素中第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

<title>CSS3新增选择器nth-type-of</title>
    <style>
        ul li:first-of-type {
            background-color: pink;
        }
        ul li:last-of-type {
            background-color: pink;
        }
        ul li:nth-of-type(even) {
            background-color: skyblue;
        }
        /* nth-child 会把所有的盒子都排列序号 */
        /* 执行的时候首先看  :nth-child(1) 之后回去看 前面 div */

        section div:nth-child(1) {
            background-color: red;
        }
         /* nth-of-type 会把指定元素的盒子排列序号 */
        /* 执行的时候首先看  div指定的元素  之后回去看 :nth-of-type(1) 第几个孩子 */
        section div:nth-of-type(1) {
            background-color: blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <!-- 区别 -->
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

</html>

ps：

区别：

nth-child对父元素里面所有的孩子先排序，先找到第n个孩子，再看看是否匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找第n个孩子

总结：

如果是无序列表，肯定用nth-child更多

类选择器、属性选择器、伪类选择器、权重为10

伪元素选择器

伪元素选择器利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

before和after创建一个元素，但是属于行内元素
新创建的元素在文档树里面找不到的，因此称为伪元素
语法： element::before{}
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1

应用场景1：伪元素字体图标

代码

<title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?bn5bwv');
            src: url('fonts/icomoon.eot?bn5bwv#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?bn5bwv') format('truetype'),
                url('fonts/icomoon.woff?bn5bwv') format('woff'),
                url('fonts/icomoon.svg?bn5bwv#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\ea43';
            color: red;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

应用场景2：仿土豆遮罩页面优化

修改隐藏遮罩和鼠标显示遮罩代码

.tudou::before {
            /* 隐藏遮罩 */
            content: '';
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3) url(images/arr.png) no-repeat center;
        }

        /* 鼠标经过遮罩显示 */
        .tudou:hover::before {
            display: block;
        }

修改结构代码

1
2
3

<div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>

应用场景3：伪元素清除浮动

第3第4种伪元素清除浮动算是第一种额外标签法的优化和升级

CSS3盒子模型

CSS3可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box.

两种情况：

box-sizing：content-box 盒子大小为width+padding+border（以前默认的）
box-sizing：boder-box 盒子大小为width

如果盒子模型我们改变了box-sizing:border-box,那padding和border就不会撑大盒子（前提：padding和border不会超过width宽度）

* {
	margin: 0;
	padding: 0;
	box-sizing: borer-box;
}

CSS3其他特性（了解）

图片变模糊
计算盒子宽度width:calc 函数

CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数(); 例如： filter:blur(5px); blur模糊处理数值越大越模糊

<title>图片模糊处理filter</title>
    <style>
        img {
            /* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
            filter: blur(15px);
        }
        img:hover {
            filter: blur(0);
        }
    </style>
</head>
<body>
   <img src="images/pink.jpg" alt="">
</body>

CSS3 calc函数：

width:calc(100%-80px);

括号里面可以使用+-*/来进行计算。

<title>CSS3属性calc函数</title>
    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .son {
            /* width: 150px; */
            /* width: calc(150px + 30px); */
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 需求我们的子盒子宽度永远比父盒子小30像素 -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>

CSS3过渡（重点）

transition:要过渡的属性花费时间运动曲线何时开始；

1.属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡写一个all就行。

2.花费时间：单位是秒（必须写单位）比如0.5s

3.运动曲线：默认是ease （可以省略）

4.何时开始：单位是秒（必须写单位)可以设置延迟触发时间默认是0s（可以省略）

<title>过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: width .5s, height .5s; */
            transition: all .5s;
        }

        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>

</head>

<body>
    <div>

    </div>
</body>

进度条效果

<title>Document</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all .7s;
        }

        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

课后作业

PC端品优购项目

新建文件夹：

名称	说明
项目文件夹	shopping
样式类图片文件夹	images
样式文件夹	css
产品类图片文件夹	upload
字体类文件夹	fonts
脚本文件夹	js

2.创建如下文件：

名称	说明
首页	index.html
CSS初始化样式文件	base.css
CSS公共样式文件	common.css

网站favicon图标

制作网站favicon图标（切图，png->ico，比特虫网站）
favicon图标放到网站根目录下
html页面引入favicon图标

SEO优化

页面必须有三个标签用来符合SEO优化

title网站标题

建议：网站名（产品名）-网站的介绍

description网站说明

SEO人员制作

我们需要准备标签即可

keywords关键字

6~8个，之间用英文逗号隔开

首页制作

常用模块类名命令

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwrods
导航	nav
导航左侧	dropdown 包含 .add .dt
导航右侧	navitems

名称	说明
页面底部	footer
页面底部服务模块	mod_service
页面底部服务模块	mod_help
页面底部版权模块	mod_copyright

header盒子必须要有高度
1号盒子是logo标志定位
2号盒子是search搜索模块定位
3号盒子是hotwords 热词模块定位
4号盒子是shopcar购物车模块

logo SEO优化

logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，此处很重要
h1里面再放一个链接，可以返回首页，把logo的背景图片给链接即可
为了搜索引擎收录我们，我们链接里面要发文字（网站名称），但是文字不要显示出来
- way 1：text-indent移到盒子外面（text-index：-9999px）然后overflow：hidden，淘宝的做法
- way 2：直接给font-size：0；就看不到文字了，京东做法
最后给链接一个title属性，鼠标放到logo上显示文字
- count统计部分用绝对定位做
- count统计部分不要给宽度，因为可能买的件数比较多，让件数撑开即可，给一个高度
- 一定注意左下角不是圆角，其余三个是圆角写法：border-radius:7px 7px 7px 0

footer页面底部盒子通栏给一个高度和灰色的背景
footer里面有一个很大的版心
版心里面包含1号盒子，mod_service是服务模块,mod是模块的意思
版心里面包含2号盒子，mod_help是帮助模块
版心里面包含3号盒子，mod_copyright是版权模块

main主题模块制作

main主题模块是index里面专有的，注意需要新的样式文件index.css

main盒子宽度为980像素，位置距离左边220px（margin-left），给高度就不用清除浮动
main里面包含左侧盒子，左浮动，focus焦点图模块
main里面包含右侧盒子，右浮动，newsflash新闻快报模块

newsflash新闻快报模块

1号盒子为news新闻模块高度165px
2号盒子为lifesevice 生活服务模块高度为209px
3号盒子为bargain 特价商品

news新闻模块

ps：注意我们分为上下两个模块，但是两个模块都要用div
1号盒子news-hd新闻头部模块，给一个高度和下边框
2号盒子news-bd新闻主题部分里面包含ul 和 li 还有链接

楼层区floor制作

floor 不要给高度，内容有多少，算多少

第一楼是家用电器模块：里面包含两个盒子

1号盒子box_hd，给一个高度，有下边框，里面分为左右两个盒子
2号盒子box-bd，不要给高度

box_hd模块

有高度不用清除浮动
左边h3. 左浮
右边tab-list，右浮因为用到tab切换效果，所以里面要用ul和li制作

列表页制作准备工作

新建文件文件list.html
列表页的头部和底部基本一致，所以需要把首页中的头部和底部结构赋值过了=来
头部和底部的样式也需要，因此list.html中还需要引入common.css
需要新的list.css样式文件

注册页制作

命名

注册页面：register.html

注意：注册页面比较隐私，为了保护用户信息，不需要对当前页面做SEO优化

名称	说明
注册专区	registerarea
注册内容	reg-form
错误的	error
成功的	success
默认的	default

移动端

常见移动端尺寸

。。。

视口

布局视口

视觉视口

理想视口

flex布局不会发生外边距合并的问题

flex 可以设置百分比

flex: 20%;