HTML5+CSS3
一、HTML基础
（一）HTML
1、常用浏览器
| 内核 | 浏览器 | 备注 |
|---|---|---|
| IE | Trident | IE,猎豹,360,百度 |
| FireFox | Gecko | 火狐 |
| Safari | Webkit | 苹果 |
| chrome/opera | Blink | chrome/opera |
2、Web标准
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，主要指HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS |
| 行为 | 网页模型的定义与交互，主要指JS |
3、HTML文档结构
<! DOCTYPE html><!-- 文档声明 -->
<html>
<head>
<meta charset="utf-8/zh-CH" /><!-- 字符集 -->
<title>标题</title>
<link />
<style></style>
</head>
<body>
</body>
</html>
4、HTML标签
a 按标签作用分：
文字类：
标题：<h1>~<h6> 段落：<p>
文本：<font>size 设置大小（1~7）；face设置字体；color设置颜色
下标：<sub> 上标：<sup>
删除线：<del>、<strike>
下划线：<u> 插入线：<ins>
换行：<br /> 水平线：<hr />
加粗：<strong>、<b> 倾斜：<em>、<i>
图片
<img>属性：src 图片位置
alt 图片不显示时的文字
title 鼠标经过时提示的文字
width 宽度
height 高度
border 边框
超链接
<a>属性：href 链接地址
name 锚------<a href="#two">跳转</a> <h3 id="two">文本</h3>
target 跳转方式：_parent,_blank（新窗口）,_self（原窗口）,_top（忽视框架）
表格
<table cellspacing="单元格间距" cellpadding="单元格与文字间的距离" border="边框宽度">
<caption>表格标题</caption>
<thead><th>标题行</th></thead>
<tbody>
<tr valign="垂直对齐方式：middle，top，bottom" align="水平对齐方式：center,right,left">
<td colspan="所跨列数" rowspan="所跨行数">单元格</td>
</tr>
</tbody>
</table>
列表
无序列表
<ol type="符号取值：1、a、A、i、I">
<li></li>
<li></li>
</ol>
有序列表
<ul type="符号取值：disc(圆点)、circle(空心圆点)、square(方块)">
<li></li>
<li></li>
</ul>
表单
<form action="后台处理程序" method="跳转方式：get/post">
<input type="控件类型">
text,password,radio,checkbox,file,mail,submit,button
<textare>文本域</textare>
<select>
<option>下拉列表框</option>
</select>
</form>
b 按类别划分
block块级标签
<h1>块级标签</h1>
<p>块级标签</p>
<div>块级标签</div>
inline行内标签
<div style="display: inline;height: 100px;width: 100px;background-color: aqua;">行内标签</div>
<i style="display:inline;">行内标签</i>
<em>行内标签</em>
<strong>行内标签</strong>
<b>行内标签</b>
<a href="地址">行内标签</a>
<span>行内标签</span>
行内块标签
<img src=" " alt=" ">
<input style="height:10px;" type="text">
（二）HTML5
1、新增格局划分标签
<header>头部</header>
<main>主体</main>
<nav>导航栏</nav>
<article>文章</article>
<section>区块</section>
<footer>尾部</footer>
<asider>侧边栏</asider>
2、多媒体标签
a 音频：
语法1：
<audio src="文件地址" controls="controls"></audio>
语法2：
<audio controls="controls" width="300">
<source src="happy.mp3" type="audio/mp3">
<source src="happy.ogg" type="audio/ogg">
</audio>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放 |
| controls | controls | 显示控件 |
| loop | loop | 循环 |
| src | url | 音频地址 |
b 视频
语法1：
<video src="文件地址" controls="controls"></video>
语法2：
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
您的浏览器暂不支持 <video> 标签播放视频
</video>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放（chrome需要添加muted） |
| controls | controls | 显示播放控件 |
| width | px | 宽度 |
| height | px | 高度 |
| preload | auto(预加载)，none(不预加载) | |
| src | url | 视频url地址 |
| poster | imgurl | 加载等待图片 |
| loop | loop | 循环播放 |
| muted | muted | 静音播放 |
3、新增的input类型
| 属性值 | 描述 |
|---|---|
| type="email" | 邮件 |
| type="url" | 地址 |
| type="time" | 时间 |
| type="month" | 月份 |
| type="week" | 周期 |
| type="number" | 数字类型 |
| type="tel" | 手机号码 |
| type="search" | 搜索框 |
| type="date" | 日期 |
| type="color" | 颜色选择表单 |
4、新增表单属性
| 属性 | 值 | 描述 |
|---|---|---|
| required | required | 不能为空 |
| placeholder | 提示文本 | 提示信息 |
| autofocus | autofocus | 自动聚焦 |
| autocomplete | off/on | 是否显示已填过的值 |
| multiple | multiple | 多选文件提交 |
可以通过以下设置方式修改placeholder里面的字体颜色：
input::placeholder {
color: pink;
}
二、CSS基础
（一）CSS
1、选择器
选择器{
属性: 值；
}
基础选择器：标签选择器、类选择器、id选择器和通配符选择器
复合选择器：基础选择器的组合
a 标签选择器
<h1>我是标题</h1>
h1 {
color: red;
}
b 类选择器
<div class="box">类选择器</div>
.box {
color: aqua;
}
c id选择器
<div id="box">id选择器</div>
#box {
color: aqua;
}
d 多类名选择器
<div class="box tit">多类名选择器</div>
.box {
color: red;
}
.tit {
color: aqua;
}//最终结果为color: aqua;
e 通配符选择器
* {
margin: 0;
padding: 0;
}
f 后代选择器
<div>
<h1>后代选择器</h1>
<p>
<h1>后代选择器</h1>
</p>
</div>
div h1{
color: aqua;//结果为：div的所有h1后代都color: aqua;
}
g 子代选择器
<div>
<h1>子代选择器</h1>
<p>
<h1>子代选择器</h1>
</p>
</div>
div h1{
color: aqua;//结果为：只有div的儿子h1变color: aqua;
}
h 群组选择器
<div>
<p>我是段落</p>
<h1>我是标题</h1>
<h2>我是标题2</h2>
</div>
div p,div h1 {
color: aqua;//结果：p和h1变color:aqua;
}
i 相邻同胞选择器
j 伪类选择器
<div>
<h1>选择器</h1>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ul>
</div>
ul:first-child {
color: aqua;//第一个li变color: aqua;
}
ul:last-child {
color: red;//最后一个li变color: red;
}
ul:nth-child(2) {
color: blue;//第2个li变color: blue;
}
input:focus {
background-color:blue;
}
结构性伪类选择器
<div>
<h1>选择器</h1>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ul>
</div>
div ul:fist-of-type {
color: aqua;//第一个li变color: aqua;
}
div ul:last-of-type {
color: red;//最后一个li变color: red;
}
div ul:nth-of-type(2) {
color: blue;//第2个li变color: blue;
}
k 属性选择器
<div>
<input type="text">表单
<input type="button" value="按钮">
</div>
input[type="text"] {
color: auqa;第一个input变color: aqua;
}
o 伪元素选择器
.box:before {
content: ' ';
}
.box:after {
content: ' ';
}
.box::before {
content: ' ';
}
.box::after {
content: ' ';
}
p UI元素状态伪类选择器
<div>
<input type="text">输入框
<button disabled="ture">按钮</button>
</div>
:input{}
:disabled{}
input:focus{}
q 链接伪类选择器
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
a:active {
}
a:visited {
//被访问过
}
a:link {
}
2、属性
a 文字
文字：font,font-size,font-family,font-weight,font-style,color,line-height,text-align,valign....
<div>
<p>段落</p>
</div>
<style>
div p {
font-family: Arial,"Microsft Yahei";//字貌
font-size: 20px;//字体大小
font-weight: 400;//字体粗细：400不加粗，700加粗
font-style: normal;//字体风格：normal:不倾斜，italic:倾斜
color: red;//字体颜色：#fff,#ffffff,rgb(red,green,blue),rgba(red,green,blue,transparency)
text-align: center;//文本水平对齐方式：left,right,center
text-decoration: none;//文本修饰：none,underline,overline,line-through;
text-indent: 2em；//文本缩进：单位：px,em
line-height: 12px;//行高
text-shadow: x y blur color;//文本阴影：x:水平，y:垂直，blur:模糊距离，color:颜色。
}
</style>
b 盒子型
<div>
<p>段落</p>
</div>
<style>
div p {
background-color: aqua;//背景颜色
background-color: transparent;//透明
background-image:none/url("图片地址")//背景图片：none:无图片，url：图片地址
background-repeat:repeat;//背景平铺：repeat:x,y都平铺，no-repeat:不平铺，repeat-x:x平铺，repeat-y:y平铺；
background-position: x y;//背景图片位置：legth:10px,top,center,bottom,left,center,right;
background-attachment: scroll | fixed;//背景图片固定：scroll:随内容滚动，fixed：固定不动；
background: transparent url(image.jpg) repeat-y fixed top;
background: rgba(1,1,1,.3);//背景半透明
margin: 10px;//外边距
border: 1px solid/ red;//边框
padding: 10px;//内边距
content: '内容';//内容
---box-sizing: border-box;//盒子类型：content-box：content+padding,border-box:height,width;
---border-collapse:collapse;//表格的细线边框:collapse:合并相邻单元格的边框
}
border-radius: 5px;//圆角
border-shadow: x y blur spread color inset;//盒子阴影：x:水平阴影，y:垂直阴影，blur:模糊距离，spread:阴影尺寸，color:阴影颜色，inset:将外部阴影（outset）改为内部阴影。
</style>
3、三种引入方式
a 内部样式表
<style>
div p {
color: red;
}
</style>
<body>
b 行内样式表
<div style="color: red; font-size: 12px;">样式表</div>
c 外部样式表
<link rel="stylesheet" href="css文件路径">
4、chrome调试
f12开启调试功能
Ctrl+滚轮：代码放大缩小
Ctrl+0：恢复浏览器大小
5、CSS的元素显示模式
disply: block;//块级元素
display: inline;//行内元素
display: inline-block;//行内块元素
a 块级元素特点
1、独占一行。
2、高度、宽度、外边距及内部价都可以控制（设置大小）。
3、宽度默认是容器的100%。
4、可放置行内元素和块级元素。
5、文字类的元素内不能使用块级元素。（p,h1~h6）
h1~h6,p,div,ul,ol,li
b 行内元素
1、相邻行内元素在一行显示。
2、高、宽直接设置无效。
3、默认宽度是内容本身宽度。
4、行内元素只能容纳文本或其他行内元素
5、链接里面不能再放链接。
a,strong,b,u,span
c 行内块元素
1、相邻元素在一行显示，但彼此之间有空白缝隙。
2、默认宽度是内容本身宽度。
3、宽度，高度，内边距及外边距可直接设置大小。
display:inline-block;
input,img
6、权重
!important(10000)>内联样式(1000)>id(100)>class(10)>标签（1）
Tips:
复合选择器的权重计算：
将基本选择器的权重相加之和，就是权重大小，值越大，权重越高。
如：#box ul li a.info 权重是 100 + 1 + 1 + 1 + 10 = 113
7、CSS三大特性
层叠性：就近原则
继承性：父子继承
优先级：权重
8、浮动
普通流（标准流）
浮动：float: value;//value:left,right,none
定位:position: value;//relative,absolute,fixed
a 浮动的特点
1、浮动元素会脱离标准流（脱标）。不占有原来位置
2、浮动元素一行显示，且与空白缝隙。
3、浮动元素具有行内块元素的特点（默认宽度：内容本身；可设置宽高）
9、CSS定位
a 静态定位：static
1、静态定位按照标准流特性摆放位置，它没有边偏移。
position: static;
b 相对定位
1、相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
position: relative;
c 绝对定位
1、绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）
2、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）
3、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
4、绝对定位不再占有原先的位置。（脱标）
position: absolute;
d 固定定位
1、固定定位是元素固定于浏览器可视区的位置。主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。
2、以浏览器的可视窗口为参照点移动元素。
3、跟父元素没有任何关系
4、不随滚动条滚动。
5、固定定位不在占有原先的位置，是脱标的。
position: fixed;
e 粘性定位
1、粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的
2、以浏览器的可视窗口为参照点移动元素（固定定位特点）
3、粘性定位占有原先的位置（相对定位特点）
4、必须添加 top 、left、right、bottom 其中一个才有效
5、跟页面滚动搭配使用。 兼容性较差，IE 不支持
position: sticky;
10、定位盒子的特性
1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3、脱标的盒子不会触发外边距塌陷
4、绝对定位（固定定位）会完全压住盒子
11、定位叠放次序
1、数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
2、如果属性值相同，则按照书写顺序，后来居上
3、数字后面不能加单位
4、只有定位的盒子才有 z-index 属性
.box {
z-index: 1;
}
12、CSS用户界面样式
a 鼠标样式：cursor
li {
cursor: default;//默认:小白
}
li {
cursor: pointer;//小手
}
li {
cursor: move;//移动
}
li {
cursor: text;//文本
}
li {
cursor: not-allowed;//禁止
}
b 轮廓线：outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
outline: none;
c 防止拖拽文本域 resize
textare {
resize: none;
}
d vertical-align属性
1、CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
2、用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
vertical-align : baseline（基线） | top（顶端） | middle（父元素中间） | bottom（底端）
（二）Emmet语法
1、快速生成HTML结构
div+tab键
div*3 + tab键：多个标签
ul>li + tab键：父子级标签
div+p + tab键：兄弟标签
.box + tab键：带类名
#box + tab键：带id名
$：自增符号
{}：标签内部要写的内容
2、快速生成CSS样式语法
w200 + tab键：width: 200px;
h200 + tab键：height: 200px;
lh12 + tab键：line-height: 12px;
3、快速格式化
vscode：shift+alt+f
（三）CSS技巧
1、单行文字垂直居中
高度和行高相等
p {
height: 20px;
line-height: 20px;
}
2、块级元素水平居中
margin: 0 auto;
margin: auto;
margin-left: auto; margin-right: auto;
3、行内元素或行内块元素水平居中
父元素添加：text-align:center;
4、外边距合并
a 相邻块元素垂直外边距合并
b 嵌套块元素垂直外边距合并
5、去掉li前面的项目符号
list-style: none;
6、清除浮动
a clear
clear: left;//清除盒子浮动，left:不允许左边有浮动元素，right：右边,both:不允许左右两侧有浮动元素.
b 清除浮动的策列
1、额外标签法（隔墙法）
在浮动元素末尾添加一个空标签：<div style="clear: both;"></div>
2、给父级元素添加:overflow
.parent {
overflow:hidden;//hidden:隐藏多余部分，auto：自动添加滚动条，scroll:添加滚动条
}
3、：after伪元素法:给父元素添加
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear {
*zoom: 1;
}
4、双伪元素法：给父元素添加
.clearfix:before,.clearfix:after {
content:'';
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}
7、子绝父相
8、固定在版心右侧位置
1、计算：
让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。
让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。
9、绝对定位的盒子居中
1、加了绝对定位的盒子不能通过 margin:0 auto 水平居中
2、计算方法：
left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
margin-left: -100px;：让盒子向左移动自身宽度的一半。
10、元素的显示与隐藏
a display 显示隐藏
display: none;//隐藏对象
display: block;//有显示元素
display 隐藏元素后，不再占有原来的位置。
b visibility 显示隐藏
1、visibility 属性用于指定一个元素应可见还是隐藏。
visibility: visible;//元素可视
visibility: hidden;//元素隐藏
visibility 隐藏元素后，继续占有原来的位置
c overflow 溢出显示隐藏
overflow: visible;//不剪切内容，也不添加滚动条
overflow: hidden;//隐藏超过的部分
overflow: scroll;//显示滚动条
overslow: auto;//自动
11、CSS三角
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
}
12、图片、表单和文字对齐
<img src="image.png">
<textarea cols="30" rows="10"></textarea>
img {
vertical-align: middle;
}
textarea {
vertical-align: middle;
}
13、解决图片底部默认空白缝隙问题
1、给图片添加 vertical-align:middle | top| bottom 等
2、把图片转换为块级元素 display: block;
14、溢出部分的文字省略号显示
1、单行文本溢出显示省略号
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
2、多行文本溢出显示省略号
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
（四）网页布局
1、常见布局
a 浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置。
b 一个元素浮动了，理论上其余的兄弟元素也要浮动。
1、一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
2、浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
2、常见布局技巧
a margin负值的运用
1、让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框。
2、鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）
b 文字围绕浮动元素
1、巧妙运用浮动元素不会压住文字的特性
c 行内块的巧妙运用
页码在页面中间显示:
1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
d CSS三角强化
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0
（五）CSS高级技巧
1、精灵图
1、精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。精灵图也称为 sprites 精灵图 或者 雪碧图
2、移动背景图片位置， 此时可以使用 background-position 。
3、移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
4、使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>利用精灵图拼出自己名字</title>
<style>
span {
display: inline-block;
background: url(images/abcd.jpg) no-repeat;
}
.p {
width: 100px;
height: 112px;
/* background-color: pink; */
background-position: -493px -276px;
}
.i {
width: 60px;
height: 108px;
/* background-color: pink; */
background-position: -327px -142px;
}
.n {
width: 108px;
height: 109px;
/* background-color: pink; */
background-position: -215px -141px;
}
.k {
width: 105px;
height: 114px;
/* background-color: pink; */
background-position: -495px -142px;
}
</style>
</head>
<body>
<span class="p">p</span>
<span class="i">i</span>
<span class="n">n</span>
<span class="k">k</span>
</body>
</html>
2、字体图标
1、字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。
2、使用步骤：字体图标下载-->html引入字体图标-->追加
下载：icomoon 字库 http://icomoon.io 或 阿里 iconfont 字库 http://www.iconfont.cn/
引入： 把下载包里面的 fonts 文件夹放入页面根目录下-->在style中引入@font-face {.......}--->复制htnl标签内的小图标添加的需要引入小图片标的地方--->给标签设置字体：span {font-family:"icommon";}
追加：点击imports,选择selection.json文件
3、伪元素字体图标
p::before {
position: absolute;
right: 20px;
top: 10px;
content: '\e91e';
font-size: 20px;
}
4、伪元素选择器-仿土豆效果
/* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
.tudou:hover::before {
/* 而是显示元素 */
display: block;
}
（六）CSS3新特性
1、图片变模糊：滤镜filter
filter:blur(5px);
2、calc()函数：计算值
width: calc(100% - 80px);
括号里面可以使用 + - * / 来进行计算。
3、CSS3过渡
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3过渡练习-进度条</title>
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
/* 谁做过渡给谁加 */
transition: all .7s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>
4、2D转换:transform
1、转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
移动：translate
旋转：rotate
缩放：scale
a 移动：translate
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);
特点：
1、定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
2、translate最大的优点：不会影响到其他元素的位置
3、translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
4、对行内标签没有效果
b 旋转：rotate
transform:rotate(度数)
特点：
1、rotate里面跟度数， 单位是 deg 比如 rotate(45deg)
2、角度为正时，顺时针，负时，为逆时针
3、默认旋转的中心点是元素的中心点
c 2D转换中心点treansform-origin
transform-origin: x y;
特点：
1、注意后面的参数 x 和 y 用空格隔开
2、x y 默认转换的中心点是元素的中心点 (50% 50%)
3、还可以给x y 设置 像素 或者 方位名词 （top bottom left right center）
d 缩放scale
transform:scale(x,y)
特点：
1、注意其中的x和y用逗号分隔
2、transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
3、transform:scale(2,2) ：宽和高都放大了2倍
4、transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
5、transform:scale(0.5,0.5)：缩小
6、sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
e 2D转换综合写法
transform: translate() rotate() scale() ...等
5、3D动画：animation
a 基本使用
步骤：1先定义动画，2再使用动画
1、定义动画
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
2、使用动画
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/*调用动画*/
animation-name: 动画名称;
/*持续时间*/
animation-duration: 持续时间;
}
b 动画常用属性
c 动画简写
animation: myfirst 5s linear 2s infinite alternate;
d 速度曲线细节
6、3D转换
a 三维坐标
主要知识点：
3D位移：translate3d(x,y,z)
3D旋转：rotate3d(x,y,z)
透视：perspective
3D呈现：transform-style
b 3D移动 translate3d
transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离
c 透视perspective
translform:translateZ(100px)：仅仅是在Z轴上移动。
有了透视，就能看到translateZ 引起的变化了
translateZ：近大远小
translateZ：往外是正值
translateZ：往里是负值
d 3D旋转rotate3s
3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转。
语法
1、transform:rotateX(45deg)：沿着x轴正方向旋转 45度 transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
2、transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
3、transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）
4、对于元素旋转的方向的判断 我们需要先学习一个左手准则：
a左手的手拇指指向 y轴的正方向
b其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）
5、transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）
xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。
transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg
transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg
e 3D呈现transfrom-style
1、控制子元素是否开启三维立体环境。。
2、transform-style: flat 子元素不开启3d立体空间 默认的
3、transform-style: preserve-3d; 子元素开启立体空间
4、代码写给父级，但是影响的是子盒子
7、浏览器私有前缀
1、浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
2、私有前缀：
-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-o-：代表 Opera 私有属性
如：
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
三、PS基础操作
（一）快捷键
Ctrl+R：打开标尺-右击标尺可改变单位
Ctrl+(+)：放大视图
Ctrl+(-)：缩小视图
按住空格键，鼠标可以变成小手，拖动 PS 视图
Ctrl+D：取消选区
（二）PS切片
1、最简单方法：右击图层 --> 导出 PNG 切片。
2、切片切图：切片工具手动划出-->文件菜单-->存储为web设备所用格式-->选择要的图片格式-->存储
3、PS插件切图：利用cutterman
1、新增选择器
a 属性选择器
| 选择符 | 描述 |
|---|---|
| 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元素 |
b 结构伪类选择器
| 选择符 | 描述 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
区别：
1. nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
2. nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
c 伪元素选择器
| 选择符 | 描述 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
四、网站制作
（一）网站制作流程
（二）项目搭建
1、创建文件夹
| 名称 | 描述 |
|---|---|
| 项目文件夹 | 如：shoping |
| 样式类图片文件夹 | images |
| 样式文件夹 | css |
| 产品类文件夹 | upload |
| 字体类文件夹 | fonts |
| 脚本文件夹 | js |
2、创建文件
| 名称 | 描述 |
|---|---|
| 首页 | index.html |
| CSS初始化样式文件 | base.css |
| CSS公共样式文件 | common.css |
3、网站的favicon图标
a 制作favicon图标
将png图片，转为ico图标：比特虫：http://www.bitbug.net/
b favicon图标放到网站根目录下
c HTML页面引入favicon图标
<link rel="shorcut icon" href="favicon.ico" type="image/x-icon"/>
4、网站TDK的三大标签SEO优化
1、SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索
引擎内自然排名的方式。
a title网站标题
1、title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）
2、如：京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
b description 网站说明
1、description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。
如：
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
c keywords关键字
1、keywords 是页面关键词，是搜索引擎的关注点之一。
2、keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式
如：
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！