HTML和CSS

最新推荐文章于 2023-06-20 19:26:51 发布
最新推荐文章于 2023-06-20 19:26:51 发布
阅读量2.5k 收藏 43
点赞数 4
分类专栏： HTML+CSS 文章标签： HTML和css的学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_43082914/article/details/90758996
版权

web前端

第一章 html和html5

1. html的基本标签

​ 在HTML中，带有‘<>’符号的元素被称为HTML标签，所谓的标签就是放在“<>”标签中表示某个功能的编码命令，也称为HTML标签或者HTML元素。

1.1 html标签的分类

​ 1.双标签：<标签名>内容</标签名>,其中“<标签名> ” 为开始标签（start tag），“</标签名>” 为结束标签（end tag），“/” 为关闭符。比如：我是文字

​ 2.单标签：也称空标签，指一个标签即可完整的描述某个功能的标签。比如：

1.2 html标签关系

​ 1.嵌套关系(父子关系)

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

​ 2.并列关系（兄弟关系）

<head></head>
<body></body>
1.3 html标签
1.3.1 排版标签

​ 1.标题标签： 语义：作为标题使用，并且重要性递减。HTML提供了6个等级的标题，即

<h1>、<h2>、<h3>、<h4><h5>、<h6>

语法格式：

<hn> 标题文本<hn>。

​ 2.段落标签

<p> 文本内容 </p>

​ 3.水平线标签

<hr/>是一个单标签

​ 4.换行标签

<br/>是一个单标签

​ 5.div span标签：用来布局

<div>文本内容</div>    <span>文本内容</span>
1.3.2 文本格式化标签
标签显示效果
<b></b> 和 <strong></strong>文字以粗体方式显示（XHTML推荐使用strong）
<i></i>和 <em></em>文字以斜体方式显示（XHTML推荐使用em）
<s></s>和<del></del>文字以加删除线方式显示（XHTML推荐使用del）
<u></u>和<ins></ins>文字以加下划线方式显示（XHTML推荐使用ins）

​ 标签属性

<标签名 属性1="属性值" 属性2="属性值"...>文本内容<标签名/>

​ 注意：

​ 1.标签可以有多个属性，必须写在开始标签中，位于标签后面。

​ 2.属性之间不分先后顺序，标签名与属性、属性与属性之间均已空格分开。

​ 3.任何标签的属性都有默认值，省略该属性则去默认值。

​ 采取键值对的格式：key="value"的格式，比如：

<hr width="500"/>
1.3.3 图像标签

​ 该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必须属性。

<img src="图像URL" /> 是一个单标签
属性属性值描述
srcURL图像的路径
alt文本图像不能显示时替换的文本
title文本鼠标悬停时显示的内容
width像素设置图像的宽度
height像素设置图像的高度
border数字设置图像边框的宽度
1.3.4 链接标签
<a herf="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

herf：用于指定链接目标的url地址，当标签应用了herf属性时，它就具有了超链接功能。

target：用于指定页面的打开方式，其取值就有_self和_blank两种，其中_self为默认值，_blank为在新窗口中的打开方式。

注意：

​ 1.外部链接必须加http, 比如：<a herf="http://www.baidu.com">百度</a>。

​ 2.内部链接直接加内部名称即可，比如：<a herf="index.html">首页</a>。

​ 3.如果没有确定的链接目标，通常将链接标签的herf属性设置为“#”，如herf="#"，表示该链接是一个空链接。

​ 4.不仅可以创建超文本链接，在网页中的各种元素，如图像、音频、表格、视频都可以加超链接。

base标签

​ 可以设置整体链接的打开状态，即在新窗口中打开当前的链接。它是一个单标签。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<base target="_blank" />
</head>
<body>
	<a href="http://www.baidu.com">百度</a>
	<a href="http://www.sina.com" target="_self">新浪</a>
	<a href="http://www.sohu.com">搜狐</a>
	<a href="http://www.163.com">网易</a>
</body>
</html>
1.3.5 锚点定位

​ 步骤：

​ 1.使用 <a herf="#id名">链接文本</a>创建超链接文本。

​ 2.使用相应的id名标注跳转的目标位置。比如：

<a herf="#life">个人生活</a>
<p id="life">文本内容</p>
1.3.6 注释标签

​ HTML注释的快捷键：单行注释：ctrl+/, 多行注释：ctrl+shift+/。

1.3.7 特殊字符
特殊字符描述字符的代码
空格符&nbsp;
<小于号&lt;
>d大于号&gt;
&和号&amp;
￥人名币&yen;
©版权&copy;
®注册商标&reg;
°摄氏度&deg;
±正负号&plusmn;
×乘号&times;
÷除号&divide;
²平方2（上标2）&sup2;
³立方3（上标3）&sup3;

2. 路径

2.1 相对路径

​ 1.图像文件和HTML文件位于同一文件夹，只需输入图像文件的名称即可，如 <img src="logo.gif" />。

​ 2.图像文件位于HTML的下一级文件夹，输入文件夹名和图像文件名，之间用“/”隔开，如 <img src="img/img01/logo.gif" />。

​ 3.图像文件位于HTML文件的上一级文件夹，在图像文件名之前加入“…/”，如果是上两级，则需使用“…/…/”，以此类推，如 <img src="../log.gif" />。

2.2 绝对路径

​ 一般不用

​ 1.如，“D:\web\images\logo.gif”。

​ 2.完整的网络地址，如“http://www.itcast.cn/images/logo.gif”。

3. 列表标签

3.1 无序列表
	<ul>
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
		<li>列表项4</li>
		.....
	</ul>

注意：

​ 1.<ul></ul>中只能嵌套<li></li>，直接在 <ul></ul>标签中输入其它标签或者文字的做法是不被允许的。

​ 2.<li></li>之间相当于一个容器，可以容纳所有元素。如

<li>
	<p>内容</p>
	<h5>标题</h5>
</li>

​ 3.无序列表带有自己的属性，css可以设置其属性。

3.2 有序列表
<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
    ...
</ol>
3.3 自定义列表
	<dl>
		<dt>定义标题</dt>
		<dd>定义描述、解释</dd>
	</dl>

如：捕获

<dl>
	<dt>北京</dt>
	<dd>昌平</dd>               
	<dd>朝阳</dd>
	<dd>大兴</dd>
</dl>

4. 表格

4.1 创建表格
<table><!-- 表格标签相当于一个盒子 -->
	<tr>   <!-- 行标签 -->
		<td></td>   <!-- 单元格标签 -->
		...
	</tr>
	...
</table>

注意

​ 1.<tr></tr>中只能嵌套 <td></td>。

​ 2.<td></td>标签，可以容纳所有元素。

4.2 表格属性
属性名含义常用属性值
border设置表格的边框（默认border=“0”无边框）像素值
cellspacing设置单元格与单元格边框之间的空白间距像素值（默认为2像素）
cellpadding设置单元格内容与单元格边框之间的空白间距像素值（默认为1像素）
width设置表格的宽度像素值
height设置表格的高度像素值
align设置表格在网页中的水平对齐方式left、center、right
4.3 表头标签

所谓的表头一般位于表格的第一行或者第一列，其文本加粗居中，为了设置表头，只需用表头标记 <th></th>替代相应的单元格标记 <td></td>即可。

<table>
	<tr>
		<th></th>
		<th></th>
		<th></th>
	</tr>
</table>
4.4 表格结构（了解）

在使用表格进行布局时，可以将表格划分为头部、主体和页脚。具体如下：

<thead></thead>：用于定义表格的头部。必须位于 <table></table>标签中，一般包含网页的logo和导航等头部信息。

<tbody></tbody>：用于定义表格的主体。位于 <table></table>标签中，一般包含网页中除头部和底部之外的其它内容。

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
    </thead>

	<tbody>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</tbody>
</table>
4.5 表格标题
<table>
	<caption>表格标题</caption>
</table>
4.6 合并单元格

跨行合并：rowspan，跨列合并：colspan。

5. 表单

5.1 表单的作用

在HTML中，一个完整的表单通常由表单控件（表单元素）、提示信息、表单域3个部分组成。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮。

提示信息：一个表单中通常还需要一些说明性的文字，提示用户进行填写和操作。

表单域：它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的URL地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据 就无法传送到后台服务器。

5.2 input控件

input标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的类型控件。除了type属性外，<input/>标签还可以定义很多的其它属性，

属性属性值描述
text单行文本框输入
password密码输入框
radio单选按钮
checkbox复选框
typebutton普通按钮
submit提交按钮
reset重置按钮
image图像形式的提交按钮
file文件域
name用户自定义控件的名称
value用户自定义input控件中的默认文本值
size正整数input控件在页面中的显示宽度
checkedchecked定义选择控件默认被选中的项
maxlength正整数控件允许输入的最多字符数

<body>
	<!-- input 标签是一个单标签，br,hr,img base input -->
	用户名：<input type="text" value="请输入姓名" /><br /><!-- 文本框 -->
	密　码：<input type="password" maxlength="6"/><br /><!-- 密码框 -->
	性　别：<input type="radio" name="sex" checked="checked"/>女
		   <input type="radio" name="sex" />男
			<!-- 单选框如果是一组，通过相同的name值来实现 -->
    爱　好：<input type="checkbox" name="hobby">篮球
    	   <input type="checkbox" name="hobby">足球
    	   <input type="checkbox" name="hobby">羽毛球
			<!-- 复选框就是可以选择多个 -->
    搜索：<input type="button" value="搜索按钮"> <!-- 普通按钮 --><br />
		 <input type="submit" value="提交按钮"> <!--提交按钮-->
		 <input type="reset" value="重置按钮"> <!-- 重置按钮 --><br />
		  上传头像：
		 <input type="file" /> <!-- 文件按钮 --><br />
		 <input type="image" src="img.jpg"> <!-- 图像按钮 -->
</body>
5.3 label标签

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

作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。

for属性规定label与哪个表单元素绑定。

<h6>1.用label标签直接进行包裹</h6>
<label>输入账号：<input type="text" /></label>
<h6>2.如果label标签里有多个表单，想定位到某个表单，可以通过for id来实现</h6>
<label for="first">
	输入账号：<input type="text"/> </br>
	密　　码：<input type="password" id="first"/>
</label>
5.4 textarea控件（文本域）

如果需要输入大量的信息，就需要用到 <textarea></textarea>标签。通过textarea控件可以轻松创建多行的文本输入。

<body>
	留言板：</br>
	<textarea cols="每行显示的字符数" rows="显示的行数">
		文本内容
	</textarea>
</body>
5.5 下拉菜单
<body>
	<select>
		<option>选项1</option>
		<option>选项2</option>
		<option>选项3</option>
		...
	</select>
</body>

注意：

  1. <select></select>中至少应包含一对 <option></option>。
  2. 在option中定义 selected="selected"时，当前选项即为默认选项。
5.6 表单域

在HTML中，form标签用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

常用属性：

1.action在表单收集信息后，需要将信息传递给服务器进行处理，action属性用于指定接受并处理表单数据的服务器程序的url地址。

2.method用于设置表单数据的提交方式，其取值为get或post.

3.name用于指定表单的名称，以区分同一个页面中的多个表单。

注意；每个表单都应该有自己的表单域。

<body>
	我们学了三个域：
	<ol>
		<li>文本域 textarea 留言板</li>
		<li>文件域 input type="file" 提交文件的</li>
		<li>表单域 form 收集表单控件信息，并提交</li>
	</ol>
	<h5>表单域</h5>
	<form action="demo.php" method="post" name="login">
		<p>用户名：<input type="text " name=username""></p>
		<p>密　码：<input type="password" name="pwd"></p>
		<input type="submit" value="提交" />
		<input type="reset" value="重置" />
	</form>
	<ol>
		<li>get 速度快 会显示表单里面的内容 不安全</li>
		<li>post 速度较慢 但是不会显示表单里面的内容 安全</li>
	</ol>
	<form action="demo.php" method="post" name="register">
		<p>用户名：<input type="text " name=username""></p>
		<p>密　码：<input type="password" name="pwd"></p>
		<input type="submit" value="提交" />
		<input type="reset" value="重置" />
	</form>
</body>

6. HTML新增标签和属性

6.1 HTML新增常用标签

​ w3c手册中文官网：https://www.w3cschool.cn/

​ 1.header:定义文档的头部或者页眉。

​ 2.nav:定义导航栏链接的部分。

​ 3.footer：定义文档或节的页脚，底部。

​ 4.article：定义文章。

​ 5.section：定义文章中节（section或者区段）。

​ 6.aside:定义其所处内容之外的内容和侧边栏。

​ 7.datalist：定义选项列表，与input元素配合使用。

<input type="text" value="star" list="star">  <!-- input里面用list -->
	<datalist id="star">  <!-- datalist里面用id与input建立链接 -->
		<option>221</option>
		<option>22</option>
		<option>21</option>
		<option>321</option>
		<option>3</option>
		<option>31</option>
	</datalist>

​ 8.fieldset:将表单里的元素分组打包，与legend搭配使用

	<fieldset>
		<legend>用户登录 </legend>   定义标题
		用户名：<input type="text"><br /><br  />
		密　码：<input type="password">
	</fieldset>
6.2 新增的input type属性值
类型格式含义
email<input type="email">输入邮箱的格式
tel<input type="tel">输入手机号码格式
url<input type="url">输入url格式
number<input type="number">输入数字的格式
seatrch<input type="search">搜索框（体现语义化）
range<input type="range">自由拖动滑块
time<input type="time>小时分钟
date<input type="date">年月日
datetime<input type="datetime">
month<input type="month">月年
week<input type="week">星期 年
color<input type="color">颜色
6.3 常用新属性
类型格式含义
placeholder<input type="text" placeholder="请输入用户名" />占位符 当用户输入的时候，里面的文字消失，删除文字时，自动复原
autofocus<input type="text" autofocus />规定当页面加载时 input元素应该自动获得焦点
multiple<input type="file" multiple/>多文件上传
autocomplete<input type="text" autocomplete="on" />规定表单是否应该启动自动完成功能，有两个值，on，off，on代表记录输入的值，1.autocomplete必须有提交按钮 2.这个表单必须给他名字
required<input type="text" required/>必须项
accesskey<input type="text" accesskey="s"/>规定激活（使元素获得自动焦点）的快捷键 ALT+字母形式 例如 ALT+s
6.4 input表单综合案例（学生档案）
<!DOCTYPE html>
<html lang="en">
<head> 
	<meta charset="UTF-8">
	<title>综合案例</title>
</head>
<body>
	<form>
		<fieldset>
			<legend>学生档案</legend>
			<label>姓　名：<input type="text" placeholder="请输入姓名" autofocus /></label><br /><br />
			<label>手机号：<input type="tel" /></label><br /><br />
			<label>邮　箱：<input type="email" /></label><br /><br />
			<label>学　院：<input type="text"  list ="xueyuan" /></label><br /><br />
								<datalist id="xueyuan">
									<option>Java学院</option>
									<option>Python学院</option>
									<option>Web前端</option>
									<option>PHP学院</option>
								</datalist>
			<label>成　绩：<input type="number" /></label><br /><br />
			<label>出生日期：<input type="date" /></label><br /><br />
			<label>毕业时间：<input type="date" /></label><br /><br />
			<input type="submit" /> <input type="reset" />
		</fieldset>

	</form>
</body>
</html>
6.5 多媒体标签

​ 1.引入网站视频 （embed标签）

<embed src='http://player.youku.com/player.php/sid/XNDA3OTMzMTE4MA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

​ 2.插入音频

​ autoplay 自动播放。

​ controls 是否显示默认播放的控件 。

​ loop 循环播放 loop等于几就是播放几次，loop 或者loop=“-1”就是无限循环。

​ width设置播放窗口的宽度。

​ height设置默认播放的窗口高度。

		<audio src="MIC男团 - 逐梦传奇 [mqms2].mp3" autoplay="autoplay" controls loop=""></audio>            <!-- 支持固定的浏览器的播放 -->

		<audio autoplay controls>    <!-- 多浏览器支持的方案 -->
			<source src="MIC男团 - 逐梦传奇 [mqms2].mp3">
			<source src="MIC男团 - 逐梦传奇 [mqms2].ogg">
			你的浏览器不支持音频的播放
		</audio>

​ 3.播放视频

		<video src="库里29生日，官方mv.mp4" autoplay controls width="500" height="300"></video>
         <!-- 支持固定的浏览器播放 -->

		<video autoplay controls width="500" height="300"><!-- 多浏览器支持的方案 -->
			<source src="库里29生日，官方mv.mp4" >
			<source src="库里29生日，官方mv.ogg" >	
             你的浏览器不支持播放视频
		</video>

第二章 CSS和CSS3

1. CSS的样式介绍

CSS的样式规则：1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。

​ 2.属性和属性值以“键值对”的形式出现。

​ 3.属性是对指定的对象设置的样式属性，例如字体大小、颜色等。

​ 4.属性和属性值之间用英文“：”连接。

​ 5.多个键值对之间用英文“;”进行区分。

2. CSS的字体样式属性

2.1 font-size:字号大小
相对长度说明
em相对于当前对象内文本的字体尺寸
px像素，最常用，推荐使用
绝对长度单位说明
in英寸
cm厘米
mm毫米
pt点
2.2 font-family: 字体

1.现在网页中普遍使用14px+。

2.尽量使用奇数偶数的数字字号。ie6等老式浏览器支持 会有bug。

3.各种字体之间必须使用英文状态下的逗号隔开。

4.中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当设置英文字体时，英文字体名必须位于中文字体名之前。

5.如果字体中包含空、#、$等符号时，则该字体必须加英文状态下的单引号或者双引号。例如：font-family:"Times new Roman";

2.3字体加粗

字体加粗除了b和strong标签之外，可以用css来实现，但是CSS是没有语义的。

font-weight属性用来定义字体的粗细，其属性值：normal、bold、bolder、lighter、100~900（100的整数倍）


数字400等于normal，而700等于bold，但是我们更喜欢用数字来表示。
2.4 font-style：字体风格

字体除了用i和em 标签之外，可以用CSS来实现，但是CSS是没有语义的。

font-style属性用来定义字体的风格，如设置斜体、倾斜、或者正常字体，

normal：默认值，浏览器显示的标准的字体样式。

italic：浏览器显示斜体的字体样式。

oblique；浏览器显示倾斜的字体样式。

2.5 font：综合设置字体样式（重点）

font属性用于对字体的样式进行综合设置，语法基本格式如下：

选择器{font：font-style font-weight font-size/line-height font-family;}

*注意：*1.使用font属性时，必须按照上面的顺序来书写，不能更换顺序，各属性之间必须用空格隔开。

​ 2.其中不用设置的属性可以省略，保留默认值，但必须保留font-size和font-family属性，否则font属性将不会起作用。

3. CSS基本选择器

3.1 标签选择器（元素选择器）

标签选择如下：器是只用HTML标签名作为选择器，按标签名分类，为某页面中某一类标签指定统一的CSS样式，其语法格式 如下：

标签名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝或者
元素名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝

其最大的优点是能快速为页面中同类型的标签统一样式，同时也是它的缺点，不能设计差异化样式。

3.2 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.Java{          /*  声明类样式 */
			font-size: 14px;
			font-family: "宋體";
			color: red;
		}
		.Python{       /*  声明类样式 */
			font-size: 16px;
			color: blue;
		}
	</style>
</head>
<body>
	<div class="Java">Java學院</div>  <!--  引用类样式 -->
	<div class="Python">Python學院</div>   <!--  引用类样式 -->
	<div>前端學院</div>
	<div>C++學院</div>
</body>
</html>

注意：1.长名称或词组可以使用中横线来为选择器命名

​ 2.不建议使用“_”下划线来命名css选择器。

​ 3.不要用纯数字、中文等命名，尽量使用英文字母来命名。

3.3 多类名选择器
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		.font20{
			font-size: 50px;
		}
		.font14{
			font-size: 14px;
		}
		.fontweight{
			font-weight: bolder;
		}
		.blue{
			color: blue;
		}
	</style>
</head>
<body>
	<div class="font20 fontweight blue">亚瑟</div>
	<div class="font20">后羿</div>
	<div class="font14">安琪拉</div>
	<div class="fontweight blue">孙悟空</div>
</body>
</html>
3.4 id选择器：

语法格式

#id名{属性1：属性1；属性2：属性值2；属性3:属性值3；}
说明：该语法中。id名即为HTMl元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法和类选择相同。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
		.wen{            /*  类选择器 */
			font:italic bold 20px "宋体" ;
		}
		#select{      /* id选择器 */
			color: blue;
			font-weight: bolder;
		}
	</style>
</head>
<body>
	<div class="wen">文件</div>
	<div id="select">编辑</div>
</body>
</html>
3.5 id选择器和类选择器的区别

id选择器只能使用一次，类选择器可以重复使用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		.blue{           /* 类选择类似与人名可以重复使用 */
			color: blue;
		}
		#red{             /* id选择器类似与身份证只能使用一次 */
			color: red;
		}
	</style>
</head>
<body>
	<div class="blue">张三</div>
	<div id="red">李四</div>
	<div class="blue">张丽</div>
</body>
</html>
3.6 通配符选择器（很少用）

通配符选择器用“*”表示，是所有选择器中作用范围最广的，能匹配页面中所有元素。语法格式如下：

*{属性1：属性1；属性2：属性值2；属性3:属性值3；}
3.7 伪类选择器
3.7.1 链接伪类选择器

  • :link 未访问的链接。

  • :visited 已访问的链接。（很少用）

  • :hover 鼠标到链接上所显示的状态。

  • :active 选定的链接 当我们点击松开鼠标时所显示的状态。（很少用）

    注意：他们的顺序尽量不能颠倒，按照lvha的顺序去书写。

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		a:link{     /* 未访问的链接 */
			font-size: 20px;
			color: gray;
			font-weight: 700;
		}
		a:visited{    /* 已访问的链接 */
			font-size: 20px;
			color: orange;
			font-weight: 700;
		}
		a:hover{     /*  鼠标移到链接上 */
			font-size: 20px;
			color: red;
			font-weight: 700;
		}
		a:active{     /* 选定的链接 当我们点击鼠标别松开鼠标显示的状态 */
			font-size: 20px;
			color: green;
			font-weight: 700;
		}
	</style>
</head>
<body>
	<div>
		<a href="#">秒杀</a>
		<!-- <a href="#">闪购</a> -->
	</div>
</body>
</html>
3.7.2 伪类选择器的简写（最常用）
a{
	font-size: 20px;
	olor: gray;
	font-weight: 700;
}
a:hover{
	color: red;
}
3.7.3 结构伪类选择器

  • :first-child:选取属于其父元素的首个子元素指定的选择器。

  • :last-child:选取属于其父元素的最后一个子元素的指定选择器。(在HBuilderX在中没有渲染效果)

  • :nth-child(n):匹配属于其父元素的第N个子元素。even是选择偶数，odd是选择奇数。

  • :nth-last-child(n)：选择器匹配属于其元素的第N个子元素的的每个元素，不论元素的类型，从最后一个子元素开始计数，n可以是数字、关键字、或者公式。

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/* li:first-child{  选择第一个孩子
			color: red;
		}
		li:last-child{   选择最后一个孩子
			color: purple;
		}
		li:nth-child(4){   n 代表第几个的意思
			color: orange;
		} */


		/* li:nth-child(even){  偶数
			color: skyblue;
		}
		li:nth-child(odd){    奇数
			color: pink;
		} */


		/* li:nth-child(2n){   公式
			color: purple;
		} */

		li:nth-last-child(2n){
			color: orange;
		}
	</style>
</head>
<body>
	<ul>
		<li>第一个孩子</li>
		<li>第二个孩子</li>
		<li>第三个孩子</li>
		<li>第四个孩子</li>
		<li>第五个孩子</li>
		<li>第六个孩子</li>
		<li>第七个孩子</li>
	</ul>
</body>
</html>
3.7.4 目标伪类选择器
:target{
		color: red;
		font-weight: 700;
	}

4. CSS的外观样式及应用

4.1 CSS的外观属性
4.1.1 文本的颜色
  • 预定义的颜色值，如：red、green、blue。
  • 十六进制：如#FF0000，#FF6600，十六进制是最常用的。
  • RGB代码，如红色可以表示为rgb(255,0,0)。
4.1.2 line-height行间距

line-height属性用于设置行间距，常用的属性值单位有三种，分别为像素px,相对值em和百分比%，实际中用的最多的是像素px。

一般情况下，行距比字号大7.8像素就行。

4.1.3 text-align：水平对齐方式

属性值：left左对齐，right右对齐，center居中对齐。

4.1.4 text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同的单位的数值、em字符宽度的倍数、或相对于浏览器窗口的百分比%，允许使用负值，建议使用em作为设置单位。一个em就是一个汉字的宽度。

4.1.5 letter-spacing:字间距（只对中文有用）

letter-spacing用于定义字与字之间的距离，其属性赋值为不同的单位值，允许使用使用负值，默认为normal。

4.1.6 word-spacing：单词间距（只对英文单词有用）
4.1.7 word-break：自动换行
  • normal:使用浏览器默认的换行规则。
  • break-all:允许在单词内换行
  • keep-all:只在半角空格或者连字符出换行。
4.1.8 颜色半透明（CSS3）

文字颜色到了CSS3，就可以采用半透明的格式

color:rgba(r,g,b,a);  a是alpha 透明的意思，取值范围在0~1之间，如 color:rgba(255,0,0,0.3);
4.1.9 文字阴影（CSS3）
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
如：text-shadow:1px 3px 4px rgba(255,0,0,0.3);

注意：前两项是必须写的，后面两项可以选写。

4.2 引入CSS样式表（属写位置）
4.2.2 行内式（内联式）

是通过标签的style属性来设置元素的样式，语法格式如下：

<标签名 style="属性1：属性值1：属性2：属性值2；属性3：属性值3；">内容<标签名/>

其中style是标签的属性，书写规范和css一样，行内式只对其所在的标签及嵌套在其中的子标签起作用。

4.2.2 内部样式表

内嵌式是将CSS代码集中写在head头部标签中，并且用style标签定义，语法格式如下：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			color: pink;
		}
	</style>
</head>

语法中，style标签一般位于head标签中title标签之后，也可以把它放在HTML文档的任何地方。其中 type="text/css"在HTML中可以省略。

4.2.3 外部样式表（外链式）

链入式是将所有的样式放在一个或多个外部样式表文件中，通过link标签将外部样式链接到HTML文档中，语法格式如下：

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

注意：

  • link是个单标签。
  • link放在head头部标签中，并且必须指定link标签的三个属性，
  • -herf:定义链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径，
  • -type：定义所链接文档的类型，在这里需要指定 text/CSS，表示链接的外部文件为CSS样式表。
  • -rel:定义当前文档与被链接文档之间的关系，在这里需要指定为 stylesheet ,表示链接的文档是一个样式表。
4.2.4 三种样式表的总结
样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高没有实现样式和结构的分离较少控制一个标签（少）
内部样式表部分结构和样式分离没有彻底分离较多控制一个页面（中）
外部样式表完全实现结构和样式分离需要引入最多，推荐控制整个站点（多）
4.3 标签显示模式（display）
4.3.1 块级元素（block-level）

每个块元素通常都是独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

特点：

  • 总是从新行开始。
  • 高度，行高、外边距以及内边距都可以控制。
  • 宽度默认是容器的100%。
  • 可以容纳内联元素和其他元素。
4.3.2 行内元素（inline-level）

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、宽度、对齐属性，常用于控制页面中的文本样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。

行内元素的特点：

  • 和相邻行内元素在一行上。
  • 高度、宽度无效，但是水平方向的padding和margin可以设置，垂直方向的无效。
  • 默认宽度就是它本身内容的宽度。
  • 行内元素只能容纳文本或者其他行内元素。（a特殊）

注意：

  • 只有文字才能组成段落，因此p里面不能块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都失败文字类块级标签，里面不能放其他块级元素。
  • 链接里面不能放其他链接。
4.3.3 行内块元素（inline-block）
在行内 块元素中有几个标签------<img />、<input />、<td />可对他们设置宽高和对齐属性
行内块元素的特点：
1.和相邻的行内元素（行内块）在同一行上，但是之间会有空白间隙。
2.默认的宽度就是它本身内容的宽度。
3.高度 ，行高， 外边距以及内边距都可以控制。
4.3.4 显示模式的转换
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{        /*  将块级标签模式转换成行内标签模式 */
			height: 100px;
			width: 100px;
			background-color: pink;
			display: inline;
		}	
		span{		/*  将行内标签模式转换成块级标签模式 */
			height: 100px;
			width: 100px;
			background-color: hotpink;
			display: block;
		}
		a{			/* 将行内标签模式转换成块内块标签模式 */
			height: 20px;     
			width: 30px;
			background-color: deeppink;
			display: inline-block;
		}
	</style>
</head>
<body>
	<div>123</div>
	<div>456</div>
	<div>789</div>
	<span>abc</span>
	<span>efg</span>
	<span>hij</span>
	<a href="">123</a><a href="">123</a>
</body>
</html>

5. CSS的复合选择器

5.1 交集选择器

交集选择器是由两个选择器构成，其中第一个选择器为你标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special.

h3.class{color:red;font-size:25px;}

记忆技巧：

交集选择器是并且的意思。即….又….的意思。比如：p.on选择的就是：类名为one的段落标签。该选择器用的相对较少，不建议使用。

div.singer{
				color: #FF0000;
				font-size: 25px;
			}
5.2 并集选择器

并集选择器（css选择器分组）是各个

并集选择器（css选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器和id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以用并集选择器为他们定义相同的css样式。

h3,.class{color:red;font-size:25px;}

注意:并集选择器是和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面的样式。

p,div,h1,.yao{
   color: blue;
   font-size: 25px;
}
5.3 后代选择器

后代选择器又称包选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当发生标签嵌套是，内层标签就是外层标签的后代。


.class h3{
   color: blue;
   font-size: 25px;
}

div ul li{
	color: #0000FF;
	font-weight: bolder;
}
5.4 子元素选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.item li{       /* 后代选择器 */
				color: blue;
			}
			.item > li{     /* 子元素选择器 */
				color: red;
			}
		</style>
	</head>
	<body>
		<ul class="item">
			<li>一级菜单
				<ul>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
		</ul>
	</body>
</html>
5.5 课堂案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 链接登录里面的颜色为红色,同时将主导航栏里的所有链接改成蓝色. */
			.site-r a{   /* 后代选择器 */
				color: #FF0000;
			}
			.nav ul li a{
				color: skyblue;
			}
			/* 主导航栏和侧导航栏里面文字都是14像素并且都是微软雅黑 */
			.nav,.sitenav{
				font: 14px "microsoft yahei";
			}
			/* 主导航栏里的一级菜单链接文字颜色为绿色 */
			.nav > ul > li > a{
				color: green;
			}
		</style>
	</head>
	<body>
		<div class="nav">      <!-- 主导航栏 -->
			<ul>
				<li><a href="#">公司首页</a></li>
				<li><a href="#">公司简介</a></li>
				<li><a href="#">公司产品</a></li>
				<li>
					<a href="#">联系我们</a>
					<ul>
						<li><a href="#">公司邮箱</a></li>
						<li><a href="#">公司电话</a></li>
					</ul>
				</li>
			</ul>
		</div>
		
		<div class="sitenav">    <!-- 侧导航栏 -->
			<div class="site-l">左侧侧导航栏</div>
			<div class="site-r"><a href="">登录</a></div>
		</div>
	</body>
</html>
5.6 属性选择器

选取标签带有某种特殊属性的选择器，我们成为属性选择器。

选择器示例
E[attr$=val]属性值里包含val字符并且在“结束”的位置
E[attr]存在arr属性即可
E[attr=val]属性值完全等于val
E[attr*=val]属性值里包含val字符并且在任意位置
E[attr^=val]属性值里包含val字符并且在“开始”的位置
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a[title]{
				color: #87CEEB;
				font-size: 25px;
			}
			input[type=text]{
				color: #FF0000;
			}
			
			div[class^=font]{ /* 以font开始的 */
				color: #0000FF;
			}
			div[class$=footer]{
				color: #008000;
			}
			div[class*=tao]{
				color: #87CEEB;
			}
		</style>
	</head>
	<body>
		<a href="#" title="我是一个百度">百度</a>
		<a href="#" title="我是一个新浪">新浪</a>
		<a href="#">土豆</a>
		<a href="#">优酷</a>
		<a href="#">网易</a>
		<input type="text" value="文本框" />
		<input type="text" value="文本框" />
		<input type="text" value="文本框" />
		<input type="submit" />
		
		
		
		<div class="font12">属性选择器</div>
		<div class="font12">属性选择器</div>
		<div class="font24">属性选择器</div>
		<div class="font24">属性选择器</div>
		<div class="sub-footer">属性选择器footer</div>
		<div class="jd-footer">属性选择器footer</div>
		<div class="news-tao-nav">属性选择器</div>
		<div class="news-tao-header">属性选择器</div>
		
		
	</body>
</html>
5.7 伪元素选择器
  1. E::first-letter 文本的第一个单词或字（如日文 中文 韩文等）。
  2. E::first-line 文本的第一行。
  3. E::selection 可以改变选中的文本样式。
  4. E::before和E::after在E元素的内部开始的位置和结束的位置创建一个元素，该元素为行内元素，且必须要结合content属性使用。
 P::first-letter{   /*  选择第一个单词 */
	color: #FF0000;
	font-size: 20px;
 }
 P::first-line{  /* 选择第一行 */
	color: #0000FF;
 }
 p::selection{    /* 当我们选中文字的时候可以变换的样式 */
	color: aqua;
 }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div::before{
				content:"我";
			}
			div::after{
				content: "18岁";
			}
		</style>	
	</head>
	<body>
		<div>今年</div>
	</body>
</html>

6. CSS的背景及应用

background-color背景颜色
background-image
background-repeat是否平铺
background-position背景位置
background-attachment背景固定还是滚动
background：背景颜色 背景图片的地址 背景平铺 背景滚动 背景位置
6.1 背景位置(background-position)
  1. 利用方位名词 left top||bottom right ||center等来更改图片的位置，默认的是left top。方位名词没有顺序，谁在前都可以。如果方位名词只写一个，另一个默认的是center。
  2. 精确单位值，第一值一定是X坐标，第二个值是Y坐标。
  3. 混搭：比如 background-position：center 10px;
		<style>
			div {
				width: 700px;
				height: 800px;
				background-color:pink;
				background-image: url(img/库里.jpg);
				background-repeat:no-repeat;
				/* background-position: left top; */
				/* background-position: bottom right; */
				/* background-position:center center; */
				/* background-position:left; */
				/* background-position: center 10px; */
				background-position:10px 15px;
			}
		</style>
6.2 背景附着
background-attachment：scroll| fixed;

参数：scroll:背景图像是随对象 内容滚动的。fixed：背景图像固定。

6.3 背景简写

background的属性顺序并没有强制的标准，为了可读性，建议用如下顺序：

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

background: #000 url(img/库里.jpg) no-repeat fixed center 50px;
6.4 背景透明（CSS3）

语法格式：

background: rgba(0, 0, 0, 0.5);

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

*注意：*背景半透明是指盒子的背景半透明，盒子里面的内容不受影响。同样可以给文字和边框透明，都是rgba的格式来写。

6.5 背景缩放（CSS3）

通过background-size设置背景图片的尺寸。起参数设置如下：

  1. 可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）。
  2. 设置为cover时，会自动调整缩放比例，保证图片始终填满背景区域，如有溢出部分则会被隐藏。
  3. 设置为contain时，会自动调整缩放比例，保证图片始终完全显示在背景区域。
div{
	width: 400px;
	height: 500px;
	background: hotpink url(img/timg.jpg) no-repeat ;
	/* background-size: 60%; */
	/* background-size: cover; */
	background-size: contain;
				
}
6.6 多背景（CSS3）

以逗号分隔可以设置多背景，可用于自适应布局，做法就是用逗号隔开就行。

  1. 一个元素可以设置多重背景图像。
  2. 每组属性之间使用逗号隔开。
  3. 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景会覆盖在后面的背景上。
  4. 为了避免背景将图像盖住，背景色通常设置在最后一组上。
div{
	width: 500px;
	height: 500px;
	background:url(img/timg.jpg) no-repeat left top,
			  url(img/timg1.jpg) no-repeat right bottom  hotpink;
	background-size: 40%;
}
6.7 凹凸文字
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style text="text\css">
			body{
				background-color: #CCCCCC;
			}
			div{
				color: #CCCCCC;
				font: 700 80px "microsoft yahei"
			}
			div:first-child{
				/* text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 */
				text-shadow:1px 1px 1px #000,
							-1px -1px 1px #fff;
			}
			div:nth-child(2){
				/* text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 */
				text-shadow:-1px -1px 1px #000,
							1px 1px 1px #fff;
			}
		</style>
	</head>
	<body>
		<div>我是凸起的文字</div>
		<div>我是凹下的文字</div>
	</body>
</html>
6.8 导航栏案例
文本的装饰（text-decoration）通常用于给链接修改装饰效果。
值描述
none默认，定义标准的文本
underline定义文本下的一条线
overline定义文本上的一条线
line-through定义穿过文本的一条线

使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。

7. CSS的三大特性

7.1 CSS 的层叠性

所谓的层叠性是指CSS多种样式的叠加。

一般情况下，如果出现样式的冲突，则会按照CSS书写的顺序，以最后的样式为标准。

7.2 CSS的继承性

所谓的继承性是指书写CSS样式的时候，子标签会继承父标签的某些样式，如文本的颜色和字号，想要设置一个可继承的属性，只要将它应用于父元素即可。

注意：恰当地使用继承可以简化代码，降低CSS样式的复杂性。但是，在网页中所有的元素都大量继承样式，那么判断样式的来源就很困难，所以对于字体、文本属性等网页中通用的样式可以使用继承。例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中的所有文本。

并不是所有的CSS属性都可以继承，例如，边框、外边距、内边距、背景、定位、元素高属性等不具有继承性。

7.3 CSS的优先级
CSS的特殊性

关于CSS的权重，我们需要一套公式来计算，这个就是CSS的Specificity,我们称为CSS的特殊性或者非凡性，同事一个衡量CSS值优先级的一个标准。

specificity用一个四位的数字串（CSS2是三位）来表示，更像四个级别，值从左到右，左面的值最大，一级大于一级，数位之间没有进制，级别之间不可超越。

每个元素（标签）贡献值0,0,0,1
每个类，伪类贡献值0,0,1,0
每个ID贡献值为0,1,0,0
每个行内样式的贡献值1,0,0,0，
每个！important贡献值无穷大
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				color: red;
			}
			.wang {
				color: orange;
			}
			#zhe {
				color: green;
			}
			div{
				color: blue!important;
			}
		</style>
	</head>
	<body>
		<div class="wang" id="zhe" style="color: skyblue;">王者荣耀</div>
	</body>
</html>

权重是可以叠加的：

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
#nav p--------->0,1,0,1

注意：数位之间没有进制；继承的权重是0；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.daohanglan{  /* 权重为0,0,1,0   但该权重为nav的*/
				color: red;
			}
			li{   /* 权重为0,0,0,1 */
				color: pink;
			}
		</style>
	</head>
	<body>
		<nav class="daohanglan">
			<ul>
				<li>继承的权重为0</li>
			</ul>
		</nav>
	</body>
</html>

总结优先级：

  1. 使用了!important声明的规则。
  2. 内嵌在HTML元素的style属性里面的声明。
  3. 使用了ID选择器的规则。
  4. 使用了类选择器、属性选择器、伪元素、和伪类选择器的规则。
  5. 使用了元素选择器的规则。
  6. 只包含一个通用选择器的规则。
  7. 同一类元素选择器遵循就近原则。

总结：权重属于优先级的算法，层叠是优先级的表现。

8. CSS的盒模型（CSS的重点）

8.1 盒子的边框

语法格式：

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

边框样式（border-style）一般定义页面中的边框风格：

none:没有边框即忽略所有边框的宽度（默认值）。
solid：边框为单实线（最为常用的）。
dashed：边框为虚线。
dotted:边框为点线。
double：边框为双实线。

border的简写：

border：宽度 样式 颜色；
border：1px solid red;

合并细线表格：

border-collapse:collapse;/*合并相邻的边框*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>		
			table{
				width: 700px;
				height: 300px;
				border: 1px solid red;
				border-collapse: collapse;/* 合并相邻边框 */
			}
			td{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<table cellspacing="0" cellpadding="0">
			<tr>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
			<tr>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
			<tr>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
		</table>		
	</body>
</html>

圆角边框：（border-radius）

语法格式：

border：左上角 右上角 右下角 左下角;/*也可以用百分比*/
8.2 盒子的内边距（padding）

内边距是指：边框与内容之间的距离。

padding-top：上内边距

padding-right：右内边距

padding-bootom：下内边距

padding-left：左内边距

注意:后面跟几个数值表示的意思是不一样的。

值得个数意思
1表示上下左右边距，padding：3px;表示上下左右都是3px
2表示上下边距 左右边距 padding：3px 5px;表示上下3像素 左右5像素
3表示上边距 左右边距 下边距 padding：3px 5px 10px;表示上是3像素 左右是5像素 下是10像素
4表示上内边距 右内边距 下内边距 左内边距 padding：1px 2px 3px 4px
div{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	padding: 10px 20px 30px 40px;
}
8.3 新浪导航栏案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			nav{
				height: 41px;
				background-color: #FDFDFD;
				border-top: 3px solid #FF7D00;   /* 上边框 */
				border-bottom: 1px solid #EDEFF1;  /* 下边框 */
			}
			nav a{
				font-size: 14px;
				color: #4D4D4D;
				text-decoration: none;
				display: inline-block;   /* 因为链接是行内元素,没有大小,所以应该转换成行内块元素 */
				height: 41px;
				line-height: 41px;  /* 行高等于高度,可以使文字垂直居中 */
				padding: 0px 15px;   /* 上下为0px ,左右为15px */
			}
			nav a:hover{
				background-color: #eee;
			}
		</style>	
	</head>
	<body>
		<nav>
			<a href="#">首页</a>
			<a href="#">手机新浪网</a>
			<a href="#">网站导航</a>
			<a href="#">三个字</a>
		</nav>
	</body>
</html>
8.4 外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建空白，这段空白通常不能放其他内容。

margin-top:上外边距
margin-right：右外边距
margin-bottom:下外边距
margin-left:左外边距
margin：上外边距 右外边距 下外边距 左外边距
注意：取值顺序和内边距相同，都为顺时针。
外边距实现盒子居中

可以让一个盒子实现居中，但需要满足两个条件：

  1. 必须是块级元素
  2. 盒子必须指定了宽度（width）

然后都给左右外边距都设置为auto，就可以使块级元素水平居中。示例：

.header{width:960px;margin:0 auto;}
8.5 盒子居中、文字居中以及背景图片和插入图片
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 100px;
				border: 1px solid red;
				text-align: center;  /* 文字水平居中 */
				margin: 0 auto;/* 盒子水平居中  上下可以设置为0  左右必须设置为auto*/
			}	
			section{
				width: 300px;
				height: 300px;
				border: 1px solid #000;
			}
			section img{
				width: 200px;  /* 可以通过宽高的设置来改变插入图片的大小. */
				height: 210px;
				margin-top: 30px;  /* 可以通过margin或者padding来改变插入图片的位置 */
				margin-left: 30px; 		
			}
			aside{
				width: 300px;
				height: 300px;
				border: 1px solid #000;
				background: #fff url(img/timg.jpg) no-repeat;
				background-size: 200px 210px;/* 背景图片更改大小只能用background-size */
				background-position: 30px 30px   /*背景图片更改位置用的是background-position
			} */
		</style>
	</head>
	<body>
		1.文字水平居中和盒子水平居中
		<div>文字水平居中</div>
		2.插入图片和背景图片更改大小和位置
		<section>
			<img src="img/timg.jpg" alt="">插入图片
		</section>
		<aside>背景图片</aside>
        3.一般情况下，背景图片适合做一些小图标使用,产品展示之类的就用插入图片。
	</body>
</html>
清除内外边距
*{
    margin：0;清除内边距
    padding：0；清除外边距
}

注意：行内元素只有左右外边距，是没有上下外边距的，而且内边距在IE6等低版本的浏览器中也会有问题。因此尽量不要给行内元素设置上下内边距，只设置左右内、外边距。

外边距合并

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

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

当上下相邻的两个元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom和margin-top之和，而是两者中的较大值，这种现象被称为相邻块元素垂直外边距的合并（也称外边距的塌陷）。

	div{
		width: 100px;
		height: 100px;
		background-color: #FFC0CB;
		margin-bottom: 30px;
    }
    div:nth-child(2){    /* 两者之间的间距,以其中一个块的最大值为他们之间的距离 */
         background-color: purple;
         margin-top: 20px;
    }
嵌套块元素的外边距合并

对于两个嵌套的关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的最大值，即使父元素的上外边距为0，也会发生合并。

解决方案：1.可以为父元素定义1像素的上边框或者上内边距。2.可以为父元素添加 overflow：hidden。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.father{
				width: 300px;
				height: 300px;
				background-color: #FFC0CB;
				margin-top: 100px;
				/* 解决嵌套块元素垂直外边距合并*(塌陷)的问题的3种方法 */
				/* border: 1px solid #4D4D4D; */
				/* padding:2px; */
				overflow: hidden;
				
			}
			.son{
				width: 200px;
				height: 200px;
				background-color: #800080;
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>
8.6 content宽度和高度
计算盒子的大小

符合css规范的盒子模型的总宽度和总高度的计算原则是：

/*外盒尺寸的计算（元素空间尺寸）*/
Element空间高度=content height+padding+border+margin
Element空间宽度=content width+padding+border+margin

/*内盒尺寸的计算（元素实际大小）*/
Element height=content height+padding+border（height为内容的高度）
Element width=content width+padding+border（width为内容的宽度）

注意：

  • 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img标签和input除外）。
  • 计算盒子模型的总高度时，还应该考虑上下两个盒子的垂直外边距合并的情况。
  • 如果一个没有给定宽度或者高度，或者继承父亲的宽度和高度，则padding不会影响盒子的宽度或者高度。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 30px;
				border: 1px solid red;
				padding-left:20px;/* 因为没有设置盒子的宽度,所以padding不会影响盒子的宽度 */
				padding-top: 20px;  /* 因为给盒子设定了高度.所以padding-top会改变盒子的高度 */
			}
			nav{
				height: 50px;
				width: 300px;
				border: 1px solid blue;
			}
			P{       /* 因为p没有宽度,所以会继承父元素的宽度,默认和父元素一样,块级元素 */
				height: 30px;
				background-color: hotpink;
				padding-left: 50px;  /* 因为没有宽度,所以padding不会影响盒子的宽度 */
			}
		</style>
	</head>
	<body>
		<div>奔跑吧，小兄弟</div>
		<hr />
		<nav>
			<p>摔跤吧，爸爸</p>
		</nav>
	</body>
</html>


/*计算盒子的大小*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: /* 74px */59px;/*74-15px=59px  */
				height: 34px;
				border: 1px solid #C0C0C0;
				margin: 100px;
				border-radius: 5px 0 0 5px;
				line-height: 34px;
				padding-left: 15px;
			}
		</style>
	</head>
	<body>
		<div>新浪</div>
	</body>
</html>
8.7 搜索趣图的案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;   /* 取消掉ul li 标签里面的样式 */
			}
			div{
				width: 238px;
				height: 298px;
				border: 1px solid #D7E0EF;
				border-top: 3px solid #FF7B00;/* 必须放在border的下面 */
				margin: 100px;
			}
			.searchPic h3{
				height: 35px;
				line-height: 35px;/* 文字高度等于行高,可以使文字垂直居中 */
				font-size: 16px;
				font-weight: normal;
				border: 1px solid  #D7E0EF;
				padding-left: 12px;  /*因为p继承了父元素的宽度,所以padding不会改变盒子的宽度  */
			}
			.searchPic img{
				width: 218px;
				height: 160px;
				margin: 7px 0 0 10px;
			}
			.searchPic ul{
				margin-left: 10px;
			}
			.searchPic ul li{
				padding-left: 7px;
				height: 23px;
				line-height: 23px;
				background: url(img/icon.png) no-repeat 0 -881px;
			}
			.searchPic ul li a{
				font-size: 12px;
				text-decoration: none;
				color: #666666;
			}
			.searchPic ul li a:hover{
				text-decoration: underline;
				color: #FF7B00;
			}
		</style>
	</head>
	<body>
		<div class="searchPic">
			<h3>搜索趣图</h3>
			<img src="img/sina.gif" />
			<ul>
				<li><a href="#">GIF：三只怂狗打不过一只小猫咪</a></li>
				<li><a href="#">蛋白聚集可调控生物体衰老与长寿</a></li>
				<li><a href="#">美国宇航员今年第二次太空行走</a></li>
			</ul>
		</div>
	</body>
</html>
盒子模型布局的稳定性

按照优先使用 宽度（width）其次使用 内边距（padding）再次 外边距（margin）。

width>padding>margin

原因：

  1. margin会有外边距合并，还有IE6下面的加倍bug，所以最后使用。
  2. padding影响盒子的大小，需要进行加减运算，其次使用。
  3. width没有问题，经常使用宽度剩余法 高度剩余法来做。
CSS3盒模型

CSS3可以通过box-sizing来指定盒模型，即可指定为content-box、border-box这样我们计算盒子的大小的方式就发生了改变。

可以分为两种情况：

  1. box-sizing：content-box盒子大小为width+padding+border content-box此值为默认值。
  2. box-sizing：border-box盒子的大小为width就是说padding和border是包含到里面的。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div:first-child {
				width: 300px;
				height: 200px;
				background-color: #800080;
				box-sizing: content-box;/* 就是以前的盒模型 */
				padding: 10px;
				border: 10px solid mediumvioletred;
				/* width=width+padding+border */
			}
			div:nth-child(2) {
				width: 200px;
				height: 100px;
				background-color: pink;
				box-sizing: border-box;/* 不改变盒子的宽度，一直为盒子的宽度 */
				padding: 10px;
				border: 10px solid orange;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
	</body>
</html>
8.8 盒子的阴影

语法格式：

box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(阴影的大小) 阴影的颜色  内/外阴影（inset/outset）;

注意：前两个属性必须写，其余的可以省略。默认的是outset。

水晶图片案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				height: 300px;
				width: 300px;
				line-height: 300px;
				background-color: #800080;
				color: rgba(255,255,255,.7);
				text-align: center;
				font-size: 50px;
				border-radius: 50%;
				background: url(img/shuijing.jpg) 0 0 no-repeat ;
				box-shadow: 10px 20px 20px 5px rgba(77,77,255,.5) inset,
				10px 20px 20px 5px rgba(0,0,0,.3);
				
			}
		</style>
	</head>
	<body>
		<div>水晶图片 </div>
	</body>
</html>

9. 浮动（float）

CSS的定位有三种机制：普通流（标准流）、浮动、定位。

普通流（标准流、文档流）：实际上就是一个网页内的标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列，按照这种大前提的布局排列之下绝对不会出现例外的情况下叫做普通流布局。

9.1 浮动

浮动最早用来控制图片，以便达到其他元素（特别是文字）实现“环绕”的效果。

元素的浮动是指设置可浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定的位置的过程。

选择器{float：属性值;}
属性值描述
left元素左浮动
right元素右浮动
none元素不浮动（默认值）
9.1 浮动的内幕特性

浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动。

浮动会首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离它最近的父级元素与它对齐，但是不会超出内边距的范围。

浮动元素的排位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素的顶部会和上一个元素的顶部对齐，如果上一个元素是标准流（即没有浮动），则A元素的顶部会和上一个元素的底部对齐。

因此，一个父盒子里面的子盒子，如果其中一个子级有浮动，则其它子级都需要浮动，这样才能一行对齐显示。

元素添加浮动后，元素会具有行内块元素的特性。元素的大小取决于定义内容的大小或者默认的内容多少。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 200px;
				background-color: pink;
				float: left;/* 块级元素添加浮动后,具有行内块的特性 */
			}
			span{
				background-color: purple;
				height: 100px;
				float: left;/* 行内元素添加浮动后,具有行内块的元素特性 */
			}
		</style>
	</head>
	<body>
		<div>块级元素添加浮动</div>
		<div>块级元素添加浮动</div>
		<span>行内元素添加浮动</span>
		<span>行内元素添加浮动</span>
	</body>
</html>

10. 版心和布局流程

版心是指网页中主题内容所在的区域，一般在浏览器窗口中水平居中显示，常见的宽度设置为960px、980px、1000px、1200px。

10.1 布局流程
  1. 确定页面的版心（可视区）。
  2. 分析页面中的行模块，以及每个行模块中的列模块。
  3. 制作HTML页面，CSS文件。
  4. CSS初始化，然后开始运用盒子的模型的原理，通过div+CSS布局来控制网页中的各个模块。
10.2 一列固定宽度且居中
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			/* 相同的样式,我们可以使用并集选择器 */
			.top,
			.banner,
			.main,
			.footer{
				width: 960px;
				text-align: center;
				margin: 0 auto;
				margin-bottom: 10px;
			}
			.top{
				height: 100px;
				background-color: pink;			
			}
			.banner{			
				height: 200px;
				background-color: hotpink;
			}
			.main{	
				height: 500px;
				background-color: pink;
			}
			.footer{			
				height: 300px;
				background-color: skyblue;	
			}
		</style>
	</head>
	<body>
		<div class="top">top</div>
		<div class="banner">banner</div>
		<div class="main">main</div>
		<div class="footer">footer</div>
	</body>
</html>
10.3 两列 左窄右宽型
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: o;
				padding: 0;
			}
			.top,
			.banner,
			.main,
			.footer {
				width: 960px;
				margin: 0 auto;
				text-align: center;
				background-color: #eee;
				border: 1px dashed #ccc;
				margin-bottom: 3px;
			}
			.top {
				height: 80px;
			}
			.banner {
				height: 120px;
			}
			.main {
				height: 500px;
			}
			.left{
				width: 360px;
				height: 500px;
				background-color: pink;	
				float: left;
				/* margin-right: 8px; */
			}
			.right{
				width: 592px;
				height: 500px;
				background-color: purple;
				float: right;
			}
			.footer {
				height: 150px;
			}
		</style>
	</head>
	<body>
		<div class="top">top</div>
		<div class="banner">banner</div>
		<div class="main">
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div class="footer">footer</div>
	</body>
</html>
10.4 通栏平均分布型
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			.top {
				height: 80px;
				text-align: center;
				background-color: #ccc;	
				border: 1px dashed #666666;
			}
			.banner {
				width: 960px;
				height: 150px;
				background-color: #ccc;	
				text-align: center;
				border: 1px dashed #666666;
				margin: 10px auto;
			}
			.small {
				width: 960px;
				height: 100px;
				/* background-color: #ccc;	 */
				margin: 10px auto;
			}
			.small ul li {  /* 权重为0020 */
				width: 230px;
				height: 100px;
				background-color: #ccc; 
				border: 1px dashed #666666;
				float: left;
				margin-left: 10px;
			}
			.small .nomargin {/*  权重为0020  不加.small权重为0010*/
				margin-left: 0;
			}
			.small .floatmargin{
				float: right;
			}
			.big {
				width: 960px;
				height: 260px;
				/* background-color: #ccc;	 */
				margin: 10px auto;
			}
			.big ul li {  /* 权重为0020 */
				width: 230px;
				height: 260px;
				background-color: #ccc; 
				border: 1px dashed #666666;
				float: left;
				margin-left: 10px;
			}
			.big .noBigmargin {/*  权重为0020  不加.small权重为0010*/
				margin-left: 0;
			}
			.big .floatBigmargin{
				float: right;
			}
			.footer{
				height: 120px;
				background-color: #ccc;	
				border: 1px dashed #666666;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="top">通栏顶部</div>
		<div class="banner">广告条</div>
		<div class="small">
			<ul>
				<li class="nomargin">1</li>
				<li>2</li>
				<li>3</li>
				<li class="floatmargin">4</li>
			</ul>
		</div>
		<div class="big">
			<ul>
				<li class="noBigmargin">1</li>
				<li>2</li>
				<li>3</li>
				<li class="floatBigmargin">4</li>
			</ul>
		</div>
		<div class="footer">底部</div>
	</body>
</html>

11. 清除浮动

清除浮动的本质是为了解决父级元素因为子级浮动引起内部高度为0的问题。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{
				border: 1px solid #87CEEB;
				/* 很多情况下,我们不方便给父亲高度,比如新闻,
				因为我们不知道里面有多少内容,一般情况下,
				让里面的内容自动撑开盒子的高度,因此,一般不用固定父级元素的高度 */
			}
			.demo1{
				width: 200px;
				height: 100px;
				background-color: #0000FF;
				float: left;
			}
			.demo2{
				width: 300px;
				height: 100px;
				background-color: pink;
				float: left;
			}
			.xiaomi{
				width: 350px;
				height: 200px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="demo1"></div>
			<div class="demo2"></div>
		</div>
		<div class="xiaomi"></div>
	</body>
</html>
11.1清除浮动的方法

本质叫做闭合浮动，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，语法格式如下：

选择器{clear:属性值;}
属性值描述
left不允许左侧元素有浮动（清除左侧浮动的影响）
right不允许右侧有浮动的元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响
11.1.1 额外标签法
是w3c推荐的做法就是在浮动元素的末尾加一个空的标签例如  <div style="clear:both"></div>，或者其他标签br等亦可。

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化较差。


.demo3{ /* 清除浮动 */
	   clear: both;
}
<div class="father">
		<div class="demo1"></div>
		<div class="demo2"></div>
		<!-- 在浮动的盒子后面添一个盒子 -->
		<div class="demo3"></div>
</div>
11.1.2 父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动的效果。

可以给父级添加： overflow：hidden  ||   auto   ||scroll（三者都可以实现清除浮动）

优点：代码简洁。

缺点：内容增多的时候回容易造成不会自动当换行导致内容被隐藏，无法显示需要溢出的元素。

11.1.3 使用after伪元素的方法清除浮动

使用方法：

.clearfix:after{content:"."; display:block; heigh:0;clearboth; visibility:hidden;}
.clearfix{*zoom:1;}/*ie6\7专有*/

优点：符合闭合浮动的思想，结构语义化正确。

缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。

代表网站：百度、淘宝、网易。

.clearfix:afetr{
				content: ".";/* 内容为小点,尽量不要空,否则旧版本浏览器有空隙 */
				display: block;  /* 转换成块级元素 */
				height: 0;  /* 高度为0 */
				visibility: hidden;/* 隐藏盒子 */
				clear: both; /* 清除浮动 */
			}
			.clearfix{/* ie6,7浏览器处理的方式 */
				*zoom: 1; 
				  /* zoom就是IE6,7清除浮动的方法 */
				/* *代表IE6,7能识别的特殊符号  带有这个*属性 只有IE6,7才执行 */
			}


<div class="father" class="clearfix">
		<div class="demo1"></div>
		<div class="demo2"></div>
		<!-- <!-- 在浮动的盒子后面添一个盒子 
		<div class="demo3"></div> -->
</div>
11.1.3 使用before和after双伪元素清除浮动

使用方法：

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

优点：代码更简洁。

缺点：由于IE6-7不支持：after，使用zoom：1出发hasLayout.

代表网站：小米、腾讯。

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

<div class="father" class="clearfix">
		<div class="demo1"></div>
		<div class="demo2"></div>
		<!-- <!-- 在浮动的盒子后面添一个盒子 
		<div class="demo3"></div> -->
</div>

12. 定位（position）

12.1 元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。完整定位=边偏移+定位模式

top顶端偏移量，定义元素相对于其父元素上边线的距离
bottom底部偏移量，定义元素相对于其父元素下边线的距离
left左侧偏移量，定义元素相对于其父元素左边线的距离
边偏移属性描述
right右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等。

12.2 定位模式（定位的分类）

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值：

值描述
static自动定位（默认定位方式）
relative相对定位，相对于其原文档流的位置进行定位
absolute绝对定位，相对于其上一个已经定位的父元素进行定位
fixed固定定位，相对于浏览器窗口进行定位
12.3 静态定位（static）

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

PS： 静态定位其实没啥可说的。

div {
			height: 100px;
			width: 100px;
			background-color: pink;
			position: static;
			left: 100px;/*定位模式---静态定位*/
			top: 100px;
			/*静态定位---对于边偏移无效*/
			/*一般用它来清除定位的，一个原有的盒子不想用定位了，就加这句话*/
}
12.4 相对定位（relative）

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

注意：

  1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
  2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。

12.5 绝对定位（absolute）

注意：如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱离标准流，完全不占位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div:first-child {
				width: 100px;
				height: 100px;
				background-color: pink;
				position: absolute;/*定位模式----绝对定位*/
				left: 20px;
				top: 10px;
				/*绝对定位完全脱离标准流，不占有位置*/
			}
			div:last-child {
				width:200px;
				height: 200px;
		        background-color: purple; 
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
	</body>
</html>
12.5.1 父亲没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.father {
				width: 300px;
				height: 300px;
				background-color: purple;
				margin: 100px;
			}
			.son {
				width: 100px;
				height: 100px;
				background-color: pink;
				position: absolute;
				top:15px;
				left: 15px;
				/*父亲没有定位，孩子以浏览器为基准点对齐*/
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>
12.5.2 父亲有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.father {
				width: 300px;
				height: 300px;
				background-color: purple;
				margin: 100px;
				position: absolute;/*父亲有定位，孩子以父亲为基准点对齐，定位还可以是absolute*/
			}
			.son {
				width: 100px;
				height: 100px;
				background-color: pink;
				position: absolute;
				top:15px;
				left: 15px;	
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>
12.5.3 子绝父相

子绝父相的由来：

  1. 相对定位：占有位置 不脱标
  2. 绝对定位：不占有位置 完全脱标

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。

这句话的意思是 子级是绝对定位的话， 父级要用相对定位。

首先， 我们说下， 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。

就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。

所以，我们可以得出如下结论：

因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

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

这就是子绝父相的由来。

12.5.4 定位练习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 310px;
				height: 190px;
				border: 1px solid #ccc;
				margin: 50px auto;
				padding: 10px;
				position: relative;
			}
			.topTcon {
				position: absolute;
				top: 0;
				left: 0;/*如果孩子加了定位，父亲没有定位，则以浏览器为基准点*/
			}
			.bottomIcon {
				position: absolute;
				bottom: 0;
				right: 0;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/top_tu.gif" class="topTcon" />
			<img src="img/adv.jpg" />
			<img src="img/br.gif" alt="" class="bottomIcon"/>
		</div>
	</body>
</html>
12.6 绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

  1. 首先left 50% 父盒子的一半大小
  2. 然后走自己外边距负的一半值就可以了 margin-left。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.father{
				width:800px;
				height: 400px;
				background-color: pink;
				margin: 30px auto;
				position: relative;
			}
			.son {
				width: 200px;
				height: 100px;
				background-color: purple;
				position: absolute;
				/*margin: 0 auto; 加了绝对定位的盒子，margin：0 auto；左右auto就无效了*/
				/*left: 400px;*/
				left: 50%;/*left 走父盒子宽度的一半*/
				margin-left: -100px;/*走自己宽度的一半*/
				top: 50%;
				margin-top: -50px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>
12.7 淘宝图的轮播案例
b<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			.slider {
				width: 520px;
				height: 280px;
				background-color: pink;
				margin: 50px auto;
				position: relative;/*子绝父相*/
			}
			.arrow-l,
			.arrow-r {
				height: 36px;
				width: 24px;
				position: absolute;/*绝对定位*/
				display: block;
				top: 50%;
				margin-top: -18px;
			}
			.arrow-l {
				left: 0;
			}
			.arrow-r {
				right: 0;
			}
			.circle {
				width: 65px;
				height: 13px;
				background:rgb(255,255,255,0.3);
				position: absolute;
				bottom: 15px;
				left: 50%;
				margin-left: -32px;
				border-radius: 6px;
			}
			.circle li {/*权重 0011*/
				width: 9px;
				height: 9px;
				background-color: #CCCCCC;
				float: left;
				margin: 2px;
				border-radius: 50%;/*将小矩形变成小圆点*/
			}
			.circle .current{ /*注意选择器的权重问题  0020*/
				background-color:#f40;
			}
		</style>
	</head>
	<body>
		<div class="slider">
			<img src="img/taobao.jpg"  />
			<a href="#" class="arrow-l"><img src="img/left.png" /></a>
			<a href="#"class="arrow-r"><img src="img/right.png" /></a>
			<ul class="circle"><!--小圆点-->
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
12.8 固定定位（fixed）

固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

  1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
  2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

ie6等低版本浏览器不支持固定定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.top {
				height: 44px;
				background: url(img/top.png)no-repeat top center;
				width: 100%;/*盒子的固定定位，宽度和高度必须写，除非内容能够撑开盒子，就不用写*/
				position: fixed;/*定位模式----固定定位*/
				top: 0;
				left: 0;
			}
			.box {
				width: 1002px;
				margin: 0 auto;
				margin-top: 40px;
			}
			.ad-l,
			.ad-r {
				position: fixed;
				top: 150px;
			}
			.ad-l{
				left: 0;
			}
			.ad-r  {
				right: 0;
			}
		</style>
	</head>
	<body>
		<div class="top"></div>
		<div class="ad-l"><img src="img/ad-l.png" alt="" /></div>
		<div class="ad-r"><img src="img/ad-r.png" alt="" /></div>
		<div class="box"><img src="img/box.png" alt="" /></div>
		
	</body>
</html>
12.9 叠加次序（z-index）

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2;

注意：

  1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
  2. 如果取值相同，则根据书写顺序，后来居上。
  3. 后面数字一定不能加单位。
  4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
				background-color: pink;
				position: absolute;
				top: 0;
				left: 0;
				
			}
			div:first-child {
				z-index: 1;/*font-weight:700*/
				
			}
			div:nth-child(2) {
				background-color: purple;
				top: 30px;
				left: 30px;
				z-index: 2;
				
			}
			div:last-child {
				background-color: skyblue;
				top: 60px;
				left: 60px;
				
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>
12.10 定位总结
定位模式是否脱标占有位置是否可以使用边偏移移动位置基准
静态static不脱标，正常模式不可以正常模式
相对定位relative不脱标，占有位置可以相对自身位置移动（自恋型）
绝对定位absolute完全脱标，不占有位置可以相对于定位父级移动位置（拼爹型）
固定定位fixed完全脱标，不占有位置可以相对于浏览器移动位置（认死理型）
12.11 定位模式的转换

跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，

因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。

13. 元素的显示与隐藏

13.1 display 显示

display 设置或检索对象是否及如何显示。

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

特点： 隐藏之后，不再保留位置。

13.2 visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点： 隐藏之后，继续保留原有位置。（停职留薪）

13.3 overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。

auto : 　 超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

13.4 二维码的显示与隐藏案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				height: 100px;
				width: 100px;
				background-color: pink;
				text-align: center;
				line-height: 100px;
				margin: 100px auto;
				position: relative;/*子绝父相*/
			}
			div img {
				position: absolute;
				top: 0;
				left: 110px;
				display: none;/*隐藏二维码*/
			}
			div:hover img {  /*我们鼠标经过的时候，隐藏的二维码显示出来*/
				display: block;/*显示元素*/
			}
		</style>
	</head>
	<body>
		<div>
			扫描二维码
			<img src="img/erweima.png" />
		</div>
	</body>
</html>

第三章 CSS的高级技巧

1. CSS用户界面样式

所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽

1.1 鼠标样式cursor

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

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

鼠标放我身上查看效果哦：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>	
			div {
				width: 120px;
				height: 120px;
				background-color: pink;
				cursor: default;/*默认的*/
			}
			.pointer {
				background-color: purple;
				cursor: pointer;/*小手<*/
			}
			.move {
				background-color: skyblue;
				cursor: move;/* 移动*/
			}
			.text {
				background-color: darkslateblue;
				cursor: text; /*文本*/
			}
		</style>
	</head>
	<body>
		<div>鼠标经过div鼠标会变换样式  小白   default 默认的</div>
		<div class="pointer">鼠标经过div鼠标会变换样式   pointer 小手</div>
		<div class="move">鼠标经过div鼠标会变换样式  move 移动</div>
		<div class="text">鼠标经过div鼠标会变换样式   text  文本</div>
	</body>
</html>

尽量不要用hand 因为 火狐不支持 pointer ie6以上都支持的尽量用

1.2 轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是 ： outline: 0; 或者outline：none；

 <input  type="text"  style="outline: 0;"/>
1.3 防止文本域的拖拽

resize：none； 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。

右下角不可以拖拽：

<textarea  style="resize: none;"></textarea>

2. vertical-align 垂直对齐

带有宽度的块级元素居中对齐，是margin: 0 auto;

文字居中对齐，是 text-align: center;

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。

模式单词
基线对齐vertical-align：baseline（默认的）
垂直居中vertical-align：middle
顶部对齐vertical-align：top
2.1 图片和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

2.1 去除图片底侧空白缝隙

有个很重要特性你要记住： 如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。 这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：

  1. 给img vertical-align:middle | top等等。 让图片不要和基线对齐。

  2. 给img 添加 display：block; 转换为块级元素就不会存在问题了。

3. 溢出的文字隐藏

3.1 word-break:自动换行

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

3.2 text-overflow 文字溢出

text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

clip : 　不显示省略标记（…），而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记（…）

注意：一定要首先强制一个行内显示，再次和overflow属性搭配使用。

white-space:nowrap;/*首先要加这句话，强制一行*/
overflow：hidden；/*其次必须有这句话*/
text-overflow：ellipsis;/*超出的部分省略号代替*/
/*text-overflow：clip;直接裁剪*/

4. CSS精灵技术（sprite）

4.1 精灵技术产生的背景

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

4.2 精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为京东网站中的一个精灵图。

4.3 精灵技术的使用

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

4.4 制作精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做。

我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们精灵图的宽度取决于最宽的那个背景。 
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

结束语： 小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。

5. 字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。。 这就是字体图标（iconfont).

5.1 字体图标优点
可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备必备良药...
5.2 字体图标使用流程

总体来说，字体图标按照如下流程：

在这里插入图片描述

5.3 设计字体图标

假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作， 他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标， 比如下图：

在这里插入图片描述

之后保存为svg格式，然后给我们前端人员就好了。

其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。

5.4 上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。

​ 推荐网站： http://icomoon.io

icomoon字库

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

推荐网站： http://www.iconfont.cn/

阿里icon font字库

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！

fontello

http://fontello.com/

在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。

Glyphicon Halflings

http://glyphicons.com/

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

Icons8

https://icons8.com/

提供PNG免费下载，像素大能到500PX

5.5 下载兼容字体包

刚才上传完毕， 网站会给我们把UI做的svg图片转换为我们的字体格式， 然后下载下来就好了

当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了， 直接到刚才的网站上找喜欢的下载使用吧。

在这里插入图片描述

在这里插入图片描述

5.6 字体引入到HTML

刚才上传完毕， 网站会给我们把UI做的svg图片转换为我们的字体格式， 然后下载下来就好了

当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了， 直接到刚才的网站上找喜欢的下载使用吧。

在这里插入图片描述

在这里插入图片描述
得到压缩包之后，最后一步，是最重要的一步了， 就是字体文件已经有了，我们需要引入到我们页面中。

  1. 首先把 以下4个文件放入到 fonts文件夹里面。 通俗的做法

    在这里插入图片描述

    第一步：在样式里面声明字体： 告诉别人我们自己定义的字体
    @font-face {
     font-family: 'icomoon';
     src:  url('fonts/icomoon.eot?7kkyc2');
     src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
}
    第二步：给盒子使用字体
    span {
		font-family: "icomoon";
	}
    第三步：盒子里面添加结构
    span::before {
		 content: "\e900";
	}
或者  
<span></span>

    追加新图标到原来库里面

    如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做

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

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			@font-face {
				font-family: 'icomoon';
				src: url('fonts/icomoon.eot?7kkyc2');
				src: url('fonts/icomoon.eot?7kkyc2#iefix') 
						format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') 
						format('truetype'), url('fonts/icomoon.woff?7kkyc2') 
						format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
				font-weight: normal;
				font-style: normal;
			}
			span {
				font-family: "icomoon";
				color: pink;
				font-size: 100px;
			}
		</style>
	</head>
		<span></span>
	<body>
	</body>
</html>

6. 滑动门

6.1 滑动门出现的背景

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？

在这里插入图片描述

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。

6.2 核心技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			a {
				height: 33px;
				/*不能给宽度，写死宽度是不对的，要的是推拉门，自由缩放*/
				display: inline-block;
				margin: 100px;
				background: url(img/ao.png) no-repeat;
				padding-left: 15px;/*撑开盒子*/		
				color: #fff;
				line-height: 33px;			
				text-decoration: none;
			}
			a span {
				height: 33px;
				display: inline-block;
				background: url(img/ao.png) no-repeat right;
				/*span 不能给宽度，我们要用padding挤开宽度，因为我们要的是span 的右圆角，所以背景位置右对齐*/		
				padding-right: 15px;	
			}
		</style>
	</head>
	<body>
		<a href="">
			<span>首页</span>
		</a>
		<a href="">
			<span>技术部</span>
		</a>
		<a href="">
			<span>公司简介</span>
		</a>
	</body>
</html>

总结：

  1. a 设置 背景左侧，padding撑开合适宽度。
  2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
  3. 之所以a包含span就是因为 整个导航都是可以点击的。
6.3 微信导航栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			body {
				background: url(img/wx.jpg) repeat-x;
			}
			.nav {
				height: 75px;	
			}
			.nav li {
				float: left;
				margin: 0 10px;
				margin-top: 21px;
			}
			.nav li a {
				display: inline-block;
				background: url(img/to.png) no-repeat;
				color: #fff;
				font-size: 14px;
				text-decoration: none;
				line-height: 33px;
				padding-left: 15px;
			}
			.nav  li a:hover {
				background-image: url(img/ao.png);
			}
			.nav li a:hover span {
				background-image: url(img/ao.png);
			}
			.nav li span {
				display: inline-block;
				background: url(img/to.png) no-repeat center right;
				padding-right: 15px;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li>
					<a href="">
						<span>首页</span>
					</a>
				</li>
				<li>
					<a href="">
						<span>帮助与反馈</span>
					</a>
				</li>
				<li>
					<a href="">
						<span>公众平台</span>
					</a>
				</li>
				<li>
					<a href="">
						<span>开放平台</span>
					</a>
				</li>
				<li>
					<a href="">
						<span>微信支付</span>
					</a>
				</li>
				<li>
					<a href="">
						<span>微信网页版</span>
					</a>
				</li>
				<li>
					<a href="">
						<span>表情开放平台</span>
					</a>
				</li>
				<li>
					<a href="">
						<span>微信广告 </span>
					</a>
				</li>
			</ul>
		</div>
	</body>
</html>

7. before和after伪元素(详解)

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

注意

伪元素:before和:after添加的内容默认是inline元素。这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*.one是类选择器  :hover 是伪类选择器   ::before 是伪元素选择器*/
			div::before {
				content: "楚乔";
				background-color: pink;
				border: 1px solid red;
				width: 100px;
				height: 100px;
				display: block;
				/*类选择器 伪类选择器就是选取对象*/
				/*伪元素选择器本质上是插入一个元素（标签 盒子） 只不过是行内元素 span a*/
			}
			div::after {
				content: "宇文玥的";
				display: block;
				height:50px;
				width: 50px;
				border:1px solid skyblue;
			}
		</style>
	</head>
	<body>
		<div>是</div>
	</body>
</html>

8. 过渡(CSS3)（transition)

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。
transition: width 0.6s ease 0s,height 0.3s ease 0s;
属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。3
transition-delay规定过渡效果何时开始。默认是 0。3

如果想要所有的属性都变化过渡， 写一个all 就可以：

transition: all 0.6s;/*所有的属性都变换，可以用all，后面的两个属性可以省略*/

transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒

运动曲线 默认是 ease，除了ease还有linear（匀速）、ease-in(加速)、ease-in-out（先加速后减速）

何时开始 默认是 0s 立马开始

运动曲线示意图：

在这里插入图片描述

div {
			width: 200px;
			height: 100px;
			background-color: pink;
			/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
			transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
			/* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */
  
			
}
div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */

			width: 600px;
			height: 300px
}

transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

9. 2D变形(CSS3) transform

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

transform: translate(x,y)|| scale(X,Y)||rotate(45deg);
9.1 移动 translate(x, y)

translate 移动平移的意思

translate(50px,50px);

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置，x、y可为负值；

 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
 translateX(x)仅水平方向移动（X轴移动）
 translateY(Y)仅垂直方向移动（Y轴移动）

/*让定位的盒子水平居中*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				/*transform: translate(100px);   水平移动100像素*/
				/*transform: translate(50%);    translate移动距离 如果是%，不是以父亲宽度为准，而是以自己的宽度为准
				translate(50%) 意思是走div盒子 自己宽度200的一半  走1000像素*/
				
				
				/*以前定位的盒子居中对齐*/
				position: absolute;
				left: 50%;/*以父亲的宽度为准*/
				/*margin-left: -100px;   需要计算不合适*/
				top: 50%;
				
				/*现在盒子居中对齐*/
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
9.2 缩放 scale(x, y)
transform:scale(0.8,1);

可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

9.3 旋转 rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

transform:rotate(45deg);注意单位是 deg 度数
9.4 transform-origin 可以调整元素转换变形的原点
 div{transform-origin: left top;transform: rotate(45deg); }  /* 改变元素原点到左上角，然后进行顺时旋转45度 */

如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。

 div{transform-origin: 10px 10px;transform: rotate(45deg); }  /* 改变元素原点到x 为10  y 为10，然后进行顺时旋转45度 */
9.5 案例旋转楚乔传
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 250px;
				height: 170px;
				border: 1px solid pink;
				margin: 200px auto;
				position: relative;
			}
			div img {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left:0;
				transition: all 0.6s;
				transform-origin: top right;
			}
			div:hover img:nth-child(1) {
				transform: rotate(60deg);
			}
			div:hover img:nth-child(2) {
				transform: rotate(120deg);
			}
			div:hover img:nth-child(3) {
				transform: rotate(180deg);
			}
			div:hover img:nth-child(4) {
				transform: rotate(240deg);
			}
			div:hover img:nth-child(5) {
				transform: rotate(300deg);
			}
			div:hover img:nth-child(6) {
				transform: rotate(360deg);
			}			
		</style>
	</head>
	<body>
		<div>
			<img src="img/6.jpg"/>
			<img src="img/5.jpg"/>
			<img src="img/4.jpg"/>
			<img src="img/3.jpg"/>
			<img src="img/2.jpg"/>
			<img src="img/1.jpg"/>
		</div>
	</body>
</html>
9.6 倾斜 skew(deg, deg)
transform:skew(30deg,0deg);
/*该实例通过skew方法把元素水平方向上倾斜30度，垂直方向保持不变*/

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

10. 3D变形(CSS3) transform

10.1 rotateX()

就是沿着 x 立体旋转.

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}
10.2 rotateY()

沿着y轴进行旋转

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}
10.3 rotateZ()

沿着z轴进行旋转

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}
10.4 透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

  • 透视原理： 近大远小 。
  • 浏览器透视：把近大远小的所有图像，透视在屏幕上。
  • perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

10.4.1 translateX(x)

仅水平方向移动**（X轴移动） 主要目的实现移动效果

10.4.1 translateY(y)

仅垂直方向移动（Y轴移动）

10.4.2 translateZ(z)

transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。

10.4.3 translate3d(x,y,z)

注意:其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				perspective:500px;/*视距  距离 眼睛到屏幕的距离 视距越大 效果越不明显   
				视距越小，效果越明显*/
			}
			img {
				margin: 200px auto;
				display: block;
				transition: all 2s; 
				transform-origin: left;/*设置变形中心点*/
			}
			img:hover {
				transform: rotateY(80deg);
			}
		</style>
	</head>
	<body>
		<img src="img/1498446043198.png" width="300px"/>
	</body>
</html>
10.4.4 开门案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			section {
				width: 450px;
				height: 300px;
				border: 1px solid #000;
				margin: 100px auto;
				background: url(img/3.jpg) no-repeat;
				position: relative;
				perspective: 1000px;
			}
			.door-l,.door-r {
				position: absolute;
				width: 50%;
				height: 100%;
				/*background-color: pink;*/
				background: url(img/bg.png);
				transition: all 0.5s;
			}
			.door-l {
				left: 0;
				border-right: 1px solid #000;
				transform-origin: left;/*左侧盒子靠着左侧旋转*/
			}
			.door-r {
				right: 0;
				border-left: 1px solid #000;
				transform-origin: right;/*右侧盒子靠着右侧旋转*/
			}
			.door-l:before,.door-r:before {/*伪元素就是插入一个元素标签*/
				content: "";
				position: absolute;
				top: 50%;
				width: 10px;
				height: 10px;
				border: 1px solid #000;
				border-radius: 50%;
				transform:translateY(-50%);	/*translate 如果是百分比就是走自己高度的一半*/		
			}
			.door-l::before {
				right: 5px;
			}
			.door-r::before {
				left: 5px;
			}
			/*鼠标经过以后，盒子出现翻转*/
			section:hover .door-l {
				transform: rotateY(-130deg);
			}
			section:hover .door-r {
				transform: rotateY(130deg);
			}
		</style>
	</head>
	<body>
		<section>
			<div class="door-l"></div>
			<div class="door-r"></div>
		</section>
	</body>
</html>
10.5 backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

10.5.1 翻转盒子案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 240px;
				height: 240px;
				margin: 100px auto;
				position: relative;
			}
			div img {
				position: absolute;
				left: 0;
				top: 0;	
				transition: all 1s;			
			}
			div img:first-child {
				z-index: 1;/*让第一张图片显示在第一个*/
				backface-visibility: hidden;/*正面不是正对我们的时候，就可以设置隐藏*/
			}
			div:hover img {
				transform: rotateY(180deg);
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/qian.svg" alt="" />
			<img src="img/hou.svg"/>
		</div>
	</body>
</html>

11. 动画(CSS3)

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

在这里插入图片描述

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r

@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}

animation-iteration-count:infinite;  无限循环播放
animation-play-state:paused;   暂停动画"
11.1小汽车案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img {
				animation: car 5s infinite;/*引用动画*/
			}
			/*定义动画*/
			@keyframes car {
				0% {
					transform: translate3d(0,0,0);
				}
				50% {
					transform: translate3d(1000px,0,0);
				}
				51% {/*车要掉头*/
					transform: translate3d(1000px,0,0) rotateY(180deg);
					/*如果有多组变形，都属于transform，我们用空格隔开就行*/
				}
				100% {
					transform: translate3d(0,0,0) rotateY(180deg);
				}
			}
		</style>
	</head>
	<body>
		<img src="img/car.jpg" width="200px"/>
	</body>
</html>
11.2 无缝滚动案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			nav {
				width: 882px;
				height: 86px;
				border: 1px solid pink;
				margin: 100px auto ;
				overflow: hidden;
			}
			nav li {
				float: left;
			}
			nav ul {/*引用动画*/
				width: 200%;
				animation: movie 5s linear infinite;/*linear 匀速运动*/
			}
			/*定义动画*/
			@keyframes movie{
				from{
					transform: translateX(0);
				}
				to{
					transform: translateX(-882px);
				}
			}
			nav:hover ul {
				animation-play-state: paused;/*鼠标放上去暂停动画*/
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li><img src="img/nav1.jpg"/></li>
				<li><img src="img/nav2.jpg"/></li>
				<li><img src="img/nav3.jpg"/></li>
				<li><img src="img/nav4.jpg"/></li>
				<li><img src="img/nav5.jpg"/></li>
				<li><img src="img/nav6.jpg"/></li>
				<li><img src="img/nav7.jpg"/></li>
				
				<li><img src="img/nav1.jpg"/></li>
				<li><img src="img/nav2.jpg"/></li>
				<li><img src="img/nav3.jpg"/></li>
				<li><img src="img/nav4.jpg"/></li>
				<li><img src="img/nav5.jpg"/></li>
				<li><img src="img/nav6.jpg"/></li>
				<li><img src="img/nav7.jpg"/></li>
			</ul>
		</nav>
	</body>
</html>
11.3 旋转轮播
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				perspective: 1000px;
			}
			section {
				width: 300px;
				height: 200px;
				background: url(img/nav4.jpg) no-repeat;
				margin: 50px auto;
				background-size: cover;
				position:relative;
				transform-style: preserve-3d;/*让父盒子里面的子盒子以3d效果显示*/
				transition: 5s linear;/*匀速 all是可以省略的 ，省略的是默认的all*/
			}
			section:hover {
				transform: rotateY(360deg);
			}
			section div {
				width: 100%;
				height:100%;
				background: url(img/1.jpg) no-repeat;
				background-size: cover;
				position: absolute;
				top: 0;
				left:0;
			}
			section div:nth-child(1) {
				transform: rotateY(0deg) translateZ(400px);
			}
			section div:nth-child(2) {
				transform: rotateY(60deg) translateZ(400px);
			}
			section div:nth-child(3) {
				transform: rotateY(120deg) translateZ(400px);
			}
			section div:nth-child(4) {
				transform: rotateY(180deg) translateZ(400px);
			}
			section div:nth-child(5) {
				transform: rotateY(240deg) translateZ(400px);
			}
			section div:nth-child(6) {
				transform: rotateY(300deg) translateZ(400px);
			}
		</style>
	</head>
	<body>
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>
11.4 小黄人案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	        
		<style type="text/css">
			/*
			 * 1.制作小黄人的容器
			 * 2.添加小黄人的头发
			 * 3.添加小黄人的身体
			 * 4.添加小黄人的眼睛
			 * 5.添加小黄人的眼镜腿
			 * 6。添加小黄人的眼珠
			 * 7.添加小黄人的嘴巴
			 * 8.添加小黄人的裤子
			 * 9.添加小黄人的手臂
			 * 10.添加小黄人的腿脚
			 * 
			 * 给小黄人添加头发和眼珠的动画效果
			 * 
			 */
		    /*设定小黄人容器*/
		   .wrap {
		   		width: 400px;
		   		height: 600px;
		   		border: 1px solid red;
		   		margin: 0 auto;
		   		position:relative;
		   }
		   /*设定小黄人的身体*/
		  .xhr_body {
		  		width: 250px;
		  		height: 400px;
		  		border: 5px solid #000;
		  		border-radius: 125px;
		  		position: absolute;/*采用定位，让小黄人水平垂直居中*/
		  		top: 50%;
		  		left: 50%;
		  		transform: translate(-50%,-50%);/*水平垂直居中*/
		  		background: yellow;
		  		overflow: hidden;
		  }
		  /*设定小黄人的头发*/
		 .xhr_hair_1,
		 .xhr_hair_2 {
		 	width: 130px;
		 	height: 100px;
		 	border-top: 10px solid #000;
		 	border-radius: 50%;
		 	position: absolute;
		 }
		 .xhr_hair_1 {
		 	left: 100px;
		 	top: 80px;
		 	transform: rotate(48deg);
		 }
		 .xhr_hair_2 {
		 	left: 102px;
		 	top: 70px;
		 	transform: rotate(48deg);
		 }
		 /*设定小黄人的小手臂*/
		.xhr_hand_l,.xhr_hand_r {
			width: 100px;
			height: 100px;
			border: 5px solid #000;
			position: absolute;
			border-radius: 30px;
			background: yellow;
			z-index: -1;/*让小黄人露出的手臂放到身体下面*/
		}
		.xhr_hand_l {
			left: 50px;
			top: 300px;
			transform: rotate(30deg);
		}
		.xhr_hand_r {
			right: 50px;
			top:300px;
			transform: rotate(-30deg);
		}
		.xhr_hand_l::after,.xhr_hand_r::after {/*小黄人手臂的小黑点*/
			content: "";
			width: 30px;
			height: 10px;
			background: #000;
			position: absolute;
			border-radius: 5px;
		}
		.xhr_hand_l::after {
			left: 6px;
			top: 55px;
			transform: rotate(-90deg);
		}
		.xhr_hand_r::after {
			right: 6px;
			top: 55px;
			transform: rotate(-90deg);
		}
		/*小黄人腿的制作*/
		.xhr_foot_l,.xhr_foot_r {
			width: 40px;
			height: 70px;
			background: #000;
			position: absolute;
			z-index: -1;
		}
		.xhr_foot_l{
			left: 155px;
			top: 490px;
		}
		.xhr_foot_r{
			right: 155px;
			top: 490px;
		}
		/*小黄人脚的制作*/
		.xhr_foot_l::after,.xhr_foot_r::after {
			content: "";
			width: 60px;
			height:40px;
			background: #000;
            border-radius: 20px;
            position: absolute;
		}
		.xhr_foot_l::after {
			left: -40px;
			top: 30px;
		}
		.xhr_foot_r::after {
			right: -40px;
			top: 30px;
		}
		/*制作小黄人的眼睛*/
		.xhr_eyes {
			/*width: 100%;*/
			height: 100px;
			/*border: 1px solid red;*/
			position: absolute;
			top: 60px;
			left: 25px;
		}
		.xhr_eyes_l,.xhr_eyes_r {
			width: 90px;
			height: 90px;
			border: 5px solid #000;
			border-radius: 50%;
			background: #fff;
			float: left;
		}
		.xhr_eyes_l::after,.xhr_eyes_r::after {
			content: "";
			width: 31px;
			height: 20px;
			position: absolute;
			background: #000000;
		}
		.xhr_eyes_l::after {
			left: -26px;
			top: 35px;
			transform: rotate(20deg);
			border-radius: 2px 7px 0 2px;
		}
		.xhr_eyes_r::after {
			right: -26px;
			top: 35px;
			transform: rotate(-20deg);
			border-radius: 7px 2px 0 0px;
		}
		/*制作眼珠*/
		.xhr_l_black,.xhr_r_black {
			width: 50px;
			height: 50px;
			background: #000;
			border-radius:50% ;
			position: absolute;
		}
		.xhr_l_black {
			left: 25px;
			top: 25px;
		}
		.xhr_r_black {
			left: 125px;
			top: 25px;
		}
		/*白色部分制作*/
		.xhr_l_white,.xhr_r_white {
			width: 20px;
			height: 20px;
			background: #fff;
			border-radius:50% ;
			position: absolute;
		}
		.xhr_l_white {
			left: 50px;
			top: 40px;
		}
		.xhr_r_white {
			left: 130px;
			top: 40px;
		}
		/*小黄人嘴的制作*/
		.xhr_mouth {
			width: 60px;
			height: 35px;
			border: 5px solid #000;
			border-radius: 0 0 0 30px;
			background: #fff;
			position: absolute;
			top: 180px;
			left: 90px;
			transform: rotate(-30deg);
		}
		.xhr_mouth::after {
			content: "";
			width: 80px;
			height: 40px;
			background: yellow;
			position: absolute;
			border-bottom: 5px solid #000;
			left: 1px;
			top: -22px;
			transform: rotate(30deg);
		}
		/*小黄人裤子的制作*/
		.xhr_trousers {
			width: 100%;
			height: 150px;
			/*border: 1px solid red;*/
			position: absolute;
			top: 260px;			
		}
		.xhr_trousers_t {
			width: 150px;
			height: 50px;
			background: blue;
			border: 5px solid #000;
			border-bottom: none;
			position: absolute;
			left: 45px;
			z-index: 1;
		}
		.xhr_trousers_b {
			width: 250px;
			height: 86px;
			background: blue;
			position: absolute;
			top: 50px;
			border-top: 5px solid #000;
		}
		/*小黄人的肩带*/
		.t_l_belt,.t_r_belt {
			width: 100px;
			height: 20px;
			background: blue;
			border: 5px solid #000;
			position: absolute;
			top: -24px;
		}
		.t_l_belt {
			left: -74px;
			transform: rotate(35deg);
		}
		.t_r_belt {
			right: -74px;
			transform: rotate(-35deg);
		}
		.t_l_belt::after,.t_r_belt::after {
			content: "";
			width: 10px;
			height: 10px;
			background: #000;
			border-radius: 50%;
			position: absolute;
			top: 5px;
		}
		.t_l_belt::after {
			left: 87px;
		}
		.t_r_belt::after {
			left: 3px;
		}
		/*制作小黄人头发的动画效果*/
		.xhr_hair_1,.xhr_hair_2 {
			animation: hair 3s ease-in infinite;
		}
		@keyframes hair{
			10%,50%,100% {
				transform: rotate(48deg);
			}
			20%,50% {
				transform:rotate(58deg);
			}
		}
		/*制作小黄人眼睛的动画效果*/
		.xhr_l_black,.xhr_r_black {
			animation: blackEyes 5s ease-in infinite;
		}
		@keyframes blackEyes{
			10%,50%,100% {
				transform: translate(0);
			}
			20% {
				transform:translate(20px);
			}
			50% {
				transform:translate(-20px);
			}
		}
		
		.xhr_l_white,.xhr_r_white {
			animation: whiteEyes 5s ease-in infinite;
		}
		@keyframes whiteEyes{
			10%,50%,100% {
				transform: translate(0,0);
			}
			20% {
				transform:translate(20px,4px);
			}
			50% {
				transform:translate(-20px,4px);
			}
		}
		
		</style>
	</head>
	<body>
		<!--小黄人的容器-->
		<div class="wrap">
			<!--小黄人的头发-->
			<div class="xhr_hair">
				<div class="xhr_hair_1"></div>
				<div class="xhr_hair_2"></div>
			</div>
			<!--小黄人的身体-->
			<div class="xhr_body">
				<!--小黄人的眼睛-->
				<div class="xhr_eyes">
					<!--左眼睛-->
					<div class="xhr_eyes_l">
						<div class="xhr_l_black"></div>
						<div class="xhr_l_white"></div>
					</div>
					<!--右眼睛-->
					<div class="xhr_eyes_r">
						<div class="xhr_r_black"></div>
						<div class="xhr_r_white"></div>
					</div>
				</div>
				<!--小黄人的嘴-->
				<div class="xhr_mouth"></div>
				<!--小黄人的裤子-->
				<div class="xhr_trousers">
					<!--裤子的上部分-->
					<div class="xhr_trousers_t">
						<div class="t_l_belt"></div>
						<div class="t_r_belt"></div>
					</div>
					<!--裤子的下部分-->
					<div class="xhr_trousers_b"></div>
				</div>
			</div>
			<!--小黄人的手臂-->
			<div class="xhr_hand">
				<div class="xhr_hand_l"></div>
				<div class="xhr_hand_r"></div>
			</div>
			<!--小黄人的腿脚-->
			<div class="xhr_foot">
				<div class="xhr_foot_l"></div>
				<div class="xhr_foot_r"></div>
			</div>
		</div>
	</body>
</html>

12. 伸缩布局(CSS3)

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过***flex-direction***可以互换。

Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多

12.1 各属性详解

flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度 不能小于 280

max-width: 1280px 最大宽度 不能大于 1280

12.1 flex-direction调整主轴方向（默认为水平方向）
flex-direction: column 垂直排列
flex-direction: row  水平排列

http://m.ctrip.com/html5/ 携程网手机端地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			section {
				width: 80%;
				height: 100px;
				border: 1px solid pink;
				margin: 100px auto;
				/*给父盒子添加一个flex*/
				display: flex;/*伸缩布局模式*/
				min-width: 300px;/*伸缩的最小宽度*/
				max-width: 1000px;/*伸缩的最大宽度*/
				flex-direction: column;/*垂直排列*/
				/*column-reverse 垂直翻转
				 *row-reverse 水平翻转
				 */
			}
			section div {
				height: 100%;
				/*flex:1 ;子盒子添加的份数    flex：1；后面不跟单位*/
				/*margin: 0 5px;传统布局会掉下去，伸缩布局不会*/
			}
			section div:nth-child(1) {
				background-color: pink;
			}
			section div:nth-child(2) {
				background-color: skyblue;
				flex: 1;
			}
			section div:nth-child(3) {
				background-color: pink;
				flex: 2;
			}
			section div:nth-child(4) {
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</section>
	</body>
</html>
12.2 justify-content调整主轴对齐（水平对齐）

子盒子如何在父盒子里面水平对齐

值描述白话文
flex-start默认值。项目位于容器的开头。让子元素从父容器的开头开始排序但是盒子顺序不变
flex-end项目位于容器的结尾。让子元素从父容器的后面开始排序但是盒子顺序不变
center项目位于容器的中心。让子元素在父容器中间显示
space-between项目位于各行之间留有空白的容器内。左右的盒子贴近父盒子，中间的平均分布空白间距
space-around项目位于各行之前、之间、之后都留有空白的容器内。相当于给每个盒子添加了左右margin外边距
12.3 align-items调整侧轴对齐（垂直对齐）

子盒子如何在父盒子里面垂直对齐（单行）

值描述白话文
stretch默认值。项目被拉伸以适应容器。让子元素的高度拉伸适用父容器（子元素不给高度的前提下)
center项目位于容器的中心。垂直居中
flex-start项目位于容器的开头。垂直对齐开始位置 上对齐
flex-end项目位于容器的结尾。垂直对齐结束位置 底对齐
12.4 flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子的时候如何处理

值描述
nowrap默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 强制一行内显示
wrap规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			section {
				width: 1000px;
				height: 600px;
				border: 2px solid pink;
				margin: 100px auto;
				display: flex;
				/*justify-content: flex-start;让子元素从父容器的开头开始排序，但是盒子顺序不变*/
				/*justify-content: flex-end;让盒子从父容器的结尾开始排序，但是盒子顺序不变*/
				/*justify-content: center;让子元素在父容器的中间显示*/
				/*justify-content:space-between;左右盒子贴近父盒子，中间的平均分布空白间距*/
				justify-content: space-around;/*相当于给每个盒子添加了左右margin外边距*/
				
				
				/*垂直对齐*/
				/*align-items: flex-start;上对齐*/
				/*align-items: flex-end;下对齐*/
				/*align-items: center;垂直居中*/
				align-items: stretch;/*相当于height：100%   让子元素的高度拉伸适用于与父容器（子元素不给高度的前提下）*/
				
				
				flex-wrap: nowrap;/*不换行*/
				/*flex-wrap:wrap;换行*/
				/*flex-wrap: wrap-reverse;翻转*/
			}
			div {
				width: 250px;
				height:200px;
			}
			section div:nth-child(1) {
				background-color: purple;
			}
			section div:nth-child(2) {
				background-color: pink;
			}
			section div:nth-child(3) {
				background-color: skyblue;
			}
			section div:nth-child(4) {
				background-color: hotpink;
			}
			section div:nth-child(5) {
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
		</section>
	</body>
</html>
12.5 flex-flow是flex-direction、flex-wrap的简写形式
flex-flow: flex-direction  flex-wrap;

白话记： flex-flow: 排列方向 换不换行; 两个中间用空格

例如：

display: flex;
/* flex-direction: row;
flex-wrap: wrap;   这两句话等价于下面的这句话*/
flex-flow: column wrap;  /* 两者的综合 */
12.6 align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐

align-content是针对flex容器里面***多轴(多行)*的情况,align-items是针对一行的情况进行排列。

必须对父元素设置自由盒属性display:flex;，

并且设置排列方式为横向排列flex-direction:row;

并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

值描述测试
stretch默认值。项目被拉伸以适应容器。
center项目位于容器的中心。
flex-start项目位于容器的开头。
flex-end项目位于容器的结尾。
space-between项目位于各行之间留有空白的容器内。
space-around项目位于各行之前、之间、之后都留有空白的容器内。
12.7 order控制子项目的排列顺序，正序方式排序，从小到大

用css 来控制盒子的前后顺序。 用order 就可以

用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0

order: 1;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			section {
				width: 1000px;
				height: 600px;
				border: 2px solid pink;
				margin: 100px auto;
				display: flex;
				flex-flow: row wrap;/*这句话必须要有，否则下面的不起效果*/
				align-content: space-around;/*多行垂直对齐*/
			}
			div {
				width: 250px;
				height:200px;
			}
			section div:nth-child(1) {
				background-color: purple;
			}
			section div:nth-child(2) {
				background-color: pink;
			}
			section div:nth-child(3) {
				background-color: skyblue;
				order: -1;/*数值越小，越靠前，可以是负数*/
			}
			section div:nth-child(4) {
				background-color: hotpink;
			}
			section div:nth-child(5) {
				background-color: deeppink;
			}
			section div:nth-child(6) {
				background-color: orange;
			}
			section div:nth-child(7) {
				background-color: orangered;
			}
		</style>
	</head>
	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
		</section>
	</body>
</html>

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值

12.2 携程网web案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			body {
				min-width: 320px;/*最小宽度*/
				max-width: 540px;/*最大宽度*/
				margin: auto;
			}
			header {
				width: 100%;/*继承body的宽度*/
				height: 100px;
			}
			header img {
				width: 100%;/*继承header的宽度*/
				height: 100px;
			}
			nav {
				padding: 5px;
			}
			.row {
				width: 100%;
				height: 90px;
				background-color: pink;
				border-radius: 10px;
				display: flex;/*伸缩布局模式*/
				margin-bottom: 5px;
			}
			nav .row:nth-child(2) {
				background-color: #3d98ff;
			}
			nav .row:nth-child(3) {
				background-color: #44c522;
			}
			nav .row:nth-child(4) {
				background-color: #fc9720;
			}
			.row .row3:first-child {
				color: #fff;
				font-size: 16px;
				text-decoration: none;
				line-height: 90px;
				text-align: center;
			}
			.row3 {
				height: 100%;
				float: left;
				flex:1;
				border-left:1px solid #fff ;
			}
			.row:nth-child(1) {
				border: 0;
			}
			.hotel {
				display: flex;
				flex-direction: column;
			}
			.hotel a {
				flex: 1;
				font-size: 16px;
				color: #fff;
				text-decoration: none;
				line-height: 45px;
				text-align: center;
				text-shadow: 0 2px 1px rgba(0,0,0,.3);/*文字阴影*/
			}
			.hotel a:first-child {
				border-bottom: 1px solid #fff;
			}
		</style>
	</head>
	<body>
		<header>
			<img src="img/ctrip.jpg" alt="" />
		</header>
		<nav>
			<div class="row">
				<div class="row3">酒店</div>
				<div class="row3 hotel">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</div>
				<div class="row3 hotel">
					<a href="#">团购</a>
					<a href="#">同福客栈</a>
				</div>
			</div>
			<div class="row">
				<div class="row3">酒店</div>
				<div class="row3 hotel">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</div>
				<div class="row3 hotel">
					<a href="#">团购</a>
					<a href="#">同福客栈</a>
				</div>
			</div>
			<div class="row">
				<div class="row3">酒店</div>
				<div class="row3 hotel">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</div>
				<div class="row3 hotel">
					<a href="#">团购</a>
					<a href="#">同福客栈</a>
				</div>
			</div>
			<div class="row">
				<div class="row3 hotel">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</div>
				<div class="row3 hotel">
					<a href="#">海外酒店</a>
					<a href="#">特价酒店</a>
				</div>
				<div class="row3 hotel">
					<a href="#">团购</a>
					<a href="#">同福客栈</a>
				</div>
			</div>
		</nav>
	</body>
</html>

13. BFC(块级格式化上下文)

https://www.cnblogs.com/libin-1/p/7098468.html 博客解释

BFC(Block formatting context) 直译为"块级格式化上下文"。

13.1 元素的显示模式

我们前面讲过 元素的显示模式 display。

分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。

在这里插入图片描述

那些元素会具有BFC的条件

不是所有的元素模式都能产生BFC，w3c 规范：

display 属性为 block, list-item, table 的元素，会产生BFC.

大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。

注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。

这个BFC 有着具体的布局特性：

有宽度和高度 ， 有 外边距margin 有内边距padding 有边框 border。

13.2 什么情况下可以让元素产生BFC

要给这些元素添加如下属性就可以触发BFC。

-float属性不为none

-position为absolute或fixed

-display为inline-block, table-cell, table-caption, flex, inline-flex

-overflow不为visible。

13.3 BFC元素所具有的特性

BFC布局规则特性：

1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.

2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

  1. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
  2. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

13.4 的主要用途

BFC能用来做什么？

(1) 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。

主要用到

计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

在这里插入图片描述
(2) 解决外边距合并问题

外边距合并的问题。

主要用到

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。

在这里插入图片描述

(3) 制作右侧自适应的盒子问题

主要用到

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

在这里插入图片描述

13.5 BFC 总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。

14. 浏览器前缀

浏览器前缀浏览器
-webkit-Google Chrome, Safari, Android Browser
-moz-Firefox
-o-Opera
-ms-Internet Explorer, Edge
-khtml-Konqueror

15. 背景渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。

兼容性问题很严重，我们这里之讲解线性渐变

语法格式：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width:300px;
				height: 50px;
			   /*background:linear-gradient(渐变的起始位置  ,起始颜色,结束颜色);*/
			   background: linear-gradient(top,pink,purple);
			   background: -webkit-linear-gradient(top,pink,purple);
			   background: -moz-linear-gradient(top,red,green);
			   /*因为背景渐变 兼容性的问题很严重，必须在前面添加浏览器的私有前缀*/
			   margin: 200px auto;
			}
			section {
				width: 400px;
				height: 100px;
				margin: 300px auto;
				background: -moz-linear-gradient(top,blue 0%, pink 30%,skyblue 80%);
			}
		</style>
	</head>
	<body>
		<div></div>
		<section></section>
	</body>
</html>

16. CSS W3C 统一验证工具

CssStats 是一个在线的 CSS 代码分析工具

网址是：  http://www.cssstats.com/

如果你想要更全面的，这个神奇，你值得拥有：

W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆

因为它可以检测本地文件哦！！

17. CSS 压缩

通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。

w3c css压缩 http://tool.chinaz.com/Tools/CssFormat.aspx 网速比较慢

还可以去站长之家进行快速压缩。

http://tool.chinaz.com/Tools/CssFormat.aspx

Davin没昵称
关注
专栏目录
HTML和CSS学习.zip
01-01
HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习...
mp2格式怎么转换mp3？
yososoft的博客
01-18 3533
mp2在使用上也有很多的限制，所以通常会先将mp2格式转换成mp3格式，然后再进行使用。那么有人要问了，mp2格式怎么转换mp3？下面我就来为大家做详细的介绍吧
上传的mp3文件无法播放问题（已解决）
weixin_44542401的博客
06-09 3289
我们上传文件后，就可以从后台查看我们上传的文件。（我的做法是，数据库储存的是我们上传完成后文件在服务器中的路径），只要我们服务器是开启的状态就可以按照路径查询到我们要的文件。但是我去查看我上传的mp3文件时，出现了问题。浏览器报个400的错：The server cannot or will not process the request due to something that is perceived to be a client error (e.g., malformed request synt
下列常用的html标记有,html的题库（含答案）
weixin_28304023的博客
07-15 1万+
该题库仅供巩固自身html知识 tip：<为<单选题1．下面标记中，用来显示段落的标记是( d )。a、<h1>b、<br />c、<img />d、<p>2．下列标记中，用来设置文本为粗体的是( c )。a、<u></u>b、<del></del>c、<strong>&l...
html5
2301_76916026的博客
06-20 1713
所谓层叠性是指多种CSS样式的叠加。标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在标记之后，主要用来封装其他位于文档头部的标记。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
HTML笔记2-标签的学习
花哥的博客
08-20 241
链接标签 a 标签 (Anchor ) : 超链接（锚） 超链接在页面中起到跳转或定位的作用（超链接、锚链接、a链接、a标签） a标签的跳转功能 作用: 可以从一个页面跳转到另一个页面 代码: <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> 效果： 链接未点击的时候，默认显示蓝色 链接点击过以后，显示为紫色（因为浏览器有默认的缓存机制，只要访问过一次的链接，默认都会展示成紫色，只有清除浏览器的缓存，才会变蓝） 注意： 在 a 标签
html和 css 学习.zip
01-01
html和 css 学习html和 css 学习html和 css 学习html和 css 学习 html和 css 学习html和 css 学习html和 css 学习html和 css 学习 html和 css 学习html和 css 学习html和 css 学习html和 css 学习 html和 css 学习...
学习 HTML 和 CSS.zip
最新发布
01-05
学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS 学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS 学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS学习 HTML 和 CSS 学习 ...
html和css阶段学习.zip
01-01
html和css阶段学习html和css阶段学习html和css阶段学习html和css阶段学习 html和css阶段学习html和css阶段学习html和css阶段学习html和css阶段学习 html和css阶段学习html和css阶段学习html和css阶段学习html和css...
3月17日html课程总结
shuailong1993的博客
03-17 596
1：HTML的构架 2：HTML的基本结构 3：HTML语言组成 a :标签 写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素； b :属性 标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内 一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序 4：HTML语法 常规标记(双标记)： <标记名称 属性1名=“属性1值” 属性2名=“...
HTML
qq_54129641的博客
12-30 4198
参考题库 1． 下列选项中，能够旋转指定的元素对象的变形函数是（ D ）。 A、translate（）方法 B、scale()方法 C、skew()方法 D、rotate()方法 2． 下列选项中，字号最大的是哪一项？(A ) A、 B、 C、 D、 3． 下列样式代码中，可以将块元素转换为行内元素的是（ D ）。 A、display:none; B、display:block; C、display:inline-block; D、display:inline; 4． 下列选项中，用于定义整个动画效果
HTML基础知识
qq_49606218的博客
05-01 674
目录 1、前言 1. HTML是什么 2. 标记 2、常用浏览器 3、初识HTML 1. HTML骨架 2. HTML标签分类 3. HTML标签关系 4. 字符集 4、HTML常用标签 1. 标题 2. 段落标签 3. 水平线标签 4. 换行标签 5. div span标签 6. 文本格式化标签 7. 标签属性 8. 图像标签 9. 链接标签 10. 注释标签 11. html标签嵌套规则 5、列表标签 1. 无序列表ul 2. 有序列表ol 6、表格
HTML经典笔记
飘
04-24 7474
学习目标: - 了解常用浏览器 - 掌握WEB标准 - 理解标签语义化 - 掌握常用的排版标签 - 掌握常用的文本格式化图像链接等标签 - 掌握三种列表标签 - 掌握表格标签 - 掌握表格标签 - 掌握表单标签 - 掌握H5新增表单和表单属性 typora-copy-images-to: media 认识网页 网页主要由文字、图像和超链接等元素构成。当...
html网页文件和CSS样式文件不在同一文件夹下的调用
葉無聞
05-24 1万+
html网页文件和CSS样式文件不在同一文件夹下的调用首先，介绍一下相对路径的的层次关系：相对路径的层级关系是这样的，同级目录用/或者什么也不写，上级目录用../，下级目录就用目录名/。举个例子吧，假如你的outer.html在你的web文件夹下。every.css和outer1.html在你的web文件夹下的css文件夹中，你的outer2.html在你的web文件夹下的files文件夹下，那么...
html标签对属性先后顺序要求,「HTML 」语法
weixin_39617006的博客
06-05 2652
HTML标签书写规范标签属性全局属性标签分类标签关系注释标签HTML5新语义标签兼容性低版本IE显示问题兼容性解决方案js代码创建标签优化代码执行--hack写法引入html5shiv.min.jsHTML标签在HTML页面中，带有“< >”符号的元素被称为HTML标签，如 、、都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签...
html目录下的子目录怎么编写,网页中的图像文件位于站点目录的下一级子文件夹images目录中，则以下引入图像的Html代码书写正确的是（ ）。...
weixin_34475212的博客
06-19 349
网页文件位于Python标准库shutil中用于删除文件夹的方法是( )。中的站点文中则正确除了下列哪一项外其余各项都可能成为驻车制动器失效或无法保持制动的原因?图像盘式制动出现单轮制动器拖滞的原因有：( )汽车的制动性能道路试验，目录目录一般要测定的参数有( )下代码驻车制动器的基本形式有( )在紧急制动时，下引像(????)情况最危险。当制动力( )附着力时，入图车轮将被抱死而汽车在路面上滑移...
HTML中img路径问题
热门推荐
guxuehua的博客
03-24 1万+
1.当.html与图片在一个文件夹下时，直接用图片的名字即可 2.当img图片文件夹和.html文件位于同一个文件夹下，可用 或者 3.当img文件夹和.html文件所在的文件在在同一个文件夹中，则需要   4. 网络链接图片 5. base64图片
前端学习笔记-html-图像标签img&绝对/相对路径
qq_36434637的博客
07-23 1万+
图像标签img (重点) 单词缩写： image 图像 HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下： 该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。 <img src="图像URL" /> src用来设置图...
个人主页html和css
01-04
个人主页的HTML和CSS是用来构建和设计个人网站的两种主要技术。HTML（超文本标记语言）是一种用于描述网页结构和内容的标记语言，而CSS（层叠样式表）则用于定义网页的样式和布局。 个人主页的HTML代码通常包括标题、段落、图像、链接等基本元素，以及使用标签和属性来组织和描述内容。通过HTML，我们可以设置页面的标题、背景颜色、文字样式等基本信息。 而CSS则用于控制网页的外观和样式。通过CSS，我们可以定义页面的布局、颜色、字体、边框等。可以通过选择器和属性来选择要更改的元素，并为其应用样式。CSS使我们能够轻松地修改网页的外观，使其更具吸引力和易读性。 创建个人主页时，通常先使用HTML构建网页的整体结构和内容，然后使用CSS来控制其外观和样式。通过HTML和CSS的配合使用，我们可以创建一个独特、个性化的个人网站。 总的来说，个人主页的HTML和CSS是两种必不可少的技术，可以帮助我们构建和美化个人网站，使其与众不同并展示个人的风格和能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值