01-HTML+CSS

前端开发

一、HTML常用标签

1、文本格式化表钱

：加粗表钱

：倾斜

：删除线

：下划线

2、容器标签

：标签用来布局，但是现在一行之呢个放一个。大盒子
：标签用来布局，一行上可以多个。小盒子

3、图像标签

• img标签
  • src：文件路径
  • alt：当图片不显示的时候用文字替换
  • title：当鼠标经过出现文字提示
  • width：设置宽度
  • height：设置高度
  • border：设置边框

<img src="" alt="" />

4、超链接标签

• a

  • href：连接地址/下载的压缩文件

  • target：打开的方式

    • _self：覆盖当前窗口
    • _blank：重新打开一个窗口

  • #：空连接

• 锚点连接

<a href="#two">锚点连接a>
<h3 id="two">
    锚点连接的位置
h3>

5、注释和特殊字符

• 注释

• 特殊字符

 : 空格
<: <
>: >    

6、表格结构标签

• thead：头部区域
• tbody：主题区域
• table
  • cellpadding：数据和单元格的间距
  • cellspacing：单元格与单元格之间的间距

7、合并单元格

• rowspan：跨行合并
• colspan：跨列合并

8、列表标签

• ul：无需列表

<ul>
    <li>榴莲li>
    <li>臭豆腐 li>
ul>

• 自定义列表

<dl>
    <dt>关注我们dt>
    <dd>新浪微博dd>
    <dd>官方微信dd>
dl>

9、表单标签（form）

9.1、input输入表单元素

• input：输入框
  • radio：单选框（需要相同的name）
    • checked：打开页面时默认选中
    • nane：元素名称
    • value：元素数值
    • maxlength：输入的最大长度
  • checkbox：复选框（需要相同过的name）
  • reset：重置
  • button：按钮
  • file：文件域
  • hidden：隐藏域

<form action="/oa/name" method="post" name="name1">
    用户名：<input type="text">
    密码：<input type="password">
    <input type="submit" value="登录"> <br>
    <input type="reset" value="重置"><br>
    <input type="button" value="提交按钮">
form>

• lable标签用于绑定一个表单元素，当点机标签内的文本时，浏览器就会自动讲焦点选择到对应的表单元素上，用来增加用户体验
• lable属性要和元素的id相同

<input type="radio" id="target">
<lable for="target">男lable>

9.2、select下拉表单元素

• selected：当页面打开时默认出现”山东“

<form>
    籍贯：
    <select>
        <option>山东option>
        <option>广东option>
        <option selected="selected">山东option>
    select>     
form>

9.3、textarea文本域元素

• cols：一行写五十个字
• rows：五行

<form cols="50" rows="5">
        今日反馈
        <textarea>
            默认文字
        textarea>
form>

---

二、CSS基本样式

1、代码风格

• 在标签后面有一个空格
• 以键值对的形式添加属性
• 在冒号后面也有一个空格

h3 {
	color: pink;
	fonrt-size: 20px;
}

2、类选择器

• 样式点定义，结构类（class）调用 一个或多个 （可复用）

.red {
	color: pink;
}
.font35{
	font-size: 35px;
}

<p class="red font35">红色p>

3、id选择器

• 样式#定义，结构id调用，只能调用一次（一次性）

#pink {
	color: pink;
}

<p id="#pink">pinkp>

4、通配符选择器

• 以* 定义，选择所有页面中的元素

* {
	color: pink;
}

5、字体

• font-family：“微软雅黑”

• font-size: ”文字大小“

  • 单位：px

• font-style：“文本风格”

  • 斜体：italic
  • 正常：normal

• font-weight：“粗细”

  • 正常：400
  • 粗体：700

• 复合属性

  • 必须严格按照舒徐的要求
  • 必须存在font-size，font-family

/**
	font：font-style font-weight font-size/line-height font-family
**/
div {
	font: italic 700 16px "Microsoft yahei"
}

6、文本属性

• color：文本颜色

  • 颜色英文名

  • 十六进制

  • RGB代码t

• text-align：对齐方式

• text-decoratin：修饰文本

  • none：没有装饰线
  • underline：下划线

• text-indet：文本缩进

  • 2em：相对于两个文字的大小

• line-height：行高

  • 字体默认为16px
  • 上下间距分别分到5px；

p{
	line-height:26px;
}
<div>行间距div>

7、外部样式表

• rel：指定当前文件和连接文件之间的关系
• href：文件的路径

<link rel="stylesheet" href="css文件路径">

三、Emmet语法

1、生成html标签

• 快速生成3个div

//div*3
<div>div>
<div>div>
<div>div>

• 快速生成ul中的li

// ul>li*3
<ul>
    <li>li>
    <li>li>
    <li>li>
ul>

• 兄弟标签

// div+p
<div>div>
<p>p>

• 带类名的标签（默认是div）

//.table
<div class="table">div>
//#table
<div id="table">div>

• 如果生成的div类名是有顺序的，可以用自增符号$

// .table&*5
<div class="table1">div>
<div class="table2">div>
<div class="table3">div>
<div class="table4">div>
<div class="table5">div>

• 如果想要生成的标签内些内容可以用{}标识

//.table{$}*5
<div class="table">1div>
<div class="table">2div>
<div class="table">3div>
<div class="table">4div>
<div class="table">5div>

2、生成CSS标签

.one {
	w100;
}

.one {
	width: 100px;
}

四、CSS的复合选择器

1、后代选择器（重要）

• ul：父亲
• li：任意后代

ul li {
	color: pink;
}

ul li a {
	color: red;
}

.nva li a {
	color：red
}

2、子选择器（重要）

• 只能选择亲儿子的元素

ul > li{
    color: pink;
}

3、并集选择器（重要）

• 并集选择器竖着写

div,
p, 
.pig li{
	color: red;
}

4、伪类选择器

• a:link：未被访问

• a:gisited：已被访问

• a:hover：鼠标位于连接

• a:active：鼠标按下没松开

• 注意事项：按照LVHA的顺序生命

• 开发习惯

a {
	color: #333;
    text-decoration: none;
}
a {
    color: #369
    text-decoration: underline;
}

5、伪类选择器

• focus：光标

input:focus{
	backgroud-color: pink;
}

五、CSS的元素显示模式

1、块元素（特点）

• 常见的块元素

  ~

  、

  、

  、

• 特点

  • 独占一行

  • 高度，宽度，外边距

  • 默认宽度（100%）

  • 是一个容器可以存放行内或者块级元素

• 注意

  • 文字类的元素不能放块级元素

  • 标签主要存放文字，不能放快级元素

  • 同理，

    ~

    等都是文字类块级标签，类里面也不能放其他块级元素

2、行内元素

• 特点

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

• 注意

  • 连接中不能嵌套连接
  • 可以存放块级元素

3、行内块元素

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

4、元素转化

• 将行内元素转换成块级元素

a {
    display: block;
}

• 转换成行内元素

div {
    display: inline;
}

• 转换成行内块元素

span {
    display: inline-block;]
}

六、背景颜色

1、背景图片

• backgroud-image：背景图片

div{
    backgroud-image: none | url();
}

2、背景平铺

• backgroup-repeat

div{
	backgroud-repeat: no-repat;
}

3、背景图片位置

• backgroud-position

backgroud-position: center,top;

4、背景固定

//固定
backgroud-attachment： fixed
//滚动
backgroud-attachment: scroll

5、混合代码

backgroud：颜色 图片地址 平铺 滚动 图片位置

6、半透明

• r：红色
• g：greed
• b：blue
• a：透明度

div {
    backgroud: rgba(0,0,0,0.6  )
}

七、CSS三大特性

1、层叠性

• 就近原则
  • 元素距离css样式越近就触发
• 样式不冲突，不会层叠

div {
	color: red;
	font-size: 90px;
}
div {
	color: pink;
}
输出的结果则是字体90px，颜色为粉色

2、继承性

• 子承父业
• 只会继承字体的样式

div {
	color: pink;
}
<div>
    <p>继承div的cssp>
div>

特殊：行高继承

body {
    font: 20px/1.5 'Microsoft YaHei';
    //1.5指的是文字大小的1.5倍
}

3、优先级

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

权重叠加

• 权重不可以叠加

//  0,0,0,1 + 0,0,0,1 = 0,0,0,1
ul li{
    color: green;
}
// 0,0,1,0
li {
	color: pink;
}

	
大猪肘子

//结果：大猪肘子是粉色的

• 案例

//权重为：11
.ul li {
	color: red;
}
//权重为：10
.li {
	color: pink;
	font-weight: 700;
}
<ul class="ul">
	<li class="li">人生四大悲剧li>
ul>
//结果：“人生四大悲剧”字体为red，加粗

八、盒子模型

1、盒子的边框

• border
  • border-width：粗细
  • border-style：solid实线 | dashed 虚线边框 | dotted 点线边框
  • border-color：边框颜色
  • border-collapse：相邻单元格的边框
• 混合写法：border：5px solid pink
  • border-bottom：5px solid pink
• 边框会影响盒子的实际大小

2、内边距（padding）

• 内容与盒子的边框的距离
• 内边距会直接影响盒子的实际大小

div {
    //上右下左
    padding: 5px 5px 5px 5px;
}

• 注意
  • 如果给了元素的高度宽度，并且指定的内边距则会影响盒子的实际大小
  • 如果没有指定高度宽度，内边距则不会影响盒子的实际大小

3、外边距（margin）

• 与内边距的用法是一样的
• 外边框塌陷的问题
  • 给父亲元素添加边框（border：1px solid transparent）
  • 给复元素添加内边距（padding：1px ）
  • 可以为父元素添加：overflow：hidden

4、盒子的居中

• 盒子必须指定宽度，必须是块元素
• margin：0 auto;
• 注意
  • 行内元素以及行内块元素是不可以水平据中的
  • 解决的方法：将他们所在的父元素添加text-align:center即可

5、清楚内外边距

* {
	padding: 0;
    margin: 0;
}

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

6、圆角边框

//圆形
div {
    width: 100px;
    border-radius:50%; 
}
//圆角矩形
div {
    height: 100px;
    border-radius:50px;
}

7、盒子阴影

• box-shadow:
  • h-shadow：水平阴影的位置
  • v-shadow：垂直阴影的位置
  • blur：模糊距离
  • spread：尺寸

div {
    box-shadow: 10px 10px 10px 10px block;
}

九、PS的基本操作

1、基本使用

• 打开标尺：Ctrl+r | 试图 -> 标尺
• 右击标尺，把里面的单位改为像素
• Ctrl + 加号 可以放大视图
• 按住空格键，鼠标可以变成小手
• 用选取拖动
• Ctrl + D 可以取消选区

2、切图

2.1、图层切图

• 选中需要的图层：图层菜单->合并图层（ctrl + e）
• 右击->快速导出为PNG

2.2、切片切图

• 文件菜单->导出->存储为web设备所用格式->选择我们要的图片格式->存储

2.3、PS插件切图

• 官网：www.cutterman.cn/zh/cutterman
• 注意：必须要使用完整版

十、传统网页布局的三种方式

1、浮动（float）

• 多个块级元素冲纵向排列找标准流，
• 多个块级元素横向排列找浮动

1.1、浮动特性

• 浮动的元素的会脱离标准流（脱靶）

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

• 如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列

  • 注意：中间没有缝隙，更行内块元素不一样

• 给一个行内元素添加浮动可以变成行内块元素。

• 浮动元素都具有行内块元素的特性

2、浮动布局注意点

2.1、浮动和标准流的父盒子搭配

• 先用标准流的复元素排列上下位置，后面子元素取浮动排列左右位置

2.2、一个元素浮动了，理论上其余的兄弟元素也会浮动

• 浮动的盒子只会影响浮动盒子后元素的标准流，不会影响前面的标准流。

十一、CSS定位

1、定位组成

• 定位 = 定位模式 + 边偏移

2、定位模式

• 定位模式决定元素的位置方式，它通过position

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

1.1、静态定位 static（了解）

1.2、相对定位 relative（重要）

• 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
• 相对定位的特定
  • 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
  • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱靶，继续保留原来的位置）

1.3、绝对定位 absolute（重要）

• 绝对定位是元素子啊移动位置的时候，是相对于它祖先元素来说的（拼爹型）
• 绝对定位的特定
  • 没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
  • 如果祖先元素有定位，则以最近以及的有定位的祖先元素为参考移动位置
  • 绝对定位不再占有原先的位置

1.4、子绝父相的由来

1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2. 父盒子需要加定位限制盒子在父盒子内显示
3. 父盒子布局时，需要占有位置，因此父亲只能时相对定位

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

1.5、固定定位（重要）

• 固定定位是元素固定与浏览器可是去的位置。

• 特定

1. 元素以浏览器为参照物来进行移动
2. 跟父元素的定位没关系
3. 固定定位不占有原来的位置

• 固定定位小技巧：固定在版心右侧显示

div {
    position: fixed;
    left: 50%;
    margin-left: 300px;
}

1.6、粘性定位（了解）

• 特定

1. 以浏览器的可视窗口为参照点移动元素（固定定位的特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加top起中一个才有效。

1.7、定位叠放 z-index

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

1.8、定位拓展

• 定位特殊性

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

• 绝对定位和浮动的区别

  • 浮动（float）：是占有原来的位置的，并且最开始浮动是用来做文字环绕效果的
  • 绝对定位（absolute）：不占有原来的位置

3、细节问题

• 水平居中问题：只有相对定位才具有水平居中的功能，而绝对定位和固定定位可以通过算法的发视实现水平/垂直居中

十二、元素的显示和隐藏

1、display 属性（重点）

• display：none；隐藏对象
• display：block；转换成块级元素之外，同时还有显示元素的意思
• 注意：display隐藏元素后，不再占有原来的位置
• 后面

2、visibility 可见性

• visibility：visible；元素可视
• visibility：hidden；元素隐藏
• 注意：隐藏元素后，继续占有原来的位置
• 与display的区别
  • display隐藏是不占原来的位置的
  • visibility隐藏是占有原来的位置的

3、overflow 溢出

• overflow：hidden；将溢出的内容部分隐藏
• overflow：visible；溢出显示（默认）
• overflow：scroll；溢出显示滚动条
• overflow：auto；超出使用滚动条

十三、CSS高级技巧导读

1、精灵图

1.1、精灵图的由来

• 精灵图为了有校地减少服务器接受和发送请求的次数，提高页面的加载速度 ，出现了CSS精灵技术

1.2、精灵图（sprites）的使用

1. 精灵图是把多个小背景图片整合到一张大图片中
2. 这个大图片也称为sprites 精灵图 或者 雪碧图
3. 移动背景图片位置，此时额可以使用backgroud-position
4. 移动的距离就是这个目标图片x和y坐标（要使的图片向左边移动数值就是要负数）
5. 因为一般情况下都是往上往左一定，所以是赋值

2、字体图片

• 精灵图是有诸多优点的，但是缺点很明显

1. 图片文件还是比较大的
2. 图片本身放大和缩小会失真
3. 一旦图片制作完毕想要更换非常复杂

• 字体图标可以作为前端工体一种方便高效的图片使用方式，展示的是图标，本质是字体。
• 总结：比较简单的小图标，可以使用字体图标

2.1、网站

• icommon 字库 icomoon.io （国外）
• iconfont 字库 iconfont.cn（阿里巴巴）

2.2、字体图标的引用

• 讲压缩包解压出来的文件放到项目的根目录下
• 并通过类名的形式引入进来

2.3、字体图标的追加

3、CSS三角

• 想得到一个三角形，将其他的三个边设置成透明的颜色就可以了。

.box {
    width: 0;
    height: 0;
    /*为了照顾低版本的兼容性*/
    line-height：0px;
    font-size: 0px;
    border: 50px solid transparent;
    border-left-color: pink;
    margin: 100px auto;
}

4、用户界面样式

4.1、鼠标样式

li {cresor: pointer;}

属性	语义
default	默认文本
pointer	小手
move	移动
text	文本
not-allowed	禁止

4.2、轮廓线

input {outline: none}

4.3、防止文本域拖拽（resize）

textarea {resize: none}

---

5、vertical-align 应用

5.1、图片、表单和文字对齐

数值	描述
baseline	默认，基线对齐
top	顶端对齐
middle	中部对齐
bottom	底部对齐

• 图片、表单都属于行内块元素，默认的vertical-align是基线对齐
• 此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了

5.2、图片底部的空白空隙

• 分析：以为图片属于行内块元素，并且属性vertical-align的默认是baseline（基线对齐）

• 解决

• • 1、给图片添加vertical-align：middle/top/bottom
  • 2、把图片转成为块级元素：display：block；

6、溢出的文字用省略号代替

6.1、单行溢出

• white-space：nowrao；强制讲文字一行显示
• overflow：hidden；超出的内容隐藏
• text-overflow：ellipsis；超出得部分用省略号代替

div {
    white-space: nowrap;
    overfow: hidden;
    text-overflow: ellipsis;
}

6.2、多行文本溢出

• display： -webkit-box； 弹性申诉哦盒子模型显示
• -webkit-line-clamp；从第几行开始隐藏
• –webkit-box-orient: vertical；设置伸缩盒对象得子元素的排列方式

div {
    display: -wbkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

7、常见的布局技巧

7.1、margin负值运用

ul li {
	float: left;
	border: 1px solid red;
	margin-left: -1px;
}
<ul>
    <li>1li>
    <li>1li>
    <li>2li>
ul>

7.2、为什么少了一条边框

• 分析：因为此时右边的小li压住了左边的右边框
• 解决：此时可以通过 ul li:hover {z-index: 1; position: relative;broder-color: blue}

ul li:hover {
    z-index: 1; 
    position: relative;
    broder-color: blue
}

7.3、文字环绕着图片

• 将装有图片的盒子设置float：left
• 在右边默认的标准流文字就可以了

7.4、三角行高级

I {
	position: absolute;
    top: 0;
    right: 0;
    border-color: transparent #fff transparent transparent;
    border-width: 30px 10px 0 0;
    border-style: solid;
}

十四、HTML5和CSS3的新特性

• HTML5增加一些新的标签、新得饿表单和新的表单属性等。

  • header：头部标签

  • nva：导航标签

  • article：内容标签

  • section：定义文档某个区域

  • aside：侧边栏标签

  • footer：尾部标签

---

• 注意
  • 这种语义化标准是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在IE9中，需要把这些元素转换成块级元素
  • 其实，我们移动端喜欢这些标签
  • HTML5还增加了很多其他标签，我们后面再慢慢学

1、HTML5 的新特性

1.1、视频 video

• video：视频标签
  • 当前video元素标签支持三种视频格式：尽量使用mp4格式
• 常见属性

属性	值	描述
autoplay	autoplay	自动
controls	controls	显示播放控件
width	pixels（像素）	宽度
height	pixels（像素）	高度
loop	loop	循环播放
preioad	auto（预加载） none（取消预加载）	是否预加载视频
src	url	视频url地址
poster	lmgurl	加载等在的图片
muted	muted	静音播放

<video src="文件路径" autoplay="autoplay" muted="meted" controls="controls" loop="loop ">video>

1.2、音频 audio

属性	值	描述
autoplay	autoplay	自动播放
controls	controls	显示控件
loop	loop	循环播放
src	url	音频路径

<audio src="" autoplay="autoplay" controls="controls">audio>

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

• 总结

  • 音频和视频标签使用的方式基本一致
  • 视频找mp4，音频找mp3
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频添加muted属性来静音播放，音频不可以（可以通过JavaScript解决）
  • 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

  1.3、input 类型

<input type="serach">

属性值	说明
type=“email”	必须是Email类型
type=“url”	url类型
type=“data”	日期
type=“time”	实践
type=“number”	数字
type=“month”	月
type=“week”	周
type=“tel”	手机号码
type=“search”	搜索
type=“color”	颜色

1.4、新增的表单的属性

<input type="search" name="" id="" required="required">

属性	值	描述
required	required	必须填写
placeholder	提示文本	默认为不显示
autofocus	autofocus	自动聚焦
autocomplete	off / on	当用户开始输入时，浏览器基于之前输入过的数值，应该显示处在字段中填写的选项
multiple	multiple	可以多选文件提交

2、CSS3 的新特性

• CSS3 新增选择器
  • 属性选择器
  • 结构伪类选择器
  • 伪元素选择器

2.1、属性选择器

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

input[value=asdf] {
	color: pink;
}

/*类名头部为incon的进行匹配*/
input[class^=incon] {
 	backgourd-color: pink;
}

/*类名尾部为data的进行匹配*/
input[class$=data] {
 	backgourd-color: pink;
}

/*类名有任意*/
input[class*=-]{
	backgourd-color: #ccc;
}

<input type="text" value="asdf">
<input type="text">

<div class="icon2">1div>
<div class="icon3">1div>
<div class="icon4">1div>

<div class="icon-data">1div>
<div class="icon-data">1div>
<div class="icon-data">1div>

• 属性选择器，类选择器权重都是10

2.2、结构伪类选择器

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

• E:nth-child(n)
  • n可以是数字，也可以是关键字和公式
  • n可以是数字，就是选择第几个子元素，里面数字从给1开始…
  • n可以是关键字：even 偶数，odd 奇数
  • n可以是公式
    • 2n：偶数
    • 2n+1：奇数
    • 5n：5 10 15…
    • n+5：从第五个开始一直到最后
    • -n+5：前五个

/*第一个孩子*/
ul li:first-child {
	backgourd-color: pink;
}
/*最后一个孩子*/
ul li:last-child {
	backgourd-color: pink;
}
/*指定*/
ul li:nth-child {
	backgourd-color: pink;
}
<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
ul>

• section p:first-child：首先找到第一个元素，然后判断该元素是否是P标签
• section div:first-of-type：首先查看元素的类型，然后再找到该类型的一个出现的位置

2.3、伪元素选择器（重要）

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

• 注意

  • befor 和 agter 创建一个元素，但是属于行内元素
  • 新创建的这个元素在找不到的，所以我们成为伪元素
  • 语法：element::befor{}
  • befor 和 ater 必须有 content 属性
  • before 在父元素内容的前面创建元素，after在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为1。

• 伪元素清除浮动原理

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

2.4、CSS3 盒子模型

• CSS3 中可以通过 box-sizing 来指定盒子模型，有两个值：即可指定为content-box、border-box，这样我们没计算机盒子大小的方式就发生了改变

• 可以分为两种情况

  1. box-sizing: content-box 盒子大小为：width + padding +border（默认）
  2. box-sizing: border-box 盒子大小为width

• 如果盒子模型我们改成box-sizing: border-box，那padding和border就不会成大盒子了

• 注意：padding和border不会超过width宽度

2.5、CSS3 其他特性

• CSS3 滤镜filter:

/*blur模糊处理 数值越大越模糊*/
div {
    filter: blur(5px);
}

• calc 函数

div {
    width: calc(100% - 30px);
}

2.6、CSS3 过度（重点）

1. 属性：想要变化的 css 属性，宽度高度 背景颜色 内外边距都可以，如果想要所有的属性都过度，写一个all就可以了
2. 花费时间：单位是 秒（必须写单位）比如0.5s
3. 运动曲线：默认是 ease（可以省略）
4. 何时开始：单位是 秒（必须写单位）可以设置延时吃法的时间 默认值是 0s（可以省略）

div {
    /*transition: 过度的属性 花费时间 运动曲线 何时开始；*/
    transition：width .5s, height .5s;
}
div:hover {
    wirdth: 200px;
    height: 300px;
}

十五、评优购项目

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

1、项目规划

1.1、模块化开发

• common.css 公共样式里面包括版心宽度、清除浮动、页面字体颜色等公共样式

1.2、网站 favicon 图标

1. 制作favicon图标
   • 将图标切成png图片（没有背景）
   • 将png转换成 ico 图标，www.bitbug.net
2. favicon图标放到网站根目录下
3. HTML页面引入favicon图标

<link rel="shortcut icon" href="favicon.ico">

1.3、网站TDK三大标签SEO优化

• SEO汉译搜索引擎优化
• SEO 的目的是对网站进行深度的优化，从而获取免费的流量。

1. title 网站标题

   • 建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）

2. description 网站说明

   • 简要说网站做什么的

3. keywords 关键字

   • keywords 是关键字，是搜索引擎的关注之一

<title>asdl;fkjsdalkfjtitle>
<meta name="description" content="asdfasdfsdaf">
<meta name="keywords" content="alksdjfklsadjklfjlksj">

2、首页制作

名称	说明
快捷导航栏	shotcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwords
导航	nav
导航左侧	dropdown 包含.dd .dt
导航右侧	navitems
页面底部	footer
页面底部服务模块	mod_service
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright

2.1、LOGO SEO 优化

1. logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
2. h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可
3. 为了搜索引擎收录我们，我们链接里面要放**文字（网站名称），**但是不要显示
   • 方法1：text-indent 以到盒子外面（text-indent）,然后 overflow:hidden，淘宝的做法
   • 方法2：直接给 **font-size：0; ** 就看不到文字了，京东的做法
4. 最后给链接一个 title 属性，这样鼠标放到logo上就可以看到提示文字了。

3、注册页面

3.1、注册页类名命名

• 注册页面：register.html

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

十六、CSS3 2D 转换

1、2D 转换之移动 transform：translate

• 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
• translate最大的而有点：不会影响到其他的元素
• translate中的百分比单位是相对自身元素的 translate(50%,50%)
• 对行内标签没有效果

	transform: translate(x,y); 或者分开写
	如果里面的参数是 “%” 则会按照自身的高度宽度来计算
	transform: translateX(50%);
	transform: translateY(n);

• 案例：如何让子元素移动到中心

div {
    position: relative;
    width: 200px;
    height: 200px;
    backgourd-color: pink;
}
p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    backgourd-color: purple;
    transform: translate(-50%,-50%);
}

2、2D 转换之移动 transform：rotate

• 语法

img {
    顺时针转圈
    transform: z(45deg); 
}

• 重点

  • rotate里面跟角度，单位是 deg 比如 rotate(45deg)
  • 角度为正时，顺时针
  • 默认旋转的中心顶啊是元素的中心点

• 案例：三角形

        .box {
            position: relative;
            width: 249px;
            height: 50px;
            border: 1px solid #333;
        }

        .sanjiao {
            position: absolute;
            top: 15px;
            right: 20px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
            transform: rotate(45deg);
            transition: all 0.2s;
        }

        .box:hover .sanjiao {
            transform: rotate(225deg);
        }

3、旋转中心点 transform-origin

• 语法
  • transform-orgin：x y;

div {
    左下角旋转
    transform-orgin: left bottom;
}

• 重点

  • 注意后面的参数 x 和 y 用空格隔开
  • x y 默认转换的中心点是元素的中心点（50% 50%）
  • 还可以给x y 设置 像素 或者 方位名词 （top bottom left right center）

• 案例

        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid pink;
        }

        .box::after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-color: pink;
            transform-origin: left bottom;
            transform: rotate(180deg);
            transition: all .2s;
        }

        .box:hover::after {
            transform: rotate(0deg);
        }

4、2D 转换之缩放 transform：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)：缩小
   • sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

5、综合写法

div {
    
}
div:hover {
    transform: translate(50px,50px) rotate(180deg)
}

• 注意
  • 顺序会影响转换的效果（先旋转会改变坐标轴的方向）
  • 当我们同时又唯一和其他属性的时候，记得要将位移放到最前

十七、CSS3 动画

1、制作动画 @keyframes

• 制作动画分为两步
  1. 先定义动画
  2. 再使用动画

//定义动画
@keyframes move {
    0% {
        transform: translate(0px);
    }
    100% {
        transform: translate(1000px);
    }
}

@keyframes move {
    from {
        transform: translate(0px，0px);
    }
    to {
        transform: translate(1000px,0);
    }
}


//使用动画
div {
    //1、动画名称
    animation-name: move;
    //2、持续时间
    animation-duration：持续时间
}

• 动画序列
  • 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列
  • 在 @keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一种样式逐渐花边为另一种样式的效果，您可以改变人一多的样式人一多的次数。
  • 请用百分比来规定变化发生的时间，或关键词 from 和 to 等同于 0% 和 100%

2、常用的动画属性

属性	描述
@keyframes	指定动画
animation	所有动画的简写属性
animation-name	规定动画的名称（必写）
animation-duration	规定动画完成一个周期所花的时间（必写）
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

3、动画简写属性

• animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态

	animation: myfirst 5s linear 2s infinite alternate;

• 简写属性里面不包括 animation-play-state
• 暂停动画：animation-play-state: puased；经常和鼠标经过等其他配合使用
• 想要动画走回来，而不是直接跳回来：animation-direction：alternate
• 盒子动画结束后，停在结束位置：animation-fill-mode：forwards

4、速度曲线

值	描述
linear	匀速
ease	默认。从低速开始，然后加速在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	之地那个时间函数中的间隔数量（步长）

案例：打字机效果

        .box {
            font-size: 20px;
            background-color: pink;
            overflow: hidden;
            white-space: nowrap;
            animation: box 3s linear infinite;
        }

        @keyframes box {
            0% {
                width: 0;
            }

            100% {
                width: 140px;
            }
        }

案例：奔跑的熊大

 	           .bear {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(./media/bear.png) no-repeat;
            animation: bear .7s infinite steps(8), move 2s ease-out forwards;

        }

        @keyframes bear {
            0% {
                background-position: 0, 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }

十八、3D 转换

1、三维坐标系

• x轴：水平向右 注意：x 右边是正值，左边是负值
• y轴：垂直向下 注意：y 下面是正值，上面是负值
• z轴：垂直屏幕 注意：往外面是正值，往里面是负值

2、3D移动 translate3d

• transform：translateX(100px)：仅仅是在x轴上移动
• transform：translateX(100px)：仅仅是在y 轴上移动
• transform：translateX(100px)：仅仅是在z轴上移动
• transform: translate3d(x,y,z)：其中 x、y、z 分别汁得是移动的轴的方向的距离

3、透视 perspective

1. 透视卸载被观察元素的父盒子上面

   • d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。

   • z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大

2. 注意

   • 距离视觉点越近的电脑平面成像越大，月圆成像越小
   • 透视的单位是像素

4、3D旋转 rotate 3d

• transform: rotateX(180deg)；沿着x轴正方向旋转180度

  • 左手准则
  • 大拇指指向x轴的方向
  • 剩下的手指弯曲的方向就是x轴旋转的方向

• transform: rotateY(180deg)；沿着y轴正方向旋转180度

  • 左手准则
  • 大拇指指向y轴的方向
  • 剩下的手指弯曲的方向就是y轴旋转的方向

• transform: rotateZ(180deg)；沿着z轴正方向旋转180度

  • 类似于2d的旋转效果

• transform: rotate3d(x,y,z,180deg)；了解即可

5、3D呈现 transform-style

• 控制子元素是否开启三维立体环境。
• transform-style：flat子元素不开启3d立体空间 默认的
• transform-style：preserve-3d；子元素开启立体空间
• 代码写给父级，但是影响的是子盒子
• 这个属性很重要，后面必用

案例：3D 旋转

       body {
            perspective: 500px;

        }
        .box {
            transform-style: preserve-3d;
            position: relative;
            width: 200px;
            height: 300px;
            margin: 200px auto;
            transition: all 1s;
        }

        .box:hover {
            transform: rotateY(60deg);
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }

        .box div:last-child {
            transform: rotateX(60deg);
            background-color: skyblue;
        }