弹性盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒</title>
<style>
ul{
border: 5px solid black;
background-color: lightgoldenrodyellow;
list-style: none;
margin: 0;
padding: 0;
display: flex;
/*
flex-direction:指定容器中元素的排列方式
- row 默认值,水平方向从左向右
- row-reverse 水平反向排列
- column 纵向排列,从上往下
- column-reverse 从下往上
*/
/*
主轴/侧轴:弹性元素的排列方向/垂直于主轴方向
*/
justify-content:space-evenly;
}
ul > li{
height: 100px;
width: 100px;
background-color: lightsalmon;
text-align: center;
font-size: 25px;
}
/*
弹性元素属性:
flex-grow 当父元素有多余空间时,指定弹性元素的伸展系数
justify-content:分配主轴剩余空间
align-content:分配副轴剩余空间
- flex-start 元素沿主轴始边排列
- flex-end 元素沿主轴终边排列
- center 元素居中排列
- space-around 空白分布到元素的两侧,会导致中间的元素两侧边距大
- space-evenly 空白均匀分布到元素间,导致元素两边都有相同的边距
- space-between 空白均匀分布到元素单侧,
flex-shrink 当父元素空间不足,为指定元素收缩
flex-wrapper 设置弹性元素是否自动换行
- nowrap 默认值,元素不自动换行
- wrap 元素沿侧轴自动换行
- wrapreverse 沿侧轴反方向换行
flex-flow wrap 和 direction 的简写属性
*/
li:nth-child(2){
background-color: lightskyblue;
}
li:nth-child(3){
background-color:rgb(131, 64, 64);
}
/*
align-items:元素在副轴对齐
- stretch 默认值,将元素设置为相同值
- flex-start 沿副轴起边对齐
- flex-end 沿副轴终边对齐
- center 居中对齐
- baseline 基线对齐
*/
</style>
</head>
<body>
<!--
flex(弹性盒): 替代浮动进行页面布局
flex可以使元素具有弹性,让元素跟随页面变化
在使用弹性盒之前,必须设置弹性容器
- display:flex 独占一行
- display:inline-flex 行内弹性容器,不独占一行
弹性元素:弹性容器的子元素
注:弹性元素也可以是弹性容器
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
弹性元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
border: 5px solid black;
background-color: lightgoldenrodyellow;
list-style: none;
margin: 0;
padding: 0;
display: flex;
height: 400px;
}
/*
flex-grow: 弹性元素的增长系数
flex-shrink:弹性元素的缩减系数
flex-basis:弹性元素的初始宽度 ,默认值auto
flex:增长系数 缩减系数 初始长度
*/
ul > li{
height: 100px;
width: 100px;
background-color: lightsalmon;
text-align: center;
font-size: 25px;
}
li:nth-child(2){
background-color: lightskyblue;
/* order 设置元素的位置*/
}
li:nth-child(3){
background-color:rgb(131, 64, 64);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>像素</title>
<style>
/*
像素:css像素和物理像素
视口: 屏幕中用来显示网页的区域
注:浏览器显示网页时,需要将css像素转化成物理像素
可以通过改变视口大小来改变物理像素和css像素的比值
默认情况移动端视口设置为980px
编写移动端页面时,一般会1个css像素对应多个物理像素
*/
.box1{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: burlywood;
}
</style>
</head>
<body>
<!--
vw: 视口的1%的宽度
-->
<div class="box1"></div>
</body>
</html>
vw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>像素</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 1.2rem;
height: 1.2rempx;
border-radius: 50%;
background-color: burlywood;
}
html{
font-size: 5.33vw;
}
</style>
</head>
<body>
<!--
vw: 视口的1%的宽度
1rem = 1 html的字体大小
-->
<div class="box1"></div>
</body>
</html>
响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
媒体查询语法 @media 查询规则{}
- all 所有设备
- print 打印设备
- screen 带屏幕设备
- speech 屏幕阅读器
注:可连接多个媒体类型。之间是或关系
可以在设备前家only来规避老版本浏览器
*/
@media only screen {
body{
background-color: coral;
}
}
</style>
</head>
<body>
<!--
响应式布局:网页根据不同设备或者窗口大小呈现不同效果
注:可以使一个网页适用不同设备
通过媒体查询为不同设备分别设置不同样式
-->
</body>
</html>
媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
媒体特性:
width/height 视口的宽度/高度
min-width 视口的最小宽度(视口大于指定宽度生效)
max-width 视口的最大宽度(视口小于指定宽度生效)
样式切换的分界称为断点
小于768 超小屏幕 max-width:768px
大于768 小屏幕 min-width:768px
大于992 中型屏幕 min-width:992px
大于1200 大屏幕 min-width:1200px
*/
@media (min-width:500px) (max-width: 900px){
body{
background-color: cornflowerblue;
}
}
</style>
</head>
<body>
</body>
</html>
练习-美图头部导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
媒体特性:
width/height 视口的宽度/高度
min-width 视口的最小宽度(视口大于指定宽度生效)
max-width 视口的最大宽度(视口小于指定宽度生效)
样式切换的分界称为断点
小于768 超小屏幕 max-width:768px
大于768 小屏幕 min-width:768px
大于992 中型屏幕 min-width:992px
大于1200 大屏幕 min-width:1200px
*/
@media (min-width:500px) (max-width: 900px){
body{
background-color: cornflowerblue;
}
}
</style>
</head>
<body>
</body>
</html>
// 设置超链接文字
a{
color: #fff;
&:hover{
color: #c2c0c0;
}
}
.top-bar-wrapper{
background-color: #000;
}
// 导航条的外部容器
.top-bar{
max-width: 1200px;
margin: 0 auto;
height: 48px;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #000;
}
// 设置左侧导航图标
.left-menu{
// 设置点击显示隐藏菜单
&:active{
.nav{
display: block;
}
}
// position:relative;
// 设置菜单
.nav{
// 设置初始隐藏
display: none;
position: absolute;
top: 48px;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
// 设置左侧框内元素的样式
li{
width: 80%;
margin: 0 auto;
border-bottom: 1px solid #757575;
a{
display: block;
line-height: 44px;
font-size: 14px;
}
&:last-child a{
display: inline-block;
margin-right: 6px;
}
span{
color: #fff;
font-size: 14px;
}
}
}
.menu-icon{
width: 18px;
height: 48px;
position: relative;
li:nth-child(1){
top: 18px;
}
li:nth-child(2){
top: 24px;
}
li:nth-child(3){
top: 30px;
}
// 导航线
li{
width: 18px;
height: 1px;
background-color:#fff;
position: absolute;
transform-origin: left center;
transition: 0.5s;
}
&:active{
li:nth-child(1){
top: 18px;
transform: rotateZ(42deg);
}
li:nth-child(2){
top: 24px;
opacity: 0;
}
li:nth-child(3){
top: 30px;
transform: rotateZ(-42deg);
}
}
}
}
.logo{
a{
text-indent: -999px;
display: block;
width:80px;
height: 22px;
background-image: url(../meitu/logo.png);
background-size: 80px 22px;
}
}
// 设置媒体查询
@media only screen{
// 断点 768px
@media (min-width:768px){
.left-menu{
order: 2;
flex: auto;
.nav{
display: flex;
position: static;
padding: 0;
justify-content: space-around;
li{
width: auto;
border-bottom: none;
margin: 0;
a{
line-height: 48px;
}
span{
display: none;
}
}
}
.menu-icon{
display: none;
}
}
.logo{
order: 1;
}
.user-info{
order: 3;
}
}
}