1.过渡
<!DOCTYPE html>
<html>
<head>
<title>知识总结</title>
<meta charset="utf-8">
<style type="text/css">
div{width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:1s;}
div:hover{width:200px;}
</style>
</head>
<body>
<div></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>知识总结</title>
<meta charset="utf-8">
<style type="text/css">
div{width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>知识总结</title>
<meta charset="utf-8">
<style type="text/css">
div{column-count: 6;
column-fill: balance;
column-gap: 40px;
column-rule:2px outset blue;
}
</style>
</head>
<body>
<div>1.老公老公mua，左边一个mua，右边一个mua，嘴巴一个mua，老公老公抱抱，我要公主抱抱，飞起来的抱抱，转圈圈的抱抱! 2.像一棵海草海草 海草海草 随波飘摇 海草海草海草海草 浪花里舞蹈;海草海草 海草海草 管它骇浪惊涛。 3.你问我为什么没对象？有才华的长得丑，长得帅的挣钱少，挣钱多的不顾家，太顾家的没出息，有出息的不浪漫，会浪漫的靠不住，实在是没法找！ 4.云云：师父我坚持不住啦 小涵：我心里一直有个梦 想去嵩山少林学武功 就像电影里帅气的超人 行侠仗义 飞檐走壁。 小扣： 师父你为何可以行如流水枪扎一线棍扫一片(你却)挥挥衣袖对我说(赶紧练功去) 小淑：练功必须顶大太阳(哼)晚上还要借月亮光(哈)一日不练十日空(哼哈) 小乐：习武先习德(哼)学艺先学礼(哈)我也心中牢记(哼哈哼) 倪虹洁：英雄台下十年功为台上一分钟 5.小哥哥，小哥哥，我给你一样东西好不好呀 这是长得好看的。 小哥哥，小哥哥，我给你个大嘴巴子好不好呀 这是长的不好看的 6.I see some people with ak47,they biu biu biu and they boom boom boom.people say a a a and die.You should call a car which vivo vivo vivo。 1.老公老公mua，左边一个mua，右边一个mua，嘴巴一个mua，老公老公抱抱，我要公主抱抱，飞起来的抱抱，转圈圈的抱抱! 2.像一棵海草海草 海草海草 随波飘摇 海草海草海草海草 浪花里舞蹈;海草海草 海草海草 管它骇浪惊涛。 3.你问我为什么没对象？有才华的长得丑，长得帅的挣钱少，挣钱多的不顾家，太顾家的没出息，有出息的不浪漫，会浪漫的靠不住，实在是没法找！ 4.云云：师父我坚持不住啦 小涵：我心里一直有个梦 想去嵩山少林学武功 就像电影里帅气的超人 行侠仗义 飞檐走壁。 小扣： 师父你为何可以行如流水枪扎一线棍扫一片(你却)挥挥衣袖对我说(赶紧练功去) 小淑：练功必须顶大太阳(哼)晚上还要借月亮光(哈)一日不练十日空(哼哈) 小乐：习武先习德(哼)学艺先学礼(哈)我也心中牢记(哼哈哼) 倪虹洁：英雄台下十年功为台上一分钟 5.小哥哥，小哥哥，我给你一样东西好不好呀 这是长得好看的。 小哥哥，小哥哥，我给你个大嘴巴子好不好呀 这是长的不好看的 6.I see some people with ak47,they biu biu biu and they boom boom boom.people say a a a and die.You should call a car which vivo vivo vivo。 1.老公老公mua，左边一个mua，右边一个mua，嘴巴一个mua，老公老公抱抱，我要公主抱抱，飞起来的抱抱，转圈圈的抱抱! 2.像一棵海草海草 海草海草 随波飘摇 海草海草海草海草 浪花里舞蹈;海草海草 海草海草 管它骇浪惊涛。 3.你问我为什么没对象？有才华的长得丑，长得帅的挣钱少，挣钱多的不顾家，太顾家的没出息，有出息的不浪漫，会浪漫的靠不住，实在是没法找！ 4.云云：师父我坚持不住啦 小涵：我心里一直有个梦 想去嵩山少林学武功 就像电影里帅气的超人 行侠仗义 飞檐走壁。 小扣： 师父你为何可以行如流水枪扎一线棍扫一片(你却)挥挥衣袖对我说(赶紧练功去) 小淑：练功必须顶大太阳(哼)晚上还要借月亮光(哈)一日不练十日空(哼哈) 小乐：习武先习德(哼)学艺先学礼(哈)我也心中牢记(哼哈哼) 倪虹洁：英雄台下十年功为台上一分钟 5.小哥哥，小哥哥，我给你一样东西好不好呀 这是长得好看的。 小哥哥，小哥哥，我给你个大嘴巴子好不好呀 这是长的不好看的 6.I see some people with ak47,they biu biu biu and they boom boom boom.people say a a a and die.You should call a car which vivo vivo vivo。 </div>
</body>
</html><!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>Document</title>
<style>
div {
width: 80px;
height: 80px;
background: red;
/* 1.resize:both 2.overflow: auto */
resize: both;
overflow: auto; outline: 2px solid black;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html><!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>Document</title>
<style>
img {
/* 左上角的x 左上角的Y值*/
border-radius: 20px 100px 20px 100px / 20px 100px 20px 100px;
}
</style>
</head>
<body>
<img src="./images/1.jpg" alt="">
</body>
</html><!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>Document</title>
<style>
img {
max-width: 100%;
height: auto;
filter: blur(10px) grayscale(50%)
}
</style>
</head>
<body>
<img src="./images/4.jpg" alt="">
<button>发红包</button>
</body>
</html><!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>Document</title>
<style>
button {
height: 50px;
background-color: #4CAF50;
border: none;
border-radius: 4px;
color: white;
cursor: pointer;
/* 0px 0px 0px x y */
}
button:hover {
transition: 0.3s;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<button>鼠标悬停后显示阴影</button>
</body>
</html> <div class="div" id="div">
<div>
<span class="logo"></span>
</div>
<span></span>
<!-- text、button、password、submit、radio、checkbox、file、image -->
<input type="text">
<input type="password">
</div>标签选择div{}
类选择.div
id选择器#div
子代选择器.div>span{}
后代选择器.div span{}
并集 交集，，属性 伪类 伪元素
标签内style：1000 id选择器：100 类选择器：10 标签选择器：1
盒子内容居中
1.position
left right top bottom margin
2. display: table-cell
vertical-align: middle
text-align: center<!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>
.box {
width: 500px;
height: 400px;
border: 2px solid blue;
/* 就是将元素变成弹性盒子元素 */
display: flex;
flex-direction: row;
/* 在主轴方向对齐方式 */
justify-content: space-evenly;
/* 侧轴方向的对齐方式 */
align-items: flex-start;
}
.item {
height: 60px;
background: red;
}
.item1 {
flex: 1;
background: blue;
}
.item2 {
flex: 2;
background: yellow;
}
.item4 {
flex: 3;
background: green;
}
.item3 {
flex: 4;
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
</body>
</html><!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>Document</title>
<style>
/* >= 750px div 300
<= 750px div 200
<= 300px div 100
*/
/* <=300 */
@media screen and (max-width: 300px) {
div {
width: 100px;
height: 200px;
background: red;
}
}
/* 300< screen <=750 */
@media screen and (min-width: 300px) {
div {
width: 200px;
height: 200px;
background: blue;
}
}
/* >750 */
@media screen and (min-width: 750px) {
div {
width: 300px;
height: 200px;
background: green;
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
