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语句获取动态的数据集,并为其命名],用户使用时只需使用[名 ...
随机推荐
- 解决linux下安装nodejs后npm未成功安装的问题
1.下载npm软件包 点击链接进入下载页面:npm下载 2.下载完成后将压缩包放到家目录下就可以(也可以放到其他地方) 3.解压 tar -zxvf 压缩包名称,解压后你会得到一个文件夹,进入后是这样 ...
- ES6——TDZ(暂时性死区)
暂时性的死区(Temporal Dead Zone),简写为 TDZ: 只要块级作用域里存在let命令,它所声明的变量就绑定这个区域,不在受外部的影响 let 和 const 声明的变量不会被提升到作 ...
- AutoCAD.net-错误消息大全
case Acad::eOk:lstrcpy(Glb_AcadErrorInfo,_T("正确"));break;case Acad::eNotImplementedYet:lst ...
- 8.2、常用模块介绍2：xml,configparser,hashlib
xml: 介绍:包含关于可扩展标记语言xml的函数 使用: python有三种方法解析XML--SAX,DOM,以及ElementTree,由于xml技术落后,所以这里不对sax,dom介绍: xml ...
- 为什么不建议给域名裸域添加CNAME记录
很多提供权威 DNS 解析的服务商都不提供域名裸域又叫根域(root record)的 CNAME 解析,有些即使提供了也会在你添加裸域的 CNAME 记录时给你一个警告提醒. 万网的权威 DNS 解 ...
- jquery中使用datepicker限制开始日期小于结束日期
这里是使用Jquery插件实现的,这段代码来自于网络.感觉很实用,就做笔记记录下来. 原文:http://blog.csdn.net/tianyacao8025/article/details/707 ...
- CentOS7 配置静态 ip
1. 为 CentOS7 配置静态 ip 1.1 修改文件/etc/sysconfig/network-scripts/ifcfg-ens33 sudo vi /etc/sysconfig/netwo ...
- MySQL基础之 排序与限制，聚合
排序与限制 ORDER BY 作用:取出按照某个字段进行排序后的记录结果集. 配合:常与DESC 和ASC一块使用:默认是ASC,表示升序.DESC表示降序 LIMIT 作用:用于显示数据的一部分记 ...
- Laravel 执行过程核心
protected function sendRequestThroughRouter($request){ $this->app->instance('request', $reques ...
- IIS 部署SSL证书
1.导入证书 打开IIS服务管理器,点击计算机名称,双击‘服务器证书 双击打开服务器证书后,点击右则的导入 选择证书文件,点击确定 2.站点开启SSL 选择证书文件,点击确定 点击网站下的站点名称,点 ...