第1章 HTML5基础
1.1 HTML介绍及开发工具
我们看到的网页是一种建立在 Internet 上的、全球性的、交互的、多平台的、分布式的信息资源网络，他们是采用HTML语言写的
WWW 有 3 个基本组成部分，分别是
1.2 HTML5标签
1.3 文本和超链接标签
标题标签
HTML5 的标题标签是 h1、h2、h3、h4、h5 和 h6，标签中的字母 h 是英文 headline 的简称。作为标题，它们的重要性是有区别的，其中 h1 标题的重要性最高，h6 最低。由 h1 至 h6 标题字号逐渐减小。每个标题标签所标示的文字将独占一行且上下均留一空白行。
对齐方式：默认左对齐，align属性可以设置对齐方式
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
<html>
<head>
<title> 标题文字的对齐效果 </title>
</head>
<body>
<h1> 古诗介绍 </h1>
<h2 align="center"> 作者辛弃疾 </h2>
<h3 align="left"> 三更灯火五更鸡 , 正是男儿发愤时 </h3>
<h4 align="right"> 黑发不知勤学早 , 白首方悔读书迟 </h4>
</body>
</html>
段落标签
HTML5 的段落标签是 p，它表示以段落的方式组织内容，并可以为文字、图片、表格等之间留一个空白行
p 标签的部分属性
| 属性 | 说明 | 默认值 |
| align | 水平对齐方式。可选值：right、left、center | 默认 left |
| class | 设置 CSS 类 | — |
| dir | 文字方向 | — |
| style | 设置内嵌样式 | — |
| title | 设置工具提示 | — |
换行标签
HTML5 的换行标签是 br，其作用是在不另起一段的情况下，将当前的文字、图片以及表格等强制换行显示于下一行。
水平标签
HTML5 的水平标签是 hr，其作用是在浏览器上显示一条细线以分隔两个区域，在 HTML5 文档中的任意位置插入一条水平线。
<hr width=“水平线宽度” color=“颜色代码” aligh=“对齐方式” size="4" noshade=“noshade”/>
在该语法中，水平线的宽度值可以是确定的像素值，也可以是窗口宽度值的百分比。颜色代码是十六进制的数值。在该语法中包括 left、center 和 right3 种对齐方式。其中，center 的效果与默认效果相同。size的值决定水平线的粗细。在默认情况下，水平线是空心带阴影的立体效果，通过设置 noshade 参数可以将水平线的阴影去掉。如果在创建水平线时只设置一个参数，那么另外一个参数则会取默认值。
| 属性 | 说明 | 默认值 |
| align | 水平对齐方式。可选值：right, left, center | left |
| size | 设定线条厚度。以像素作单位 | 2 |
| width | 设定线条长度。可以是绝对值（以像素为单位）或相对值 | 100% |
| color | 设定线条颜色。#0000FF 代表蓝色，也可以采用颜色的名称，即 color="blue" | 黑色 |
| noshade | 设定线条为平面显示，若取消此项则具有阴影或立体 | — |
<html>
<head>
<title> 设置水平线对齐方式 </title>
</head>
<body>
<font face=" 隶书 " size="+3" color="#FF6600"> 苏轼 </font>
<hr width="130" color="#996600" align="left"> 古之成大事者 , 不惟有超士之才 , 亦有坚忍不拔之志。
<p align="right"> 大家要牢记啊！
<hr size="2" width="120" color="#FF99CC" align="right">
</body>
</html>
强调标签
HTML5 的强调标签是 b 和 strong，其作用是显示文本
1.4 图片标签与超链接标签
网页上插入图片的方法是使用 img 标签。
| 属性 | 说明 | 默认值 |
| src | 图 片 地 址， 接 受 GIF、JPG 及 PNG 格式。若图片文件与该 html 文件处于同一目录，则只写文件名称，否则必须添加正确的相对路径或绝对路径 | left |
| width、height | 设定线条厚度。以像素作单位 | 2 |
| align | 设定线条长度。可以是绝对值（以像素为单位）或相对值 | 100% |
| alt | 设置图片不存在时的提示语 | |
| noshade | 设定线条为平面显示，若取消此项则具有阴影或立体 | — |
img 标签的 align 属性可用于调整图像相对于周围文本的对齐方式。align 属性的取值可为 top、bottom、middle、left 或 right，当 align 取值为 top 时，图片周边的文字与图片顶端对齐；当 align 取值为 bottom 时，图片周边的文字与图片底端对齐；当 align 取值为 middle 时，图片周边的文字与图片中间对齐。
<body>
联想电脑型号 :Lenovo U310-ITH
<img src="images/lenovo.jpg" alt=" 联想电脑 " align="top" /> 爆款全网最低，极致轻薄，多彩时尚，送无线鼠标。
<hr/> 联想电脑型号 :Lenovo U310-ITH
<img src="images/lenovo.jpg" alt=" 联想电脑 " align="middle" /> 爆款全网最低，极致轻薄，多彩时尚，送无线鼠标。
<hr/> 联想电脑型号 :Lenovo U310-ITH
<img src="images/lenovo.jpg" alt=" 联想电脑 " align="bottom" /> 爆款全网最低，极致轻薄，多彩时尚，送无线鼠标。
</body>
超链接是指从一个网页指向一个目标的链接关系。链接的目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。HTML5 的超链接标签是 a。
| 属性 | 说明 | 默认值 |
| href | 链接的目标 URL | — |
| target | 在何处打开目标 URL。仅在 href 属性存在时使用 | _self |
第2章 排列页面内容
2.1音频标签和视频标签
audio 音频标签。
目前支持 audio 标签的浏览器有 IE9、Firefox、Opera、Chrome 和 Safari。IE8 和更早的版本，不支持 audio 标签。
| 属性 | 值 | 描述 |
| autoplay （很多浏览器已不再支持） | autoplay | 如果是 autoplay，则音频在就绪后马上播放 |
| controls | controls | 如果是 controls，则向用户显示控件，如播放按钮 |
| end （很多浏览器已不再支持） | 数字值 | 定义播放器在音频流中的何处停止播放。默认声音会播放到结尾 |
| loopend （很多浏览器已不再支持） | 数字值 | 定义在音频流中循环播放停止的位置，默认是end 属性的值 |
| loopstart（很多浏览器已不再支持） | 数字值 | 定义在音频流中循环播放的开始位置。默认是start 属性的值 |
| playcount（很多浏览器已不再支持） | 数字值 | 定义音频片断播放多少次，默认是 1 |
| src | url地址 | 所播放音频的 url地址 |
| loop | loop | 定义循环播放 |
video 视频标签
| 属性 | 值 | 描述 |
| autoplay （很多浏览器已不再支持） | autoplay | 如果是 autoplay，则视频在就绪后马上播放 |
| src | url地址 | 所播放视频的 url地址 |
| perload （浏览器帮我们自动实现了） | none | metadata | auto | 用于指定视频或音频数据是否预加载：none （不进行预加载）、metadata（只预加载媒体的元数据）和 auto（预加载 全部视频或音频） |
| loop | loop | 用于指定是否循环播放视频或音频 |
| poster | url地址 | 视频加载时显示的图像，或者在用户点击播放按钮前显示的图像 |
| controls | controls | 如果是 controls，则向用户显示控件，如播放按钮 |
| width | 数字值 | 用于指定视频的宽度 |
| height | 数字值 | 用于指定视频的高度 |
<body>
<audio src="img/录音-003.mp3" controls="controls" loop="loop" ></audio>
<video src="img/202110131524.mp4" controls="controls" width="500px" height="300px" autoplay="autoplay"
poster="img/iphone.jpg" loop="loop" ></video>
</body>2.2 列表、div 以及 span 标签
2.2.1 列表标签
ul 是无序列表的起始标签，英文全称 unordered list。无序列表中的项目符号是几何图形，即在每一项之前添加符号，故又称为符号列表。
ol 是有序列表的起始标签，英文全称 ordered list。有序列表中的项目符号是数字或字母序列
在 HTML 中还有一种列表标签，称为自定义列表 <dl> 标签。不同于前两种列表，它主要用于解释名词，包含两个层次的列表，第 1 层次是需要解释的名词，第 2 层次是具体的解释。
<dl> 标签和 </dl> 标签分别定义了定义列表的开始和结束，<dt> 后面就是要解释的名称，而在<dd> 后面则添加该名词的具体解释。作为解释的内容在显示时会自动缩进，有些像字典中的词语解释。
2.2.2 div 标签和 span 标签
在排列网页内容时，我们有时会将某些标签放在一起进行排列，这样就需要一个标签将它们组成一个区块。在HTML 中，可以通过 div 标签和 span 标签将 HTML 元素组合起来，div 标签和 span 标签均为容器类标签，可以在其中存放其他标签
div标签没有特定的含义，只是作为组合其他 HTML 元素的容器，默认情况下，div标签将占满一行，当存在多个div标签时，将按照从上到下的方式排列。
span 标签也没有特定的含义，可作为文本的容器。span 标签与 div 标签不同，默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。
<body>
<div>
<span><b> 新闻 </b></span> <span> 图片</span> <span>
军事 </span> |
<span><b> 视频 </b></span> <span> 热剧 </span> <span>
综艺 </span>
</div>
<div>
……
</div>
</body>
2.3 表格标签
表格是用于排列内容的最佳手段，在HTML页面中，绝大多数页面都是使用表格进行排版的。在HTML的语法中，表格主要由表格标签<table>、行标签<tr>以及单元格标签<td>构成。
表格可以实现行列合并，只需在 td 中加入 rowspan 或 colspan 属性，colspan 表示跨越的列数，rowspan 表示跨越的行数。
2.4 表格的美化修饰和布局
第3章 表单
3.1 表单概述
注册网站的用户时需要输入用户的信息，用户输入到网页中的信息均通过表单中的各表单元素来接收，然后传递给服务器。
<body>
<h2> 用户登录 </h2>
<hr/>
<form name="login" action="login_success.html">
用户名 :<input type="text" name="username" /><br/> 密 码 :
<input type="password" name="password" /><br/>
<input type="submit" value=" 登录 " />
<input type="reset" value=" 取消 " />
</form>
</body>
表单的 method 属性用来定义处理程序从表单中获得信息的方式，它决定了表单中已收集的数据是用什么方法发送到服务器的。传送方式的值有两种选择，即 get 和 post。
使用 get 方式提交数据时，表单数据会附加在 URL 之后，由用户端直接发送至服务器，所以速度比 post 快，但缺点是数据长度不能太长。
使用 post 时，表单数据是与 URL 分开发送的，客户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度比 get 慢。
3.2 输入框和按钮
| type | 指 定 表 单 元 素 的 类 型， 可 用 的 选 项 有 text、password、checkbox、radio、submit、reset、file、hidden、image 和button，默认为 text |
| name | 指定表单元素的名称 |
| value | 指定表单元素的初始值 |
| size | 指定表单元素的初始宽度。如果 type 为 text 或 password，则表单元素的大小以字符为单位；对于其他输入类型，宽度以像素为单位 |
| maxlength | 指定可在 text 或 password 元素中输入的最大字符串，默认无限制 |
| checked | 此属性只有一个值，为 checked，表示选中状态，如果不选中，则无须添加此属性 |
| readonly | 当文本框标签的 readonly 属性指定为 readonly 时，文本框中的值不允许更改 |
| 表单控件标签写法 | 说明 |
| <input type="text"> | 单行文本输入框。使用的是 input 标签和 type 属性 |
| <input type="submit"> | 将表单中的信息提交给表单中 action 属性所指向的地址 |
| <input type="checkbox"> | 复选框 |
| <input type="radio"> | 单选钮 |
| <input type="password"> | 密码输入框（输入的文字用 * 表示） |
| <select> | 下拉框 |
| <textArea> | 多行文本输入框 |
练习：
3.3 单选按钮、复选框和下拉框
单选按钮用于一组相互排斥的选项，组中的每个选项应具有相同的名称（name），以确保用户只能选择一个选项，单选按钮对应的 type 属性为 radio。
复选框用于选择多个选项，将 input 的 type 属性设置为 checkbox 就可以创建一个复选框。
下拉框主要可以使用户快速、方便、正确地选择一些选项，而且还能节省页面空间。它是通过 select 和 option标签来实现的,其中，在有多种选项可供用户滚动查看时，size 属性确定列表中可同时看到的行数；selected 属性表示该选项在默认情况下是被选中的。
练习：
3.4 表单验证
3.4.1 必填验证
required 属性可应用于大多数 input 标签上。在提交时，如果元素中的内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户该元素中必须输入内容。
3.4.2 类型匹配验证
| type 属性 | 说明 |
| | 在提交表单时，会自动验证值是否符合 e-mail 格式要求 |
| url | 在提交表单时，会自动验证值是否符合 url 格式要求 |
| number | 在提交表单时，会自动验证值是否为数字，并可以配合 min、max 以及 step 属性进行数值的限定 |
| range | 在提交表单时，会自动验证值是否在指定的范围内的数字，使用配合 min、max 以及 step 属性进行数值的限定，显示为滑动条 |
| date | 用于选取年、月、日 |
3.4.3 控制字符数量
在控制字符数量方面，我们可以使用 maxlength 属性设置输入字符的最大数量，以防止用户输入大量无效内容。
3.4.4 验证输入范围
min、max 属性是数值类型或日期类型的 input 标签的专用属性，它们限制了在 input 标签中输入的数值与日期的范围。
3.4.5 自定义错误消息
练习：
第4章 CSS3基础
4.1 CSS 概述
CSS 是 Cascading Style Sheet 的缩写，翻译为层叠样式表或级联样式表，简称为“样式表”。本书介绍的 CSS 版本是 CSS3。利用 CSS3 样式表定义页面样式，将会大大减少设计工作量。也可以美化页面，精确定制页面的布局
CSS3 基本语法
<style type="text/css">
li {
color: red;
font-size: 30px;
font-family: 隶书 ;
}
<style>
CSS样式的代码有以下规范：
（1）虽然CSS代码不区分大小写，但推荐全用小写。
（2）每条样式规则用分号“；”隔开，通常写为多行，简单的规则也可以合并为一行。
（3）当CSS代码较多时，可以使用“/*……*/”添加必要的注释，增加代码的可读性。
根据样式表的书写位置，可以将样式表分为外部样式表、内嵌样式表以及行内样式表。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导入外面样式表</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
<style type="text/css">
p{ color:red }
</style>
</head>
<body>
<p style="font-size:30px">开始学习 CSS ！</p>
</body>
</html>
rel=“stylesheet” 表 示 在 网 页 中 使 用 该 外 部 样 式 表，
type =“text/css” 表 示 文 本 类 型 的 样 式，
href=“newstyle.css”指定样式文件，样式表文件规定后缀名为“.css”。
练习题：使用 HTML5 中标签以及外部样式表制作手机广告页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/iphone8.css"/>
<title></title>
</head>
<body>
<div>
<p>iphone8，更以红色展现</p>
<p><span>特别版</span></p>
<p><a href="#">进一步了解></a> <a href="#">购买></a></p>
<img src="img/iphone8.png" />
</div>
</body>
</html>
body{
background-color: #b00e23
}
div{
width: 100%;
height: 465px;
border: 1px solid white;
text-align: center;
color: white;
font-family: "微软雅黑";
}
span{
border: 1px solid white;
border-radius: 5px;
}
a{
text-decoration: none;
color: white;
}4.2 CSS 基本选择器
当需要对页面内某类标签的内容进行修饰时，采用标签选择器
在标签中使用“class”属性设置标签的类名，即<标签名 class=“类名”>标签内容</标签名>。 标签中的类名定义完毕后，就会在标签内容中应用该类名所对应的样式。
练习题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/ComputerFenLei.css" />
</head>
<body>
<h1>电脑分类</h1>
<table>
<tr>
<td colspan="3" class="c1">电脑整机</td>
</tr>
<tr>
<td><a href="#">笔记本</a></td>
<td><a href="#">笔记本</a></td>
<td><a href="#">笔记本</a></td>
</tr>
<tr>
<td><a href="#">笔记本</a></td>
<td><a href="#">笔记本</a></td>
<td><a href="#">笔记本</a></td>
</tr>
<tr>
<td colspan="3" class="c1">电脑整机</td>
</tr>
<tr>
<td><a href="#">笔记本</a></td>
<td><a href="#">笔记本</a></td>
<td><a href="#">笔记本</a></td>
</tr>
<tr>
<td><a href="#">笔记本</a></td>
<td><a href="#">笔记本</a></td>
<td><a href="#">笔记本</a></td>
</tr>
<tr>
<td colspan="3" class="c1">电脑整机</td>
</tr>
<tr>
<td><a href="#">笔记本</a></td>
<td><a href="#">笔记本</a></td>
<td><a href="#">笔记本</a></td>
</tr>
<tr>
<td><a href="#">笔记本</a></td>
<td><a href="#">笔记本</a></td>
<td><a href="#">笔记本</a></td>
</tr>
</table>
</body>
</html>
h1{
background-color: #0000FF;/*设置背景颜色*/
width: 240px;
color: white;/*设置字体颜色*/
margin: 0px;/*设置h1标签的外边距为0*/
}
table{
background-color: #00007f;
width: 240px;
color:white ;
}
a{
color: white;
}
.c1{
font-size: 20px;
line-height: 50px;
}4.3 CSS 扩展选择器
标签名:伪类名{
属性：属性值;
}
| a标签的各种伪类 | 含义 | 应用场景 |
| a:link | 未单击访问时的超链接样式 | 常用，超链接主样式 |
| a:visited | 单击访问后的超链接样式 | 区分是否已被访问 |
| a:hover | 鼠标悬浮在超链接上的样式 | 常用，实现动态效果 |
| a:active | 鼠标单击未释放的超链接样式 | 少用，通常与 link 一致 |
学生练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/News.css" />
<title></title>
</head>
<body>
<ul>
<li>
<p class="c1">诺基亚6正式发布</p>
<img src="img/news_1.jpg" />
</li>
<li>
<p>诺基亚6正式发布</p>
<img src="img/news_1.jpg" />
</li>
<li>
<p class="c1">诺基亚6正式发布</p>
<img src="img/news_1.jpg" />
</li>
<li>
<p>诺基亚6正式发布</p>
<img src="img/news_1.jpg" />
</li>
<li>
<p class="c1">诺基亚6正式发布</p>
<img src="img/news_1.jpg" />
</li>
<li>
<p>诺基亚6正式发布</p>
<img src="img/news_1.jpg" />
</li>
</ul>
</body>
</html>
ul li img{
display: none;
}
ul li:hover p{
color: red;
transition:all 1s;
}
ul li:hover img{
display: block;
height: 124px;
width: 152px;
}
ul li:hover p.c1{
color: green;
transition:all 1s;
}4.4 CSS 的特性
4.4.1 CSS 继承性
4.4.2 CSS3 层叠性和优先级
层叠性是指当有多个选择器都作用于同一元素时，即多个选择器中的样式发生了重叠，CSS 会对其进行处理
如果多个选择器定义的样式规则不发生冲突，则元素将应用所有选择器定义的样式。
如果多个选择器定义的样式规则发生了冲突，则 CSS 按照选择器的优先级来处理，元素将应用优先级高的选择器定义的样式。
CSS样式优先级从高到低为：
行内样式
CSS 规定选择器总原则是：越特殊的样式，优先级越高
不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级和 CSS 代码的定义优先级。
（1）CSS3 的选择符优先级从高到低依次为：id 选择符优先级最高，其次是类选择符，最后是元素选择符。
（2）CSS3 的定义优先级依照后定义优先的原则，依次为：优先级最高的是内嵌样式，其次是内部样式表，链入外部样式表和内部样式表之间则根据定义的先后顺序评定，即最后定义的优先级高。
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/SungXing.css" />
</head>
<body>
<div>
<h1>三星手机图片展示</h1>
</div>
<div id="show">
<ul >
<li><img src="img/b1.jpg" id="p1" class="c1"/></li>
<li><img src="img/b2.jpg" id="p2" class="c1"/></li>
<li><img src="img/b3.jpg" id="p3" class="c1"/></li>
<li><img src="img/b4.jpg" id="p4" class="c1"/></li>
<li><img src="img/b5.jpg" id="p5" class="c1"/></li>
</ul>
</div>
<div id="daohang">
<ul >
<li><a href="#p1"><img src="img/b1.jpg"/></a></li>
<li><a href="#p2"><img src="img/b2.jpg"/></a></li>
<li><a href="#p3"><img src="img/b3.jpg"/></a></li>
<li><a href="#p4"><img src="img/b4.jpg"/></a></li>
<li><a href="#p5"><img src="img/b5.jpg"/></a></li>
</ul>
</div>
</body>
</html>
img{
width: 100px;
height: 150px;
margin-right:10px ;
}
.c1{
width: 350px;
height: 500px;
}
#show{
width: 350px;
height: 500px;
overflow: hidden;/*设置超出部分为隐藏*/
margin:0px auto;
}
#daohang{
width: 600px;
height: 150px;
margin:0px auto;
}
li{
float: left;/*设置列表为左浮动*/
list-style-type: none;/*设置列表样式为无*/
}
body{
margin: 0px;
padding: 0px;
}
h1{
text-align: center;
}第5章 常用的样式属性
5.1 字体及文本属性
5.1.1 字体属性
CSS3 的字体属性用于定义字体类型、字号大小以及字体是否加粗等。
| 属性名 | 说明 | 举例 |
| font | 设置字体的所有样式属性 | font:bold 12px 宋体 |
| font-family | 定义字体类型 | font-family: 宋体 |
| font-size | 定义字体大小 | font-size:12px |
| font-weight | 定义字体的粗细 | font-weight:bold |
| color | 字体颜色 | color:red;( 颜 色 取 值 可 以 为 颜 色 的 英 文 单 词， 也 可 以 采 用 #000000-#FFFFFF 之间的取值） |
5.1.2 文本属性
文本属性用于定义文本的外观，包括文本颜色、行高、对齐方式以及字符间距等。
| 属性名 | 说明 | 应用场景 |
| line-height | 设置行高（即行间距），常用取值为 25px、28px | 布局多行文本 |
| text-align | 设 置 对 齐 方 式， 常 用 的 取 值 为left、right 以及 center | 各种元素对齐 |
| letter-spacing | 设 置 字 符 间 距， 常 用 的 取 值 为3px、8px | 加大字符间间隔 |
| text-decoration | 设 置 文 本 修 饰， 常 用 的 取 值 为 underline（下划线）、none | 加下划线，中划线等 |
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/MaLaXia.css" />
</head>
<body>
<table>
<caption>麻辣小龙虾</caption>
<tr>
<td><img src="img/shrimp_1.jpg"/></td>
<td><img src="img/shrimp_2.jpg"/></td>
<td><img src="img/shrimp_3.jpg"/></td>
<td><img src="img/shrimp_4.jpg"/></td>
</tr>
<tr class="t2">
<td><a href="#">洪湖食客</a></td>
<td><a href="#">红功夫</a></td>
<td><a href="#">品鲜猫</a></td>
<td><a href="#">麻辣小龙虾</a></td>
</tr>
<tr>
<td><span class="c1">￥108</span> <span class="c2">￥128</span></td>
<td><span class="c1">￥108</span> <span class="c2">￥128</span></td>
<td><span class="c1">￥108</span> <span class="c2">￥128</span></td>
<td><span class="c1">￥108</span> <span class="c2">￥128</span></td>
</tr>
</table>
</body>
</html>
caption{
color: red;
font-size: 30px;
letter-spacing: 12px;
font-family: 微软雅黑;
font-weight: bold;
line-height: 80px;
}
a{
text-decoration: none;
color: gray;
font-size: 10px;
}
.t2{
line-height: 50px;
}
.c1{
color: red;
font-weight: bolder;
font-size: 22px;
}
.c2{
font-size: 10px;
color: gray;
text-decoration:line-through ;
}5.2 边距和填充
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/ComputerInfo.css" />
</head>
<body>
<div class="container">
<div class="adv">
<img src="img/adv_1.jpg" />
<p>阿萨德法师打发大沙发斯蒂芬第三方</p>
<p class="p1">￥5999</p>
</div>
<div class="adv">
<img src="img/adv_2.jpg" />
<p>阿萨德法师打发大沙发斯蒂芬第三方</p>
<p class="p1">￥5999</p>
</div>
<div class="adv">
<img src="img/adv_3.jpg" />
<p>阿萨德法师打发大沙发斯蒂芬第三方</p>
<p class="p1">￥5999</p>
</div>
<div class="adv">
<img src="img/adv_4.jpg" />
<p>阿萨德法师打发大沙发斯蒂芬第三方</p>
<p class="p1">￥5999</p>
</div>
<div class="adv">
<img src="img/adv_5.jpg" />
<p>阿萨德法师打发大沙发斯蒂芬第三方</p>
<p class="p1">￥5999</p>
</div>
</div>
</body>
</html>
.container{
width:920px;
height:260px;
background-color:lightblue;
padding:20px;
}
.adv{
float: left;
width: 160px;
margin-left: 20px;
background-color: white;
}
p{
text-align: center;
font-weight: bold;
/* background-color: aqua; */
margin: 10px;
}
.p1{
color: red;
font-size: 25px;
/* background-color: lightyellow; */
margin: 0px;
}
5.3 边框属性
CSS3 常见的边框属性有 border-style 属性、border-width 属性、border-color 属性和复合属性 border 属性
| 属性名 | 说明 | 示例 |
| border-style | 设置边框的样式，取值：none 无边框、solid 实线以及 dashed 虚线等 | border-style:solid |
| border-width | 设置边框的宽度 | border-width:1px |
| border-color | 设置边框的颜色 | border-color:red border |
| border | 复合属性，用于设置边框宽度、样 式以及颜色 | border:1px solid red |
在css3.0中，又添加了一个新的属性border-radius，使用border-radius这个属性可以实现圆角边框的效果。border-radius属性通过设置圆角的半径实现圆角边框，其中半径的像素值越大，圆角边框的效果越明显
| 语法 | 说明 |
| border-radius：参数 1 | 参数 1：4 个角 |
| border-radius：参数 1 参数 2 | 参数 1：左上角、右下角 参数 2：左下角、右上角 |
| border-radius：参数 1 参数 2 参数 3 | 参数 1：左上角 参数 2：左下角、右上角 参数 3：右下角 |
| border-radius：参数 1 参数 2 参数 3 参数 4 | 4个参数对应左上角、右上角、右下角和左下角 |
学生练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/ReMai.css" />
</head>
<body>
<div class="container">
<p>热卖排行榜</p>
<div><span>1</span><a href="#">时代峰峻暗黑风</a></div>
<div><span>2</span><a href="#">时代峰峻暗黑风</a></div>
<div><span>3</span><a href="#">时代峰峻暗黑风</a></div>
<div><span>4</span><a href="#">时代峰峻暗黑风</a></div>
<div><span>5</span><a href="#">时代峰峻暗黑风</a></div>
<div><span>6</span><a href="#">时代峰峻暗黑风</a></div>
<div><span>7</span><a href="#">时代峰峻暗黑风</a></div>
</div>
</body>
</html>
.container{
border: 1px solid black;
width: 300px;
border-radius: 5px;
}
p{
background-color: lightblue;
margin: 10px 10px;
height: 50px;
line-height: 50px;
font-size: 20px;
font-weight: bold;
padding-left: 10px;
}
.container div{
margin-left: 20px;
margin-top: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed gray;
}
.container div span{
color: red;
font-size: 20px;
margin-right: 10px;
}
a{
text-decoration: none;
color: black;
}5.4 列表属性
列表属性主要用于设置列表项的样式，包含 list-style-type 属性、list-style-image 属性、list-style-position属性和 list-style 属性
| 属性名 | 说明 |
| list-style-type | 用于设定列表项的符号，取值：None（无）、Disc（实心圆）、Circle（空心圆）、Square（实心方块）。 |
| list-style-image | 用于设定图像作为列表项目符号，其值为图像对应的url。 |
| list-style-position | 用于设定项目符号在列表项的位置，取值：inside、outside（默认值）。 |
| list-style | 复合属性，用于设置列表属性，其顺序为：list-style-type、list-style-position、list-style-image。 |
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/ListShuxing.css" />
</head>
<body>
<div>
<h3>常见问题分类</h3>
<ul>
<li><a href="#">购物指南</a></li>
<li><a href="#">订单百事通</a></li>
<li><a href="#">配送方式</a></li>
<li><a href="#">支付问题</a></li>
<li><a href="#">发票问题</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">账户及会员</a></li>
<li><a href="#">特色服务</a></li>
</ul>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
h3{
background-color:#6AD08C;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
letter-spacing: 5px;
}
a{
text-decoration: none;
color: #000000;
font-size: 20px;
}
li{
background-color: #CDCBCB;
width: 250px;
height: 50px;
line-height: 50px;
border-bottom: 1px solid white;
padding-left: 50px;
}
li:hover{
background-color: gray;
}第6章 背景和阴影
6.1 背景属性
| 属性 | 说明 |
| background-color | 用于设置元素的背景颜色 |
| background-image | 用于设置元素的背景图片 |
| background-repeat | 用于设置元素的背景图片重复方式 |
| background-position | 用于设置元素的背景图片位置 |
| background-size | 用于设置元素的背景图片大小 |
| background | 复合属性，用于设置元素的背景效果 |
| 参数 | 说明 |
| repeat | 默认值，表示背景图像在纵向和横向上平铺 |
| no-repeat | 表示背景图像不平铺 |
| repeat-x | 表示背景图像只在水平方向上平铺 |
| repeat-y | 表示背景图像只在垂直方向上平铺 |
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#container{
width:722px;
height:283px;
background-image: url(img/product.jpg);
border: 1px solid black;
}
#adv{
width:140px;
height:60px;
background-image: url(img/618.png);
border-radius: 0px 30px 30px 0px;
margin-top: 30px;
}
</style>
<body>
<div id="container">
<div id="adv"></div>
</div>
</body>
</html>
6.2 背景图片的定位
| 取值 | 说明 |
| 关键字 | 水平方向：left、center、right；垂直方向：top、center、bottom。 |
| 百分比 | 使用百分比表示背景位置，常用的数值： 水平方向：0%（左） 50%（中） 100%(右) 垂直方向：0%（上） 50%（中） 100%(下) |
| 像素值 | 背景图片左顶点相对于元素左顶点的偏移量，当为正值时，水平向右、垂直向下偏移，当为负值时，水平向左、垂直向上偏移。 |
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#container{
height:500px;
width:500px;
border:1px solid black;
background-image:url(img/p1.png),url(img/p2.png),url(img/p3.png),url(img/p4.png),url(img/p5.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position:right bottom,0% 100%,200px 200px,200px -50px,-50px 200px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
6.2.2 CSS Sprites
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#menu{
list-style: none;
}
li{
height: 26px;
width: 80px;
background-image: url(img/qr-coagent.png);
background-repeat: no-repeat;
padding-left: 30px;
margin-bottom: 20px;
}
.titel_1{
background-position: 0px 0px;
}
.titel_2{
background-position: 0px -26px;
}
.titel_3{
background-position: 0px -52px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="titel_1">免输入</li>
<li class="titel_2">更快</li>
<li class="titel_3">更安全</li>
</ul>
</body>
</html>
综合练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.title{
height: 40px;
width: 130px;
text-align: center;
background-color: black;
color: white;
line-height: 40px;
font-size: 20px;
font-weight: bold;
}
li{
list-style: none;
padding: 10px 0px 0px 50px;
background-image: url(img/ico.png);
background-repeat: no-repeat;
border-bottom: 1px solid lightgray;
border-right: 1px solid lightgray;
width: 79px;
}
.item_2{
background-position: 0px -40px;
}
.item_3{
background-position: 0px -80px;
}
.item_4{
background-position: 0px -120px;
}
.item_5{
background-position: 0px -160px;
}
.item_6{
background-position: 0px -200px;
}
.item_7{
background-position: 0px -240px;
}
a{
text-decoration: none;
color: #000000;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<div id="list">
<div class="title">数码分类</div>
<ul>
<li class="item_1"><a href="#">平板电脑</a></li>
<li class="item_2"><a href="#">摄像摄影</a></li>
<li class="item_3"><a href="#">智能数码</a></li>
<li class="item_4"><a href="#">娱乐影音</a></li>
<li class="item_5"><a href="#">路由器</a></li>
<li class="item_6"><a href="#">手机配件</a></li>
<li class="item_7"><a href="#">电子教育</a></li>
</ul>
</div>
</body>
</html>
6.3 背景的渐变
6.3.1 线性渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div.container{float:left; padding:5px;}
div.container div{height:200px; width:200px;}
#gradients_1{
background:linear-gradient(to right,red,black);
}
#gradients_2{
background:linear-gradient(60deg,red,black);
}
#gradients_3{
background:linear-gradient(to right bottom,red,white,black);
}
#gradients_4{
background:linear-gradient(to right bottom,red 40%,white 80%,black);
}
</style>
</head>
<body>
<div class="container">
<h3>设置方向渐变</h3>
<div id="gradients_1"></div>
</div>
<div class="container">
<h3>设置角度渐变</h3>
<div id="gradients_2"></div>
</div>
<div class="container">
<h3>设置多种颜色渐变</h1>
<div id="gradients_3"></div>
</div>
<div class="container">
<h3>设置渐变的位置</h3>
<div id="gradients_4"></div>
</div>
</body>
</html>
6.3.2 径向渐变
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div.container{float:left;padding:5px;}
div.container div{height:150px;width:250px;}
#gradients_1{
background:radial-gradient(black,white,red);
}
#gradients_2{
background:radial-gradient(at right bottom,black,white,red);
}
#gradients_3{
background:radial-gradient(circle at center,black,white,red);
}
#gradients_4{
background:radial-gradient(300px 100px at 60% 40%,black,white,red);
}
</style>
</head>
<body>
<div class="container">
<h3>简单径向渐变</h3>
<div id="gradients_1"></div>
</div>
<div class="container">
<h3>设置中心点的径向渐变</h3>
<div id="gradients_2"></div>
</div>
<div class="container">
<h3>设置渐变形状的径向渐变</h1>
<div id="gradients_3"></div>
</div>
<div class="container">
<h3>设置径向大小的径向渐变</h3>
<div id="gradients_4"></div>
</div>
</body>
</html>
6.4 阴影属性
6.4.1 文字阴影
在CSS3中，可以使用text-shadow属性对页面上的文字直接添加阴影效果
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#adv{
width: 500px;
height: 150px;
background-image: url(img/adv_bg.jpg);
text-align: center;
}
#title {
font: bold 54px " 微软雅黑 ";
color: white;
text-shadow: 3px 3px 2px #ff379d;
}
#msg {
text-shadow:
2px 0px 3px #ff379d,
-2px 0px 3px #ff379d,
0px 2px 3px #ff379d,
0px -2px 3px #ff379d,
-2px -2px 3px #ff379d,
2px -2px 3px #ff379d,
-2px 2px 3px #ff379d,
2px 2px 3px #ff379d;
font-size: 30px;
color: white;
border: 5px solid white;
width: 280px;
border-radius: 10px;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="adv">
<p id="title">618 主会场 </p>
<p id="msg"> 时尚跨店 2 件 7.5 折 </p>
</div>
</body>
</html>
6.4.2 盒子阴影
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding:0px;margin:0px;}
#adv{
height:300px;
width:250px;
text-align:center;
font-family:"微软雅黑";
border:1px solid #D8D5D5;
background-image:url(img/phone.png);
background-repeat:no-repeat;
background-size:200px 200px;
background-position:center 80px;
box-shadow:5px 5px 10px rgba(0,0,0,0.2);
margin:10px;
}
#adv p{margin:10px;}
#title{font-size:16px;}
#msg{color:gray;font-size:14px;}
</style>
</head>
<body>
<div id="adv">
<p id="title">手机大牌</p>
<p id="msg">抢618大额神券</p>
</div>
</body>
</html>
第7章 盒子模型
7.1 盒子模型原理
如果两个盒子是上下排布，他们的距离是margin-top和margin-bottom较大的一个
如果两个盒子是左右排布，他们的距离是margin-right和margin-left之和
margin 不同于 border 和 padding 只能取正数，margin 的值可以设置为负数。
7.2 标准文档流
7.2.1 标准文档流概述
在 CSS 中将 HTML 中标签分为块状标签和行内标签
标题（<h1>~<h6>）、
段落（<p>）、
水平线（<hr/>）、
列表（<ul>、<ol>、<li>、<dl>、<dt>、<dd>）、
表格（<table>）、
层（<div>）、
表单 (<form>)
常见的行内标签
图像（<img>）、范围（<span>）、换行（<br/>）、超链接（<a>）
行内元素按照从左到右的方式进行排列，多个行内元素显示在同一行，只有当一行排列完毕后，才会开始一个新行。块状元素各占据一行，则按照自上而下的方式进行排列。
内嵌元素不同
块状元素可以包含行内元素和块状元素。行内元素不能包含块状元素，只能包含文本或者其
他行内元素。
属性设置不同
行内元素与块状元素的属性设置不同，主要体现在盒子模型中，行内元素设置 width 属性、height 属性时无效，但可以设置 line-height 属性，再设置 margin 属性、padding 属性时，对于上下方向上的设置无效。
样式规则中所设置的样式属性对于块状元素全部有效，而对于行内元素来说，width 属性、
height 属性未能影响元素的大小，padding-top 属性以及 margin-top 属性设置也无效。
7.2.2 display 属性
display的取值有inline,block,none。分别代表的意思是行内样式显示，块级样式显示，不显示
7.2.3 visibility 属性
display 和 visibility 控制的分别是 HTML 元素是否存在和是否显示，display 的属性定义该元素存在或不存在，而 visibility 的属性只是控制该元素是否显示出来，实际上还是存在的。
7.3 盒子浮动
7.3.1 float 属性
| 参数 | 说明 |
| left | 表示文本或图像会移动到父元素的左侧 |
| right | 表示文本或图像会移动到父元素的右侧 |
| none | 是默认值，表示文本或图像会显示于它在文档中出现的位置 |
7.3.2 清除浮动
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#all{
background-color: lightgray;
width: 500px;
}
.container{
background-color: red;
height: 200px;
width: 150px;
float: left;
margin-left: 10px;
}
.head{
background-color: #0000FF;
height: 50px;
}
.menu{
background-color: #008000;
height: 50px;
}
.foot{
background-color: #ffaa7f;
height: 50px;
clear: both;
}
</style>
</head>
<body>
<div id="all">
<div class="head">顶部</div>
<div class="menu">菜单</div>
<div class="container">内容一</div>
<div class="container">内容二</div>
<div class="container">内容三</div>
<div class="foot">联系我们</div>
</div>
</body>
</html>
7.4 盒子定位
盒子定位通过设置css样式的position 属性
3795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
