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语句获取动态的数据集,并为其命名],用户使用时只需使用[名 ...
随机推荐
- BZOJ2208: [Jsoi2010]连通数(tarjan bitset floyd)
题意 题目链接 Sol 数据水的一批,\(O(n^3)\)暴力可过 实际上只要bitset优化一下floyd复杂度就是对的了(\(O(\frac{n^3}{32})\)) 还可以缩点之后bitset维 ...
- css选取table元素的第一列
table tr td:first-child
- 转 [PHP] - 性能加速 - 开启Opcache
原文地址:[PHP] - 性能加速 - 开启Opcache PHP7已经发布了, 作为PHP10年来最大的版本升级, 最大的性能升级, PHP7在多放的测试中都表现出很明显的性能提升 一.开启Opc ...
- Jquery 清除空白字符
$.grep(“jQuery数组”, function(n) { return $.trim(n).length > 0; }); /*仅过滤空数组,不过滤相同数组*/
- 护网杯 task_shoppingCart 记录
前言 相关题目位于 https://gitee.com/hac425/blog_data/tree/master/hwb task_shoppingCart 漏洞位于 00BD9 用户输入 idx 然 ...
- Node.js ORM框架Sequlize之表间关系
Sequelize模型之间存在关联关系,这些关系代表了数据库中对应表之间的主/外键关系.基于模型关系可以实现关联表之间的连接查询.更新.删除等操作.本文将通过一个示例,介绍模型的定义,创建模型关联关系 ...
- http请求工具-OkHttp用法
OKHttp介绍 okhttp是一个第三方类库,用于android中请求网络.这是一个开源项目,是安卓端最火热的轻量级框架,由移动支付Square公司贡献(该公司还贡献了Picasso和LeakCan ...
- 'javac' 不是内部或外部命令，也不是可运行的程序
今天在命令行中运行javac命令时发现 但是运行java命令却可以 查找jdk的安装路径发现,安装目录里面同时有jdk的文件夹和jre的文件夹 查看了jdk的目录发现jdk目录中也有一个jre文件夹 ...
- [python] 列表解析式的高效与简洁
方法一(列表解析式): list1 = ["abc","efg","hij"] list2 = [i[0] for i in list1] ...
- pandas中的series数据类型
import pandas as pd import numpy as np import names ''' 写在前面的话: 1.series与array类型的不同之处为series有索引,而另一个 ...