01-HTML+CSS

最新推荐文章于 2024-05-02 17:43:45 发布

Robber2000

最新推荐文章于 2024-05-02 17:43:45 发布

阅读量1.4k

点赞数 9

分类专栏：前端开发文章标签： html css 前端 vscode javascript

本文链接：https://blog.csdn.net/m0_67302067/article/details/129479051

版权

前端开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

前端开发

一、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、注释和特殊字符

注释

<!--注释-->

特殊字符

&nbsp: 空格
&lt: <
&gt: >

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">pink</p>

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">1</div>
<div class="table">2</div>
<div class="table">3</div>
<div class="table">4</div>
<div class="table">5</div>

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的css</p>
</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;
}
<ul>
	<li>大猪肘子</li>
</ul>
//结果：大猪肘子是粉色的

案例

//权重为：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.5、固定定位（重要）

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

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

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

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

1.6、粘性定位（了解）

特定

以浏览器的可视窗口为参照点移动元素（固定定位的特点）
粘性定位占有原先的位置（相对定位特点）
必须添加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）的使用

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

2、字体图片

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

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

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

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>1</li>
    <li>1</li>
    <li>2</li>
</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">1</div>
<div class="icon3">1</div>
<div class="icon4">1</div>

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

属性选择器，类选择器权重都是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>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</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 过度（重点）

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

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

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

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

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

title 网站标题
- 建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）
description 网站说明
- 简要说网站做什么的
keywords 关键字
- keywords 是关键字，是搜索引擎的关注之一

<title>asdl;fkjsdalkfj</title>
<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 优化

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

语法

	transform: scale(x,y);

注意
- 注意起中得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

透视卸载被观察元素的父盒子上面
- d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
- z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大
注意
- 距离视觉点越近的电脑平面成像越大，月圆成像越小
- 透视的单位是像素

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;
        }