前端网页学习 Day49(z-index属性 flex布局响应式布局过渡动画)前端网页学习(html)DAY49

110 阅读 0 评论 73 点赞

我是靠谱客的博主无心烤鸡，最近开发中收集的这篇文章主要介绍前端网页学习 Day49(z-index属性 flex布局响应式布局过渡动画)前端网页学习(html)DAY49，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前端网页学习(html)

DAY49

今日内容:

z-index属性

flex布局

响应式布局

过渡

动画

z-index属性

脱离文档流的标签,具有z-index属性,可以用来控制显示层次的优先级,值为任意的正整数

<!-- 需求1:d1,d2,d3均为box的一半大小 -->
<!-- 需求2:d1左上角,d2居中,d3右下角 -->
<!-- 需求3:d2区域在最上方(会覆盖d1,d3的重叠部分) -->
<div class="box">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>

CSS样式

<style type="text/css">
.box {
/*辅助子级进行绝对定位*/
position: relative;
width: 400px;
height: 400px;
background-color: red;
margin: 0 auto;
}
.d1, .d2, .d3 {
width: 200px;
height: 200px;
position: absolute;
}
.d1 {
background-color: orange;
}
.d2 {
background-color: blue;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.d3 {
background-color: black;
right: 0;
bottom: 0;
}
.d2 {
z-index: 88888;
}
.d3 {
z-index: 666;
}
</style>

flex布局

作用:能够方便的实现块的垂直居中

flex布局:意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style type="text/css">
.container {
width: 600px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
}
.item {
/*width: 200px;*/
/*height: 200px;*/
/*border-radius: 50%;*/
background-color: orange;
font-size: 80px;
}
/*容器:规定容器为flex,则容器内的标签会成为该容器的项目(item)*/
.container {
display: flex;
}
.item {
/*默认只能一行排列,所有item总宽不允许超出container宽度*/
/*width: 300px;*/
/*默认情况下item可以不规定高度,高度会自适应父级*/
/*item没有设置宽度下,可以通过flex-grow决定对于父级的占比*/
}
/*.it1, .it3 {
flex-grow: 1;
}
.it2 {
flex-grow: 3;
background-color: pink
}*/
/*container属性*/
.container {
/*flex-direction: row | row-reverse | column | column-reverse; 方向*/
/*flex-direction: column-reverse;*/
/*flex-wrap: nowrap | wrap | wrap-reverse;换行方式*/
/*flex-wrap: wrap;*/
/*justify-content: flex-start | flex-end | center | space-between | space-around;水平对齐方式*/
/*item为沾满父级区域*/
justify-content: space-around;
}
/*item属性*/
.item {
/*width: 300px;
height: 200px;*/
}
.item {
width: 100px;
}
</style>
<!-- 总结 -->
<!-- 1.将父级display属性设置为flex,则父级成为container,子级成为item -->
<!-- 2.container设置item的排列方向flex-direction -->
<!-- 3.item对于container的空间占比flex-grow -->
</head>
<body>
<div class="container">
<div class="item it1">1</div>
<div class="item it2">2</div>
<div class="item it3">3</div>
</div>
</body>
</html>

响应式布局

响应式布局就是一个网页能够兼容多个终端-而不是为每个终端做一个特定的版本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<style type="text/css">
/*基本样式块*/
/*.box {
max-width: 1200px;
width: 95%;
margin: 0 auto;
background-color: red!important;
}
.it {
width: 300px;
height: 300px;
font: 900 50px/300px 'STSong';
text-align: center;
float: left;
border-radius: 50%;
background-color: orange;
}
.box:after {
content: "";
display: block;
clear: both;
}*/
html, body {
margin: 0;
}
.it {
height: 300px;
background-color: orange;
font: 900 50px/300px 'STSong';
text-align: center;
border-radius: 50%;
float: left;
}
.box:after {
content: "";
display: block;
clear: both;
}
/*屏幕宽度超出1200px*/
@media only screen and (min-width: 1200px) {
/*1.在响应式布局内,css语法同正常样式表语法*/
/*2.响应式布局之间存在不同屏幕尺寸的限制,使用样式相互不影响*/
/*解释:满足当前屏幕尺寸时,该样式块起作用,不满足时,则样式块失效*/
/*3.当响应式布局中样式块起作用时,会与正常样式块设置协同布局,遵循选择器的优先级规则*/
.box {
background-color: pink;
}
.it {
width: 25%;
}
/*原则:*/
/*1.采用响应式布局的页面,基本样式块只做共性样式设置
需要根据页面尺寸进行适应变化的样式均有响应式布局处理*/
/*2.要进行响应式布局的页面要处理所有屏幕尺寸下的样式块*/
}
/*屏幕宽度间于600至1200px*/
@media only screen and (min-width: 600px) and (max-width: 1200px) {
.box {
background-color: brown;
}
.it {
width: 30%;
margin: 0 calc(10% / 6);
}
}
/*屏幕宽度小于600px*/
@media only screen and (max-width: 600px) {
.box {
background-color: cyan;
}
.it {
width: 80%;
margin-left: 10%;
min-width: 300px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="it">1</div>
<div class="it">2</div>
<div class="it">3</div>
<div class="it">4</div>
<div class="it">5</div>
<div class="it">6</div>
<div class="it">7</div>
<div class="it">8</div>
<div class="it">9</div>
<div class="it">10</div>
<div class="it">11</div>
<div class="it">12</div>
</div>
</body>
</html>

过渡

过渡:从一个状态以动画的方式变成另一种状态的这种变化过程

过渡效果通过hover产生,可以制作一个hover层

hover层处理方式:与显示层同等区域大小

同样可以将显示层的位置交于hover层处理

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过度</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
/*过度*/
/*持续时间*/
/*来去均具有过度效果*/
transition-duration: .5s;
/*延迟时间*/
/*transition-delay: 1s;*/
/*过度属性: all*/
/*transition-property: width, height;*/
/*过度曲线*/
/*transition-timing-function: linear;*/
/*整体设置*/
/*transition: all .3s .1s linear;*/
transition: .3s cubic-bezier(0,.99,0,.99);
}
.hover {
width: 200px;
height: 200px;
margin: 0 auto;
}
/*可以制造第二状态的处理方式*/
.hover:hover .box {
width: 400px;
height: 190px;
background-color: red;
/*去向第二状态才有过度效果*/
/*transition-duration: .1s;*/
}
</style>
</head>
<body>
<div class="hover">
<div class="box"></div>
</div>
</body>
</html>

动画

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
}
/*动画样式*/
.box {
/*绑定动画名*/
animation-name: wasai;
/*持续时间*/
animation-duration: 1s;
/*延迟时间*/
/*animation-delay: .1s;*/
/*动画结束停留位置:backwards起点 forwards终点*/
/*animation-fill-mode: forwards;*/
/*运动次数 infinite无数次*/
animation-iteration-count: 4;
/*多次运动方向的规则*/
/*alternate:来回*/
/*alternate-reverse:终点开始来回*/
/*animation-direction: alternate-reverse;*/quotes: ;
/*动画状态 running*/
/*animation-play-state: paused;*/
/*整体设置*/
animation: wasai 1s 2 linear alternate;
}
.box:hover {
animation-play-state: running;
}
/*动画体*/
@keyframes wasai{
0% {
}
100% {
width: 400px;
}
}
@keyframes wasai1{
0% {}
100% {}
}
@keyframes wasai2{
0% {}
100% {}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>