学习目标
学习完本课程后，能够：
- 使用HTML进行网页布局
- 使用CSS3美化网页
- 制作精美的商业网站
一、HTML5基础
1.1 HTML简介
什么是HTML
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
| 中文名 ： 超文本标记语言 | 阅读方式 ： 网页浏览器 |
| 外文名 ： Hyper Text Markup Language | 外语缩写 ： HTML |
| 类 型 ： 标记语言 | 文件扩展名 ： html 或 htm |
HTML发展史
HTML历史上有如下版本：
- HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
- HTML 2.0：1995年1 1月作为RFC1866发布，于2000年6月发布之后被宣布已经过时。
- HTML 3.2：1997年1月14日，W3C推荐标准。
- HTML4.0：1997年12月18日，W3C推荐标准。
- HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
- HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
HTML5优势
- 世界知名浏览器厂商对HTML5的支持（微软，Google，苹果）
- 市场的需求
- 跨平台
W3C标准
W3C
World Wide Web Consortium（万维网联盟）
成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
W3C标准包括
结构化标准语言（HTML 、XML）
表现标准语言（CSS3）
行为标准（DOM 、ECMAScript）
1.2 HTML基本结构
入门案例
<!doctype html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8" />
</head>
<body>
hello html ~
</body>
</html>
<title>标签
<meta>标签
注：gb2312 包含全部中文字符
utf-8 包含全世界所有国家需要用到的字符
页面编码应与页面文件保存时的编码一致
1.3 网页基本标签
标题标签
<!doctype html>
<html>
<head>
<title>基本标签</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
段落标签
<!doctype html>
<html>
<head>
<title>基本标签</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起</p>
<p>有勇气就会有奇迹</p>
</body>
</html>
换行标签
<!doctype html>
<html>
<head>
<title>基本标签</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>北京欢迎你</h1>
<p>
北京欢迎你，有梦想谁都了不起 <br />
有勇气就会有奇迹
</p>
</body>
</html>
水平线标签
<!doctype html>
<html>
<head>
<title>基本标签</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>北京欢迎你</h1>
<hr />
<p>
北京欢迎你，有梦想谁都了不起!<br />
有勇气就会有奇迹。
</p>
</body>
</html>
字体样式标签
加粗：<strong>…</strong> 或 <b>…</b>
斜体：<em>…</em> 或 <i>…</i>
<!doctype html>
<html>
<head>
<title>基本标签</title>
<meta charset="UTF-8" />
</head>
<body>
<strong>霍世元简介</strong>
<p>
<em>年龄: </em>24<br />
<em>性别: </em>男<br />
</p>
</body>
</html>
注释和特殊符号
1.4 插入图像标签
常见的图像格式：JPG ,GIF , PNG , BMP
<!doctype html>
<html>
<head>
<title>图像标签</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- img 图像标签
src 图像地址； alt 图像的替代文字； title 鼠标悬停提示文字
width 图像宽度； height 图像高度 -->
<img src="image/hetao.jpg" alt="text" title="哈哈哈" width="300px" height="350px" />
<p>好吃不贵的核桃</p>
<p>10元3斤</p>
</body>
</html>
练习
练习1：使用学过的图像标签、标题标签、水平线标签、斜体标签、加粗标签、段落标签等制作自我介绍。
1.5 超链接标签
超链接基本用法
_blank：新建空白页打开
_self：默认样式，更改当前页面的访问路径，不会打开新的页面
超链接应用场合
- 页面间连接
<!doctype html>
<html>
<head>
<title>页面间链接</title>
<meta charset="UTF-8" />
</head>
<body>
<a href="demo03.html" target="_blank">链接到demo03图像标签案例</a><br/>
<a href="demo04.html" target="_self">
<img src="image/hetao.jpg" alt="核桃图片" title="买核桃吗？走过路过不要错过" />
</a>
</body>
</html>
- 锚链接
<!doctype html>
<html>
<head>
<title>锚链接</title>
<meta charset="UTF-8" />
</head>
<body>
<a name="_top">HTML从入门到精通</a>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<h6>你好HTML</h6>
<a href="#_top">回到顶部</a><!-- 获取_top的位置,像书签 -->
<br><br><br><br>
</body>
</html>
- 外部链接
<!doctype html>
<html>
<head>
<title>外部链接</title>
<meta charset="UTF-8" />
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.csdn.com" target="_self">CSDN</a>
<a href="mailto:1691655063@qq.com">点击联系我</a>
</body>
</html>
1.6 行内元素和块元素的特性
块元素：无论内容多少，该元素独占一行（p、h1-h6 …）
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a，strong，em、img …）
<!-- 行内元素和块元素 -->
<!doctype html>
<html>
<head>
<title>行内元素和块元素</title>
<meta charset="UTF-8" />
</head>
<body>
<p>我是P元素</p>
<h1>我是标题1</h1>
<a href="#">我是超链接a元素</a>
<strong>我是strong元素--加粗</strong>
<em>我是em元素--斜体</em>
</body>
</html>
练习
练习2：超链接
二、列表、表格与媒体元素
2.1 列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
无序列表
<!doctype html>
<html>
<head>
<title>列表</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- ul：声明无序列表 li：声明列表项 type : 符号样式
disc：默认实心圆 circle：空心圆
square： 方块 none：没有-->
<ul type="disc">
<li>山西省</li>
<li>河北省</li>
<li>山东省</li>
<li>陕西省</li>
<li>......</li>
</ul>
</body>
</html>
一般用于无序类型的列表，如导航，侧边栏新闻、有规律的图文组合模块等
有序列表
<!doctype html>
<html>
<head>
<title>列表</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- ol：声明有序列表 li：声明列表项
type="" 1(默认数字排序) a(小写字母排序) A(大写字母排序)
start="" 列表项排序起始值 属性值只能为数字-->
<ol type="1" start="1">
<li>太原市</li>
<li>长治市</li>
<li>晋城市</li>
<li>运城市</li>
<li>......</li>
</ol>
</body>
</html>
一般用于排序类型的列表，如试卷、问卷选项等
定义列表
<!doctype html>
<html>
<head>
<title>列表</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- dl ：声明定义列表 dt ：声明列表项 dd ：声明列表项内容 -->
<dl>
<dt>山西省</dt>
<dd>太原市</dd>
<dd>长治市</dd>
<dd>晋城市</dd>
<dd>......</dd>
<dt>河北省</dt>
<dd>石家庄市</dd>
<dd>邢台市</dd>
<dd>邯郸市</dd>
<dd>......</dd>
</dl>
</body>
</html>
一般用于一个标题下有一个或多个列表项的情况
小结
练习
练习1：热门活动
练习2：制作音乐排行榜
2.2 表格
表格基本使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!--table表格标签
tr 表格里的行
td 表格里的列 -->
<table border="1px">
<tr>
<td> 11 </td>
<td> 12 </td>
<td> 13 </td>
</tr>
<tr>
<td> 21 </td>
<td> 22 </td>
<td> 23 </td>
</tr>
<tr>
<td> 31 </td>
<td> 32 </td>
<td> 33 </td>
</tr>
</table>
</body>
</html>
跨行、跨列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<table border="1px">
<tr>
<td colspan="2">11</td> <!-- colspan是列合并,合并2列-->
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 -->
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</body>
</html>
练习
练习3：学生成绩表
2.3 媒体元素
视频元素
<!doctype html>
<html>
<head>
<title>列表</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- video 视频元素标签 src 视频文件路径
controls 播放、暂停和音量控件
autoplay 自动播放属性 -->
<video src="video/html.mp4" controls></video>
</body>
</html>
音频元素
<!doctype html>
<html>
<head>
<title>音频</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- audio 音频元素标签 src 音频文件路径
controls 播放、暂停和音量控件
autoplay 自动播放属性 -->
<audio src="video/music.mp3" controls></audio>
</body>
</html>
loop属性可以实现视频的循环播放
2.4 结构元素
页面结构
结构元素
<!doctype html>
<html>
<head>
<title>布局</title>
<meta charset="UTF-8" />
<style>
header,
section,
footer {
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体部分</h2>
</section>
<footer>
<h2>网页底部</h2>
</footer>
</body>
</html>
2.5 内联框架的使用
iframe用法
<!doctype html>
<html>
<head>
<title>iframe</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- iframe 内联框架
src 引用页面地址 name 框架标识名 -->
<iframe src="demo04.html" name="mainFrame"></iframe>
</body>
</html>
设置src的属性值为 http://www.bdqn.cn 在这个页面中也可以打开一个线上的网页
<iframe>属性实现页面间的相互跳转
<!doctype html>
<html>
<head>
<title>iframe</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- target 目标窗口属性 希望显示的框架窗口名 -->
<a href="demo04.html" target="mainFrame">下边显示demo04页面</a> <br />
<a href="demo03.html" target="mainFrame">下边显示demo03页面</a> <br />
<a href="demo02.html" target="mainFrame">下边显示demo02页面</a> <br />
<!-- name 框架标识名 -->
<iframe src="demo01.html" name="mainFrame"></iframe>
</body>
</html>
三、表单（重点）
3.1 常用的表单元素
案例1
表单基本结构
<!doctype html>
<html>
<head>
<title>表单</title>
<meta charset="UTF-8" />
</head>
<body>
<!-- form 表单标签
method 提交方式 规定如何发送数据 get(数据都在地址栏里 不安全) post(不显示数据 安全)
action 表单提交的位置，可以是网站，也可以是一个请求处理地址-->
<form method="get" action="#">
<!-- input 输入框标签 name 元素名称
type 元素类型 value 元素初始值-->
名字：<input name="name" type="text" value="霍" /> <br />
密码：<input name="pass" type="password"> <br />
<input type="submit" name="Button" value="提交" />
<input type="reset" name="Reset" value="重填" /> <br />
</form>
</body>
</html>
input 常用属性说明
案例2
常用属性与属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<form method="post" action="#">
<h3>注册表单</h3>
<!-- size 输入框宽度 maxlength 输入最大字符数 -->
用户名：<input type="text" name="user" size="8" maxlength="8" /> <br />
密码：<input type="password" name="pwd" /> <br />
<!-- 多选框 name必须配 ,提交的值就是1 2 3 -->
爱好：
<input type="checkbox" name="like" value="1" />篮球
<input type="checkbox" name="like" value="2" />足球
<input type="checkbox" name="like" value="3" checked />排球 <br />
<!-- checked 用在单选和多选框中 选中当前选项 -->
性别：
<!-- 单选框 不配name属性,性别是多选!! sex属性的值按照1 2 提交-->
<input type="radio" name="sex" value="1" checked />男
<input type="radio" name="sex" value="2" />女 <br />
<!-- select 列表框 option 列表选项 selected 默认选中项 -->
城市:
<select name="city">
<option value="1">北京</option>
<option value="2" selected>上海</option>
</select> <br />
<!-- 文本域 cols 显示列数 rows 显示行数-->
自我描述：
<textarea name="text" cols="20" rows="3">文本内容</textarea> <br />
<!-- 文件域 -->
头像:
<input type="file" name="path" /> <br />
<!-- 提交按钮 按照form标签action属性值进行提交 -->
<input type="submit" name="butSubmit" value="提交" />
<!-- 清空当前表单已填信息 恢复默认 -->
<input type="reset" name="butReset" value="重填" />
<!-- 普通按钮 -->
<input type="button" name="butButton" value="按钮" /> <br />
<!-- 图片按钮 -->
<input type="image" src="image/login.gif" /> <br />
</form>
</body>
</html>
案例3
输入框格式校验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<form method="get" action="#">
<!-- 邮箱 自动验证email地址格式是否正确 -->
邮箱：<input type="email" name="email" /> <br />
<!-- 验证网址格式 -->
输入网址：<input type="url" name="userUrl" /> <br />
<!-- min 允许的最小值 max 允许的最大值 step 合法的数字间隔 -->
输入数字：<input type="number" name="num" min="0" max="100" step="10"> <br />
<!-- type属性值：number(数字) range(滑块) -->
输入数字：<input type="range" name="num" min="0" max="100" step="10"> <br />
<!-- 搜索框 -->
输入关键词：<input type="search" name="sousou" /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html>
练习
练习1：注册表单
3.2 表单的高级应用
案例4
隐藏域 ； 只读 ； 禁用 相关属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<form method="get">
<!-- type="hidden" 隐藏域 -->
<input type="hidden" value="666" name="userid" /> <br />
<!-- readonly 只读文本框 -->
<input name="name" type="text" value="张三" readonly /> <br />
<!-- disabled 禁用 -->
<input type="button" disabled value="保存" /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html>
案例5
表单元素的标注
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<form method="get">
<!-- 增强鼠标的可用性 自动将焦点转移到与该标注相关的表单元素上
单机文字 可以选中该选项 -->
性别：
<label for="man">男</label>
<input type="radio" name="sex" id="man" value="1" />
<label for="woman">女</label>
<input type="radio" name="sex" id="woman" value="0" />
</form>
</body>
</html>
练习
练习2要求：
- 邮箱文本框中默认文本为“student@bdqn.cn “ ，且文本框不可修改
- 单击文字“电子邮箱”、“设置密码”、“真实姓名”、“验证”时鼠标的光标焦点移动到对应的文本框里
- 单击“男”选中其对应的单选按钮，单击“女”选中其对应的单选按钮
- 选择身份的下拉列表框被禁止使用
3.3 表单的初级验证
表单验证的好处：减轻服务器的压力；保证数据的可行性和安全性；
案例6
placeholder ；required ； pattern 用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
</head>
<body>
<form method="get">
<!-- placeholder 文本框输入内容提示
适用于input标签：text search url email password 等类型 -->
搜索：<input type="text" name="name" placeholder="请输入要搜索的关键字" /><br>
<!-- required 文本框内容不能为空，否则不允许用户提交表单
适用于input标签：text search url email password number
checkbox radio file 等类型-->
<input type="text" name="username" required /> <br>
<!-- pattern验证规则 正则表达式 -->
手机号: <input type="text" name="phone" required pattern="1[3578]\d{9}" /><br>
<input type="submit" value="提交" />
</form>
</body>
</html>
四、初识CSS3（重点）
4.1 CSS概念
简介
层叠样式表: 是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
| 中文名 ： 层叠样式表 | 外语缩写 ：CSS（也作文件扩展名） |
| 外文名 ： Cascading Style Sheets | 其他称呼 ： 级联样式表 |
CSS发展史
css优势
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使得页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
4.2 CSS语法规则
CSS基本语法结构
CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上
style标签
4.3 HTML中引入CSS样式
行内样式
<!doctype html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8" />
</head>
<body>
<h1 style="color: red;">style属性的应用</h1>
<p style="font-size: 14px; color:green">style行内样式</p>
</body>
</html>
内部样式
<!doctype html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8" />
<style>
h1 {
color: red;
}
p {
font-size: 14px;
color: green
}
</style>
</head>
<body>
<h1>style标签的应用</h1>
<p>style内部样式</p>
</body>
</html>
优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
外部样式
链接外部样式
<!doctype html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8" />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>link标签引入css样式</h1>
<p>外部样式--链接外部样式</p>
</body>
</html>
导入外部样式表
<!doctype html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8" />
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
<h1>style标签引入css样式</h1>
<p>外部样式--导入外部样式</p>
</body>
</html>
链接式与导入式的区别
- 标签属于XHTML，@import是属于CSS2.1
- 使用链接的CSS文件先加载到网页当中，再进行编译显示
- 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
- @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
3种样式的优先级
就近原则 行内样式>内部样式表/外部样式表（谁后加载使用谁）
4.4 CSS3的选择器
基本选择器
标签选择器 ； 类选择器 ； ID选择器；
<!doctype html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8" />
<style type="text/css">
/* 标签选择器：h1 p img a .....
直接应用于HTML标签*/
h2 {
color: blue;
}
/* 类选择器 可在页面中多次使用*/
.name {
color: aqua;
}
/* id选择器 同一个页面中只能使用一次（自觉遵守）*/
#gc {
color: yellow;
}
</style>
</head>
<body>
<h2>童话</h2>
<h3 class="name">光良</h3>
<p id="gc">我愿变成童话里 你爱的那个天使</p>
<p>张开双手 变成翅膀守护你</p>
</body>
</html>
优先级：ID选择器>类选择器>标签选择器
练习
练习一 要求：
- 制作影视简介，标题使用<h2>标签，其他文本均放在段落标签<p>中，超链接使用<a>，图片使用<img>
- 使用外部引入CSS样式的方式为网页设置样式
- 使用标签选择器设置标题h2的字体颜色为#003580
- 使用ID选择器设置p段落的文字，字体为14px，颜色为#000033
- 使用类选择器设置p段落文字中的不同颜色值， 从左到右颜色值分别为#F00、#1F87CC、#FAA53B、#0D7114
- 使用类选择器设置第一张图片的宽度为100px，高度为160px
- 使用类选择器设置最后两张图片的宽度为200px，高度为130px
高级选择器
层次选择器
后代选择器 ；子选择器 ； 相邻兄弟选择器 ；通用兄弟选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>层次选择器</title>
<style type="text/css">
p,
ul {
border: 1px solid red;
/*边框属性*/
}
/*后代选择器*/
/* body p {
background: red;
} */
/*子选择器*/
/* body>p {
background: pink;
} */
/*相邻兄弟选择器 只有一个，相邻（向下）*/
/* .active+p {
background: green;
} */
/* 通用兄弟选择器 */
/* .active~p {
background: yellow;
} */
</style>
</head>
<body>
<p class="active">1</p>
<p>2</p>
<p>3</p>
<ul class="c4">
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*ul的第一个子元素*/
/* ul li:first-child {
background: red;
} */
/*ul的最后一个子元素*/
/* ul li:last-child {
background: green;
} */
/* 选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效 顺序*/
/* p:nth-child(1) {
background: yellow;
} */
/*父元素里第2个类型为p的元素 类型*/
/* p:nth-of-type(2) {
background: blue;
} */
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
使用F:nth-child(n)和F:nth-of-type(n)的关键点
- F:nth-child(n)在父级里从一个元素开始查找，不分类型
- F:nth-of-type(n)在父级里先看类型，再看位置
属性选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background: #aac;
color: blue;
font: bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
/* 存在属性id的元素 */
/* a[id] {
background: yellow;
} */
/* 属性id=first的元素 */
/* a[id=first] {
background: red;
} */
/* 属性class="links"的元素 */
/* a[class="links"] {
background: red;
} */
/* 属性class里包含links字符串的元素 */
/* a[class*=links] {
background: red;
} */
/* 属性href里以http开头的元素 */
/* a[href^=http] {
background: red;
} */
/* 属性href里以png结尾的元素 */
/* a[href$=png] {
background: red;
} */
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links active item" title="test website" target="_blank">2</a>
<a href="sites/file/test.html" class="links item">3</a>
<a href="sites/file/test.png" class="links item"> 4</a>
<a href="sites/file/image.jpg" class="links item">5</a>
<a href="efc" class="links item" title="website link">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abcdef.doc" class="links">9</a>
<a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
</body>
</html>
= 绝对等于 *=包含这个元素 ^=以这个开头 $=以这个结尾
五、CSS3美化网页元素（重点）
css优点：
- 有效的传递页面信息
- 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
- 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
- 具有良好的用户体验
5.1 编辑网页文本
<!doctype html>
<html>
<head>
<title>CSS 字体样式</title>
<meta charset="UTF-8" />
<style>
#title1 {
color: aqua;
font-size: 20px;
}
</style>
</head>
<body>
<!-- span标签 行标签 重点要突出的字 -->
我喜欢学习，<span id="title1">学习使我快乐</span>
</body>
</html>
字体样式
<!doctype html>
<html>
<head>
<title>CSS 字体样式</title>
<meta charset="UTF-8" />
<style>
body {
/* 字体类型 Times New Roman*/
font-family: "Times New Roman", "楷体";
}
h1 {
/* 字体大小 px em rem */
font-size: 30px;
}
.p1 {
/* 字体粗细 bold(加粗) bolder(更粗) lighter(更细) normal(默认 标准)*/
font-weight: bold;
/* 字体风格 italic(斜体) normal(默认 正常) oblique(倾斜) */
font-style: oblique;
}
h3 {
/* 斜体 加粗 字号 字体 */
font: italic bold 20px "微软雅黑";
}
</style>
</head>
<body>
<h1>京东商城――全部商品分类</h1>
<h3>图书、音像、电子书刊</h3>
<p class="p1">
电子书刊 电子书 网络原创 数字杂志 多媒体图书目
音像音乐 影视 教育音像
经管励志 经济 金融与投资 管理 励志与成功
</p>
</body>
</html>
文本样式
<!doctype html>
<html>
<head>
<title>CSS 文本样式</title>
<meta charset="UTF-8" />
<style>
body {
/* 文本颜色 十六进制方法表示颜色（红绿蓝）*/
color: blue;
color: #EEFF66;
/* 控制alpha透明度的参数 值0-1 越小越模糊 */
color: rgba(0, 0, 255, 0.5);
}
h1 {
/* 元素水平对齐方式 left right center justify(两端对齐)*/
text-align: right;
}
.p1 {
/* 首行文本缩进 em px */
text-indent: 20px;
/* 文本行高 px */
line-height: 25px;
/* 文本装饰 none(默认) underline(下划线) overline(上划线) */
text-decoration: underline;
}
img,
#align {
/* 垂直对齐方式 middle(中) top(上) bootom(下) */
vertical-align: middle;
}
h3 {
/* text-shadow: 阴影颜色 x轴水平位移量 y轴垂直位移量 模糊半径 */
text-shadow: aqua 10px 10px 10px;
}
</style>
</head>
<body>
<h1>京东商城――全部商品分类</h1>
<h3>图书、音像、电子书刊</h3>
<p class="p1">
电子书刊 电子书 网络原创 数字杂志 多媒体图书目
音像音乐 影视 教育音像
经管励志 经济 金融与投资 管理 励志与成功
</p>
<img src="image/icon.gif" />
<span id="align">
图片与文本垂直对齐方式
</span>
</body>
</html>
练习
练习一：
- 使用外部样式表创建页面样式（链接式引用）
- 标题 18px 、楷体 、加粗显示
- 正文 12px 、行高 20px 、英文字体：Times New Roman 或 Times 中文字体： 宋体
- 序号颜色为 红色
练习二：
- 使用外部样式表创建页面样式
- 标题行距40px，加粗显示
- 正文大小12px，行距20px
- 图片与文本居中对齐
- 标题字体添加文字阴影
- 设置一级标题水平居中对齐
5.2 超链接伪类
<!doctype html>
<html>
<head>
<title>CSS 超链接伪类 </title>
<meta charset="UTF-8" />
<style>
/* 未单击访问时超链接样式 */
a:link {
color: red;
}
/* 单击访问后超链接样式 */
a:visited {
color: yellow;
}
/* 鼠标悬浮其上的超链接样式 */
a:hover {
color: black;
}
/* 鼠标单击未释放的超链接样式 */
a:active {
color: aqua;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">
百度
</a>
</body>
</html>
5.3 列表list-style
<!doctype html>
<html>
<head>
<title>CSS 项目符号 </title>
<meta charset="UTF-8" />
<style>
li {
/* list-style-type 设置项目符号类型
disc：默认实心圆 circle：空心圆
square： 方块 none：没有 */
list-style-type: circle;
}
</style>
</head>
<body>
<h3>喜欢的歌手</h3>
<ul>
<li>薛之谦</li>
<li>周杰伦</li>
<li>邓紫棋</li>
</ul>
</body>
</html>
5.3 背景样式
背景颜色
<!doctype html>
<html>
<head>
<title>CSS 背景颜色 </title>
<meta charset="UTF-8" />
<style>
li {
list-style-type: circle;
}
div {
width: 120px;
/* 背景颜色 */
background-color: aqua;
}
h3 {
width: 120px;
background-color: salmon;
}
</style>
</head>
<body>
<div>
<h3>喜欢的歌手</h3>
<ul>
<li>薛之谦</li>
<li>周杰伦</li>
<li>邓紫棋</li>
</ul>
</div>
</body>
</html>
背景图像
<!doctype html>
<html>
<head>
<title>CSS 背景图像 </title>
<meta charset="UTF-8" />
<style>
div {
width: 400px;
height: 400px;
border: 1px solid red;
/* 设置背景图像 */
background-image: url("image/1.jpg");
}
.div1 {
/* 背景图像重复方式 repeat(沿水平垂直两个方向平铺) no-repeat(不平铺)
repeat-x(只沿水平方向平铺) repeat-y(只沿垂直方向平铺) */
background-repeat: no-repeat;
/* 背景定位 background-position */
/* 1. s y 坐标表示位置 单位px x(水平) y(垂直) */
/* background-position: 10px 30px; */
/* 2. 百分比表示位置 */
/* background-position: 10% 50%; */
/* 3.x y 方向关键词 水平(left center right)
垂直(top center bottom) */
/* background-position: right bottom; */
}
.div2 {
/* background: 背景颜色 背景图像 图像位置 是否重复显示*/
background: #c00 url(image/icon.gif) left center no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
背景尺寸
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景尺寸</title>
<style>
div {
width: 200px;
height: 130px;
border: 1px solid red;
background: url("image/1.jpg") no-repeat;
/* background-size(背景图片尺寸设置) auto(默认 保持图片原样)*/
/* background-size: auto; */
/* background-size: 120px 60px; */
/* background-size: 120px; */
/* background-size: 50% 80%; */
/* cover(整个背景图片放大填充了整个元素) */
/* background-size: cover; */
/* contain 保持原图像尺寸比例，最大限度显示整张图片 */
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.4 CSS3渐变
线性渐变
颜色沿着一条直线过渡：从左到右，从右到左，从上到下等
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3线性渐变</title>
<style>
div {
width: 100px;
height: 100px;
/*to top*/
background: linear-gradient(to top, orange, blue);
/* background: -webkit-linear-gradient(to top, orange, blue); */
/*-webkit-*/
/*to bottom*/
/* background: linear-gradient(to bottom, orange, blue); */
/*background: -webkit-linear-gradient(to bottom, orange, blue);*/
/*to left*/
/* background: linear-gradient(to left, orange, blue); */
/*background: -webkit-linear-gradient(to left, orange, blue);*/
/*to right*/
/* background: linear-gradient(to right, orange, blue); */
/*background: -webkit-linear-gradient(to right, orange, blue);*/
/*to top left*/
/* background: linear-gradient(to top left, orange, blue); */
/*background: -webkit-linear-gradient(to top left, orange, blue);*/
/*to top right*/
/* background: linear-gradient(to top right, orange, blue); */
/*background: -webkit-linear-gradient(to top right, orange, blue);*/
/*to bottom left*/
/* background: linear-gradient(to bottom left, orange, blue); */
/*background: -webkit-linear-gradient(to bottom left, orange, blue);*/
/*to bottom right*/
/* background: linear-gradient(to bottom right, orange, blue); */
/*background: -webkit-linear-gradient(to bottom right, orange, blue);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
练习
练习三：
- 页面总宽度300px
- 一级题字体大小为18px、白色、加粗显示、行距为35px，背景使用线性渐变
- 二级标题字体大小为14px、加粗显示、行距为30px，背景使用线性渐变、二级标题超链接字体无下划线、鼠标移入出现下划线
- 内容字体大小为12px、行距为26px、超链接字体颜色为灰色、无下划线、鼠标移入时颜色为棕红色并且显示下划线
练习四：
- 设置页面内容宽度260px
- 设置页面背景渐变颜色（#F9FBCB #F8F8F3）
- 设置标题：16px、缩进1字符、行距30px、字体颜色、绿色背景#518700、设置背景图像
- 无序列表去除项目符号、12px、行距28px、字体颜色(#1a66b3)、缩进2字符
- 超链接无下划线，鼠标悬浮至超链接时显示下划线
- 利用结构伪类选择器设置列表图标
六、盒子模型（重难点）
6.1 盒子模型的使用
边框
border-color(颜色）
border-width(边框宽度)：px
border-style(样式)：solid(实线)；dashed(虚线)；double(双线);
dotted(圆点虚线); hidden(隐藏); none(无边框);
border：粗细 样式 颜色
内边距(padding)
外边距(margin)
margin :0
margin:0 auto; 网页居中对齐
margin: 0 1px 上下 左右;
margin：0 1px 2px 3px 上 右 下 左
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>边框</title>
<style>
.box{
width: 298px; /* 盒子宽度298px*/
/* border：粗细 样式 颜色*/
border:1px solid #3a6587; /* 设置盒子边框*/
margin:0 auto; /* 网页元素居中对齐 */
/* margin:0 auto; 居中要求：
块元素，块元素有固定的宽度 */
}
h2{
font-size:16px;
background-color:#3a6587;
height:35px;
line-height:35px;
color:#FFF;
/* margin :0
margin:0 auto; 网页元素居中对齐
margin: 0 1px 上下 左右;
margin：0 1px 2px 3px 上 右 下 左 */
}
form{
background: #c8ece3;
}
div:nth-of-type(1)>input{
border: 3px solid black; /* 第一个div下面的input元素设置边框3px 实线 黑色*/
}
div:nth-of-type(2)>input{
border: 1px dashed red; /* 第二个div下面的input元素设置边框1px 虚线 红色*/
}
div:nth-of-type(3)>input{
border: 2px dotted red; /* 第三个div下面的input元素设置边框2px 点线 红色*/
}
</style>
</head>
<body>
<div class="box">
<h2>会员登录</h2>
<form action="#">
<div>
<strong class="name">姓名：</strong>
<input type="text"/>
</div>
<div>
<strong class="name">邮箱：</strong>
<input type="text"/>
</div>
<div>
<strong class="name">电话：</strong>
<input type="text"/>
</div>
</form>
</div>
</body>
</html>
盒子总尺寸
元素大小=border+padding+margin+内容宽度
6.2 圆角边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆角边框</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
/* 设置圆角边框 四个属性值按顺时针排列 */
/* border-radius: 20px 10px 50px 30px; */
/* 椭圆 水平/垂直 */
/* border-radius: 10px / 30px; */
/* 圆 圆角=半径 */
/* border-radius: 50%; */
/* 半圆 元素的宽度是高度的2倍，而且圆角半径为元素的高度值 */
/* border-radius: 100px 100px 0 0; */
/* 扇形 元素宽度、高度、圆角半径相同 圆角取值位置不同 */
/* border-radius: 100px 0 0 0; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.3 盒子阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阴影</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
/* 阴影：类型(内阴影) x轴位移 y轴位移 模糊半径 颜色 */
box-shadow: inset 10px 10px 50px yellow;
/* 不写类型为外阴影 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
七、浮动（重难点）
7.1 标准文档流
指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。
标准文档流组成
- 块级元素：独占一行 h1-h6 ; p ; div ; 列表
- 行内元素：不独占一行 span； a ; img ; strong …
行内元素可以被包含在块级元素中。
7.2 display属性
可以改变块级元素与行级元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<style>
div{
width:100px;
height:100px;
border:1px solid red;
display: inline; /* 将div设置为行内元素 */
}
span{
width:100px;
height:100px;
border:1px solid red;
display:block; /* 将span设置为块元素 */
}
</style>
</head>
<body>
<div>
div 块元素
</div>
<span>
span 行内元素
</span>
</body>
</html>
7.3 float 属性 浮动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<style>
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
}
/* float 浮动 left 左浮动 right 右浮动 none 无浮动*/
.layer01 {
border:1px #F00 dashed;
float: right;
}
.layer02 {
border:1px #00F dashed;
float: right;
}
.layer03 {
border:1px #060 dashed;
float: right;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
float: right;
}
</style>
</head>
<body>
<div id="father">
<div class="layer01"><img src="image/hd.jpg" alt="前端"/></div>
<div class="layer02"><img src="image/qd.jpg" alt="后端"/></div>
<div class="layer03"><img src="image/sjk.jpg" alt="数据库"/></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
</div>
</div>
</body>
</html>
7.4 解决父级边框塌陷
clear
/* clear:right; 右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
clear:none;*/
解决方案：
- 增加父级元素的高度
#father {
border:1px solid #000;
height: 600px;
}
- 增加一个空的div标签，清除浮动
<div class="clear"></div>
.clear{
clear: both;
}
- 使用overflow 属性
在父级元素中增加一个 overfow: hidden;
#father {
overflow: hidden;
}
- 父类添加一个伪类：after （推荐使用）
#father:after{
content: '';
display: block;
clear: both;
}
小结：
-
浮动元素后面加空div
简单，空div会造成HTML代码冗余 -
设置父元素的高度
简单，元素固定高会降低扩展性 -
父级添加overflow属性
简单，下拉列表框的场景不能用 -
父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用
7.5 display和float对比
- display ： 方向不可控制
- float ：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
八、定位网页元素（重难点）
8.1 定位
position属性
static (默认值，没有定位)；relative (相对定位) ；
absolute (绝对定位) ； fixed (固定定位)
相对定位
position: relative; 相对于原来的位置，进行指定的偏移。相对定位的话，它任然在标准文档流中，原来的位置会被保留
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>相对定位</title>
<!-- 相对定位
相对于自己原来的位置进行偏移-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
}
#first{
border: 1px dashed #b27530;
background-color: #a13d30;
/* 相对定位 */
position: relative;
top: -20px; /* 向上移 */
left: 20px; /* 向右移 */
}
#second{
border: 1px dashed #255066;
background-color: #255066;
}
#third{
border: 1px dashed #1c6615;
background-color: #1c6699;
position: relative;
bottom: -10px; /* 向下移 */
right: 20px; /* 向左移 */
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
练习
- 使用 <div>和<a>布局页面
- 每个超链接宽度和高度都是100px，背景颜色是粉色，鼠标移上去时变为蓝色
- 使用相对定位改变每个超链接的位置
绝对定位
- 没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
- 在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
/* 父级元素 相对定位 */
position: relative;
}
#first{
border: 1px dashed #b27530;
background-color: #a13d30;
}
#second{
border: 1px dashed #255066;
background-color: #255066;
/* 绝对定位 */
position: absolute;
right: 30px;
top:-10px;
}
#third{
border: 1px dashed #1c6615;
background-color: #1c6699;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body{
height: 100px;
}
/* 绝对定位；相对于浏览器 */
div:nth-of-type(1){
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background: yellow;
/* 固定定位 */
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
8.2 z-index
调整元素定位时重叠层的上下位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>z-index</title>
<style>
#content{
width: 300px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid #000;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/* 父级元素相对定位 */
#content ul{
position: relative;
}
.tipText, .tipBg{
position: absolute;
width: 300px;
height: 25px;
top: 120px;
}
.tipText{
color: white;
/* 设置层级 数值大的在上面 */
z-index: 2;
}
.tipBg{
background-color: #000;
/* 设置背景透明度 值为0-1 值越小越透明*/
/* opacity: 0.5; */
}
</style>
</head>
<body>
<div id="content">
<ul>
<li><img src="images/hd.jpg" alt=""/></li>
<li class="tipText">html java mysql</li>
<li class="tipBg" ></li>
<li>2022-11-12</li>
<li>yyds_it_huo</li>
</ul>
</div>
</body>
</html>
九、CSS3制作网页动画
浏览器私有前缀
CSS3是CSS(层叠样式表)技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。
| 内核 | 前缀 | 浏览器 |
|---|---|---|
| Gecko内核 | -moz- | 火狐 |
| Webkit内核(谷歌) | -webkit- | chrom；360；世界之窗等 |
| Trident内核 | -ms- | IE |
| Presto内核 | -o- | opera |
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浏览器私有前缀</title>
<style>
div{
font-size: 100px;
-webkit-text-stroke: 1px #f00;
}
</style>
</head>
<body>
<div>哈哈哈</div>
</body>
</html>
在实际使用中通常将所有前缀写一遍后，标准的写在最后
9.1 CSS3变形
CSS3变形是一些效果的集合 如平移、旋转、缩放、倾斜效果
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化 。
Transform 2D的属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>transform 的使用</title>
<style>
#box1{
width: 200px;
height: 200px;
margin: 100px;
border: 1px solid blue;
background-color: aqua;
}
#box1:hover{
/* 水平和垂直方向移动函数：translate*/
/* 向右移动 */
/* transform: translate(30px); */
/* 向右下角移动 */
/* transform: translate(30px,30px); */
/* 向上移动 */
/* transform: translate(0px,-10px); */
/* 旋转函数：rotate */
/* 顺时针旋转20度 */
/* transform: rotate(20deg); */
/* 缩放函数：scale */
/* 值为1 大小不变 小于1 缩小 大于1 放大
支持两个参数 水平方向和垂直方向的缩放*/
/* transform: scale(0.5); */
/* 倾斜函数：skew */
/* transform: skew(40deg,30deg); */
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>
1645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
