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语句获取动态的数据集,并为其命名],用户使用时只需使用[名 ...
随机推荐
- 解决input中智能提示框onblur与onclick冲突的问题
背景: 制作一个类似百度输入法的智能提示框, 其中当关键词输入进来时,会有智能提示展开,实际需求是当点击智能提示框的汉字时,输入框中自动补全并关闭智能提示, 当点击其他区域时,智能提示框自动隐藏,如下 ...
- js-ES6学习笔记-Symbol
1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null.布尔值(Boolean).字符串(String ...
- javascript：原型与原型链
一,函数对象 所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型) 所有函数拥有prototype属性(显式原型)(仅限函数) 原型对象:拥有prototype属性的对象,在定义函 ...
- 【代码笔记】iOS-JQIndicatorViewDemo
一,效果图. 二,工程图. 三,代码. #import "ViewController.h" #import "JQIndicatorView.h" @inte ...
- equals与hashcode区别
哈希码: hashCode的作用是用来获取哈希码,也可以称作散列码.实际返回值为一个int型数据.用于确定对象在哈希表中的位置. Object中有hashcode方法,也就意味着所有的类都有has ...
- LeetCoder题解之Find All Anagrams in a String
1.题目描述 2.题目分析 直接使用 哈希表记录子串的信息,然后对比两个哈希表信息即可 3.代码 vector<int> findAnagrams(string s, string p) ...
- oracle 11.2.0.1 rman异机恢复 11.2.0.3(windows X64)
问题原因: 误操作,需要时间点恢复. 备份情况:rman 备份,每天一次全备份,并且附带备份当天所有产生的archivelog,无expdp备份 恢复目标: 恢复到9号晚上21点数据 源系统:WIND ...
- innodb_fast_shutdown的内幕
Innodb_fast_shutdown告诉innodb在它关闭的时候该做什么工作.有三个值可以选择:1. 0表示在innodb关闭的时候,需要purge all, merge insert buf ...
- mysql瑞士军刀–pt工具
Percona-Toolkits Percona-toolkit 简介 percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql任务和系统任务,这些 ...
- tali -f 和 tail -F 之间的区别
tail -f 等同于--follow=descriptor,根据文件描述符进行追踪,当文件改名或被删除,追踪停止 tail -F 等同于--follow=name --retry ...