1.CSS简介
CSS的主要使用场景就是美化网页，布局页面的。
1.1HTML的局限性
说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如
表明这是一个大标题，
表明这是一个段落，表明这儿有一个图片，表示此处有链接。
1.2 CSS-网页的美容师
CSS是层叠样式表(Cascading Style Sheets)的简称.
有时我们也会称之为CSS样式表或级联样式表。
总结:
- HTML主要做结构,显示元素内容.
- CSS美化 HTML,布局网页.
- CSS最大价值:由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS）相分离。
1.3 CSS语法规范
使用HTML时，需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解cSS样式规则。
CSS规则由两个主要的部分构成∶选择器以及一条或多条声明。
- 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用英文 “:” 分开
- 多个“键值对”之间用英文 “;” 进行区分
1.4 CSS代码风格
1.样式格式书写
①紧凑格式
h3 { color: deeppink; font-size: 20px; }
②展开格式
h3 {
color: pink;
font-size: 20px;
}
2.样式大小写
强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
3.空格规范
h3 {
color: pink;
}
①属性值前面，冒号后面，保留一个空格
②选择器（标签）和大括号中间保留空格
2.CSS基础选择器
2.1CSS选择器的作用
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。
**选择器**分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。
- 基础选择器是由单个选择器组成的
- 基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
2.2标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;…
…
}
<span>
一二三四五，上山打老虎。
</span>
<style>
span {
color: red;
}
</style>
作用
标签选择器可以把某一类标签全部选择出来，比如所有的
优点
能快速为页面中同类型的标签统一设置样式。
缺点
不能设计差异化样式，只能选择全部的当前标签。
2.3类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
语法
结构需要用class属性来调用 class 类的意思
<div class= 'red'> 变红色 </div>
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“".”号显示。
注意
①类选择器使用“.”（英文点号)进行标识，后面紧跟类名(自定义，我们自己命名的)。
②可以理解为给这个标签起了一个名字，来表示。
③长名称或词组可以使用中横线来为选择器命名。
④不要使用纯数字、中文等命名，尽量使用英文字母来表示。
⑤命名要有意义，尽量使别人一眼就知道这个类名的目的。
⑥命名规范:见附件( Web前端开发规范手册.doc )
记忆口诀∶样式点定义，结构类调用。一个或多个，开发最常用。
<h2 class="red">目录</h2>
<p class="red">哈哈</p>
<style>
.red{
color: rgb(32, 240, 77);
}
</style>
案例：
用类选择器画盒子
<head>
<style>
.bg {
width: 100px;
height: 100px;
<!--背景颜色-->
background-color: red;
}
.bg2 {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="bg2"></div>
<div class="bg"></div>
</body>
2.4类选择器-多类名
1.多类名使用方式
<div class="red font20">亚瑟</ div>
(1)在标签class属性中写多个类名
(2)多个类名中间必须用空格分开
⒉多类名开发中使用场景
(1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2)这些标签都可以调用这个公共的类然后再调用自己独有的类.
(3)从而节省CSS代码,统一修改也非常方便.
<head>
<style>
.box {
width: 100px;
height: 100px;
}
.bg {
background-color: red;
}
.bg2 {
background-color: green;
}
</style>
</head>
<body>
<div class="box bg"></div>
<div class="box bg2"></div>
<div class="box bg"></div>
</body>
</html>
2.5 id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中id选择器以“#"来定义。
语法
#id名 {
属性1:属性值1;
…
}
例如，将id为nav元素中的内容设置为红色。
#nav {
color : red ;
}
<style>
#pink{
color: pink;
}
</style>
<div id="pink">杨洋</div>
注意:id属性只能在每个HTML文档中出现一次。口诀:样式#定义,结构id调用,只能调用一次别人切勿使用.
id选择器和类选择器的区别
①类选择器( class )好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
②id选择器好比人的身份证号码，全中国是唯一的，不得重复。
③id选择器和类选择器最大的不同在于使用次数上。
④类选择器在修改样式中用的最多, id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。
2.6通配符选择器
<style>
<!--这里把<html> <body> <p> <ul> <li>等等所有标签都改成了红色-->
*{
color: red;
}
</style>
<p>雯雯</p>
<ul>
<li>我的</li>
<li>都是我的</li>
</ul>
2.7基础选择器总结
3.CSS字体属性
3.1字体系列
<body>
<style>
h2 {
font-family: "宋体";
}
</style>
<h2>秋夜曲</h2>
<h4>作者：王维</h4>
<p>桂魄初生秋露微，轻罗已薄未更衣。</p>
<p>银筝夜久殷勤弄，心怯空房不忍归。</p>
</body>
3.2字体大小
3.3字体加粗
<style>
.bold {
/* 字体加粗样式 */
/* font-weight: bold; */
/* 数字后面不用跟单位，等价于bold,都是加粗的效果 */
font-weight: 100;
}
</style>
<p class="bold">拼死也要克服</p>
3.4字体样式
3.5字体复合属性
<style>
div {
font:italic 700 16px 'Microsoft YaHei';
}
<style>
<div>三生三世十里桃花，一心一意百行代码</div>
3.6字体属性总结
4.CSS文本属性
4.1颜色color属性
三种表达方式：
color: red; 或 color: #888888; 或color：#FFFFFF;
4.2对齐属性text-align
4.3text-dcoration
4.4缩进text-indent
4.5行间距line-height
4.6总结
5.CSS引入方式
5.1内部样式表
5.2行内样式表
一般使用的少，只有对当前标签元素添加简单的样式时可以考虑使用，不推荐
5.3外部样式表(推荐)
1.单独建一个.css文件，所有css代码都写在此文件中，之后把css文件引入到HTML中使用
2.在HTML页面中，使用标签引入这个文件。
<link rel="stylesheet" href=".css文件路径">
开发中常用的链接方式推荐使用！！！
5.4总结
==注 意：==图片标签无法使用text-align :center;居中对齐，可以放在p标签里，给 父标签p 居中对齐
.pic {
text-align: center;
}
<p class="pic">
<img src="../images/bg.jpg" alt="天气" />
</p>
6.代码调试工具
f12快捷键打开控制台
7.Emmet语法
7.1快速生成HTML结构语法
7.2快速生成css结构语法
7.3快速格式化文档
VScode中 在HTML文件中鼠标右键——>格式化文档
快捷键：shift+alt+F
8.CSS复合选择器
8.1什么是复合选择器
8.2后代选择器(重要)
8.3子选择器(重要)
8.4并集选择器(重要)
8.5伪类选择器
1.链接伪类选择器(上)
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
<html>
<style>
/* a:link 未访问的链接 */
a:link {
color: #333;
text-decoration: none;
}
/* a:visited 选择已被点击(访问)过的链接 */
a:visited {
color: orange;
}
/* a:hover 选择鼠标经过的链接 */
a:hover {
color: skyblue;
}
/* a:active 选择鼠标正在按下还没有弹起的链接 */
a:active {
color: green;
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
</body>
</html>
2.链接伪类选择器(下)
8.6 :focus伪类选择器
<html>
<style>
input:focus {
background-color: pink;
}
</style>
</head>
<body>
<input type="text" />
<input type="text" />
<input type="text" />
</body>
</html>
8.7复合选择器总结
9.CSS的元素显示模式
9.1什么是元素显示模式
9.2块元素
常见的块元素有h1~h6、p、div、ul、ol、li等等，其中div标签是最典型的块元素。
9.3行内元素
常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等，其中span标签是最典型的行内元素。也将行内元素称为内联元素。
9.4行内块元素
9.5元素显示模式总结
9.6元素显示模式转换
</html>
<style>
a {
width: 266px;
height: 200px;
background-color: lightcoral;
/* 把行内元素设置为块级元素 */
display: block;
}
div {
width: 100px;
width: 60px;
background-color: lightblue;
/* 把块级元素设置为行内元素 */
display: inline;
}
m1 {
width: 100px;
width: 60px;
/*转换为行内块元素*/
display: inline-block;
}
</style>
</head>
<body>
<a href="#">我是一只小青龙</a>
<a href="#">我是一只小青龙</a>
<div>块级元素</div>
<div>块级元素</div>
<img class="m1" src="../images/timg.jpg" alt="头像" />
</body>
</html>
9.7一个小工具的使用 snipaste
9.8小米侧边栏小案例
<head>
<style>
a {
/* 1.把a标签转为块级元素 */
display: block;
width: 190px;
height: 20px;
background-color: rgb(104, 101, 101);
font-size: 12px;
/* 文字上下居中 */
padding-top: 6px;
padding-bottom: 6px;
text-indent: 2em;
color: rgb(245, 240, 240);
}
a:hover {
cursor:pointer;
background-color: rgb(247, 142, 6);
}
</style>
</head>
<body>
<label></label><a>手机 电话卡</a></label>
<a>电视 盒子</a>
<a>笔记本 平板</a>
<a>出行 穿戴</a>
<a>智能 路由器</a>
<a>健康 儿童</a>
<a>耳机 音响</a>
</body>
效果：
9.9单行文字的垂直居中原理
<head>
<style>
a {
/* 1.把a标签转为块级元素 */
display: block;
width: 190px;
height: 40px;
background-color: rgb(104, 101, 101);
font-size: 12px;
/* 让文字的行高=盒子的高度，就可以让文字上下垂直居中 */
line-height: 40px;
}
</style>
</head>
<body>
<label></label><a>手机 电话卡</a></label>
</body>
10.CSS的背景属性
10.2背景图片
10.3背景平铺
10.4背景图片位置
1.参数是方位名词：
(1)如果指定的两个值都是方位名称，则两个值前后顺序无关，比如left top 和top left效果一致
(2)如果只指定了一个方位名词，另一个值省略，则第二个默认值居中对齐
/* background-position: 方位名词; */
/* background-position: center top; */
/* background-position: right center; */
/如果是方位名词 right center 和 center right 效果是等价的 跟顺序没有关系/
/* background-position: center right ; */
/此时 水平一定是靠右侧对齐 第二个参数省略y 轴是 垂直居中显示的/
/* background-position: right ; */
/此时 第一个参数一定是 top y轴 顶部对齐 第二个参数省略x轴是 水平居中显示的/
/* background-position: top; */
10.4背景位置案例1
<head>
<style>
h3 {
width: 118px;
height: 40px;
//取消字体加粗
font-weight: 400;
font-size: 14px;
background-color: white;
line-height: 40px;
background-image: url(../images/QQ1.png);
//背景图片取消平铺效果
background-repeat: no-repeat;
//背景图片靠左水平居中
background-position: left center;
text-indent: 2em;
}
body {
background-image: url(../images/main-bg1.jpg);
background-repeat: no-repeat;
/* 背景图片不管大小屏幕大小，都水平居中对齐 */
background-position: center top;
}
</style>
</head>
<body>
<h3>家长守护平台</h3>
</body>
2.参数是精确单位
（1）如果参数值是精确单位，那么第一个肯定是X坐标，第二个一定是Y坐标；
（2）如果只指定一个数值，那么该数值一定是X坐标，另一个默认垂直居中。
<head>
<style>
.green {
width: 200px;
height: 200px;
background-color: pink;
background-image: url(../images/QQ1.png);
background-repeat: no-repeat;
/*20px一定是X轴，50px一定是Y轴，位置不能换*/
background-position: 20px 50px;
}
</style>
</head>
<body>
<div class="green"></div>
</body>
3.参数是混合单位，第一个参数一定是X坐标，第二个一定是Y坐标。
如：background-position: center 40px;
10.5背景图像固定(背景附着)
10.6背景复合写法
这是实际开发中我们更提倡的写法
例：
<style>
background: pink url(../images/main-bg1.jpg) no-repeat fixed center top;
</style>
10.7背景色半透明
10.8背景总结
11.CSS的三大特性
CSS有三个非常重要的三个特性：层叠性、继承性、优先级
11.1层叠性
11.2继承性
如上图，p标签继承了div标签的样式，不是所有父标签的样式子标签都会继承，会继承跟文字相关的样式。
2.1行高的继承性
11.3优先级
<style>
.nav {
color: red !important;
}
p {
color: #000;
}
#c {
color: green;
}
</style>
</head>
<body>
<div class="nav">
<p id="c" style="color: blue">五彩导航</p>
</div>
</body>
结果：“五彩导航”文字的颜色为蓝色，虽然设置父元素标签权重为！important，但是该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0.
所有我们以后看标签到底执行哪个样式，就看这个标签有没有直接被选出来。
11.4权重的叠加
li标签里的文字为绿色。
权重虽然会叠加，但永远不会有进位。
权重练习：
答案：第一个li标签文字颜色为红色，字体加粗效果，因为.nav li的权重为11>.pink的权重为10。
12.盒子模型
12.1看透网页布局的本质
网页布局过程：
1.先设置好标签，网页元素基本上都是盒子；
2.利用css设置好盒子样式，然后摆放到相应位置；
3.往盒子里面装内容。
12.2盒子模型(Box Model)组成
12.3边框(border)
边框样式：实线边框 /虚线边框 /点线边框
borer-style：solid / dashed / dotted
边框简写：
border：1px solid pink; //没有顺序
边框分开写法：top、bottom、left、right
border-top：1px solid pink; //只设定上边框，其余边框同理；
12.4表格的边框合并
解决相邻的边框粗细不一的问题。
12.5边框会影响盒子的实际大小
如果边框左右两边都有，则减去双倍的边框宽度。
12.6内边框(padding)
简写：
12.7padding会影响盒子实际大小
12.8padding应用
如果导航栏的盒子里字数不一，可以不设置盒子宽度，直接设置相同的padding值
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。
12.9盒子模型外边距(margin)
margin的简写方式的代表意义完全跟padding完全一致。
12.10外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：
①盒子必须指定了宽度(width)。
②盒子左右的外边距都设置为auto。
例：.header{width:960px;margin:0 auto;}
块级盒子水平居中常见的写法，以下三种都可以：
①margin-left:auto; margin-right:auto;
②margin:auto; //上下左右居中；
③margin：0 auto； //左右设置为居中
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center 即可
12.11外边距合并
12.12外边距合并-嵌套块元素塌陷
塌陷问题就是设置了父、子元素的外边距，但没有显示出来效果，子元素和父元素粘在一起。
上面第③种为常用方案。
浮动的盒子不会有外边距合并的问题
12.13清除内外边距
13.ps基本操作
14.圆角边框(重点)
15.盒子阴影(重点)
16.文字阴影
17.CSS浮动
17.1传统网页的三种布局方式
网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应位置；
CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）：
1.标准流(普通流/文档流)
17.2为什么需要浮动？
17.3什么是浮动？
17.4浮动特性(重难点)
1.脱标：
2.浮动元素一行显示：
浮动会根据浏览器大小，调整对齐排列。
3.浮动元素具有行内块元素的特性：
17.5浮动元素经常和标准流父级搭配使用
17.6浮动布局练习
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 285px;
background-color: pink;
margin: 0 auto;
}
.box li {
width: 296px;
height: 285px;
background-color: rgb(247, 238, 112);
float: left;
margin-right: 14px;
}
/* 最后一个盒子不需要设置它的外边距，否则父盒子装不下会被挤到下一行排列，选择器需要注意权重问题！ */
.box .last {
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
</body>
如图：
17.7常见的网页布局
17.8浮动布局的注意点
18.清除浮动
18.1我们为什么要清除浮动？
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
18.2清除浮动的本质
18.3清除浮动的方法
1.额外标签法：
2.给父级元素添加overflow：
overflow：hidden； //原译是隐藏边框溢出部分
- :after伪元素法
.clearfix::after{
content: ""; //伪元素必须写的属性
display: block; //插入的元素必须是块级
height: 0; //不要看见这个元素
clear: both; //核心代码清除浮动
visibility: hidden; //不要看见这个元素
}
/* IE6、7专有 */
.clearfix{
*zoom:1;
}
<div class="box clearfix"> </div>
4.双伪元素清除浮动：
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。
也是给父元素添加
.clearfix:before,
.clearfix:after {
content: "";
display: table; 转换为块级元素并且一行显示
}
.clearfix:after {
clear: both;
}
/* IE6、7专有 */
.clearfix {
*zoom: 1;
}
<div class="box clearfix"> </div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mSVFNg23-1636969803019)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20211109181032718.png)]
18.4清除浮动总结
19.PS切图
19.1常见的图片格式
.jpg、.gif、.png这三种格式的图片文件可以直接放到页面中，PSD文件不能直接放在页面中，是设计稿文件。
19.2切图
19.3插件切图
20.CSS属性书写顺序(重要)
21.页面布局的整体思路
22.学成在线案例
margin会合并外边距，但padding不会
23.定位
23.1为什么需要定位？
23.2定位组成
top、bottom、left、right这4个属性只对定位有效！
23.3静态定位static(了解)
23.4相对定位relative(重要)
23.5绝对定位absolute(重要)
23.6子绝父相的由来
23.7固定定位fixed(重要)
例：
23.8粘性定位sticky(了解)
23.9定位总结
23.10定位叠放次序 z-index
23.11定位的拓展
24.网页布局总结
通过盒子模型，清楚知道大部分html标签是一个盒子。
通过CSS浮动、定位可以让每个盒子排列成为网页。
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
1.标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3.定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
25.元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
本质：让一个元素在页面中隐藏或者显示出来。
1.display显示隐藏元素，但是不保留位置。
2.visibility显示隐藏元素，但是保留原来的位置。
3.overflow 溢出显示隐藏，但是只是对于溢出的部分处理。
25.1display属性(重要)
display属性用于设置一个元素如何显示。
①display：none; 隐藏对象
②display：block;除了转换为块级元素之外，同时还有显示元素的意思。
display隐藏元素后，不再占有原来的位置。
后面应用极其广泛，搭配JS可以做很多的网页特效。
25.2visibility 可见性
visibility属性用于指定一个元素应可见还是隐藏。
①visibility: visible; 元素可视
②visibility: hidden; 元素隐藏
visibility隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置，就用visibility ：hidden
如果隐藏元素不想要原来位置，就用display: none(用处更多 重点)
25.3 overflow溢出
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow: hidden 因为它会隐藏多余的部分。
26.精灵图
26.1为什么需要精灵图？
精灵技术目的：
为了有效地减少服务器接收和发送请求的次数，提高页面地加载速度。
26.2精灵图(sprites)的使用
使用精灵图核心：
1.精灵技术主要针对于小背景图片使用。就是把多个小背景图片整合到一张大图片中。
2.这个大图片也称为sprites 精灵图 或者 雪碧图
3.移动背景图片位置，此时可以使用background-position。
4.移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同，x坐标越往右越大，y坐标越往下越大。
5.因为一般情况下都是往上往左移动，所以数值是负值。
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
例：
27.字体图标
27.1字体图标的产生
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显：
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展现的是图标，本质属于字体。
27.2字体图标的优点
27.3字体图标使用方法
27.4字体图标的引入
第一步：
==第二步：==把这些字体声明文件复制到我们的CSS页面中：
以上在style.css文件中复制就可。
第三步：还是下载字体图标的文件夹中，打开demo.html文件：
将小图标复制到span标签中。
第四步：必须给span指定一个字体，一般就用font-family: ‘icomoon’;。
最后，就可以给字体图标设置字号、颜色等等。
27.5字体图标的追加
第一步：打开网址，选则 IcoMoon App
第二步：
第三步：
第四步：继续选择新的图标，然后：
最后：
28.CSS三角制作
<style>
.box {
width: 0;
height: 0;
border-top: 10px solid pink;
border-right: 10px solid red;
border-left: 10px solid royalblue;
border-bottom: 10px solid sienna;
}
.box2 {
width: 0;
height: 0;
/*transparent透明色*/
border: 10px solid transparent;
border-top: 10px solid pink;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
案例：京东三角：
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
/* 为了照顾浏览器兼容性 */
line-height: 0;
font-size: 0px;
border: 5px solid transparent;
border-bottom-color: pink;
}
</style>
</head>
<body>
<div class="jd">
<span></span>
</div>
</body>
29.CSS 用户界面样式
29.1鼠标样式 cursor
li {cursor:pointer;}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
|---|---|
| default | 小白箭头 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
29.2轮廓线 outline
给表单添加 outline: 0; 或者outline: none; 样式之后，就可以去掉默认的蓝色边框。
input {outline: none;}
29.3防止拖拽文本域 resize
实际开发中，我们文本域右下角是不可以拖拽大小的，会影响网页布局。
textarea{ resize: none;}
/*标签尽量写在一行上，否则文本域光标会定在第二行*/
<textarea cols="30" rows="10"></textarea>
29.4vertical-align 属性应用
1.解决图片与文字的对齐方式
CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素) 和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align: baseline | top | middle | bottom
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| top | 把元素的顶端与行中最高元素的顶端对齐。 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
2.解决图片底部默认空白缝隙问题
bug:图片底侧会有一个空白缝隙，原因是行内块元素会默认和文字的基线对齐。
主要解决方法有两种：
1.给图片添加vertical-align: middle | top |bottom 等。（提倡使用）
2.把图片转为块级元素 display: block;
29.5文字溢出省略号显示
1.单行文本文字溢出省略号显示
必须满足三个条件：
①先强制一行内显示文本
white-space: nowrap; ( 默认 normal自动换行)
②超出的部分隐藏
overflow：hidden;
③文字用省略号替代超出的部分
text-overflow: ellipsis;
<style>
.show {
margin: 30px auto;
width: 100px;
height: 50px;
background-color: pink;
/* 1.先强制一行内显示文本 */
white-space: nowrap;
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="show">啥也不想说，此次省略一万字</div>
</body>
2.多行文字溢出显示省略号(了解)
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核)。
以下内容复制即可：
overflow : hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box ;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient : vertical;
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
30.常见布局技巧
30.1margin负值运用
1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框。
<style>
li {
float: left;
list-style: none;
width: 100px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
</ul>
</body>
2.鼠标经过某个盒子的时候，提高当前盒子的层级即呵(如果没有有定位，则加相对定位(保留位置)，如果有定位，则加z-index)
方法①鼠标经过盒子改变颜色：添加相对定位。
ul li:hover {
position: relative;
border: 1px solid blue;
}
方法②如果li都有定位，则加==z-index: 1;==提高层级。
ul li:hover {
z-index: 1;
border: 1px solid blue;
}
30.2文字围绕浮动元素
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 70px;
background-color: pink;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
}
.pic img {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="tb3.jpg">
</div>
<p>今天天气真好，太阳好大，好想出去玩。</p>
</div>
</body>
30.3行内块元素巧妙运用
<style>
* {
margin: 0;
padding: 0;
}
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
}
.box .prev,
.box .next {
width: 85px;
font-size: 14px;
}
.box .current,
.box .elp {
background-color: transparent;
border: none;
}
.box input {
height: 36px;
width: 45px;
border: 1px solid #ccc;
outline: none;
}
.box button {
height: 36px;
width: 60px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</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>
30.4CSS三角巧妙运用
代码简写：
width: 0;
height: 0;
/*上、右、下、左边的颜色*/
border-color : transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;
30.5CSS 初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。
简单理解：CSS初始化使指重设浏览器的样式。（也称为CSS reset）
每个网页都必须首先进行CSS初始化。这里我们以京东css初始化代码为例。
Unicode编码字体∶
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如:
黑体\9ED1\4F53
宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1
31.CSS3的新特性
31.1CSS3的现状
- 新增的CSS3特性有兼容性问题，ie9+才支持
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
- 现阶段主要学习:新增选择器和盒子模型以及其他特性
CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。
1.属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
E:表示标签 att:表示属性 val:表示值
| 选择符 | 简介 |
|---|---|
| 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元素 |
注意：类选择器、属性选择器、伪类选择器，权重为10.
2.结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
| 选择符 | 简介 |
|---|---|
| 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个 |
①新增nth-child(n)选择器
nth-child ( n)选择某个父元素的一个或多个特定的子元素
n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始…
n可以是关键字：even偶数，odd奇数
n可以是公式︰常见的公式如下(如果n是公式，则从O开始计算，但是第0个元素或者超出了元素的个数会被忽略)
/* nth-child(n)从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子*/
ol li:nth-child(n){
background-color: pink;
}
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15…(5的倍数) |
| n+5 | 从第5个开始(包含第五个)到最后 |
| -n+5 | 前5个（包含第5个)… |
②nth-child和nth-of-type的区别
- nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
/* 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: blue;
}
<body>
<ul>...</ul>
<!--区别-->
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
< / section>
</body>
小结
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
- 关于nth-child ( n)我们要知道n是从开始计算的，要记住常用的公式
- 如果是无序列表，我们肯定用nth-child更多
- 类选择器、属性选择器、伪类选择器，权重为10。
3.伪元素选择器（重点）
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意︰
- before和after 创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法: element::before {} //element是任何元素标签
- before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为1
t-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
①新增nth-child(n)选择器
nth-child ( n)选择某个父元素的一个或多个特定的子元素
n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始…
n可以是关键字：even偶数，odd奇数
n可以是公式︰常见的公式如下(如果n是公式，则从O开始计算，但是第0个元素或者超出了元素的个数会被忽略)
/* nth-child(n)从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子*/
ol li:nth-child(n){
background-color: pink;
}
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15…(5的倍数) |
| n+5 | 从第5个开始(包含第五个)到最后 |
| -n+5 | 前5个（包含第5个)… |
②nth-child和nth-of-type的区别
- nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
/* 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: blue;
}
<body>
<ul>...</ul>
<!--区别-->
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
< / section>
</body>
小结
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
- 关于nth-child ( n)我们要知道n是从开始计算的，要记住常用的公式
- 如果是无序列表，我们肯定用nth-child更多
- 类选择器、属性选择器、伪类选择器，权重为10。
3.伪元素选择器（重点）
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意︰
- before和after 创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法: element::before {} //element是任何元素标签
- before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为1
32.2CSS3盒子模型
CSS3中可以通过box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况︰
-
box-sizing:content-box 盒子大小为width + padding + border (以前默认的)
-
box-sizing: border-box盒子大小为width
如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度)
32.3CSS3其他特性（了解）
1.图片变模糊
CSS3滤镜filter：
filter CSS属性将模糊或颜色偏移等图像效果应用于元素。
filter： 函数; 例如：filter：blur(5px); blur模糊处理 数值越大越模糊
例：鼠标放图片上就不模糊案例
<style>
img {
filter: blur(5px);
}
/* 鼠标放上去就不模糊了 */
img:hover {
filter: blur(0);
}
</style>
</head>
<body>
<img src="../QQ2.png" />
</body>
2.计算盒子宽度width：calc函数
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100% - 80px); //100%表示父盒子的宽度
括号里面可以使用+ - * /来进行计算，运算符号用空格隔开。
例：
<style>
.father {
width: 200px;
height: 200px;
background-color: pink;
}
.son {
/* 子盒子永远比父盒子宽度小30px */
width: calc(100% - 30px);
height: 30px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
CSS3还增加了一些动画 2D 3D等新特性。
32.4CSS新增过渡效果(重点)
transition：要过渡的属性 花费时间 运动曲线 何时开始；
1.属性︰想要变化的css属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。
2.花费时间:单位是秒(必须写单位）比如0.5s
3.运动曲线:默认是ease(可以省略)
4.何时开始︰单位是秒 (必须写单位）可以设置延迟触发时间 默认是0s (可以省略)
过渡的使用口诀：谁过渡给谁加
例：
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* transition：要过渡的属性 花费时间 运动曲线 何时开始；可以只写前两个属性 */
/* transition: width 0.5s; */
/* 如果想要写多个属性，利用逗号分隔 */
/* transition: width 0.5s, heigth 0.5s; */
/* 想要多个属性都变化，直接写all就可以了 */
transition: all 0.5s;
}
/* 鼠标放上去实现过渡效果 */
.box:hover {
width: 400px;
height: 200px;
background-color: darkcyan;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
33.编写要点
1.图片文件夹一般建两个，经常更换的 产品图片 文件夹和网站必需框架图片的文件夹。
2.CSS初始化样式文件一般命名为base.css
CSS公共样式文件命名为common.css
3.有些网站初始化不太提倡*{margin：0；padding：0；} 因为虽然编写方便，但计算机运行速度慢，效率低。
一般采用选择标签的方式：
比如新浪：
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0;}
33.1网站favicon图标
<!-- 引入网页标题图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
33.2网站TDK三大标签SEO优化
SEO ( SearchEngine Optimization )汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
1.title 网站标题
title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议∶网站名（产品名)–网站的介绍（尽量不要超过30个汉字)
例如︰
- 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!
- 小米商城-小米5s、红米Note 4、小米MIX、小米笔记本官方网站
2.description网站说明
简要说明我们网站主要是做什么的。
我们提倡，description作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供.…”、“×××网作为…”、“电话:010.….”之类语句。
例如︰
3.keywords关键字
keywords是页面关键词，是搜索引擎的关注点之一。
keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式。
例如∶
对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的SEO人员准备。
33.3常用模块类名命名
| 名称 | 说明 |
|---|---|
| 快捷导航栏 | shortcut |
| 头部 | header |
| 标志 | logo |
| 购物车 | shopcar |
| 搜索 | search |
| 热点词 | hotwrods |
| 导航 | nav |
| 导航左侧 | dropdown 包含 .dd .dt |
| 导航右侧 | navitems |
| 页面底部 | footer |
| 页面底部服务模块 | mod_service |
| 页面底部帮助模块 | mod_help |
| 页面底部版权模块 | mod_copyright |
33.4 logo SEO优化
- logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
- h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可。
- 为了搜索引擎收录我们，我们链接里面要放文字(网站名称），但是文字不要显示出来。
- 方法1 : text-indent移到盒子外面( text-indent:-9999px)，然后overflowhidden，淘宝的做法。
- 方法2∶直接给font-size:0;就看不到文字了，京东的做法。
4．最后给链接一个title属性，这样鼠标放到logo 上就可以看到提示文字了。
33.5轮播图
轮播图要放在 ul 中的 li 里。
如若排列的li盒子不在一行显示，是因为宽度大于父盒子，此时修改父子ul的宽度就可以了。
盒子多余的边框显示出来：可以使用overflow:hidden；隐藏多余部分！
为了避免盒子里的图片大小不一，可以设置img固定的宽和高，填满盒子。
33.6Tab栏
点击 选项1 时，显示 内容1 盒子的内容。
tab_list 和 tab_content 一一对应。
没有给父盒子设置高度，里面的子盒子又设置了浮动，会让下面的盒子跑上来，这时候我们可以给设置了浮动盒子的 父盒子清除浮动 或者 overflow: hidden;
34.web服务器
3.1什么是web服务器
服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、web服务器等。
web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据库文件，让全世界下载。
以下服务器我们主要指的是web服务器。
根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。
3.2本地服务器
本地服务器主要在局域网中访问。
学习ajax的时候，再讲配置。
3.3远程服务器
远程服务器主要在互联网中访问。
远程服务器通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以通过域名访问我们的网站了。
3.4将自己的网站上传到远程服务器
注意:一般稳定的服务器都是需要收费的。比如:阿里云
这里给大家推荐一个免费的远程服务器（免费空间) http://free.3v.do/
1.去免费空间网站注册账号。
2.记录下主机名、用户名、密码、域名。
3.利用cutftp软件上传网站到远程服务器。
4.在浏览器中输入域名，即可访问我们的品优购网站了。
详细步骤：1.点击导航栏的 免费注册，填写信息，提交注册
2.成功后显示–>您的网站地址：… 记录地址
3.左侧导航栏点击FTP管理–>激活FTP–>记录FTP主机地址、用户名、密码
4.下载CuteFTB8上传网站软件，找到cuteftppro.exe文件，双击运行；
填写之前的主机名、用户名、密码后点击后面的连接按钮
5.窗口左侧是自己电脑空间，右侧是远程服务器空间，在左侧找到需要上传的项目文件，全部选中，拖拽到右边就可以了，最后在浏览器中输入域名就可以访问网站了。
35.CSS3中的 2D转换
转换( transform )是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换；
(transform )你可以简单理解为变形；
- 移动：translate
- 旋转：rotate
- 缩放：scale
1.移动translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
1.语法：
transform: translate(x,y);或者分开写
transform: translatex (n) ;
transform: translateY(n) ;
2.重点
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的优点∶不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
2旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
1.语法：
transform : rotate(度数)
2.重点：
-
rotate里面跟度数，单位是deg 比如rotate(45deg)
-
角度为正时，顺时针，负时，为逆时针
-
默认旋转的中心点是元素的中心点
下拉小三角的做法：
<style>
.box1 {
position: relative;
width: 200px;
height: 35px;
border: 1px solid #000;
transform: translate(100px, 100px);
}
.box1::after {
content: "";
position: absolute;
top: 8px;
right: 10px;
width: 8px;
height: 8px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
/* 旋转度数 */
transform: rotate(45deg);
/* 过渡效果 */
transition: all 0.6s;
}
/* 鼠标经过div 里面的三角旋转180° 45°+180°=225°*/
.box1:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
3.设置转换中心点transform-origin
我们可以设置元素转换的中心点
1.语法
transform-origin: x y;
2.重点
- 注意后面的参数×和y用空格隔开
- x y默认转换的中心点是元素的中心点(50% 50%)
- 还可以给x y设置像素或者方位名词( top bottom left right center )
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
/* 1.可以跟方位名词 */
/* transform-origin: left bottom; */
/* 2.默认的是 50% 50% 等价于center center */
/* 3.可以是px 像素 */
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
4. 2D转换之缩放scale
缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
1.语法：
transform : scale(x,y) ; /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缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
图片放大案例
<style>
div {
float: left;
/* 超出部分隐藏 */
overflow: hidden;
margin-left: 30px;
}
div img {
/* 谁做过渡给谁加 */
transition: all 0.6s;
}
div img:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div>
<a href="#"><img src="../QQ2.png" alt="" /></a>
</div>
<div>
<a href="#"><img src="../QQ2.png" alt="" /></a>
</div>
<div>
<a href="#"><img src="../QQ2.png" alt="" /></a>
</div>
</body>
5.转换综合写法
注意∶
1.同时使用多个转换，其格式为:transform: translate() rotate) scale) …等，
2.其顺序会影转换的效果。(先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前
6. 2D转换总结
- 转换transform 我们简单理解就是变形有 2D 和 3D之分
- 我们暂且学了三个分别是 位移 旋转 和 缩放
- 2D移动translate(x y) 最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
- 可以分开写比如 translateX(x) 和 translateY(y)
- 2D旋转rotate(度数) 可以实现旋转元素 度数的单位是deg
- 2D缩放sacle(x,y)里面参数是数字不跟单位 可以是小数 最大的优势不影响其他盒子
- 设置转换中心点transform-origin : x y; 参数可以百分比、像素或者是方位名词
- 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前
36.动画
**动画( animation )**是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
1.动画的基本使用
制作动画分为两步：
1.先定义动画
2.在使用（调用）动画
1.用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称{
0%{
width : 100px;
}
100% {
width: 200px;
}
}
2.元素使用动画
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/*调用动画*/
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;
}
案例：
<style>
/* 1.定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2.调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
2.动画序列
可以做多个状态的变化。
0% 25% 50% 75% 100% （百分比就是动画 总的时间）
- 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
- 在==@keyframes==中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%。
3.动画常用的属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性。 |
| animation-name | 规定@keyframes动画的名称。(必须的) |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0。(必须的) |
| animation-timing-function | 规定动画的速度曲线，默认是“ease”. 或steps(n)；步长 |
| animation-delay | 规定动画何时开始，默认是0。 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal "，alternate逆播放 |
| deanimation-play-state | 规定动画是否正在运行或暂停。默认是"running".还有"paused"。 |
| animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
4.动画简写
animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
例： 前面两个属性 name direction一定要写！
animation: myfirst 5s linear 2s infinite alternate;
注意：
- 简写属性里面不包含animation-play-state
- 暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用
- 想要动画走回来，而不是直接跳回来: animation-direction : alternate
- 盒子动画结束后，停在结束位置: animation-fill-mode : forwards
37.CSS3中的3D转换
1. 3D位移translate3d(x,y,z)
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
-
translform:translateX(100px)∶仅仅是在x轴上移动
-
translform:translateY(100px)∶仅仅是在Y轴上移动
-
translform:translateZ(100px):仅仅是在Z轴上移动（注意: translateZ一般用px单位)
-
transform:translate3d(x,y,z)∶其中x、y、z分别指要移动的轴的方向的距离
2. 3D旋转rotate3d(x,y,z)
3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法：
- transform:rotatex(45deg):沿着x轴正方向旋转45度
- transform:rotateY(45deg):沿着y轴正方向旋转45deg
- transform:rotateZ(45deg):沿着Z轴正方向旋转45deg
- transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可)
3.透视perspective
- 在2D平面产生近大远小视觉立体，但是只是效果二维的
- 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
- 模拟人类的视觉位置，可认为安排一只眼睛去看
- 透视我们也称为视距︰视距就是人的眼睛到屏幕的距离距离
- 视觉点越近的在电脑平面成像越大，越远成像越小
- 透视的单位是像素
透视perspective写在被观察元素的父盒子上面的
例：perspective：500px;
d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是z轴，物体距离屏幕的距离，z轴越大(正值）我们看到的物体就越大.
4. 3D呈现transfrom-style
旋转木马案例：
<title>旋转木马</title>
<style>
body {
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 150px auto;
/* 保留立体空间，给父盒子添加 */
transform-style: preserve-3d;
/* 添加动画效果 */
animation: rotate 10s linear infinite;
}
section:hover {
/* 鼠标放上去动画暂停 */
animation-play-state: paused;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: url(../images/dog.jpg) no-repeat;
}
section div:nth-child(1) {
transform: translateZ(300px);
}
section div:nth-child(2) {
/* 先旋转好了，再移动距离 */
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
/* 先旋转好了，再移动距离 */
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
/* 先旋转好了，再移动距离 */
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
/* 先旋转好了，再移动距离 */
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
/* 先旋转好了，再移动距离 */
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
38.浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须忝加。
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;
更多推荐
CSS详细笔记
发布评论