day48
flex布局
响应式布局
过度
动画
flex布局
学习目的：基于之前所学的盒模型布局（display）、浮动布局（float）、定位布局（position），都不能很好的解决block垂直居中的问题。
flex布局：相当于一个容器（container），容器内的标签会成为该容器的项目（item）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
.container{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
display: flex;
}
.item{
color: white;
text-align: center;
font-size: 20px;
line-height: 100px;
/*width: 100px;*/
height: 100px;
background-color: blue;
border-radius: 50%;
/*默认只能一行排列，所以item总宽不允许超过容器（container）的宽度*/
/*默认情况下item可以不规定高度时，高度会自适应父级*/
}
/* .it1,.it3{
flex-grow: 1;
}
.it2{
flex-grow: 3;
}*/
/*item没有设置宽度下，可以通过比例（flex-grow）决定对于父级的占比*/
/*wrap例子*/
/* .it1{
width: 200px;
}
.it3{
width: 300px;
}*/
.container{
/*flex-direction: :row(同行显示)|column（一列显示）|row-reverse（反转显示）;*/
/*flex-wrap: wrap(换行)| nowrap(不换行，默认)|wrap-reverse（换行并且反转显示）;*/
/*水平对齐方式:justify-content: flex-start|center|space-between|flex-end|space-around*/
justify-content: space-around;
}
</style>
</head>
<body>
<div class="container">
<div class="item it1"></div>
<div class="item it2"></div>
<div class="item it3"></div>
</div>
</body>
</html>
flex总结：
1.将父级display属性设置为flex，父级成为container，子级成为item。
2.container设置item的排列方向flex-direction。
3.item对于container的空间占比flex-grow。
响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<style>
/*基本样式块*/
.box{
max-width: 1200px;
width: 80%;
background-color: pink;
margin:0 auto;
}
.it{
border-radius: 50%;
width:300px;
height: 300px;
background-color: blue;
float: left;
}
.box:after{
content: "";
display: block;
clear: both;
}
/*屏幕宽度超出1200px*/
@media only screen and (min-width: 1200px){
.box{
background-color: #d47856;
}
}
/*屏幕宽度间于600~1200px*/
@media only screen and (min-width: 600px) and (max-width: 1200px){
.box{
background-color: cyan;
}
}
/*屏幕宽度小于600px*/
@media only screen and (max-width: 600px){
.box{
background-color: #d3efed;
}
}
</style>
</head>
<body>
<div class="box">
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
<div class="it"></div>
</div>
</body>
</html>
原则：
1.采用响应式布局的页面，基本样式只做共性样式设置，需要根据页面尺寸进行适应化变化的样式均由响应式布局处理。
2.要进行响应式布局的页面要处理所有屏幕尺寸下的样式块。
响应式布局总结：
1.在响应式布局内，css语法同正确样式表语法。
2.响应式布局之间存在不同屏幕尺寸的限制，所以样式相互不要影响。（满足当前屏幕尺寸是，该样式块起作用，不满足时，则样式块失效）
3.当响应式布局中样式块起作用时，会与正常样式块设置协同布局，遵循选择器的优先级规则。
过度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过度案例</title>
<style>
.box{
width: 300px;
height: 300px;
margin: 0 auto;
border-bottom: 1px solid black;
position: relative;
}
.line{
width: 30px;
height: 30px;
background-color: orange;
position: absolute;
bottom: 0;
transition: .4s ease;
left: 120px;
}
.line:hover{
height: 200px;
}
.b{
width: 30px;
height: 10px;
border-radius: 50%;
background-color: #333;
position:absolute;
bottom: -5px;
}
.t{
width: 30px;
height: 10px;
border-radius: 50%;
background-color: #333;
position:absolute;
top: -5px;
}
</style>
</head>
<body>
<div class="box">
<div class="line">
<div class="t"></div>
<div class="b"></div>
</div>
</div>
</body>
</html>
过度：从一个状态以动画的方式变成另一种状态的变化过程就叫做过度，过度效果通过hover产生，可以制作一个hover层，（hover层处理方式：与显示层区域同等大小）
过度的属性：
持续时间：transition-duration: 0.3s;
延迟时间：transition-delay: 1s；
过度属性：transition-property: all;
过度曲线：transition-timing-function: linear;（一般用贝塞尔曲线）
整体设置：transition: all 0.3s 0.1s linear;
一般的设置会产生一个问题（当鼠标停在某处动画一直不停切换）：
需要在有动画的标签外嵌套一层利用外面层的hover属性来实现内层的动画效果
动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.box{
height: 200px;
width: 200px;
background-color: orange;
}
/*动画样式*/
.box{
/*绑定动画名*/
animation-name: wasai;
/*持续时间*/
animation-duration: .3s;
/*运动次数:infinite无数次*/
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-play-state: paused;
}
.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>
实现过程：
先设置动画体--->并为动画体设置名字-->然后给需要动画的标签绑定动画名---->设置动画的一些属性
设置动画体：
@keyframes wasai{
0%{}
100%{
width: 400px;
}
}
为标签绑定动画名：
animation-name: wasai;
设置持续时间：
animation-duration: 0.3s;
设置延迟时间：（可不设置）
animation-delay: 1s;
动画结束位置：backwards、forwards
animation-fill-mode: forwards;
运动次数：infinite无数次
animation-iteration-count:2
alternate-reverse:终点开始来回
整体设置:
animation: wasai 1s 2 linear alternate running;
day48的更多相关文章
- day48——css样式
day48 通过调试窗口还可以玩一个神奇的东西 document.body.contentEditable=true css样式 高度宽度 width宽度 height高度 块级标签能设置高度宽度,内 ...
- day48 work
1 navicat自己玩一玩 2 练习题一定要搞懂 照着我的思路一遍遍的看敲 3 熟悉pymysql的使用 4 sql注入产生的原因和解决方法 了解 5 思考:如何结合mysql实现用户的注册和登录功 ...
- day48 navicat使用及pymysql的使用
目录 一.navicat介绍 1 基本使用 2 练习题 2.1 查询所有的课程的名称以及对应的任课老师姓名 2.2 查询平均成绩大于八十分的同学的姓名和平均成绩 2.3 查询没有报李平老师课的学生姓名 ...
- day48 前端高级选择器优先级
复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...
- Python：Day48 Jquery
引用方式: <script src="jquery-3.3.1.js"></script> jQuery就是一个jQuery对象,可以简写成$ 基本语法:$ ...
- python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- HTML day48
前端知识之HTML内容 HTML介绍 Web服务本质 import socket#引入套接字模块 sk = socket.socket()#实例化一个套接字对象 sk.bind(("12 ...
- js实现回放拖拽轨迹-------Day48
今天有点小高兴,csdn博客浏览量过万了,在过去还从来没有过这么高的浏览量呢.不得不说.太多时候还是有些矫情.可看到这些鼓舞还是忍不住高兴啊,至少,这样让我有一种行内人员的感觉,吾道不孤啊. 闲话不多 ...
- MySQL之 视图，触发器，事物，存储过程，函数（Day48）
阅读目录 一.视图 二.触发器 三.事物 四.存储过程 五.函数 六.流程控制 一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名 ...
随机推荐
- flex 总结
- 工作记录（JS向textarea添加固定内容、通过固定字符将字符串分割为数组）
第一个是在 textarea 输入框中添加固定的内容. 代码如下: <textarea id="text" cols="30" rows="10 ...
- 01-01基于SHELL的数据分析
#!/usr/bin/env bash for year in /root/Downloads/data/all/* do echo -ne `basename $year .gz`"\t& ...
- Docker相关概念
一.概念 ①云计算:是一种资源的服务模式,该模式可以实现随时随地,便捷按需地从可配置计算资源共享池中获取所需的资源(如网络.服务器.存储.应用及服务),资源能够快速供应并释放,大大减少了资源管理工作的 ...
- 记一款bug管理系统(bugdone.cn)的开发过程(2) -如何做好登录界面
一. 做了一个大胆的决定,官网首页便是登录界面 BugDone,Bug管理工具的定位就是一款非常易用的工具,所以我们没有像其它平台那样进官网首页都是一些功能和业务的介绍. 我们觉得方便用户快速进入工作 ...
- Python环境下如何安装爬虫需求的一些库
是在CMD环境下的: request库pip install request 回车 pandas库 同理,pip install pandas :这里需要声明下,这个是不一定成功的,刚入门稍微看了一点 ...
- Prometheus Node_exporter 之 System Detail
System Detail 1. Context Switches / Interrupts type: GraphUnit: shortLabel: CounterContext switches ...
- Oracle EBS OPM 发放生产批
--发放生产批 --created by jenrry DECLARE x_return_status VARCHAR2 (1); l_exception_material_tbl gme_commo ...
- IE8 下面通过滤镜的方式进行图片旋转
首先,为什么我会提出这样的方式来进行操作呢?原因还是需求导致: 在做项目中,有这样一个需求,在进行网页中图片查看的时候,需要对图片的操作有支持旋转和缩放这些操作,看似这样的网上插件有很多,对!但是对于 ...
- heckboxlist详细用法、checkboxlist用法、checkboxlist
heckboxlist详细用法.checkboxlist用法.checkboxlist for (int i = 0; i < CheckBoxList1.Items.Count; i++) { ...