10-动画+常见页面布局+媒体查询语句+弹性布局常见属性
1.练习-太阳与海
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background: skyblue;
height: 1000px;
}
.sun {
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 100px;
top: 100px;
}
/* 通过伪元素为sun添加扩散的部分 */
.sun::before {
content: '';
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 0;
top: 0;
animation: sun 1s linear infinite;
}
.sun::after {
content: '';
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 0;
top: 0;
animation: sun 1s linear infinite 0.5s;
}
.sea1 {
width: 100%;
height: 235px;
background: url("img/1.png") no-repeat center 0;
position: absolute;
left: 0;
bottom: 0;
animation: sea 1s infinite alternate;
}
.sea2 {
width: 100%;
height: 211px;
background: url("img/2.png") no-repeat center 0;
position: absolute;
left: 0;
bottom: 0;
opacity: 0.9;
animation: sea 1s infinite alternate 0.5s;
}
@keyframes sun {
from {
/* 扩散 */
transform: scale(1);
/* 透明度 */
opacity: 1;
}
to {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes sea {
from {
bottom: 0;
}
to {
bottom: -30px;
}
}
</style>
</head>
<body>
<div class="sun"></div>
<div class="sea1"></div>
<div class="sea2"></div>
</body>
</html>
2.animate动画演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
/*
1 https://www.dowebok.com/demo/2014/98/，下载animate.css文件。
2 通过link引入animate.css文件。
3 使用animate.css。先使用animated样式；在选择具体的样式，如bounceInLeft。
*/
div {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="animated bounceInLeft"></div>
</body>
</html>
3.左侧固定右侧自适应布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
height: 600px;
background: #ccc;
}
.right {
width: 100%;
height: 600px;
background: yellow;
float: left;
/*
1 左侧固定右侧自适应布局的第一种方式，利用怪异盒子模型，
让在加上padding时不会撑大盒子。
*/
/*padding-left: 200px;*/
/*box-sizing: border-box;*/
}
.right .content {
/*
2 使用怪异盒子模式可以解决加padding不撑大盒子的问题，
但是怪异盒子模型是CSS3中的属性，不适用低版本的浏览器，
对于低版本的浏览器，可以通过块元素.content不设置宽度，
其和父盒子的宽度一致，然后再给.content设置padding，
不会撑大盒子来实现左侧固定右侧自适应布。
*/
padding-left: 200px;
}
.left {
width: 200px;
height: 600px;
background: yellowgreen;
float: left;
/* 浮动时，利用设置margin-left为负数来让盒子浮动在一排。 */
margin-left: -100%;
}
</style>
</head>
<body>
<div class="box">
<!--<div class="right">-->
<!--右-->
<!--</div>-->
<div class="right">
<div class="content">右</div>
</div>
<div class="left">左</div>
</div>
</body>
</html>
4.双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
/*
1 屏幕宽度小于600px，就会出现滚动条。
2 屏幕宽度在600px-1200px之间进行自适应，超出范围不进行自适应。
*/
min-width: 600px;
max-width: 1200px;
height: 600px;
background: #ccc;
}
.center {
width: 100%;
height: 600px;
background: yellow;
float: left;
}
.center .content {
padding: 0 200px;
}
.left {
width: 200px;
height: 600px;
background: red;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 600px;
background: orange;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center">
<div class="content">
右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
5.圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
1 圣杯布局，解决双飞布局时需要给.center盒子加子元素的问题。
2 先给.box设置margin: 0 200px;，让其左右留200px的空白。
3 然后再通过给.left和.right设置相对定位来将其移走。
*/
* {
padding: 0;
margin: 0;
}
.box {
min-width: 800px;
max-width: 1200px;
height: 600px;
background: #ccc;
margin: 0 200px;
}
.center {
width: 100%;
height: 600px;
background: yellow;
float: left;
}
.left {
width: 200px;
height: 600px;
background: red;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
height: 600px;
background: orange;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center">
右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
6.媒体查询语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
1 媒体查询语句也是CSS语句，媒体查询语句可以检查屏幕的宽高，
实际上就是一个条件语句。
2 媒体查询语句是CSS语句，所以也遵循CSS语句的特性。
*/
.box1 {
width: 200px;
height: 200px;
background: gray;
}
/* 内嵌式媒体查询。 */
/* 1 当屏幕宽度大于800px时，使用媒体查询语句中的定义。 */
@media (min-width: 800px) {
.box1 {
width: 20px;
height: 20px;
background: orange;
}
}
.box2 {
width: 200px;
height: 200px;
background: gray;
}
/* 2 当屏幕宽度小于800px时，使用媒体查询语句中的定义。 */
@media (max-width: 800px) {
.box2 {
width: 200px;
height: 200px;
background: red;
}
}
.box3 {
width: 200px;
height: 200px;
background: gray;
}
/* 3 当屏幕宽度大于600px，小于800px是，使用媒体查询语句中的定义。 */
@media (min-width: 600px) and (max-width: 800px) {
.box3 {
width: 200px;
height: 200px;
background: pink;
}
}
.box4 {
width: 200px;
height: 200px;
background: gray;
}
/* 4 orientation，横竖屏。landscape，横屏；portrait，竖屏。 */
/* 竖屏是变为黄绿色。 */
/* only screen，只有适配彩色屏幕。 */
@media only screen and (orientation: portrait) {
.box4 {
width: 200px;
height: 200px;
background: yellowgreen;
}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
7.练习-苹果官网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
body {
background: #333;
}
.box {
margin: 10px 0 0 10px;
}
.box ul li {
width: 25%;
height: 200px;
float: left;
/* 使用怪异盒子模型，让li的边框也包含在宽的25%中。 */
box-sizing: border-box;
border-right: 10px solid transparent;
}
.box ul li a {
display: block;
height: 200px;
background: url("img/01.jpg") no-repeat center 0;
}
.box ul li:nth-of-type(2) a {
background-image: url("img/02.jpg");
}
.box ul li:nth-of-type(3) a {
background-image: url("img/03.jpg");
}
.box ul li:nth-of-type(3) a {
background-image: url("img/03.jpg");
}
/* 1 使用媒体查询，屏幕宽度在768-1000px时，显示两列。 */
@media (min-width: 768px) and (max-width: 1000px) {
.box ul li {
width: 50%;
margin-bottom: 10px;
}
}
/* 2 使用媒体查询，屏幕宽度在768px下时，就显示一列。 */
@media (max-width: 768px) {
.box ul li {
width: 100%;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
</div>
</body>
</html>
8.外链式媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
1 屏幕宽度大于1000px时，使用pad.css。
2 屏幕宽度在500-1000px是，使用phone.css。
-->
<link rel="stylesheet" type="text/css" href="css/pad.css" media="(min-width:1000px)"/>
<link rel="stylesheet" type="text/css" href="css/phone.css" media="(min-width:500px) and (max-width: 1000px)"/>
</head>
<body>
<div class="box"></div>
</body>
</html>
9.弹性布局介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8
<style type="text/css">
/*
1 弹性布局是父元素和子元素之间的一种关系，也叫伸缩布局、弹性盒子、
伸缩盒子、flex布局。
2 弹性布局中的父元素叫做弹性空间，子元素叫做弹性元素、弹性项。
*/
* {
padding: 0;
margin: 0;
}
.box {
border: 1px solid red;
/* 开启弹性布局。 */
/*
父元素开启弹性布局后，子元素会排列为一行。
当屏幕缩小时，即使屏幕宽度小于了子元素的宽度之和，
也不会出现滚动条，而是子元素的宽度对应缩小。
*/
display: flex;
}
.box div {
width: 400px;
height: 100px;
background: red;
}
.box div:nth-of-type(2) {
background: orange;
}
.box div:nth-of-type(3) {
background: pink;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
10.弹性元素设置主轴的方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
/*
1 弹性布局，主轴默认是水平方向，左边开始，右边结束。侧轴又叫交叉轴，
垂轴，默认是垂直方向，上边开始，下边结束。
2 弹性布局flex-direction设置主轴的方。
row，默认值，主轴是水平方向，左边开始，右边结束；侧轴是垂直方向，上边开始，下边结束。
row-reverse，主轴是水平方向，右边开始，左边结束；侧轴是垂直方向，上边开始，下边结束。
column，主轴是垂直方向，上边开始，下边结束；侧轴是水平方向，左边开始，右边结束。
column-reverse，主轴是垂直方向，下边开始，上边结束；侧轴是水平方向，左边开始，右边结束。
*/
.box1 {
border: 1px solid red;
display: flex;
flex-direction: column-reverse;
}
.box1 div {
width: 400px;
height: 100px;
background: red;
}
.box1 div:nth-of-type(2) {
background: orange;
}
.box1 div:nth-of-type(3) {
background: pink;
}
</style>
</head>
<body>
<div class="box1">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
11.弹性元素在主轴上的位置分布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box1 {
border: 1px solid red;
display: flex;
flex-direction: row;
/*
1 justify-content设置弹性元素在主轴上的位置。
flex-start，默认值，居左。
center，居中间。
flex-end，居右。
space-around，空间包含元素，元素在主轴上均匀分布，有左开始间距和右结束间距。
space-between，元素包含空间，元素在主轴上均匀分布，没有左开始间距和右结束间距。
space-evenly，空间包含元素，元素在主轴上均匀分布，左开始间距、右结束间距和中间间距相等。
*/
justify-content: space-evenly;
}
.box1 div {
width: 400px;
height: 100px;
background: red;
}
.box1 div:nth-of-type(2) {
background: orange;
}
.box1 div:nth-of-type(3) {
background: pink;
}
</style>
</head>
<body>
<div class="box1">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
12.弹性元素的换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box1 {
width: 1000px;
height: 600px;
border: 1px solid red;
display: flex;
flex-direction: row;
/*
1 flex-wrap设置弹性元素的换行。
nowrap，默认值，当弹性元素超出父元素时，不换行，而是进行自身的压缩。
wrap，当弹性元素超出父元素时，会进行换行，向下进行换行。
wrap-reverse，当弹性元素超出父元素时，会进行换行，向上进行换行。
*/
flex-wrap: wrap-reverse;
}
.box1 div {
width: 400px;
height: 100px;
background: red;
}
.box1 div:nth-of-type(2) {
background: orange;
}
.box1 div:nth-of-type(3) {
background: pink;
}
.box1 div:nth-of-type(4) {
background: gray;
}
.box1 div:nth-of-type(5) {
background: green;
}
</style>
</head>
<body>
<div class="box1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
13.练习-开房流程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
body {
background: #eee;
}
.box {
width: 90%;
height: 20px;
margin: 200px auto;
position: relative;
}
/* 通过伪元素设置中间的线。 */
.box::before {
content: '';
width: 100%;
height: 1px;
background: gray;
position: absolute;
left: 0;
top: 50%;
}
/* 1 弹性布局是父元素和子元素之间的一种关系，所以需要给li的父元素ul开启弹性布局。 */
.box ul {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.box ul li {
width: 18px;
height: 18px;
border: 2px solid red;
border-radius: 50%;
/* 2 通过径向渐变了填充li。0-50%是red，50%-100%是white。 */
background-image: radial-gradient(red 50%, white 50%);
position: relative;
}
.box ul li span {
font-size: 12px;
position: absolute;
left: -12px;
top: -16px;
/* 强制不换行。 */
white-space: nowrap;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<span>预约房间</span>
</li>
<li>
<span>办理入住</span>
</li>
<li>
<span>开房进行时</span>
</li>
<li>
<span>退房</span>
</li>
</ul>
</div>
</body>
</html>
14.弹性元素在侧轴的位置分布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box1 {
width: 1000px;
height: 600px;
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/*
1 设置flex-wrap: wrap;弹性元素换行后，如果宽度超过父元素的宽度，
就会进行换行，换行会将父元素等分。如需要两行，则将父元素的高度等分为两份。
2 align-items设置弹性元素在侧轴的当前行的位置。
flex-start，居当前行的开始；如果当前元素没有设置高度，则高度为内容的高度。
center，当前行的居中；如果当前元素没有设置高度，则高度为内容的高度。
flex-end，居当前行的结束；如果当前元素没有设置高度，则高度为内容的高度。
stretch，默认值，弹性元素在不设置高度时，高度和当前行的高度相同。
*/
align-items: flex-start;
}
.box1 div {
width: 400px;
height: 100px;
background: red;
}
.box1 div:nth-of-type(2) {
background: orange;
}
.box1 div:nth-of-type(3) {
background: pink;
}
.box1 div:nth-of-type(4) {
background: gray;
}
.box1 div:nth-of-type(5) {
background: green;
}
</style>
</head>
<body>
<div class="box1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
浙公网安备 33010602011771号