[1集: 183集],共183集
居中文字
标记
:特殊切固定的文档声明标签
hr:水平线
特殊符号
div标签
div*3
可以直接键入三行divspan标签
li标签
ul标签
ul>li{aaa}*3
dl标签
图片标签
同级目录
code.gif
./code.gif
返回上一级后查找路径
../code.gif
图片标签的属性
宽高设置
超链接标签
能够实现不同页面的跳转
target="_self"
:默认值,当前窗口打开
target="_blank"
:新窗口打开
表格:
表格创建快捷键:table>tr*3>td*3
表格属性:
行tr的属性,table row
单元格td属性:table data
表格合并
表单标签
form中method的post和get的区别
cascading style sheets,层叠样式表
作用:修饰网页信息的显式样式
CSS语法:
内部样式表、外部样式表、行内样式表
外部样式的创建
外部css导入
<style>
@import url(index.css);
style>
行内
就近原则:!important
>行内>内部>外部
为什么要用选择器:
要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器
元素选择器/类型选择器(element选择器),如:div{width:100px; height: 100px; background:red;}
class选择器/类选择器
id选择器
* 通配符/通配符选择器
群组选择器:提出公共代码,节约代码量
div, p, h1, box1 {
background-color: yellow;
}
后代选择器
div p {
background-color: aqua;
}
伪类选择器
需要遵循顺序编写
<style>
a:link {
color: red;
}
a:visited {
color: aqua;
}
a:hover {
color: blue;
}
a:active {
color: coral;
}
style>
link-visited-hover-active
选择器的权重
当多个选择器,选中的是同一个元素,且都为他们定义了样式,如果属性发生了冲 选择器的权重
包含选择器:子类选择器(嵌套的)的权重要大于普通元素的选择器
文本属性
文本间距
首行缩进,text-indent
文字装饰:
下划线、上划线、删除线
如果想要多条线
text-decoration: line-through underline overline;
文本转换:text-transform,大写、小写,首字母大写
font:
.p_font {
font: italic bold 20px/1em 微软雅黑;
}
列表属性
背景属性
背景图片小于盒子大小:默认平铺效果
背景图片大于盒子大小:裁剪显示左上角的部分
background-repeat:
background-size:
background-attachment:
背景属性的符合写法:
用空格隔开
顺序可以换
可以只取一个值,放在后面能覆盖前面的值
background-size属性只能单独用
顺序可以随便换
位置的顺序要贴着写,不能随便换
div {
width: 600px;
height: 600px;
/* background-color: yellow;
background-image: url(pics/马卡龙.png);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed; */
background: yellow url(pics/马卡龙.png) no-repeat center fixed;
}
浮动属性
作用:
浮动是见缝插针的,能往下排就往下排,其次才会换行
清浮动
写固定高度
清浮动的clear用法
当前浮动元素后面补一个盒子,不设置宽高,clear:both
overflow: hidden
什么是盒子模型
padding:内边距
padding-left
,类似的,top、bottom、left、rightborder:边框
margin:外边距
margin: 10px 20px 30px 40px;
margin: 0 auto;
,上下为0,左右自动;上下auto是没有意义的溢出属性(容器的)
空余空间
省略号显示
元素显示类型
块元素:
display: block
display: list-item
行内:
display: inline
行内块:
display: inline-block
img
、input
元素类型互相转换:设置display属性
display: none
,隐藏属性.item li
:子代中有li的都选中.item>li
:只选择自己的亲儿子安利首页设计
定位 position
层级
锚点
CSS Sprites
图片整合的优势:
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应
width不设置或者auto就是自适应
使用场景:
高度自适应:
{height: auto;}
min-height
浮动元素的高度自适应
overflow:hidden
(缺点:会隐藏溢出的元素)clear:both; height:0;overflow:hidden;
(缺点:在结构里增加了空的标签,不利于代码可读性,且降低了浏览器的性能)after{content:" "; clear:both; display:block; height:0; visibility:hidden;/overflow:hidden;}
伪元素
隐藏的区别:
display:none
:不占位的隐藏visibility:hidden
:占位的隐藏盒子根据窗口的大小进行改变
设置方法:html, body{height:100%;}
calc()
函数的使用
cal()
函数:用于动态计算长度值;width: calc(100% - 10px)
;calc()
函数进行计算;calc()
函数支持加减乘除的运算;calc()
函数使用标准的数学运算优先级规则;多栏复杂布局
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.top,
.bottom {
width: 100%;
height: 50px;
background: #ccc;
}
.middle {
height: calc(100% - 100px);
background: yellow;
}
.left,
.right {
width: 100px;
height: 100px;
background: red;
float: left;
}
.center {
width: calc(100% - 200px);
height: 100%;
background: blue;
float: left;
}
style>
head>
<body>
<div class="top">div>
<div class="middle">
<div class="left">div>
<div class="center">div>
<div class="right">div>
div>
<div class="bottom">div>
body>
html>
单选框
<input type="radio" name="sex" id="woman" checked>
<label for="woman">女label>
复选框
type="checkbox"
上传文件
图片按钮-代替提交按钮
<form action="">
<input type="image" src="imgs/search_pic_green.png">
form>
隐藏按钮
禁用和只读属性
下拉菜单
格式
<select size="3" multiple>
<option value="ln">辽宁option>
<option selected>山东option>
<option>山西option>
<option>湖北option>
select>
select支持的属性
option支持的属性
文本域
字段集
fieldset
<fieldset>
<legend>皮卡丘legend>
<input type="radio" name="a">男
<br>
<input type="radio" name="a">女
fieldset>
HTML5发展史
HTML5的浏览器兼容
HTML5语法
HTML5新增语义化标签
新增的语义化标签没有实际性的作用,跟div没啥区别,就说做一个名字的参考,使用的时候还是要结合css使用
比如制作一个盒子模型的界面
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
header,
footer {
height: 50px;
line-height: 50px;
text-align: center;
background: orange;
}
section {
height: calc(100% - 100px);
}
nav,
aside {
width: 100px;
height: 100%;
background: #ccc;
float: left;
}
main {
float: left;
width: calc(100% - 200px);
height: 100%;
background: white;
}
aside p {
font-style: 12px;
color: white;
}
main .article1 {
height: 60%;
}
main .article2 {
height: 40%;
}
style>
head>
<body>
<header>Headerheader>
<section>
<nav>
<figure>navfigure>
<ul>
<li>111li>
<li>111li>
<li>111li>
<li>111li>
ul>
nav>
<main>
<article class="article1">
<header>article-headerheader>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate nihil tempore quibusdam sequi ab, nemo repellat ipsa nobis sit eius est. Voluptas quam nisi repellat est fugiat explicabo rerum quod.p>
<footer>article-footerfooter>
article>
<article class="article2">
<header>article-headerheader>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate nihil tempore quibusdam sequi ab, nemo repellat ipsa nobis sit eius est. Voluptas quam nisi repellat est fugiat explicabo rerum quod.p>
<footer>article-footerfooter>
article>
main>
<aside class="aside_p">
<figure>asidefigure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus repellat perspiciatis ea nobis
dolore cupiditate tempore quidem eius, modi eveniet fuga enim beatae quibusdam earum fugit in, iure aut.
Quaerat?p>
aside>
section>
<footer>Footerfooter>
body>
html>
效果:
video和audio的应用
增强表单
<form action="">
<div>
颜色选择:<input type="color" name="color">
div>
<div>
邮箱输入:<input type="email" name="email">
div>
<div>
url地址(完整地址):<input type="url" name="url">
div>
<div>
电话号码:<input type="tel" name="tel">
div>
<div>
滑块效果:<input type="range" name="range" min="100" max="200" value="100" step="10">
div>
<div>
数字类型:<input type="number" name="number" min="1" max="10" value="6" step="2">
div>
<div>
搜索:<input type="search" name="search">
div>
<div>
日期选择框:<input type="date", name="date">
月份选择框:<input type="month", name="date">
周数选择框:<input type="week", name="date">
时间选择框:<input type="datetime-local", name="date">
div>
<input type="submit">
form>
数据列表
增强表单属性
优雅降级和渐进增强
层级选择器
+ 的意思是:当前元素的后面第一个兄弟
.child+li {
background: yellow;
}
~ 的意思是:当前元素的后面所有的亲兄弟
.child~li {
background: yellow;
}
属性选择器
实践:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div[class]{
background: yellow;
}
p[class]{
background: red;
}
/* 完全匹配 */
/* div[class=box1]{
border: 2px dashed blue;
} */
/* 包含匹配 */
div[class~="box1"]{
border: 2px dashed blue;
}
/* 模糊匹配 */
div[class^="b"]{
color: green;
}
div[class$="2"]{
color: gray;
}
div[class*="1"]{
color: orange;
}
input[name] {
background: yellow;
}
input[type=email]{
background: red;
}
style>
head>
<body>
<div class="box1">div111div>
<div class="box2">div222div>
<div>div333div>
<div class="box1">div444div>
<div class="box1 box3">div555div>
<p class="p1">p111p>
<p class="p2">p222p>
<p>p333p>
<div>
用户名:<input type="text" name="username"> <br>
密码:<input type="password" name="password"><br>
年龄:<input type="number" name="age"><br>
邮箱:<input type="email" name="email"><br>
div>
body>
html>
结构伪类选择器
nth-child(n)
实现奇数和偶数的css设置:
目标伪类选择器
E:targe
选择匹配E的所有元素,且匹配元素被相关URL指向UI状态伪类选择器
E:focus
:焦点,会匹配此伪类选择器appearance: none;
否定伪类选择器
<style>
li:not(:first-child){
background: yellow;
}
li:not(:nth-child(2n+1)){
background: yellow;
}
style>
动态伪类选择器
文本阴影
<style>
/*
param1 水平方向的位移
param2 垂直方向的位移
param3 模糊程度
param4 阴影颜色
, 支持多个阴影
*/
div{
text-shadow: -10px -10px 1px red, 10px 10px 1px yellow;
}
style>
盒子阴影
border-radius
接收 px和% 单位
接收一个值:四个角是一样的
接收两个值:左上右下,左下右上一致
三个值:左上,左下右上,右下
四个值:从左上开始,顺时针方向
单个角的设置:border-bottom-left-radius: 20px;
border-radius: 30px/60px;
:每个角,水平方向走30,垂直方向走60
border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;
:从左上角开始,顺时针方向水平的四个走向/垂直的四个走向
正方形变成⚪:border-radius
的值设置为盒子长宽的一半,要考虑border和padding
设置成50%,可以直接设置成⚪,不需要考虑border和padding
半圆:
<style>
div {
width: 100px;
height: 50px;
background: green;
margin: 0 auto;
border-radius: 50px 50px 0 0;
}
style>
扇形:
<style>
div {
width: 100px;
height: 100px;
background: green;
margin: 0 auto;
border-radius: 200px 0 0 0;
}
style>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
@font-face {
font-family: lt;
src: url(datas/HYXiRuJ.ttf);
}
div{
font-family: lt;
font-size: 50px;
color: red;
text-shadow: 5px 0px 0px green;
}
style>
head>
<body>
<div>很枯燥啊马飞!div>
body>
html>
怪异盒模型
box-sizing: border-box
怪异盒模型以宽高为基础,padding和border只会挤压内部空间,而不是像平常出现的外扩情况。margin是一样的。
使用场景:排列时,子组件不会因为加了padding而换行
display:flex
影响
margin:auto
会使得子元素实现水平和垂直居中默认情况下,水平方向是主轴,垂直方向是侧轴,子元素按照 主轴 排列。
设置主轴方向:flex-direction: column
调整主轴对齐方向:
justify-content: space-between;
调整侧轴对齐方向:align-items: center;
折行:flex-wrap:wrap
调整折行之后的行间距:
加了display:flex
属性的盒子叫做 容器,里面的子盒子叫做 项目
项目的对齐:align-self: stretch
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 300px;
height: 120px;
border: 1px solid #000;
margin: 10px auto;
display: flex;
}
.box div {
width: 60px;
/* height: 60px; */
border: 1px dashed red;
box-sizing: border-box;
}
.div1 {
align-self: flex-start;
}
.div2 {
align-self: flex-end;
}
.div3 {
align-self: center;
}
.div4 {
align-self: baseline;
}
.div5 {
align-self: stretch;
}
style>
head>
<body>
<div class="box">
<div class="div1">111div>
<div class="div2">222div>
<div class="div3">333div>
<div class="div4">444div>
<div class="div5">555div>
div>
body>
html>
项目调整顺序:order: 1
flex-direction:row-reverse
,那么也是按照reverse之后的顺序进行排序,取负值则往前排,取正值则往后排项目剩余宽高:flex: 1
占满剩余空间
如果有多个项目都设置了flex,则各自占用的空间按照flex的比例进行平分
纵轴作主轴时同理
三栏布局样例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body{
display: flex;
}
.box1, .box3 {
width: 100px;
background: gray;
}
.box2 {
flex: 1;
background: yellow;
}
style>
head>
<body>
<div class="box1">div>
<div class="box2">div>
<div class="box3">divc>
body>
html>
模拟器上显示的分辨率:CSS像素,设备的独立像素
物理分辨率:设备像素
设备像素比(dpr)=物理像素/CSS像素
iphone6 1css的像素 == 2物理像素;s5 1css像素 == 3物理像素
设计稿:
重要代码:
移动端布局
:用户不允许缩放
内部控件拥有自己的滚动条:overflow:auto
隐藏滚动条:
::-webkit-scrollbar{
display: none;
}
调整行间距从上面开始显示:align-content: flex-start;
文字居中显示:text-align: center;
flex横向排列不运行被挤压:flex-shrink: 0;
目的:实现蘑菇街、小红书这种的,瀑布流布局
多列布局
多列布局案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div{
height: 300px;
background: yellow;
/* 显示的列数 */
column-count: 5;
/* 调整列间距 */
column-gap: 30px;
/* 列边框 */
column-rule: 2px solid red;
/* 列高度统一 */
/* 把balance换成auto,则每列会优先把父盒子占满 */
column-fill: balance;
/* 调整列宽 */
column-width: 500px;
}
div>h1 {
/* 横跨所有的列 */
column-span: all;
text-align: center;
}
style>
head>
<body>
<div>
<h1>赵钱孙礼h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut voluptatibus, obcaecati molestiae deleniti porro tenetur earum doloribus, quibusdam ipsa corporis, officiis assumenda natus inventore amet ducimus quisquam commodi molestias dolor?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat adipisci, ad voluptates modi recusandae at enim illo maiores sint quidem rerum soluta similique, nisi consectetur cumque suscipit sed porro exercitationem!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit vero eos facilis recusandae omnis dolore exercitationem debitis temporibus, illo magni quidem mollitia nesciunt fugiat sequi, non eveniet ex nihil accusantium!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, minima unde expedita molestias sint eos eligendi asperiores itaque consequuntur magni, consequatur delectus cupiditate sapiente! Ipsa nam provident pariatur illo sint?
div>
body>
html>
常见的布局方案
模块中的内容:挤压-拉(布局不变)
模块中的内容:换行-平铺(布局不变)
模块中的内容:删减-增加(布局不变)
模块位置变换(布局改变)
模块展示方式改变:隐藏-展开(布局改变)
响应式布局特点
媒体查询的含义:
媒体查询可以让我们根据设备显示器的特性(比如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color等。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。
媒体查询操作方式
实际操作为:对设备提出询问(称作表达式)开始,如果表达式结果为真,媒体查询中的CSS被应用,如果表达式结果为假,媒体查询内的CSS将被忽略
媒体查询结构
@media all and (min-width:320px){
body {background-color:blue;}
}
设备类型(默认为all)
screen是媒体类型中的一种,CSS2.1定义了10种媒体类型
and被称为关键字,其他关键字还包括not(排除某种设备),only(限定某种设备)
(min-width:400px)
就是媒体特性,其被放置在一对括号中
常用设置
px, em, rem 之争
px转rem插件推荐
js中fontsize计算:fontsize = 当前设备的css布局宽度/物理分辨率(设计稿的宽度)*基准font-size
vh与vw
CSS3 渐变
线性渐变
径向渐变
-webkit-
,火狐浏览器需要加 -moz-
重复渐变:重复线性渐变
太极绘制:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
body {
background: lightblue;
}
div {
width: 200px;
height: 200px;
background: linear-gradient(white 50%, black 50%);
margin: 10px auto;
display: flex;
align-items: center;
border-radius: 50%;
}
div::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: radial-gradient(white 20%, black 25%);
border-radius: 50%;
}
div::after {
content: "";
display: block;
width: 100px;
height: 100px;
background: radial-gradient(black 20%, white 25%);
border-radius: 50%;
}
style>
head>
<body>
<div>div>
body>
html>
动画过渡属性
注意:display: none /block
无法支持动画过渡
针对该情况的动画制作,可以使用 height:0
的改变来实现,并设置 overflow:hidden
动画过渡类型
样例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
ul {
list-style: none;
}
li {
width: 200px;
height: 50px;
border: 1px solid gray;
}
ul:hover li:nth-child(1) {
width: 600px;
transition: all 2s linear;
}
ul:hover li:nth-child(2) {
width: 600px;
transition: all 2s ease;
}
ul:hover li:nth-child(3) {
width: 600px;
transition: all 2s ease-in;
}
ul:hover li:nth-child(4) {
width: 600px;
transition: all 2s ease-out;
}
ul:hover li:nth-child(5) {
width: 600px;
transition: all 2s ease-in-out;
}
ul:hover li:nth-child(6) {
width: 600px;
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
style>
head>
<body>
<ul>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
body>
html>
动画过渡单一属性
transition-property: height background
2d属性-transform
translate()
使用transform的优点
设置left-合成图层
设置translate-独立图层
scale()
transform-origin: left top;
rotate()
正值:顺时针
负值:逆时针
rotateX和rotateY会在三维空间中旋转
rotate = rotateZ 等价
绕着左上角的点旋转:transform-origin: left top;
折扇效果:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
ul {
margin: 10px auto;
width: 400px;
height: 300px;
/* border: 5px solid gray; */
position: relative;
}
li {
width: 60px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 30px;
text-align: center;
transform-origin: bottom center;
border-radius: 10px;
transition: all 2s;
font-size: 10px;
}
ul li:not(:nth-child(7)) {
opacity: 0;
}
ul:hover li {
opacity: 1;
}
ul li:nth-child(1){
background: #b8f1cc;
}
ul li:nth-child(2){
background: #b8f1ed;
}
ul li:nth-child(3){
background: #f1f1b8;
}
ul li:nth-child(4){
background: #f1ccb8;
}
ul li:nth-child(5){
background: #d9b8f1;
}
ul li:nth-child(6){
background: #f1b8f1;
}
ul li:nth-child(7) {
background: #ff9b6a;
}
ul li:nth-child(8){
background: #f9b747;
}
ul li:nth-child(9){
background: #fecf45;
}
ul li:nth-child(10){
background: #e3a04f;
}
ul li:nth-child(11){
background: #f1ccb8;
}
ul li:nth-child(12){
background: #b8d38f;
}
ul li:nth-child(13){
background: #ddff95;
}
ul:hover li:nth-child(1) {
transform: rotate(90deg);
}
ul:hover li:nth-child(13) {
transform: rotate(-90deg);
}
ul:hover li:nth-child(2) {
transform: rotate(75deg);
}
ul:hover li:nth-child(12) {
transform: rotate(-75deg);
}
ul:hover li:nth-child(3) {
transform: rotate(60deg);
}
ul:hover li:nth-child(11) {
transform: rotate(-60deg);
}
ul:hover li:nth-child(4) {
transform: rotate(45deg);
}
ul:hover li:nth-child(10) {
transform: rotate(-45deg);
}
ul:hover li:nth-child(5) {
transform: rotate(30deg);
}
ul:hover li:nth-child(9) {
transform: rotate(-30deg);
}
ul:hover li:nth-child(6) {
transform: rotate(15deg);
}
ul:hover li:nth-child(8) {
transform: rotate(-15deg);
}
style>
head>
<body>
<ul>
<li>好运li>
<li>快乐li>
<li>健康li>
<li>顺意li>
<li>平安li>
<li>喜乐li>
<li>暴富li>
<li>升职li>
<li>加薪li>
<li>可爱li>
<li>美丽li>
<li>成功li>
<li>发财li>
ul>
body>
html>
transform的顺序问题:
很尴尬:这里补了一下图片,因为原图片违规了。。。这。。。https://img-blog.csdnimg.cn/d9399dfd5f814eb9bfa5d6538630b133.png
倾斜
关键帧动画
animation和transition的区别
infinite
:动画循环执行无限次
animation符合属性,检索或者设置对象所应用的动画特效
transform中的 100% 是相对于自身的100%,所以类似 transform: translateX(-100%);
的写法特别好用
动画只不过是镜花雪月,动画跑完之后就会回到初始的状态。通过设置 animation-fill-mode: forwards
来使动画保留到最后一帧的状态;如果是 backwords
,就是保留初始一帧的状态
通过设置 animation: run 1s linear reverse;
reverse来实现模块的弹出动画和收回动画
轮播案例
为了实现无缝轮播,通常会把第一张图复制一份放到最后
案例代码:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
.swiper-container {
width: 640px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.swiper-container img {
width: 640px;
height: 300px;
}
.swiper-slide {
float: left;
}
.swiper-wrapper {
width: 9999px;
animation: swiperrun 10s linear infinite;
}
.swiper-wrapper:hover{
animation-play-state: paused;
}
@keyframes swiperrun {
0% {
transform: translateX(0px);
}
5%{
transform: translateX(-640px);
}
25%{
transform: translateX(-640px);
}
30%{
transform: translateX(-1280px);
}
50%{
transform: translateX(-1280px);
}
55%{
transform: translateX(-1920px);
}
75%{
transform: translateX(-1920px);
}
80%{
transform: translateX(-2560px);
}
100%{
transform: translateX(-2560px);
}
}
style>
head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="imgs/桌面图片/p1.jpg" alt="">
div>
<div class="swiper-slide">
<img src="imgs/桌面图片/p2.jpg" alt="">
div>
<div class="swiper-slide">
<img src="imgs/桌面图片/p3.jpg" alt="">
div>
<div class="swiper-slide">
<img src="imgs/桌面图片/p4.jpg" alt="">
div>
<div class="swiper-slide">
<img src="imgs/桌面图片/p1.jpg" alt="">
div>
div>
div>
body>
html>
逐帧动画案例
animation: run 5s steps(1, end);
:
技巧,使用strep-start(保留第一帧),最后多搞一个空白帧
假设有4个动作,那么需要制作5个帧,每个帧涵盖范围是0-100%,帧间隔则为100/4=25%。类似的背景偏移从0出发,向着负值偏移,累计增加。
样例:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
width: 200px;
height: 300px;
background-image: url(./imgs/frams/2.jpg);
animation: run 0.5s step-start infinite;
}
@keyframes run {
0% {
background-position: 0px 0;
}
25% {
background-position: -180px 0;
}
50% {
background-position: -360px 0;
}
75% {
background-position: -540px 0;
}
100% {
background-position: -720px 0;
}
}
style>
head>
<body>
<div>div>
body>
html>
Animate动画库
3D场景
transform-style: preserve-3d;
:flat是2d舞台;preserve-3d是3d舞台景深
设置景深是为了实现观察,近大远小的情况
3D位移
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 500px;
height: 500px;
border: 5px solid black;
transform-style: preserve-3d;
position: relative;
margin: 0 auto;
perspective: 900px;
transform: rotateY(30deg);
}
.center {
position: absolute;
width: 200px;
height: 200px;
background: red;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
transition: all 1s;
}
.box:hover .center {
/* transform: translateZ(500px); */
transform: translate3d(200px, 200px, 600px);
}
style>
head>
<body>
<div class="box">
<div class="center">div>
div>
body>
html>
3D旋转:transform: rotate3d(0.11, 1, 1, 30deg);
3D缩放
transform-style:preserve-3d; perspective:800px;
transform:scaleZ(10) rotateX(45deg);
立方体样例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 600px;
margin: 0 auto;
border: 5px solid gray;
transform-style: preserve-3d;
position: relative;
transform: rotateX(30deg) rotateY(30deg);
animation: run 5s linear infinite;
}
@keyframes run {
0%{
transform: rotateY(30deg) rotateX(30deg);
}
25%{
transform: rotateY(300deg) rotateX(300deg);
}
75%{
transform: rotateY(360deg) rotateX(360deg);
}
100%{
transform: rotateY(30deg) rotateX(30deg);
}
}
.box div {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
line-height: 200px;
text-align: center;
font-size: 50px;
opacity: 0.8;
}
.box div:nth-child(1){
background: gray;
transform: translateZ(100px);
}
.box div:nth-child(2){
background: cadetblue;
transform: translateX(-100px) rotateY(-90deg);
}
.box div:nth-child(3){
background: purple;
transform: translateY(-100px) rotateX(90deg);
}
.box div:nth-child(4){
background: green;
transform: translateY(100px) rotateX(-90deg);
}
.box div:nth-child(5){
background: red;
transform: translateX(100px) rotateY(90deg);
}
.box div:nth-child(6){
background: skyblue;
transform: translateZ(-100px) rotateY(-180deg);
}
h1 {
font-size: 100px;
color: red;
background: yellow;
text-shadow: 4px 4px 4px #000;
}
style>
head>
<body>
<h1>欢迎涛总莅临检查h1>
<div class="box">
<div>暴富div>
<div>快乐div>
<div>多福div>
<div>无敌div>
<div>安康div>
<div>幸运div>
div>
body>
html>
网格布局的概念和flex布局的区别
容器和项目
行和列
单元格
网格线
网格布局中的属性
含义:网格布局中的属性和flex中的布局属性类似,分为了两类,一类容器属性;一类是项目属性
容器属性
行列划分
功能函数:repeat()
auto-fill关键字(自动填充)配合功能函数使用
grid-template-columns:repeat(auto-fill, 33.33%)
fr关键字(列宽片段)
实践
.box {
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
/* 1. 固定值 */
/* grid-template-rows: 200px 200px 200px; */
/* grid-template-columns: 200px 200px 200px; */
/* 2. 百分比方式 */
/* grid-template-rows: 25% 25% 25% 25%;
grid-template-columns: 25% 25% 25% 25%; */
/* 3. repeat */
/* grid-template-rows: repeat(3, 33.3%); */
/* grid-template-columns: repeat(3, 33.3%); */
/* 4. repeat autofill */
/* grid-template-rows: repeat(auto-fill, 300px);
grid-template-columns: repeat(auto-fill, 33.3%); */
/* 5. fr 片段 */
/* grid-template-rows: 100px 1fr 300px;
grid-template-columns: 100px 1fr 300px; */
/* 6. minmax */
/* grid-template-rows: minmax(100px, 200px) 200px 400px;
grid-template-columns: 200px 200px 200px; */
/* 7. auto */
grid-template-rows: 100px auto 200px;
grid-template-columns: 100px 200px auto;
}
列间距
指定区域
指定区域代码实践:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 650px;
height: 320px;
border: 5px solid red;
margin: 0 auto;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(6, 100px);
grid-template-areas: 'a a a a b b'
'a a a a c c'
'd d e f c c';
overflow: hidden;
grid-gap: 10px 10px;
}
.box img {
width: 100%;
}
.box img:nth-child(1) {
grid-area: a;
}
.box img:nth-child(2) {
grid-area: d;
}
.box img:nth-child(3) {
grid-area: e;
}
.box img:nth-child(4) {
grid-area: f;
}
.box img:nth-child(5) {
grid-area: b;
}
.box img:nth-child(6) {
grid-area: c;
}
style>
head>
<body>
<div class="box">
<img src="imgs/桌面图片/p1.jpg" alt="">
<img src="imgs/桌面图片/p2.jpg" alt="">
<img src="imgs/桌面图片/p3.jpg" alt="">
<img src="imgs/桌面图片/p4.jpg" alt="">
<img src="imgs/桌面图片/p5.jpg" alt="">
<img src="imgs/桌面图片/p6.jpg" alt="">
div>
body>
html>
项目排列顺序
单元格内容对齐(重点:复合属性)
单元格项目对齐(重点:复合属性)
place-content: justify-content align-content
直接配置两个属性place-items: justify-items align-items
同理项目属性
网格线合并(单一属性)
从项目(items)的角度实现网格的合并(每个跨线的多少)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 600px;
height: 600px;
display: grid;
border: 5px solid gray;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(3, 200px);
}
/* .box div:nth-child(1){
grid-column-start: 1;
grid-column-end: 3;
} */
.box div:nth-child(2) {
/* grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3; */
/* 更简洁的方法 */
grid-column: 2/4;
grid-row: 1/3;
}
style>
head>
<body>
<div class="box">
<div>1div>
<div>2div>
<div>3div>
<div>4div>
<div>5div>
<div>6div>
<div>7div>
<div>8div>
<div>9div>
div>
body>
html>
实践重构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 650px;
height: 320px;
border: 5px solid red;
margin: 0 auto;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(6, 100px);
grid-template-areas: 'a a a a b b'
'a a a a c c'
'd d e f c c';
overflow: hidden;
grid-gap: 10px 10px;
}
.box img {
width: 200%;
}
.box img:nth-child(1) {
grid-column: 1/5;
grid-row: 1/3;
}
.box img:nth-child(2) {
grid-column: 1/3;
grid-row: 3/4;
}
.box img:nth-child(3) {
grid-column: 3/4;
grid-row: 3/4;
}
.box img:nth-child(4) {
grid-column: 4/5;
grid-row: 3/4;
}
.box img:nth-child(5) {
grid-column: 5/7;
grid-row: 1/2;
}
.box img:nth-child(6) {
grid-column: 5/7;
grid-row: 2/4;
}
</style>
</head>
<body>
<div class="box">
<img src="imgs/桌面图片/p1.jpg" alt="">
<img src="imgs/桌面图片/p2.jpg" alt="">
<img src="imgs/桌面图片/p3.jpg" alt="">
<img src="imgs/桌面图片/p4.jpg" alt="">
<img src="imgs/桌面图片/p5.jpg" alt="">
<img src="imgs/桌面图片/p6.jpg" alt="">
</div>
</body>
</html>
这里借用kerwin老师的结束语杀青啦:「青青误我,我误青青。书说至此,有始有终。」
只能说感恩、感激千锋教育、感谢kerwin老师分享的课程,受益良多。
天道酬勤、厚积薄发,愿所有的努力都不被辜负。
终于可以开始学js啦,期待已久~
https://blog.csdn.net/qq_21579045
https://www.cnblogs.com/lyjun/
https://github.com/TinyHandsome
https://space.bilibili.com/8182822
https://segmentfault.com/u/liyj
https://www.zhihu.com/people/lyjun_
碌碌谋生,谋其所爱。🌊 @李英俊小朋友