整理之后的文档下载处：
https://gitee.com/huichi-chen/web-basic.git代码规范
1. 概述
欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范，
以下规范是团队基本约定的内容，必须严格遵循。
HTML规范
基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。
图片规范
了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。
CSS规范
统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。
命名规范
从 目录、图片、HTML/CSS文件、ClassName 的命名等层面约定规范团队的命名习惯，增强团队代码的可读性。
2. HTML 规范
DOCTYPE 声明
HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：
<!DOCTYPE html>
HTML5标准模版
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML5标准模版</title> </head> <body> </body> </html>
页面语言lang
推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值
<html lang="zh-CN">
更多地区语言参考：
zh-SG 中文 (简体, 新加坡) 对应 cmn-Hans-SG 普通话 (简体, 新加坡) zh-HK 中文 (繁体, 香港) 对应 cmn-Hant-HK 普通话 (繁体, 香港) zh-MO 中文 (繁体, 澳门) 对应 cmn-Hant-MO 普通话 (繁体, 澳门) zh-TW 中文 (繁体, 台湾) 对应 cmn-Hant-TW 普通话 (繁体, 台湾)
charset 字符集合
一般情况下统一使用 “UTF-8” 编码
<meta charset="UTF-8">
由于历史原因，有些业务可能会使用 “GBK” 编码
<meta charset="GBK">
请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。
书写风格
HTML代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐：
<div class="demo"></div>
不推荐：
<div class="DEMO"></div>
<DIV CLASS="DEMO"></DIV>
类型属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含
推荐：
<link rel="stylesheet" href="" > <script src=""></script>
不推荐：
<link rel="stylesheet" type="text/css" href="" > <script type="text/javascript" src="" ></script>
元素属性
-
元素属性值使用双引号语法
-
元素属性值可以写上的都写上
推荐：
<input type="text"> <input type="radio" name="name" checked="checked" >
不推荐：
<input type=text> <input type='text'> <input type="radio" name="name" checked >
特殊字符引用
文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。
在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
推荐：
<a href="#">more>></a>
不推荐：
<a href="#">more>></a>
代码缩进
统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
<div class="jdc"> <a href="#"></a> </div>
代码嵌套
元素嵌套规范，每个块状元素独立一行，内联元素可选
推荐：
<div> <h1></h1> <p></p> </div> <p><span></span><span></span></p>
不推荐：
<div> <h1></h1><p></p> </div> <p> <span></span> <span></span> </p>
段落元素与标题元素只能嵌套内联元素
推荐：
<h1><span></span></h1> <p><span></span><span></span></p>
不推荐：
<h1><div></div></h1> <p><div></div><div></div></p>
3. 图片规范
内容图
内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大
-
优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
-
尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
-
PC平台单张的图片的大小不应大于 200KB。
背景图
背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片
-
PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
-
图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
-
图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
-
图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
-
条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式
4. CSS规范
代码格式化
样式书写一般有两种：一种是紧凑格式 (Compact)
.jdc{ display: block;width: 50px;}
一种是展开格式（Expanded）
.jdc {
display: block;
width: 50px;
}
团队约定
统一使用展开格式书写样式
代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
/* 推荐 */
.jdc{
display:block;
}
/* 不推荐 */
.JDC{
DISPLAY:BLOCK;
}
选择器
-
尽量少用通用选择器
* -
不使用 ID 选择器
-
不使用无具体语义定义的标签选择器
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}
/* 不推荐 */
*{}
#jdc {}
.jdc div{}
代码缩进
统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
.jdc {
width: 100%;
height: 100%;
}
分号
每个属性声明末尾都要加分号；
.jdc {
width: 100%;
height: 100%;
}
代码易读性
左括号与类名之间一个空格，冒号与属性值之间一个空格
推荐：
.jdc {
width: 100%;
}
不推荐：
.jdc{
width:100%;
}
逗号分隔的取值，逗号之后一个空格
推荐：
.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
不推荐：
.jdc {
box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}
为单个css选择器或新申明开启新行
推荐：
.jdc,
.jdc_logo,
.jdc_hd {
color: #ff0;
}
.nav {
color: #fff;
}
不推荐：
.jdc,jdc_logo,.jdc_hd {
color: #ff0;
}.nav{
color: #fff;
}
颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0
推荐：
.jdc {
color: rgba(255,255,255,.5);
}
不推荐：
.jdc {
color: rgba( 255, 255, 255, 0.5 );
}
属性值十六进制数值能用简写的尽量用简写
推荐：
.jdc {
color: #fff;
}
不推荐：
.jdc {
color: #ffffff;
}
不要为 0 指明单位
推荐：
.jdc {
margin: 0 10px;
}
不推荐：
.jdc {
margin: 0px 10px;
}
属性值引号
css属性值需要用到引号时，统一使用单引号
/* 推荐 */
.jdc {
font-family: 'Hiragino Sans GB';
}
/* 不推荐 */
.jdc {
font-family: "Hiragino Sans GB";
}
属性书写顺序
建议遵循以下顺序：
-
布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
-
自身属性：width / height / margin / padding / border / background
-
-
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
-
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
命名规范
由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。
目录命名
-
项目文件夹：shoping
-
样式文件夹：css
-
脚本文件夹：js
-
样式类图片文件夹：img
-
产品类图片文件夹： upload
-
字体类文件夹： fonts
ClassName命名
ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接
.nav_top
常用命名推荐
注意：ad、banner、gg、guanggao 等有机会和广告挂勾的不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此
<div class="ad"></div>
这种广告的英文或拼音类名不应该出现
另外，敏感不和谐字眼也不应该出现，如：
<div class="fuck"></div> <div class="jer"></div> <div class="sm"></div> <div class="gcd"></div> <div class="ass"></div> <div class="KMT"></div> ...
| ClassName | 含义 |
|---|---|
| about | 关于 |
| account | 账户 |
| arrow | 箭头图标 |
| article | 文章 |
| aside | 边栏 |
| audio | 音频 |
| avatar | 头像 |
| bg,background | 背景 |
| bar | 栏（工具类） |
| branding | 品牌化 |
| crumb,breadcrumbs | 面包屑 |
| btn,button | 按钮 |
| caption | 标题，说明 |
| category | 分类 |
| chart | 图表 |
| clearfix | 清除浮动 |
| close | 关闭 |
| col,column | 列 |
| comment | 评论 |
| community | 社区 |
| container | 容器 |
| content | 内容 |
| copyright | 版权 |
| current | 当前态，选中态 |
| default | 默认 |
| description | 描述 |
| details | 细节 |
| disabled | 不可用 |
| entry | 文章，博文 |
| error | 错误 |
| even | 偶数，常用于多行列表或表格中 |
| fail | 失败（提示） |
| feature | 专题 |
| fewer | 收起 |
| field | 用于表单的输入区域 |
| figure | 图 |
| filter | 筛选 |
| first | 第一个，常用于列表中 |
| footer | 页脚 |
| forum | 论坛 |
| gallery | 画廊 |
| group | 模块，清除浮动 |
| header | 页头 |
| help | 帮助 |
| hide | 隐藏 |
| hightlight | 高亮 |
| home | 主页 |
| icon | 图标 |
| info,information | 信息 |
| last | 最后一个，常用于列表中 |
| links | 链接 |
| login | 登录 |
| logout | 退出 |
| logo | 标志 |
| main | 主体 |
| menu | 菜单 |
| meta | 作者、更新时间等信息栏，一般位于标题之下 |
| module | 模块 |
| more | 更多（展开） |
| msg,message | 消息 |
| nav,navigation | 导航 |
| next | 下一页 |
| nub | 小块 |
| odd | 奇数，常用于多行列表或表格中 |
| off | 鼠标离开 |
| on | 鼠标移过 |
| output | 输出 |
| pagination | 分页 |
| pop,popup | 弹窗 |
| preview | 预览 |
| previous | 上一页 |
| primary | 主要 |
| progress | 进度条 |
| promotion | 促销 |
| rcommd,recommendations | 推荐 |
| reg,register | 注册 |
| save | 保存 |
| search | 搜索 |
| secondary | 次要 |
| section | 区块 |
| selected | 已选 |
| share | 分享 |
| show | 显示 |
| sidebar | 边栏，侧栏 |
| slide | 幻灯片，图片切换 |
| sort | 排序 |
| sub | 次级的，子级的 |
| submit | 提交 |
| subscribe | 订阅 |
| subtitle | 副标题 |
| success | 成功（提示） |
| summary | 摘要 |
| tab | 标签页 |
| table | 表格 |
| txt,text | 文本 |
| thumbnail | 缩略图 |
| time | 时间 |
| tips | 提示 |
| title | 标题 |
| video | 视频 |
| wrap | 容器，包，一般用于最外层 |
| wrapper | 容器，包，一般用于最外层 |
常用模块类名命名
| 名称 | 说明 |
|---|---|
| 快捷导航栏 | shortcut |
| 头部 | header |
| 标志 | logo |
| 购物车 | shopcar |
| 搜索 | search |
| 热点词 | hotwords |
| 导航 | nav |
| 导航左侧 | dropdown 包含.dd .dt |
| 导航右侧 | navitems |
| 页面底部 | footer |
| 页面底部服务模块 | mod_service |
| 页面底部帮助模块 | mod_help |
| 页面底部版权模块 | mod_copyright |
网站TDK三大标签SEO优化
SEO（Search Engine Optimization) 汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
页面必须有三个标签用来符合SEO优化。
三大标签：title（标题）、description（网站说明）、keywords（关键字）
1. title网站标题
title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议：网站名（产品名）—网站的介绍（尽量不要超过30个汉字）
-
京东（JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
-
小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站
2. description网站说明
简要说明我们网站主要是做什么的。
我们提倡，description作为网站总体业务和主题概括，多采用“我们是...."、“我们提供...”、xxx网作为...“、”电话：010....“之类语句。
例如：
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，销售家电，数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验！"/>
3. keywords 关键字
keywords是页面关键词，是搜索引擎的关注点之一。
keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式。
例如：
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的SEO人员准备。
LOGO SEO 优化
-
logo里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
-
h1里面再放一个 链接 ，可以返回首页的，把logo的背景图片给链接即可
-
为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来
-
方法1：text-indent 移到盒子外面 （text-indent: -999px） ，然后 overflow: hidden； ，淘宝的做法
-
方法2：直接给 font-size：0； 就看不到文字了，京东的做法
-
-
最后给链接一个 title 属性，这样鼠标放到logo上就可以看到提示文字了
<div class="logo"> <h1><a href="index.html" title="品优购商城">品优购商城</a></h1> </div>
.logo {
position: absolute;
top: 25px;
width: 171px;
height: 61px;
}
.logo a {
display: block;
width: 171px;
height: 61px;
background: url(../images/logo.png) no-repeat;
/* font-size: 0; 京东的做法 */
/* 淘宝的做法 */
/* text-indent: -9999px;
overflow: hidden; */
color: transparent;
}
盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* box-shadow: 阴影水平位置 阴影垂直位置 模糊程度 阴影大小 */
/* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .5) inset; */
}
/* 原先没有影子，当我们鼠标经过盒子就添加阴影效果 */
div:hover {
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .5) inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
文字阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字阴影</title>
<style>
div {
font-size: 30px;
color: red;
font-weight: 700;
text-shadow: 5px 5px 6px rgba(0, 0, 0, .4)
}
</style>
</head>
<body>
<div>
你是阴影，我是火影
</div>
</body>
</html>
粘性定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性定位</title>
<style>
body {
height: 3000px;
}
.nav {
/* 粘性定位 */
position: sticky;
top: 0;
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="nav">我是导航栏</div>
</body>
</html>
前端笔记导读
-
HTML标签是由尖括号包围的关键字
-
HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签
-
有些特殊的标签必须是当标签（极少情况），列如<br />，我们称之为单标签（在下面的笔记中双标签我只写一个并且不会有尖括号，只有单标签的时候才会写尖括号）
软件开发架构
cs 客户端 服务端 bs 浏览器 服务端 ps：bs本质也是cs
浏览器窗口输入网址回车发生了几件事
-
浏览器朝服务端发送请求
-
服务端接受请求（eg：请求百度页面）
-
服务端返回相应的响应（eg：返回百度页面）
-
浏览器接收相应，根据特定的规则渲染页面然后展示给用户看
标签关系
-
包含关系
-
并列关系
<div> <p>grandpa</p> </div> <!-- 包含关系 --> <p>grandpa</p> <p>grandpa</p> <!-- 并列关系 -->
基本结构标签总结
<!-- html最大的标签，根标签 --> <html lang="en"> <!-- 文档的头部 --> <head> <!-- 网页标题 --> <title></title> </head> <!-- 主题内容，文档的主体，以后我们的网页内容基本都是放在body里面的 --> <body> </body> </html>
<!-- 文档类型的声明，作用就是告诉浏览器使用哪种HTML版本来显示网页，这个页面必须写在页面的开头，而且这个标签不是html标签，它就是文档类型的声明标签 --> <!DOCTYPE html> <!-- lang语言种类，en表示的是英语的意思，zn-CN定义语言为中文，但是对于文档的显示的时候定义成en的文档也可以显示中文，定义成zn-CN的文档也可以显示英文 --> <html lang="en"> <head> <!-- charset表示的是字符集的意思可以通过修改这个来指定网页的编码格式，如果没有定义字符集的话很容易出现乱码的情况 --> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签
HTML中的注释以"<!--"开头，以"-->"结束
在vs里面注释的快捷键为crtl+/
HTML中的特殊字符
在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
HTML常用标签
标题标签
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，即h1到h6
标签语义：作为标题使用，并且依次重要性递减
特点
-
加了标题的文字会变的加粗，字号也会依次变大
-
一个标题独占一行
| 标签名 | 语义 |
|---|---|
| h1 | 一级标题 |
| h2 | 二级标题 |
| h3 | 三级标题 |
| h4 | 四级标题 |
| h5 | 五级标题 |
| h6 | 六级标题 |
段落标签和换行标签
段落标签
在网页中，要把文字有条理显示出来，就需要将这些文字分段显示。在HTML标签中，p标签用于定义段落，它可以将整个网页分为若干个段落
特点
-
文本在一个段落中会根据浏览器窗口的大小自动换行
-
段落和段落之间保有空隙
换行标签
在HTML中，一个段落中的文字会从左到右一次排列，直到浏览器窗口的右端，然后才自动换行。如果希望其某段文本强制换行显示，就需要使用换行标签<br >
特点
-
只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
| 标签名 | 语义 |
|---|---|
| p | 段落 |
| <br \> | 换行 |
文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示
标签语义：突出重要性，比普通文字更重要，注意一般不写后面的简写，因为简写内容语义不明确
| 标签 | 语义 |
|---|---|
| strong或者b | 加粗 |
| em或者i | 倾斜 |
| del或者s | 删除线 |
| ins或者u | 下划线 |
div标签和span标签
div和span是没有语义的，它们就是一个盒子，用来装内容的
特点
-
div标签用来布局，但是现在一行只能放一个div
-
span标签用来布局，一行上可以多个span
| 标签名 | 语义 |
|---|---|
| div | 大盒子 |
| span | 小盒子 |
图像标签和路径
在HTML标签中，img标签用于定义html页面中的图像
src是img标签的必须属性，它用于指定图像的路径和文件名
所谓属性：简单理解就是属于这个图像标签的特性
| 标签 | 语义 |
|---|---|
| img | 图像 |
图像标签的属性设置
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
图像标签属性注意点
-
图像标签可以拥有多个属性，必须写在标签名的后面。
-
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
-
属性采取键值对的格式，即key=“value”的格式，属性=“属性值”
-
图像属性的src是必须写的
-
alt和title来说alt是在图片无法显示的时候出现的文字描述，而title是在图片能显示的时候鼠标放到图像之后才显示的文字
-
目标文件夹
就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等
-
根目录
打开目录文件夹的第一层就是根目录
路径
-
相对路径
以引用文件所在位置为参考基础，而建立出的目录路径（图片相对于html页面的位置）
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 如<img src="baidu.gig" /> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 如<img src="images/baidu.gif" /> |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级 如<img src="../baidu.gif" /> |
注意：
相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置
-
绝对路径
是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
超链接标签
在HTML标签中，a标签用于定义超链接，作用是从一个页面链接到另一个页面
-
链接的语法格式
-
链接的分类
| 标签 | 语义 |
|---|---|
| a | 超链接 |
链接的语法格式
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其实_self为默认值，_blank为在新窗口中打开方式 |
链接分为几大类
外部链接
<a src="http://www.4399.com">4399</a>
内部链接：网站内部网页之间的相互链接，直接链接内部页面名称即可
<a src="index.html">首页</a>
空链接：如果当时没有确定链接目标时，<a href="#">首页</a>
<a src="#">首页</a> <!-- 注意空链接不会跳转任何页面 -->
下载链接：地址链接的是文件.exe或者是zip等压缩包形式
<a src="img.zip">下载文件</a>
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
<a href="http://www.baidu.com"><img src="img.jpg" /></a><!-- 这个时候是通过图片来进入链接 -->
锚点链接：点我们点击链接，可以快速定位到页面中的某个位置
-
在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>
-
找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>
<!--- 在点击锚点链接的时候会直接跳转套对应的id位置 ---><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { height: 1000px; } </style></head><body> <a href="#two">第二集</a> <div></div> <h3 id="two">第二集介绍</h3></body></html>
表格标签
作用：
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
总结：
表格不是用来布局页面的，而是用来展示数据的
表格
| 标签 | 语义 | 作用 |
|---|---|---|
| table | 表格 | 用于定义表格的标签 |
| thead | 头部 | 用于将写表格的头部区域，添加代码的可读性，在使用的 时候tr是在这个标签里面的 |
| tbody | 主体 | 用于将写表格的主体区域，添加代码的可读性，在使用的 时候tr是在这个标签里面的 |
| tr | 一行 | 标签用于定义表格中的行，必须嵌套在table标签中 |
| th | 表头单元格 | 用于书写表格中的表头，通常放在第一行tr中，常用于表 格第一行，突出重要性，表头单元格里面的蚊子会加粗居中显示 |
| td | 数据单元格 | 用于书写表格中的数据，必须嵌套在tr标签中这个标签里 面是表格中书写表格数据的 |
表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或"" | 规定表格单元是否拥有边框，默认为""，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认为1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素或百分比 | 规定表格的宽度 |
单元格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| rowspan | 个数 | 跨行合并，根据属性值指定的个数向右合并指定的单元格数量 |
| colspan | 个数 | 跨列合并，根据属性值指定的个数向下合并指定的单元格数量 |
案例：
<table border="1" cellpadding="0" cellspacing="0" align="center"> <thead> <tr> <th>名字</th> <th>年龄</th> <th>性别</th> <th>国家</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>18</td> <td>男</td> <td rowspan="2">中国</td> </tr> <tr> <td>小红</td> <td>17</td> <td>女</td> </tr> <tr> <td>小方</td> <td colspan="3">保密</td> </tr> </tbody></table>
列表标签
作用：
表格是用来显示数据的，那么列表就是用来布局的
列表最大的特点就是整齐、整洁、有序，它作为布局会更加的自由方便
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表
无序列表
ul标签显示html页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用li标签定义
| 标签 | 语义 | 作用 |
|---|---|---|
| ul | 无序列表 | 用于定义有序列表的标签 |
| li | 单元格 | 用于填写数据，必须放在ul标签中 |
注意：
-
无须列表的各个列表项之间没有顺序级别之分，是并列的
-
ul中只能嵌套li，直接在ul标签中输入其他标签或者文字的做法是不被允许的
-
li相当于一个容器，可以容纳所有元素
-
无序列表会带有自己的样式数据，但在实际使用中时，我们会使用CSS来设置
有序列表
有序列表即为有排列顺序 的列表，其各个列表项会按照一定的顺序排列定义
在HTML标签中，ol标签用于定义有序列表，列表排序以数字来显示，并且使用li标签来定义列表项
| 标签 | 语义 | 作用 |
|---|---|---|
| ol | 有序列表 | 用于定义有序列表的标签 |
| li | 单元格 | 用于填写数据，必须放在ol标签中 |
注意和无序列表一样
自定义列表
在HTML标签中，dl标签用于定义描述列表（或定义列表），该标签会与dt（定义项目/名字）和dd（描述每一个项目/名字）一起使用
注意：
-
dl里面只能包含dt和dd
-
dt和dd个数没有限制，经常是一个dt对应多个dd
| 标签 | 语义 | 作用 |
|---|---|---|
| dl | 自定义列表 | 用于定义自定义序列表的标签 |
| dt | 单元格 | 用于填写无缩进数据，必须放在dl标签中 |
| dd | 单元格 | 用于填写有缩进数据，必须放在dl标签中 |
<dl> <dt>小明</dt> <dd>个人介绍。。。</dd> <dd>个人名言。。。</dd> <dt>小红</dt> <dd>个人介绍</dd> <dd>个人名言</dd></dl>
表单标签
使用表单目的是为了收集用户信息
在我们的网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单
表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成
表单域
表单域是一个包含表单元素的区域
在HTML标签中，form标签用于定义表单域，以实现用户信息的收集和传递
form会把它范围内的表单元素信息提交给服务器
| 标签 | 语义 | 作用 |
|---|---|---|
| form | 表单 | 定义表单域 |
表单的属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
input表单元素
在表单域中可以定义各种表单元素，这些表单元素就是运行用户在表单中输入或者选择的内容控件
input表单元素
表单元素<input />标签常用于收集用户信息
| 标签 | 语义 | 作用 |
|---|---|---|
| <input /> | 输入框 | 用来在表单中填写信息 |
input表单元素的属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | 在下面 | 用来选择input输入框输入的数据类型 |
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的默认值 |
| checked | checked | 规定此input元素首次加载时应该被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
| placeholder | 由用户自定义 | 规定在输入框中为空的时候出现的提示性文本 |
type属性值和描述
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和"浏览"按钮，提供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会清楚表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务端 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 |
label标签
label标签为input定义标注标签
label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
注意：label标签的for属性应当与相关元素的id属性相同
| 标签 | 语义 |
|---|---|
| label | 选中标签 |
label属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| for | 由用户自定义 | 用来对对应的元素进行匹配 |
案例：
<label for="sex"> <div style="width:200px;height:200px;background:red;"> <p> 你今天必死 </p> </div></label><input type="text" name="sex" id="sex" />
注意：
-
label标签是可以使用其他标签的，并且效果是没有变化的
select表单元素
在页面中国，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用select标签控件定义下拉列表
| 标签 | 语义 | 作用 |
|---|---|---|
| select | 下拉表 | 定义一个下拉框用来提供用户选择的 |
| option | 选项 | 书写给用户选择的数据 |
注意：
-
select中至少包含一对option
-
在option中定义selected="selected"时，当前项即为默认选中项
textarea表单元素
当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用textarea标签
在表单元素中，textarea标签是用于定义多行文本输入的控件
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论
| 标签 | 语义 | 描述 |
|---|---|---|
| textarea | 文本域 | 当文本内容比较多的情况下使用这个标签 |
textarea属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| cols | 由用户自定义 | 用来显示每行中的字符数 |
| rows | 由用户自定义 | 用来显示行数 |
注意：
-
我们一般都是使用css来改变textarea每行显示的字符串和数据的行数
css
HTML和css 的作用：
-
HTML主要做结构，显示网页元素内容
-
CSS美化HTML，布局网页
-
css最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离
传统网页布局的三种方式
网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)∶
-
普通流（标准流)
-
浮动
-
定位
注意:实际开发中，一个页面基本都包含了率三种布局方式（后面移动端学习新的布局方式）。
标准流（普通流/文档流）
所谓的标准流:就是标签按照规定好默认方式排列.
-
块级元素会独占一行，从上向下顺字排列。
-
常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
-
行内元素会按照顺序，从左到右顺字排列，碰到父元素边缘则自动换行。
-
常用元素: span、a、i、em等
css选择器
选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的
小结
-
找到所有的对应标签
-
设置这些标签的样式
选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器
-
基础选择器是由单个选择器组成的
-
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器
标签选择器
标签选择器（元素选择器）是指HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
| 格式 | 作用 |
|---|---|
| 标签名 | 修改这个文件中所有这个标签名的样式 |
作用
标签选择器可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签
优点
能快速为页面中同类型的标签统一设置样式
缺点
不能设计差异化样式，只能选择全部的当前标签
<head> <style> div { width: 100px; height: 100px; } </style></head><body> <div></div> <div></div></body>
类选择器
如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器
注意
结构里需要用class属性来调用class类的意思
| 格式/属性 | 属性值 | 描述 |
|---|---|---|
| .类名 | 用来改变一个或多个指定类名的样式 | |
| class | 由用户自定义 | 给你一个或多个标签添加类，这些类的类名可以重复使用 |
注意：
-
类选择器使用"."（英文点号）进行标识，后面紧跟类名
-
可以理解为给这个标签起了一个名字来表示
-
长名称或词组可以使用中横线来为选择器命名
-
不要使用纯数字、中文等命名，尽量使用英文字母来表示
<head> <style> .one { width: 100px; height: 100px; background:red; } .two{ width: 100px; height: 100px; background:blue; } </style></head><body> <div class="one"></div> <div class="one"></div> <div class="two"></div></body>
多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签，简单理解就是一个标签有多个名字
注意
-
在标签class属性中书写多个类名的时候不同类名中间必须用空格分开
-
这个标签可以分别具有这些类名的形式
-
当使用多个类的时候如果两个类设置了同一个属性，后面的类会覆盖前面的类，也就是说最后面的类会生效
<head> <style> .one { width: 100px; height: 100px; background:red; } .two{ width: 200px; background:blue; } </style></head><body> <div class="one two"></div></body>
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义
| 格式/属性 | 属性值 | 描述 |
|---|---|---|
| #id名 | 用来改变一个指定id名的样式 | |
| id | 由用户自定义 | 给标签添加一个id来调用对应id的样式 |
注意：
-
id在页面中时唯一的如果出现多个只有第一个会生效
通配符选择器
在css中，通配符选择器使用"*"定义，它表示选取页面中所有元素（标签）
-
通配符选择器不需要调用，自动就给所有的元素使用样式
-
特殊情况才使用
总结：
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p{color: red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .head{color: red;} |
| id选择器 | 一次只能选择1个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #head{dolor: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | *{color: red;} |
css字体属性
css Fonts（字体）属性用于定义字体系列、大小、粗细、和字体样式（如斜体）
css使用font-family属性定义文本的字体系列
| 属性 | 属性值 | 表示 |
|---|---|---|
| font-family | 系统指定（如：微软雅黑/Microsoft Yahei） | 字体类型 |
| font-size | 像素（谷歌浏览器默认为16像素） | 字体字号 |
| font-weight | 数字或者系统指定 | 字体粗细 |
| font-style | 系统指定 | 字体样式 |
| font | font: font-style font-weight font-size/line-height font-family; | 字体连写 |
font-weight属性值介绍
| 属性值 | 作用 |
|---|---|
| normal | 默认值（不加粗） |
| bold | 定义粗体（加粗的） |
| 100-900 | 400等同于normal，而700等同于blod 注意这个数字后面不跟单位 |
fontsize属性值介绍：
| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 浏览器会显示斜体的字体样式 |
注意：
-
font-family
-
各种字体之间必须使用英文状态下的逗号隔开
-
一般情况下，如果有空格隔开的多个单词组成的字体或者为中文字体，加引号
-
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
-
最常见的几个字体:'Microsoft Yahei,tahoma,arial,'Hiragino Sans GB'
-
案例：
*{ font-family:'Microsoft Yahei',Arial,'宋体';} -
-
font-size
-
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
-
font复合属性写法
字体属性可以把以上文字样式综合来写，这样可以更节约代码
body{ font: font-style font-weight font-size/line-height font-family;}
<head> <style> .one { font: italic 700 16px/1px '宋体','微软雅黑'; } </style></head><body> <div class="one">沙发沙发上</div></body>
注意：
-
使用font属性时，必须按上面语法格式张工的顺序书写，不能更换顺序，并且各个属性间以空格隔开
-
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则属性将不起作用
css文本属性
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 文本颜色 | 我们通常用十六进制表示，#ffffff，而且支持简介，#fff |
| text-align | 文本对齐 | 可以设定文字水平的对齐方式 |
| text-indent | 文本缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent:2em' |
| text-decoration | 文本修饰 | 添加下划线underline取消下划线none |
| line-height | 行高 | 控制行与行之间的距离 |
文本颜色
color属性用于定义文本的颜色
属性值
| 表示 | 属性值 |
|---|---|
| 预定义的颜色 | red，green，blue，black，pink颜色等等 |
| 十六进制 | #FF0000（简写为#F00），#FF6600（简写为#F60），#29D794 |
| RGB代码 | rgb(255,0,0)或者rgb(100%,0%,0%) |
| RGBA代码 | rgba(255,0,0,.1)或者rgba(255,255,255,0.3)，后面的a表示的 是颜色的透明度 |
对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
属性值
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
文本装饰器
text-decoration属性规定添加报文本的修饰，可以给文本添加下划线、删除线、上划线。
| 属性值 | 描述 |
|---|---|
| none | 默认，没有装饰线（最常用） |
| underline | 下划线，链接a标签自带下划线（常用） |
| overline | 上划线（几乎不用） |
| line-through | 删除线（不常用） |
文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是加段落的首行缩进
通过设置该属性，所有元素的第一行都可以首行缩进一个给定的长度，甚至该长度可以是负值
em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小进行缩进
行间距
line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
解释：一个文本框分为三部分，第一部分为框框到文字的空白部分那么这个部分叫做上间距，文字占用的空间叫做文本高度，文字下面的到下面的框框叫做下间距，而这个属性添加的就是上间距和下间距的大小，值为正添加上间距，值为负添加下间距
css引入方式
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 结构样式混写 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完成实现结构和样式相分离 | 需要引入 | 最多 | 控制多个页面 |
内部样式表
内部样式表（内嵌样式表）是写到HTML页面内部，是将所有的css代码抽取出来，单独放到一个style标签中
<head> <style> .one { font: italic 700 16px/1px '宋体','微软雅黑'; } </style></head><body> <div class="one">沙发沙发上</div></body>
-
style标签理论上可以放在HTML文档的任何地方，但一般会放在文档的head标签中
-
通过此种，可以方便控制当前整个页面中的元素样式设置
行内样式表
行内样式表（内联样式表）是在元素标签内部的style属性中设置CSS样式。适合于修改简单样式
<div style="color:red;width:100px;height:20px;background-color:blue;font-size:16px;"> 风水轮流转</div>
-
style其实就是标签的属性
-
在双引号中间，写法要符合CSS规范
-
可以控制当前的标签设置样式
-
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
外部样式表
实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到css文件中，之后把css文件导入到HTML页面中使用
| 标签 | 描述 |
|---|---|
| <link > | 用来导入外部css的 |
link标签的属性
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet“，表示被链接的文档是一个样式表文件 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径 |
引入外部样式表分为两步：
-
新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中
-
在HTML页面中，使用link标签引入这个文件
注意：
-
使用外部样式表设定css，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式
复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
-
复合选择器可以更准确、更高效的选择目标元素（标签)
-
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
-
常用的复合选择器包括︰后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。 语法︰
元素1元素2{样式声明}
上述语法表示选择元素1里面的所有元素2(后代元素)。例如∶
ul li {样式声明}/*选择ul里面所有的li标签元素*/
-
元素1和元素2中间用空格隔开
-
元素1是父级，元素2是子级，最终选择的是元素2
-
元素2可以是儿子，也可以是孙了等，只要是元素1的后代即可
-
元素1和元素2可以是任意基础选择器
子代选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
语法︰
元素1>元素2{样式声明}
上述语法表示选择元素1里面的所有直接后代(子元素)元素2。例如∶
div > p{样式声明}/*选择div 里面所有最近一级p标签元素*/
-
元素1和元素2中间用大于号隔开
-
元元素1是父级，元素2是子级，最终选择的是元素2
-
元素2必须是亲儿子，其孙子、重孙之类都不归他管.你也可以叫他亲儿子选择器
并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号(，)连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法:
元素1,元素2{ 样式声明}
上述语法表示选择元素1和元素2。
例如︰
ul, div{样式声明}/*选择ul和div标签元素*/
-
元素1和元素2中间用逗号隔开
-
逗号可以理解为和的意思
-
并集选择器通常用于集体声明
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示，比如:hover . :first-child 。
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格.nav a |
| 子代选择器 | 选择最近—级元素 | 只选亲儿子 | 较少 | 符号是大于.nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号.nav,.header |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{}和a:hover 实际开发的写法 |
| :focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较多 | input:focus记住这个写法 |
链接伪类选择器
a : link /* 选择所有未被访问的链接*/ a : visited /*选择所有已被访问的链接*/ a : hover /* 选择鼠标指针位于其上的链接*/ a : active /* 选择活动链接（鼠标按下未弹起的链接)*/
链接伪类选择器实际开发中的写法.链接伪类选择器注意事项
-
为了确保生效，请按HLVHA的循顺序声明:link - :visited - :hover - :active。
-
因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
链接伪类选择器实际工作开发中的写法︰
/* a是标签选择器所有的链接*/
a {
color: gray;
}
/* :hover是链接伪类选择器鼠标经过*/
a:hover {
color: red;/*鼠标经过的时候，由原来的灰色变成了红色*/
}
focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况input类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input:focus {
background-color: yellow ;
}
css显示模式
作用:网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如div自己占一行，比如一行可以放多个span。
HTML元素一般分为块元素和行内元素两种类型。
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点︰
-
比较霸道，自己独占一行。
-
高度，宽度、外边距以及内边距都可以控制。
-
宽度默认是容器（父级宽度)的100%。
-
是一个容器及盒子，里面可以放行内或者块级元素。
注意：
-
文字类的元素内不能使用块级元素
-
p标签主要用于存放文字，因此p里面不能放块级元素，特别是不能放div
-
同理，h1~h6等都是文字类块级标签，里面也不能放其他块级元素
行内元素
常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等，其中span标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点︰
-
相邻行内元素在一行上，一行可以显示多个。
-
高、宽直接设置是无效的。
-
默认宽度就是它本身内容的宽度。
-
行内元素只能容纳文本或其他行内元素。
注意：
-
链接里面不能再放链接
-
特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全
行内块元素
在行内元素中有几个特殊的标签——img、input 、td，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点:
-
和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
-
默认宽度就是它本身内容的宽度（行内元素特点)。
-
高度，行高、外边距以及内边距都可以控制(块级元素特点)。
元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解:一个模式的元素需要另外一种模式的特性比如想要增加链接a的触发范围。
-
转换为块元素:display:block;
-
转换为行内元素:display.inline;
-
转换为行内块:display: inline-block;
css背景
通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position分别是x和y坐标 |
| background-attachment | 背景附着 | scroll(背景滚动)/fixed(背景固定) |
| 背景简写 | 书写更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; |
| 背景色半透明 | 背景颜色半透明 | background: rgba(0,0,0,0.3); 后面必须是4个值 |
背景颜色
background-color属性定义了元素的背景颜色。
background-color:颜色值;
一般情况下元素背景颜色默认值是transparent(透明），我们也可以手动指定背景颜色为透明色
背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)
background-image:none | url (url)
| 参数值 | 作用 |
|---|---|
| none | 无背景图(默认的) |
| url | 使用绝对或相对地址指定背景图像 |
背景平铺
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。
background-repeat: repeat | no-repeat | repeat-x | repeat-y
| 参数值 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺(默认的) |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
背景图片位置
利用background-position属性可以改变图片在背景中的位置。
background-position: x y;
参数代表的意思是:x坐标和y坐标。可以使用方位名词或者精确单位
| 参数值 | 说明 |
|---|---|
| length | 百分数|由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
-
参数是方位名词
-
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
-
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
-
参数是精确单位
-
如果参数值是精确坐标，那么第一个肯定是×坐标，第二个一定是y坐标
-
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
-
参数是混合单位
-
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是×坐标，第二个值是y坐标
背景图像图像（背景附着）
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment后期可以制作视差滚动的效果。
background-attachment:scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量.当使用简写属性时，没有特定的书写顺序,一般习惯约定顺
序为:
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
这是实际开发中，我们更提倡的写法。
背景色线性渐变
语法1：
background: linear-gradient(起始方向,颜色1,颜色2,...) background: -webkit-linear-gradient(left,red,blue) background: -webkit-linear-gradient(left top,red,blue)
背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词 或者 度数， 如果省略默认就是top
css三大特性
层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则:
-
样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
-
样式不冲突，不会层叠
继承性
现实中的继承:我们继承了父亲的姓
CSS中的继承:子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是︰子承父业。
-
恰当地使用继承可以简化代码，降低CSS样式的复杂性
-
子元素可以继承父元素的样式( text-, font-，line-这些元素开头的可以继承，以及color属性)
行高的继承
body {
font:12px/1.5 Microsoft YaHei;
}
-
行高可以跟单位也可以不跟单位
-
如果子元素没有设置行高，则会继承父元素的行高为1.5
-
此时子元素的行高是:当前子元素的文字大小* 1.5
-
body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
优先级
当同一个元素指定多个选择器，就会有优先级的产生。
-
选择器相同，则执行层叠性
-
选择器不同，则根据选择器权重执行
选择器权重如下表所示。
| 选择器 | 选择器权重 |
|---|---|
| 继承或者* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式style="" | 1,0,0,0 |
| !important重要的 | =无穷大 |
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: #0f0!important;
background-color: black;
height: 100px!important;
}
.one {
width: 120px;
height: 100px;
color: #f00;
background-color: black;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="one">我真的是无语了</div>
</body>
优先级注意点:
-
权重是有4组数字组成,但是不会有进位。
-
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推
-
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
-
可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10, id选择器100,行内样式表为1000,!important无穷大.
-
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
权重叠加
权重叠加∶如果是复合选择器，则会有权重叠加，需要计算权重。
-
div ul li ------> 0,0,0,3
-
.nav ul li ------> 0,0,1,2
-
a:hover ------> 0,0,1,1
-
.nav a ------> 0,0,1,1
盒子模型
网页布局过程:
-
先准备好相关的网页元素，网页元素基本都是盒子Box。
-
利用CSS设置好盒子样式，然后摆放到相应位置。
-
往盒子里面装内容.
网面布局的核心本质:就是用CSS摆盒子
所谓盒子模型︰就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括:边框、外边距、内边距、和实际内容
边框（border）
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)边框样式边框颜色语法;
border:border-width || border-style || border-color
| 属性 | 属性 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
边框的复合写法
CSS边框属性允许你指定一个元素边框的样式和颜色。
边框简写:
border:1px solid red;没有顺序
边框分开写法:
border-top: 1px solid red; /*只设定上边框,其余同理*/
表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法︰
border-collapse:collapse;
-
collapse单词是合并的意思
-
border-collapse: collapse;表示相邻边框合并在一起
边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
-
测量盒子大小的时候,不量边框
-
如果测量的时候包含了边框,则需要width/height减去边框宽度
内边距
padding属性用于设置内边距，即边框与内容之间的距离。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
padding属性简写
| 值的个数 | 表达意思 |
|---|---|
| padding: 5px; | 1个值，代表上下左右都有5像素内边距; |
| padding: 5px10px; | 2个值，代表上下内边距是5像素 左右内边距是10像素; |
| padding: 5px 10px 20px; | 3个值，代表上内边距5像素 左右内边距10像素 下内边距20像素; |
| padding: 5px 10px 20px 30px; | 4个值，上是5像素 右10像素 下20像素 左是30像素顺时针 |
特性：
当我们给盒子指定padding值之后，发生了2件事情:
-
内容和边框有了距离，添加了内边距。
-
padding影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
解决方案∶
如果保证盒子跟效果图大小保持一致，则让width/height 减去多出来的内边距大小即可。
或者使用box-sizing:border-box;属性
外边距
margin属性用于设置外边距，即控制盒子和盒子之间的距离。
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin简写方式代表的意义跟padding完全一致。
外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件:
-
盒子必须指定了宽度( width ) .
-
盒子左右的外边距都设置为auto 。
.header{ width: 960px; margin: 0 auto;}
常见的写法，以下三种都可以:
-
margin-left: auto;margin-right auto;
-
margin: auto;
-
margin: 0 auto;
注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与 margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
解决方案∶
尽量只给一个盒子添加margin值。
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案:
-
可以为父元素定义上边框。
-
可以为父元素定义上内边距。
-
可以为父元素添加overflow:hidden。
-
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
* {
padding:0;/*清除内边距*/
margin: 0;/*清除外边距*/
}
注意:行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
css3新增
背景色半透明
css3为我们提供了背景颜色半透明的效果。
background:rgba(0,0,0,0.3);
-
最后一个参数是alpha透明度，取值范围在0~1之间
-
我们习惯把0.3的0省略掉，写为background: rgba(0,0,0,.3);
-
注意:背景半透明是指盒子背景半透明，盒子里面的内容不受影响
-
CSS3新增属性，是IE9+版本浏览器才支持的
-
但是现在实际开发,我们不太关注兼容性写法了,可以放心使用
圆角边框
在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。
语法︰
border-radius : length;
radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果
注意
-
参数值可以为数值或百分比的形式
-
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
-
如果是个矩形,设置为高度的一半就可以做
-
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
-
分开写: border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius
盒子阴影
CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。
语法︰
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅CSS颜色值。 |
| inset | 可选。将外部阴影(outset)改为内部阴影。 |
注意:
-
默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
-
盒子阴影不占用空间,不会影响其他盒子排列。
文字阴影
在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。
语法︰
text-shadow : h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
浮动
页面有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式.
浮动最典型的应用:可以让多个块级元素一行内排列显示。
网页布局第一准则︰多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法︰
选择器{ float:属性值;}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动特性
脱标：
-
脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
-
浮动的盒子不在保留原先的位置
浮动元素一行显示：
-
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
浮动元素会具有行内块元素特性：
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
-
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
-
浮动的盒子中间没有缝隙的，是紧挨着一起的
-
行内元素同理
小结：
为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
浮动的两个注意点
-
浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
-
一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
清除浮动的本质
-
清除浮动的本质是清除浮动元素造成的影响
-
如果父盒子本身有高度，则不需要清除浮动
-
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
语法：
选择器{clear:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
清除浮动的策略是：闭合浮动
清除浮动的方法
| 清除浮动的方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法（隔离法） | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义正确 | 由于IE6-7不支持:after，兼容性问题 |
| 父类双伪元素 | 结构语义正确 | 由于IE6-7不支持:after，兼容性问题 |
额外标签法
额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear:both;"></div>，或者其他标签（如<br />等）
-
优点：通俗易懂，书写方便
-
缺点：添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素
给父级添加overflow
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。
-
优点：代码简洁
-
缺点：无法显示溢出的部分
:after伪元素法
:atter方式是额外标签法的升级版。也是给父元素添加
添加的内容如下：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{ /* IE6/7专有 */
*zoom: 1;
}
-
优点：没有增加标签，结构更简单
-
缺点：照顾低版本浏览器
双伪元素清除浮动
也是给父元素添加
添加内容如下：
.clearfix:before,.clearfix:after {
content: "";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}
-
优点：代码更简洁
-
缺点：照顾低版本浏览器
css属性书写顺序
建议遵循以下顺序：
-
布局定位属性：display/position/float/clear/visivility/overflow（建议display第一个写，因为关系到模式）
-
自身属性：width/height/margin/padding/border/background
-
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
-
其他属性（CSS3）：content/cusor/border-radius/box-shadow/background:linear-gradient...
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #333;
background: rgba(0, 0, 0, .5);
border-radius: 10px;
}
定位
-
浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
-
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| static静态定位 | 否（占有位置） | 不能使用边偏移 | 很少 |
| relative相对定位 | 是（不占有位置） | 相对于自身位置移动 | 常用 |
| absolute绝对定位 | 是（不占有位置） | 带有定位的父级 | 常用 |
| fixed固定定位 | 是（不占有位置） | 浏览器可视区 | 常用 |
| sticky粘性定位 | 否（占有位置） | 浏览器可视区 | 比较少 |
静态定位static（了解）
静态定位是元素的默认定位方式，无定位的意思
语法：
选择器 {position: static; }
-
静态定位按照标准特性摆放位置，它没有位移
-
静态定位在布局时很少用到
相对定位relative
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
语法：
选择器 {position: relative; }
相对定位的特点：（务必记住）
-
它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
-
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。
绝对定位absolute
绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的（拼爹型）
语法：
选择器 {position: absolute; }
绝对定位的特点：（务必记住）
-
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
-
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素位参考点移动位置
-
绝对定位不在占有原先的位置。（脱标）
子绝父相
意思是：子级是绝对定位的话，父级要用相对定位
-
子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
-
父盒子需要加定位限制子盒子在父盒子内显示
-
父盒子布局时，需要占有位置，因此父亲只能是相对定位
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中
-
left：50%;：让盒子的左侧移动到父级元素的水平中心位置
-
margin-left:-100px;：让盒子向左移动自身宽度的一半
固定定位fixed
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
语法：
选择器 {position: fixed; }
固定定位的特点：
-
以浏览器的可视窗口为参照点移动元素
-
跟父元素没有任何关系
-
不随滚动条滚动
-
固定定位不在占有原先的位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位
粘性定位sticky
粘性定位可以被认为是相对定位和固定定位的混合。
语法：
选择器 {position: sticky; top: 10px; }
粘性定位的特点：
-
以浏览器的可视窗口为参照点移动元素（固定定位的特点）
-
粘性定位占有原先的位置（相对定位特点）
-
必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差，IE不支持
定位叠放次序z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）
语法：
选择器 { z-index: 1; }
-
数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上
-
如果属性值相同，则按照书写顺序，后来居上
-
数字后面不能加单位
-
只有定位的盒子才有z-index属性
定位特殊特性
绝对定位、固定定位和浮动的相同点
-
行内元素添加聚堆或者固定定位，可以直接设置高度和宽度
-
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
-
浮动元素。绝对定位（固定定位）元素都不会触发外边距合并的问题
绝对定位、固定定位和浮动的不同点
-
绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位）会压住下面标准流所有的内容
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
元素的显示和隐藏
display属性
格式：
选择器 {display: none; }
display属性用于设置一个元素应如何显示
-
display:none; 隐藏对象
-
display:block; 除了装换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不在占有原来的位置
后面应用及其广泛，搭配js可以做很多的网页特效
visibility可见性
格式：
选择器 {visibility: visible; }
visibility属性用于指定一个元素应可见还是隐藏
-
visibility:visible; 元素可视
-
visibility:hidden; 元素隐藏
visibility隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来位置，就用visibility:hidden
如果隐藏元素不想要原来位置,就用display:none（用处更多重点）
overflow溢出隐藏
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会将超出部分内容进行一下属性值操作
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
但是如果有定位的盒子，请慎用overflow:hidden因为它会隐藏多余的部分
css简单的技术
精灵图
一个网页中往往会应用很多小的背景图作为修饰，当页面中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这大大降低页面的加载速度
因此，为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现了css精灵技术（也称CSS Sprites、CSS 雪碧）。核心原理：将页面中一些小背景图片整合到一张大图，这样服务器只需要一次请求就可以了
使用精灵图核心：
-
精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图中
-
这个大图也称为sprites精灵图或者雪碧图
-
移动背景图片位置，此时可以使用background-position
-
移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
-
因为一般情况下都是往上往左移动，所以数值是负值
-
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
使用精灵图核心总结
-
精灵图主要针对于晓得背景图片使用
-
主要借助于背景位置来实现---background-position
-
一般情况下精灵图都是负值。（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理。）
字体图标
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标
精灵图是有诸多优点的，但是缺点很明显
-
图片文件还是比较大的
-
图片本身放大和缩小会失真
-
一旦图片制作完毕想要更换非常复杂
此时，有一种技术的出现很好的解决以上的问题，就是字体图标iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体
-
轻量级：一个图标文字要比一系列的图像更小。一旦字体加载了，图标就会马上渲染，减少了服务器请求
-
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
-
兼容性：几乎支持所有的浏览器，请放心使用
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化
总结：
-
如果遇到一些结构和样式比较简单的小图标，就用字体图标
-
如果遇到一些结构和杨思复杂一点的小图片，就用精灵图
字体的使用步骤
-
字体图标的下载
-
字体图标的引入（引入到我们的HTML页面中）
-
字体图标的追加（以后添加新的小图标）
字体图标的下载
推荐下载网站
-
icomoon字库Icon Font & SVG Icon Sets ❍ IcoMoon
优点：字库内容种类繁多，非常全面，缺点：国外服务器，打开网速比较慢
-
阿里iconfont字库iconfont-阿里巴巴矢量图标库
优点：免费，而且是国内网站
字体图标的引入
下载完毕之后，里面的源文件不要删除，后面会使用到
-
把下载包可能的fonts文件夹放入页面根目录下
不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件
-
TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+;
-
Web Open Font Format(.woff)格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;
-
Embedded Open Type(.eot)格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+;
-
SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;
在css样式中全局声明字体：简单理解把这些字体文件通过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') fromat('truetype'),
url('fonts/icomoon.woff?7kkyc2') fromat('woff'),
url('fonts/icomoon.svg?7kkyc2#icommon') fromat('svg');
font-weight: normal;
font-style: normal;
}
字体图标的追加
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的selection.json重新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可
css三角做法
.box1 {
width: 0;
height 0;
border-top:10px solid black;
border-right:10px solid red;
border-bottom:10px solid blue;
border-left:10px solid green;
}
.box2 {
width:0;
height:0;
border:10px solid transparent;
border-top-color:red;
}
兼容一些低版本浏览器写法：
.box2 {
width:0;
height:0;
line-height:0;
font-size:0;
border:10px solid transparent;
border-top-color:red;
}
CSS用户界面样式
什么是界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
-
更改用户的鼠标样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户界面样式-鼠标样式</title> </head> <body> <ul> <li style="cursor:default;">我是默认的小白鼠标样式</li> <li style="cursor:pointer;">我是鼠标小手样式</li> <li style="cursor:move;">我是鼠标移动样式</li> <li style="cursor:text;">我是鼠标文本样式</li> <li style="cursor:not-allowed">我是鼠标禁止样式</li> </ul> </body> </html>
-
表单轮廓
-
防止表单域拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户界面样式-表单轮廓和防止拖拽文本域</title> <style> inpu, textarea { /* 取消表单轮廓 */ outline: none; } textarea { /* 防止拖拽文本域 */ resize: none; } </style> </head> <body> <!-- 1.取消表单轮廓 --> <input type="text"> <!-- 2.防止拖拽文本域 --> <textarea name="" id="" cols="30" rows="10"></textarea> </body> </html>
4.1 鼠标样式 cursor
li {
cursor:pointer;
}
4.2 轮廓线 outline
input {
outline:none;或者
input{outline:0;
}
4.3 防止拖拽文本域 resize
实际开发中，我们文本域右下角是不可以拖拽的。
textarea {
resize:none;
}
5. vertical-align-属性应用
css的 vertical-align属性使用场景：经常用于设置图片表单（行内块元素）和文字垂直对齐 官方解释：用于设置一个元素的 垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align：**baseline**|top|middle|bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用vertical-align实现图片文字垂直居中对齐</title>
<style>
img {
/* vertical-align: bottom; */
/* 让图片和文字垂直居中 */
vertical-align: middle;
/* vertical-align: top; */
}
</style>
</head>
<body>
<img src="../images/book.jpg" alt=""> 琴棋书画样样精通
</body>
</html>
图片底侧空白缝隙解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片底侧空白缝隙解决方案</title>
<style>
div {
border: 2px solid red;
}
img {
/* vertical-align: middle; */
display: block;
}
</style>
</head>
<body>
<div>
<img src="../../images/5.jpg" alt="没错你就是卡了">
</div>
</body>
</html>
margin负值的巧妙运用
-
让每个盒子margin往左移动-1px 正好压住相邻盒子边框
-
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>margin负值的巧妙运用</title> <style> * { margin: 0; padding: 0; } ul li { /* position: relative; */ float: left; width: 150px; height: 200px; border: 1px solid red; list-style: none; margin-left: -1px; } ul li:hover { /* 1.如果盒子没有定位，则鼠标经过添加相对定位即可 */ position: relative; border: 1px solid blue; } /* ul li:hover { 如果li都有定位 则利用 z-index提高层级 z-index: 1; border: 1px solid blue; } */ </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
行内块元素的巧妙运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内块元素的巧妙运用</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 30px;
height: 30px;
font-size: 14px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-decoration: none;
text-align: center;
line-height: 30px;
}
.box .prev,
.box .next {
width: 80px;
color: #000;
}
.box .current,
.box .elp {
border: none;
background-color: #fff;
}
.box input {
width: 50px;
height: 30px;
border: 1px solid #ccc;
outline: none;
}
.box button {
width: 34px;
height: 30px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="">1</a>
<a href="" class="current">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="" class="elp">...</a>
<a href="" class="next">>>下一页</a> 到第 <input type="text">页
<button>确定</button>
</div>
</body>
</html>
CSS初始化
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉 li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 这个按钮的时候,鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* \5B8B\4F53 就是宋体的意思 这样浏览器的兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
/* 字体大小12px 1.5倍行高 */
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
/* 隐藏元素 */
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
.clearfix:before,
.clearfix::after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
1.单行文本溢出显示省略号--必须满足三个条件
-
先强制一行内显示文本
white-space:nowrap; (默认 normal 自动换行）
2.超出的部分隐藏
overflow:hidden;
3.文字用省略号代替超出的部分
text-overflow:ellipais;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 160px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* normal这个单词的意思是如果文字显示不开 自动换行 */
/* white-space: normal; */
/* 1.这个单词的意思是如果文字显示不开 也必须强制一行内显示 */
white-space: nowrap;
/* 2. 溢出的部分隐藏起来 */
overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
啥也不说，此处省略一万字
</div>
</body>
</html>
2. 多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）
-
overflow:hidden;
-
text-overflow:ellipsis;
-
/弹性伸缩盒子模型显示/
-
display: -webkit-box;
-
限制在一个块元素的文本的行数
-
-webkit-line-clamp:2;
-
/*设置或检索伸缩盒对象的子元素的排列方式 */
-
-webkit-box-orient:vertical;
-
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行文本溢出显示省略号</title>
<style>
div {
width: 160px;
height: 42px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 显示省略符号来代表被修剪的文本。*/
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
啥都不用说，此处省略一万字;啥都不用说，此处省略一万字。
</div>
</body>
</html>
1.HTML5的新特性
1.1HTML5的新增语义化标签
-
<header>:头部标签
-
<nav>:导航标签
-
<article>:内容标签
-
<section>:定义文档某个区域
-
<footer>:尾部区域
-
<aside>:侧边栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5新增语义化标签</title> <style> header, nav { width: 800px; height: 120px; background-color: pink; border-radius: 15px; margin: 15px auto; text-align: center; line-height: 120px; } section { width: 500px; height: 300px; background-color: skyblue; text-align: center; line-height: 300px; } </style> </head> <body> <header>头部标签</header> <nav>导航栏标签</nav> <section>某个区域</section> </body> </html>
1.2HTML5新增的多媒体标签
1.音频:<audio>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5新增音频标签</title>
</head>
<body>
<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>
</body>
</html>
2.视频:<video>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5新增标签</title>
</head>
<body>
<!-- controls播放控件 autoplay自动播放 muted静音播放 loop是否循环播放 poster加载等待的画面图片-->
<video width="320px" height="240px" controls muted="muted" loop="loop" poster="../../media/mi10.jpg" >
<source src="../../media/mi.mp4" type="video/mp4">
<source src="">
您的浏览器不支持 video 标签
</video>
</body>
</html>
3.多媒体标签总结
-
音频标签和视频标签使用方式基本一致
-
浏览器支持情况不同
-
谷歌浏览器把音频和视频自动播放禁止了
-
我们给视频标签添加muted属性来静音播放视屏，音频不可以（可以通过JavaScript解决）
-
视频标签是重点，我们经常设置自动播放，不适用controls控件，循环和设置大小属性
1.3 HTML5新增的input类型
| 属性值 | 说明 |
|---|---|
| type="email" | 限制用户输入必须为Email类型 |
| type="url" | 限制用户输入必须为URL类型 |
| type="date" | 限制用户输入必须为日期类型 |
| type="time" | 限制用户输入必须为时间类型 |
| type="month" | 限制用户输入必须为月类型 |
| type="week" | 限制用户输入必须为周期类型 |
| type="number" | 限制用户输入必须为数字类型 |
| type="tel" | 手机号码 |
| type="search" | 搜索框 |
| type="color" | 生成一个颜色选择表单 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5新增input表单</title>
<style>
* {
margin:0;
padding:0;
}
body {
text-align: center;
}
li {
list-style:none;
}
input {
width: 600px;
height: 40px;
outline:none;
line-height: 40px;
}
ul li .btn {
background-color: skyblue;
border-radius:10px;
}
</style>
</head>
<body>
<!-- 我们验证的时候必须添加form表单域 -->
<form action="">
<ul>
<li>邮箱:<input type="email"></li>
<li>网址:<input type="url"></li>
<li>日期:<input type="date"></li>
<li>时间:<input type="time"></li>
<li>数量:<input type="number"></li>
<li>手机号码:<input type="tel"></li>
<li>搜索:<input type="search" value=""></li>
<li>颜色:<input type="color"></li>
<!-- 当我们点击提交按钮就可以验证表单了 -->
<li><input type="submit" value="提交" class="btn"></li>
</ul>
</form>
</body>
</html>
HTML5新增的表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开，如autocomplete="on",关闭autocomplete="off" 需要放在表单内，同时加上name属性，同时成功提交 |
| multiple | multiple | 可以多选文件提交 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5新增表单属性</title>
<style>
input {
outline: none;
}
input::placeholder {
color:gray;
}
</style>
</head>
<body>
<form action="">
<input type="search" name="sear" id="" required="required" placeholder="沙雕" autofocus="autofocus"
autocomplete="off">
<input type="file" name="" id="" multiple="multiple">
<button type="submit">提交</button>
</form>
</body>
</html>
图片模糊处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片模糊处理</title>
<style>
img {
width: 400px;
height: 400px;
filter:blur(20px)
}
img:hover {
filter:blur(0)
}
</style>
</head>
<body>
<img src="images/naicha.jpg" alt="">
</body>
</html>
2.CSS3的新特性
2.1 CSS3的现状
-
新增的CSS3特性有兼容性问题，ie9+才支持
-
移动端支持优于PC端
-
不断改进中
-
应用相对广泛
-
现阶段学习: 新增选择器和 盒子模型以及 其他特性
2.2 属性选择器
属性选择器可以根据元素特定的属性来选择元素。这样就可以不用借助于类或者id选择器。
| 选择符 | 简介 |
|---|---|
| E[arr] | 选择具有att属性的E元素 |
| E[arr="val"] | 选择具有att属性且属性值等于val的E元素 |
| E[arr^="val"] | 匹配具有att属性且值以val开头的E元素 |
| E[arr$="val"] | 匹配具有att属性且值以val结尾的E元素 |
| E[arr*="val"] | 匹配具有att属性且值中含有val的E元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3新增属性选择器</title>
<style>
/* 必须是input 但是同时具有placeholder这个属性 选择这个元素 [] */
input[placeholder] {
color:pink;
outline: none;
}
/* 只选择type=text 的input */
input[type=text] {
color:pink;
}
/* 选择首先是div 然后具有class属性 并且属性值必须是icon开头的这些元素 */
div[class^=icon] {
color:red;
}
section[class$=date] {
color: blue;
}
</style>
</head>
<body>
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- <input type="text" placeholder="请输入用户名">
<input type="text"> -->
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的-->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4. 属性选择器可以选择属性值结尾的某些元素-->
<section class="icon1-date">我是安其拉</section>
<section class="icon2-date">我是哥斯拉</section>
<section class="icon3-ico">那我是谁</section>
</body>
</html>
2.3结构伪类选择器
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:fitst-of-type | 指定类型E的第一个 |
| E:last-type | 指定类型E的最后一个 |
| E:nth-of-type | 指定类型E的第n个 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3新增属性选择器-nth-child</title>
<style>
/* nth-child(2n)选择了所有偶数孩子 等价于even */
ol li:nth-child(2n) {
background-color:pink
}
ol li:nth-child(2n+1) {
background-color: skyblue;
}
</style>
</head>
<body>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3新增nth-of-type属性选择器</title>
<style>
ul li:first-of-type {
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
ul li:nth-of-type(even) {
background-color: skyblue;
}
/* nth-child 会把所有的孩子都排列序号 */
/* 执行的时候先看 :nth-child(1) 之后回去看 前面div */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 会把指定元素的孩子排列序号 */
/* 执行的时候先看 div指定的元素 之后回去看 nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1) {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
<!-- 区别 -->
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
</html>
小结
-
结构伪类选择器一般用于选择父级里面的第几个孩子
-
nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
-
nth-of-type 对父元素里面指定的子元素进行排序选择。先去匹配E然后再根据E找到第n个孩子
-
关于nth-child(n)我们要知道n是从0开始计算的，要记住常用的公式
-
如果是无序列表，我们肯定用nth-child更多
-
类选择器、属性选择器、伪类选择器，权重为10
2.4伪元素选择器（重点）
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意:
-
before和after创建一个元素，但是属于行内元素
-
新创建的这个元素在文档树中是找不到的，所以我们称为 伪元素
-
语法:
element::before{} -
before和after必须有 content属性
-
before在父元素内容的前面创建元素，after在父元素的后面插入元素
-
伪类选择器和标签选择器一样，权重为1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::before权重是2 */
div::before {
/* 这个content是必须写的 */
content:'我';
}
div::after {
content:'东京喰种'
}
</style>
</head>
<body>
<div>
是
</div>
</body>
</html>
伪元素选择器使用场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素使用场景-字体图标</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?es40wg');
src: url('fonts/icomoon.eot?es40wg#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?es40wg') format('truetype'), url('fonts/icomoon.woff?es40wg') format('woff'), url('fonts/icomoon.svg?es40wg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid #000;
}
div::after {
position: absolute;
top:12px;
right:10px;
font-family: 'icomoon';
content: "\e927";
font-size:14px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
仿土豆网显示隐藏遮罩案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿土豆网显示隐藏遮罩案例</title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::before {
/* 隐藏遮罩层 */
content:'';
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(../../素材/html_css_material/第八天/images/arr.png) no-repeat center;
}
/* 当我们鼠标经过了 土豆这个盒子，就让里面遮罩层显示出来 */
.tudou:hover::before {
/* 而是显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="../../素材/html_css_material/第八天/images/tudou.jpg" alt="">
</div>
</body>
</html>
2.7 CSS3过渡（重点）
过渡（transition）动画:是从一个状态 渐渐的过渡到另一个状态
经常和：hover一起搭配使用
语法： transition:要过渡的属性 花费时间 运动曲线 何时开始;
1.属性:想要变化的css属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以了
2.花费时间:单位是秒（必须写单位） 比如0.5s
3.运动曲线:默认是ease（可以忽略）
4.何时开始:单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以忽略）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3过渡效果（重点）</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 变化的属性 花费时间 运动曲线 何时开始; */
/* 如果想要写多个属性利用逗号进行分隔 */
/* 谁做过渡 给谁加 */
transition: all .5s;
/* border-radius: 0 100px 100px 0 ; */
}
div:hover {
width: 800px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3宽度calc函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3宽度calc函数</title>
<style>
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
width: calc(100% - 30px);
height: 30px;
background-color: blue;
margin:0 auto;
}
</style>
</head>
<body>
<!-- 需求我们的子盒子宽度永远比父盒子小30px -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
4. 2D转换
转换（transform）是CSS中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
转换（transform）你可以简单理解为变形
-
移动: translate
-
旋转: rotate
-
缩放: scale
4.1 2D转换之移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
1.语法：
transform: translate(x,y); 或者分开写 transform: translateX(n); transform: translateY(n);
2.重点
-
定义2D转换中的移动，沿着X和Y轴移动元素
-
translate最大的优点：不会影响到其他元素的位置
-
translate的百分比单位是相对于自身元素的translate：（50%,50%）;
-
对行内标签没有效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D转换之translate</title>
<style>
/* 移动盒子的位置: 定位 盒子的外边距 2d转换移动 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* x就是x轴上移动位置 y就是y轴上移动位置 中间用逗号分隔 */
/* transform: translate(100px,100px); */
/* 1.如果只移动x轴坐标 */
/* transform:translate(100px,0); */
transform: translateX(100px);
/* 1.如果只移动x轴坐标 */
/* transform:translate(0,100px); */
transform: translateY(100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
让盒子实现水平和垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>让盒子实现水平和垂直居中</title>
<style>
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
/* 1.transform里面的参数是可以用% */
/* 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
/* transform: translateX(50%); */
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
/* margin-top: -100px;
margin-left: -100px; */
transform: translate(-50%,-50%);
}
span {
/* translate 对于行内元素是没有效果的 */
transform: translate(300px,300px);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<span>123</span>
</body>
</html>
4.2 2D转换之旋转
2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。
1.语法:
transform：rotate(度数);
重点:
-
rotate里面跟度数，单位是deg 比如 rotate(45deg)
-
角度为正时，顺时针，负时，逆时针
-
默认旋转的中心点是元素的中心点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D转换之旋转</title>
<style>
div img {
float: left;
width: 200px;
/* 顺时针旋转45度 */
/* transform: rotate(45deg); */
border: 1px solid #ccc;
border-radius: 50%;
transition: all .3s;
margin: 70px;
}
img:hover {
/* transform: rotate(360deg); */
transform: scale(3)
}
</style>
</head>
<body>
<div><img src="../../images/tianz.jpg" alt=""></div>
<div><img src="../../images/tianz.jpg" alt=""></div>
<div><img src="../../images/tianz.jpg" alt=""></div>
<div><img src="images/naicha.jpg" alt=""></div>
<div><img src="images/naicha.jpg" alt=""></div>
<div><img src="images/naicha.jpg" alt=""></div>
</body>
</html>
CSS书写三角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3书写三角</title>
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: '';
position: absolute;
top: 10px;
right: 15px;
width: 8px;
height: 8px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
/* transition: all .1s; */
}
/* 鼠标经过div 里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.3 2D转换中心点transform-origin
我们可以设置元素转换的中心点
1.语法:
transform-origin: x,y;
2.重点
-
注意后面的参数x和y用逗号隔开
-
x y默认转换的中心点是元素的中心点(50% 50%)
-
还可以给x y 设置像素 或者 方位名词(top bottom left right center)
旋转中心点案列
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转中心点案例</title>
<style>
/* div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all .5s;
1.可以跟方位名词
transform-origin: left bottom;
默认的是 50% 50% 等价于 center center
可以是 px 像素
transform-origin: 50px 50px;
} */
/* div:hover {
transform: rotate(360deg);
} */
div {
overflow: hidden;
float: left;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 10px;
border: 1px solid #ccc;
border-radius: 50%;
}
div::before {
content: '你过来呀！';
display: block;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 24px;
font-weight: 700;
background-color: hotpink;
border-radius: 50%;
transform-origin: left bottom;
transform: rotate(90deg);
transition: all .3s;
}
/* 鼠标经过div 让里面的before 复原 */
div:hover::before {
transform: rotate(0);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
4.4 2D转换之缩放scale()
缩放，顾名思义，可以放大和缩小。只要给元素添加了这个属性就能控制它是放大还是缩小
1.语法:
transform: scale(x,y);
2.注意:
-
注意其中的x和y用逗号分隔
-
transform: scale(1,1); 宽和高都放大一倍，相当于没有放大
-
transform:scale(2,2); 宽和高都放大2倍
-
transform：scale(2); 只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2);
-
transform：scale(0.5,0.5); 缩小
-
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D转换之缩放scale</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all .5s;
}
div:hover {
/* 1. 里面写的是数字不跟单位 倍数 */
/* transform: scale(x,y); */
/* transform: scale(2,2); */
/* 2. 修改了宽度为原来的2倍 高度不变 */
/* transform: scale(2,1); */
/* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法 一下是宽度修改了2倍，高度默认和第一个一样 */
/* transform: scale(2); */
/* 4. 我们可以进行缩小 小于1 就是缩放 */
/* transform: scale(0.5,0.5);
transform: scale(0.5); */
/* 5. scale的优势之处：不会影响其他的盒子 而且可以设置缩放的中心点 */
/* width: 100px;
height: 100px; */
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
图片放大案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片放大案例</title>
<style>
div {
overflow: hidden;
float: left;
margin: 10px;
}
div img {
width: 400px;
transition: all .4s;
}
div img:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div><a href="#"><img src="../../images/tianz.jpg" alt=""></a></div>
<div><a href="#"><img src="../../images/tianz.jpg" alt=""></a></div>
<div><a href="#"><img src="../../images/tianz.jpg" alt=""></a></div>
</body>
</html>
分页按钮案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分页按钮案例</title>
<style>
ul li {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
margin-left: 25px;
border: 1px solid pink;
border-radius: 50%;
cursor: pointer;
transition: all .3s;
}
a {
text-decoration: none;
color: #000;
}
li:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</body>
</html>
4.5 2D转换综合写法
注意:
1.
同时使用多个转换，其格式为：transform：translate() rotate() scale()...等，
2.其顺序会影响转换的效果。(先选择会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前
4.6 2D转换总结
1. 转换transform 我们简单理解就是变形 有2D和3D之分 2. 我们暂且学了三个 分别是 位移 旋转 和 缩放 3. 2D 移动translate(x,y) 最大的优势是不影响其他盒子，里面参数用%,是相对于自身宽度和高度来计算的 4. 可以分开写比如translateX(x) 和 translateY(y) 5. 2D旋转rotate(度数) 可以实现旋转元素 度数的单位是deg 6. 2D缩放scale(x,y) 里面的参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子 7. 设置转换中心点transform-origin: x,y; 参数可以是百分比、像素或者是方位名词 8. **当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前**
5.动画
动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
5.1 动画的基本使用
制作动画分为两步：
-
先定义动画
-
再使用(调用)动画
1.用@keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px;
}
}
动画序列
-
0%是动画的开始，100%是动画的完成。这样的规划就是动画序列。
-
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改变为新样式的动画效果
-
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
-
请用百分比来规定变化发生的时间，或用关键词'from'和'to'，等同于0%和100%。
2.元素使用动画
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
动画的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3动画基本使用</title>
<style>
/* 我们想一打开页面，一个盒子就从左边走到右边 */
/* 1. 定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画序列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画序列</title>
<style>
/* form 和 to 等价于 0% 和 100% */
/* @keyframes move {
from {
transform: translate(0,0);
}
to {
transform: translate(1000px,0);
}
} */
@keyframes move {
/* 1. 可以做多个状态的变化 keyframes 关键帧 */
/* 2. 里面的百分比要是整数 */
/* 3. 里面的百分比就是 总的时间(我们这个案列10s) 的划分 25% * 10 = 2.5s */
0% {
transform: translate(0,0);
}
25% {
transform: translate(1000px,0);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0,0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 10s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.2 动画常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性。 |
| animation-name | 规定@keyframes动画的名称。(必须的) |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0。(必须的) |
| animation-timing-function | 规定动画的速度曲线，默认是"ease" |
| animation-delay | 规定动画何时开始，默认是0 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是"normal",alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是"running",还有"paused" |
| animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
动画属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画属性</title>
<style>
@keyframes move {
0% {
transform: translate(0,0);
}
50% {
transform: translate(1000px,500px) rotate(180deg) scale(4);
}
100% {
transform: translate(1000px,0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
transition: all .5s;
/* 动画名称 */
animation-name: move;
/* 花费时间 */
animation-duration: 1s;
/* 运动曲线 */
animation-timing-function: ease-in-out;
/* 何时开始 */
/* animation-delay: 10s; */
/* 重复次数 iteration 重复的 infinite 无限 */
animation-iteration-count: infinite;
/* 是否反方向播放 默认的是 normal 如果想要反方向 就写 alternate */
animation-direction: alternate;
/* 动画结束后的状态 默认是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards */
animation-fill-mode: forwards;
}
div:hover {
/* 鼠标经过div 就让这个div停止动画，鼠标离开就继续动画 */
animation-play-state: paused;
cursor: pointer;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.3 动画简写属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
animation: myfirst 5s linear 2s infinite alternate;
1. 简写属性里面不包括animation-play-state 2. 暂停动画：animation-play-state：puased；经常和鼠标经过等其他配合使用 3. 想要动画走回来，而不是直接跳回来：animation-direction：alternate 4. 盒子动画结束后，停在结束位置：animation-fill-mode：forwoeds
大数据热点图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大数据热点图</title>
<style>
.map {
position: relative;
width: 650px;
height: 537px;
background: url(../../images/map.jpg) no-repeat;
margin: 0 auto;
}
.city {
position: absolute;
top: 202px;
right: 162px;
}
.tb {
top: 418px;
right: 68px;
}
.wh {
top: 345px;
right: 168px;
}
.dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.city div[class^="pulse"] {
/* 保证我们小波纹在父盒子里面水平居中垂直居中 放大之后就会中心向四周发散 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: pules .8s linear infinite;
}
.pulse2 {
animation-delay: .4s !important;
}
.city div .pulse3 {
animation-delay: .8s;
}
@keyframes pules {
0% {}
70% {
/* transform: scale(4); 我们不要用scale 因为它会让 阴影变大 */
width: 40px;
height: 40px;
/* opacity 透明度 */
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city tb">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city wh">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
</html>
5.4 速度曲线细节
animation-timing-function：规定动画的速度曲线，默认是"ease"
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。匀速 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps() | 指定了时间函数中的间隔数量(步长) |
速度曲线步长
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>速度曲线步长</title>
<style>
div {
width: 0;
height: 30px;
background-color: pink;
font-size: 20px;
/* 让我们的文字强制一行内显示 */
white-space: nowrap;
/* steps就是分几步来完成我们的动画 有了steps 就不要写ease 或者 linear */
animation: w 4s steps(10) forwards;
overflow: hidden;
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div>世纪佳豪我在这里等你</div>
</body>
</html>
奔跑的熊案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奔跑的熊案例</title>
<style>
body {
background-color: #ccc;
}
div {
position: absolute;
top: 198px;
width: 200px;
height: 100px;
background: url(../../images/bear.png) no-repeat;
/* 我们元素可以添加多个动画 用逗号进行分隔 */
animation: bear 1s steps(8) infinite, move 5s forwards;
}
.shan {
position: relative;
width: 1880px;
height: 330px;
background: url(../../images/bg1.png);
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translate(-50%,0);
}
}
</style>
</head>
<body>
<div class="shan">
<div></div>
</div>
</body>
</html>
6. 3D转换
我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。
有什么特点
-
近大远小
-
物体后面遮挡不可见
当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。
6.1 三维坐标系
-
x轴：水平向右 注意：x右边是正值，左边是负值
-
y轴：垂直向下 注意：y下面是正值，上面是负值
-
z轴：垂直屏幕 注意：往外面是正值，往里面是负值
3D转换
3D转换我们主要学习工作中对常用的 3D位移 和 3D旋转
主要知识点
-
3D位移：translate3d(x,y,z)
-
3D旋转rotate3d(x,y,z)
-
透视：perspective
-
3D呈现transfrom-style
6.2 3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
-
transform:translateX(100px);仅仅是在x轴上移动
-
transform:translateY(100px);仅仅是在y轴上移动
-
transform:translateZ(100px);仅仅是在z轴上移动(注意：translateZ一般用px单位)
-
transform:translate3d(x,y,z);其中x、y、z分别指要移动的轴的方向的距离
6.3透视perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的
-
如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
-
模拟人类的视觉位置，可认为安排一只眼睛去看
-
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
-
距离视觉点越近的在电脑平面成像越大，越远成像越小
-
透视的单位是像素
透视写在被观察元素的父盒子上面的
d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是z轴，物体距离屏幕的距离，z轴越大(正值)我们看到的物体就越大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d移动transform3d</title>
<style>
body {
/* 透视写在被观察元素的父盒子上面 */
perspective: 200px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* transform: translateX(100px);
transform: translateY(100px); */
transform: translateX(100px) translateY(100px) translateZ(100px);
/* 1. translateZ 沿着z轴移动 */
/* 2. translateZ 后面的单位我们一般跟px */
/* 3. translateZ(100px) 向外移动100px (想着我们的眼睛来移动的) */
/* 4. 3d移动有简写的方法 */
/* transform: translate3d(x,y,z); */
/* transform: translate3d(100px,100px,100px); */
/* 5. xyz是不能省略的 如果没有就写0 */
transform: translate3d(600px,100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.4translateZ
transform:translateZ(100px); 仅仅是在z轴上移动。
有了透视，就能看到translateZ引起的变化了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>translateZ</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.5 3D旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法
-
transform:rotateX(45deg); 沿着x轴正方向旋转45度
-
transform:rotateY(45deg); 沿着y轴正方向旋转45度
-
transform:rotateZ(45deg); 沿着z轴正方向旋转45度
-
transform:rotate3d(x,y,z,deg); 沿着自定义轴旋转deg为角度(了解即可)
对于元素旋转的方向的判断 我们需要先学习一个左手准则。
左手准则(X轴)
-
左手的手拇指指向x轴的正方向
-
其余手指的弯曲方向就是该元素沿着x轴旋转的方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rotateX</title>
<style>
div {
perspective: 600px;
}
div img {
display: block;
margin: 100px auto;
transition: all 1s;
}
div img:hover {
transform: rotateX(180deg);
cursor: pointer;
}
</style>
</head>
<body>
<div>
<img src="../../images/tianz.jpg" alt="">
</div>
</body>
</html>
左手准则(Y轴)
-
左手的手拇指指向y轴的正方向
-
其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rotateY</title>
<style>
div {
perspective: 400px;
}
div img {
display: block;
margin: 0 auto;
transition: all 1s;
}
img:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="../../images/tianz.jpg" alt="">
</div>
</body>
</html>
transform:rotate3d(x,y,z,deg); 沿着自定义轴旋转deg为角度(了解即可)
xyz是表示旋转轴的矢量，是表示你是否希望沿着该轴旋转，最后一个表示旋转的角度
6.6 3D呈现transform-style
-
控制子元素是否开启三维立体环境
-
transform-style:flat 子元素不开启3d立体空间 默认的
-
transform-style:preserver-3d; 子元素开启立体空间
-
代码写给父级，但是影响的是子盒子
-
这个属性很重要，后面必用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D呈现transform-style</title>
<style>
body {
perspective: 400px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 让我们的子元素保持3d立体空间环境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotate3d(0,1,0,-deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
案例：两面翻转的盒子
1.搭建HTML结构
<div class="box">
<div class="front">黑马程序员</div>
<div class="back">我在这里等你</div>
</div>
-
box父盒子里面包含前后两个子盒子
-
box是翻转的盒子 front是前面盒子back是后面盒子
2.CSS样式
-
box指定大小，切记要添加3d呈现
-
back盒子要沿着y轴翻转180度
-
最后鼠标经过box沿着y旋转180deg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两面翻转的盒子</title>
<style>
body {
perspective: 400px;
}
.box {
position: relative;
width: 400px;
height: 400px;
margin: 100px auto;
transition: all .4s;
/* 让背面的盒子保留立体空间 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
line-height: 400px;
text-align: center;
color: #fff;
}
.front {
background-color: pink;
z-index: 1;
}
.back {
background-color: purple;
/* 像手机 背靠背 旋转 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">黑马程序员</div>
<div class="back">我在这里等你</div>
</div>
</body>
</html>
案例：3D导航栏
1.搭建HTML结构
<ul>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">我在这里等你</div>
</div>
</li>
</ul>
-
li做导航栏
-
.box是翻转的盒子 front是前面盒子bottom是底下盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D导航栏</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
float: left;
margin: 0 5px;
width: 120px;
height: 35px;
list-style: none;
/* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
perspective: 400px;
}
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .4s;
}
.box:hover {
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 35px;
text-align: center;
}
.front {
background-color: pink;
z-index: 1;
transform: translateZ(17.5px);
}
.bottom {
background-color: purple;
/* 这个x轴一定是负值 */
/* 我们如果有移动 或者 其他样式 ，必须先写移动 */
transform: translateY(17.5px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">我在这里等你</div>
</div>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">我在这里等你</div>
</div>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">我在这里等你</div>
</div>
<div class="box">
<div class="front">黑马程序员</div>
<div class="bottom">我在这里等你</div>
</div>
</li>
</ul>
</body>
</html>
案例：旋转木马
1.搭建HTML结构
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例：旋转木马</title>
<style>
body {
perspective: 1000px;
}
section {
position: relative;
width: 400px;
height: 400px;
margin: 150px auto;
transform-style: preserve-3d;
animation: rotate 10s linear infinite;
background: url(../../images/te4.jpg) no-repeat;
}
section:hover {
/* 鼠标经过section 停止动画 */
animation-play-state: paused;
cursor: pointer;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
img {
width: 100%;
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../../images/te2.jpg) no-repeat;
}
section div:nth-child(1) {
transform: translateZ(400px);
}
section div:nth-child(2) {
/* 先旋转好 再移动距离 */
transform: rotateY(60deg) translateZ(400px);
background: url(../../images/te1.jpg) no-repeat;
}
section div:nth-child(3) {
/* 先旋转好 再移动距离 */
transform: rotateY(120deg) translateZ(400px);
background: url(../../images/te3.jpg) no-repeat;
}
section div:nth-child(4) {
/* 先旋转好 再移动距离 */
transform: rotateY(180deg) translateZ(400px);
background: url(../../images/title.jpg) no-repeat;
}
section div:nth-child(5) {
/* 先旋转好 再移动距离 */
transform: rotateY(240deg) translateZ(400px);
background: url(../../images/tianz.jpg) no-repeat;
}
section div:nth-child(6) {
/* 先旋转好 再移动距离 */
transform: rotateY(300deg) translateZ(400px);
background: url(../新手进阶/images/naicha.jpg) no-repeat;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
7.浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无序添加。
1.私有前缀
-
-moz-：代表firefox浏览器私有属性(火狐)
-
-ms-：代表ie浏览器私有属性(微软)
-
-webkit-：代表safari、Chrome私有属性(谷歌等)
-
-o-：代表Opera私有属性
2.提倡的写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
课外知识扩展
-
盒子覆盖知识点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:first-child {
float: left;
/* position: absolute;
top: 0px;
left: 0px; */
width: 200px;
height: 200px;
background-color: red;
z-index: 22;
}
div:last-child {
/* position: absolute;
top: 0px;
left: 0px; */
float: left;
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<div></div>
<!-- 当多个盒子重合时，三个不同类型的盒子，普通盒子和浮动盒子和定位盒子同时出现时，同一级别的盒子才能使用z-index
来改变盒子的覆盖关系，而在这三个不同类型同时出现时，定位的优先级最高，另外两个无论z-index去什么值都是定位在最上面
，而浮动的优先级第二，普通盒子老工具人了没有盒权，一直都是被两个大哥压在下面-->
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
