一、CSS还原UI设计
1.Photoshop还原UI设计
查看尺寸信息
方式一、
点击窗口->信息,选择选框工具,并打开选框工具面板选项,设置鼠标单位为像素,选中一定范围后,即可在打开的信息面板上看到
方式二、选中移动工具,在左上角设置选项为“图层”,点击ctrl即可看到相关像素信息。(选择时要注意选择相关图片中有颜色的区域)
查看颜色信息
找到吸管工具,点击相关颜色,即可查看
查看文字信息
打开字符窗口,选择移动工具,按住ctrl,选择相关文字,即可在字符窗口中看到相关文字信息。
PS切图
-
如何设置?
编辑->首选项->增效工具->启用生成器打钩
文件->生成->图像资源
-
之后在相应图层输入相关信息便可在psd文件对应目录下生成相关文件夹以保存图片
2.蓝湖App快速标注信息
- 蓝湖是一款设计图的共享平台帮助互联网团队更好地管理设计图。自动生成设计图标注,与团队共享设计图,展示页面间的跳转关系。蓝湖支持从Sketch、Ps、Xd一键共享、在线讨论,蓝湖已经成为新一代产品设计的工作方式
- 类似App: measure、zeplin等
使用:
- 首先下载安装PhotoShop插件,在PhotoShop中的扩展功能中选择南湖并登录
-
在官网中新建一个项目后,在PS中的蓝湖窗口即可看到相关项目信息。可以选择上传,即可上传整个文件到线上。也可指定图片图层,在切图中选择标记为切图。在线上的新版本中即可看到相关切图信息。并且还可以下载。
3. PxCook自动标注工具
像素大厨是款适合设计师们使用的一款免费、交互流畅以及全平台支持的标注切图软件。功能多样化且非常实用,操作上也很是简单,它能够支持对Ps和Sketch设计元素尺寸、元素距离、文本样式与颜色的智能标注,并且还支持智能切图。
使用与蓝湖相似。多了vw和vh属性。
4.imgCook设计稿智能平台
imgcook专注以Sketch、PSD、静态图片等形式的视觉稿作为输入,通过智能化技术一键生成可维护的前端代码,包含视
图代码、数据字段绑定、组件代码、部分业务逻辑代码等。目前此产品是阿里巴巴前端委员会智能化小组的服务化的内外落地产品。
二、布局中的尺寸与位置
1.CSS盒模型的组成
- 在ccs中所有的元素都被一个个的“盒子(box)”包围着,理解这些“盒子”的基本原理,是我们使用CSS实现准确布局、处理元素排列的关键。
- 盒子的组成: content内容、padding内填充、border 边框、 margin外边距
2.CSS盒模型的注意点
- padding不能为负值,而margin可以为负值
- 背景色会平铺到非margin的区域。(注意边框是会受背景色影响的)
- margin-top传递的现象及解决方案。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 30px;
/*此处加margin-top,会使box1一起产生效果*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
result:
解决方案:
-
在box1中添加边框:border: 1px solid transparent;
-
BFC格式化上下文
-
使用弹性布局和网格布局
- margin上下叠加的现象及解决方案(左右无此种情况)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 40px;
}
.box2 {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 30px;
}
/* 此处两个盒子的间距为40px */
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
解决方案:
- 给box2加margin-top:70px,box2不加。
- BFC格式化上下文
- 使用弹性或网格布局
3.块级盒子与内联盒子
在CSS中我们广泛地使用两种“盒子”——块级盒子(blockbox)和内联盒子(inline box)。这两种盒子会在页面中表现出不同的行为方式
块级盒子: div、p、h1 …
内联盒子: span、a、strong …
-
块级盒子的特性
独占一行
支持所有样式
不写宽度的时候,跟父容器的宽度相同
所占据的区域是一个矩形
-
内联盒子的特性
盒子不会产生换行
有些样式不支持,比如:width、height等
不写宽度的时候,宽度由内容决定
所占据的区域不一定是一个矩形(页面宽度小于其内容宽度会换行)
会受空格或换行影响导致相邻的元素之间会有间隙
4.自适应盒模型的特性
自适应盒模型指的是,当盒子不设置宽度时,盒模型相关组成部分的处理方式是如何的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 300px;
height: 200px;
background: pink;
}
/* .box2 {
width: 300px;
height: 100px;
background-color: skyblue;
padding: 10px;
border: 5px solid #000;
margin: 10px;
} */
.box2 {
/* 当不设置宽度时,盒子再添加相关盒模型的值时,content会再次计算 */
height: 100px;
background-color: skyblue;
padding: 10px;
border: 5px solid #000;
margin: 10px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">盒子的内容</div>
</div>
</body>
</html>
5.标准盒模型和怪异盒模型
在标准模型中,如果你给盒设置width和height,实际设置的是content box。padding和border 再加上设置的宽高一起决定整个盒子的大小
在怪异模型中,所有宽度都是可见宽度,所以内容宽度是该宽度减去边框和填充部分。
content-box:width、height -> content
border-box:width、height->content+padding+border
- 应用:1.量取尺寸时不用再去计算一些值 2.解决一些需要设置百分比和盒模型值
6.浮动特性注意点1
当元素被浮动时,会脱离文档流,根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止,是CSS布局中实现左右布局的一种方式
文档流:文档流是元素在Web页面上的一种呈现方式,按照出现的先后顺序进行排列
-
清除浮动的方案
clear属性
BFC
空标签
clearfix::after{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: pink;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background: skyblue;
clear: left;
/* clear:both */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
result:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 200px;
border: 1px solid #000;
}
.box2 {
width: 100px;
height: 100px;
background: pink;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!-- 空标签: -->
<div style="clear: both;"></div>
</div>
</body>
</html>
result:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 200px;
border: 1px solid #000;
}
.box2 {
width: 100px;
height: 100px;
background: pink;
float: left;
}
.clearfix::after {
content: 'bbb';
/*伪类是内联盒子,所以clear:both;不起作用*/
clear: both;
display: block;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
result:
7.浮动特性注意点2
- 浮动只会影响后面的元素
- 文本不会被浮动元素覆盖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: pink;
}
.box2 {
width: 200px;
height: 200px;
background: skyblue;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">我是一个浮动的盒子我是一个浮动的盒子我是一个浮动的盒子我是一个浮动的盒子我是一个浮动的盒子我是一个浮动的盒子我是一个浮动的盒子我是一个浮动的盒子我是一个浮动的盒子我是一个浮动的盒子</div>
</body>
</html>
result:
- 具备内联盒子特性:宽度由内容决定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box {
background: red;
float: left;
}
</style>
</head>
<body>
<div class="box">aaaaaa</div>
</body>
</html>
result:
-
具备块级盒子特性:支持所有样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .inline { float: left; width: 200px; height: 200px; background: red; } </style> </head> <body> <span class="inline">bbbbb</span> </body> </html>
result:
-
浮动放不下,会自动换行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .wrapper { width: 300px; height: 300px; background: pink; } .wrapper div { width: 100px; height: 100px; border: 1px solid yellow; box-sizing: border-box; float: left; } </style> </head> <body> <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>
result:
三、flex弹性布局
- 弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间,收缩以适应更小的空间。
1.主轴与交叉轴
2.flex容器与flex子项
主轴对齐方式 -> flex-direction: row(默认)、row-reverse、column、column-reverse
3.换行与缩写
flex-wrap -> nowrap(默认)、wrap、wrap-reverse
- flex布局中,即便子元素设置了宽高,且超出了父元素的总宽,但是仍然不会溢出。而是会收缩。当收缩到子元素最小宽度时,才会溢出,但是不会发生换行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 200px;
height: 200px;
background: skyblue;
display: flex;
}
.main div {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
</div>
</body>
</html>
result:
-
在flex布局中,如果子元素没有设置宽度,则子项会被内容撑开,而并不会自适应容器。而高度会自适应。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .main { width: 200px; height: 200px; background: skyblue; display: flex; } .main div { background: pink; } </style> </head> <body> <div class="main"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </div> </body> </html>
result:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
flex-wrap: wrap;
}
.main div {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>
result:
注意:由于容器设置了高度,此处的换行会使得元素在交叉轴上平均排列(如图,将整个容器分成两部分,并将每部分的元素至于最顶部)。
若容器去掉高度,则变为:
将flex-wrap改为wrap-reverse:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
}
.main div {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>
result:
flex-flow
-> flex-direction、flex-wrap
flex-flow:column wrap;
4.主轴对齐详解
justify-content -> flex-start(默认)、flex-end、center、space-around、space-between、space-evenly
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
justify-content: flex-end;
}
.main div {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
result:
justify-content: center;
result:
justify-content: space-around;
result:
1 * 1 1 * 1 1 * 1
justify-content: space-between;
result:
左右两元素靠边,中间平均分配
justify-content: space-evenly;
result:
1*1*1*1*1
- 当没有空隙时,就会紧挨,并且再下一行继续平均分配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.main div {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</body>
</html>
- 将主轴变为y轴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
flex-direction: column;
justify-content: space-evenly;
flex-wrap: wrap;
}
.main div {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</body>
</html>
5. 交叉轴对齐详解
align-content:
可选项stretch(默认)、flex-start、flex-end、center、space-around、space-between、space-evenly
- 当不设置换行的情况下,align-content是不生效的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
/* 当1不换行的情况下,align-content是不生效的 */
align-content: flex-end;
}
.main div {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
result:
加上flex-wrap:wrap;后。结果变为:
-
默认值为stretch。及:会自适应将容器填满。默认值要在子容器没有高度时才得以显现。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .main { width: 500px; height: 500px; background: skyblue; display: flex; flex-wrap: wrap; } .main div { width: 100px; background: pink; } </style> </head> <body> <div class="main"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
result:
此时若将align-content改为其它属性。则元素会根据内容撑开。
这也解释了什么flex-wrap会把换行的每行高度平均分配并将子元素置顶。
flex-around、flex-evenly、flex-between与justify-content类似。
align-item:
可选值:stretch(默认)、flex-start、flex-end、center、baseline
- 与align-content的差别:align-content是控制元素在整个容器中的对齐方式。而align-item是控制元素在一行的对齐方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.main div {
height: 100px;
width: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</body>
</html>
result:
将align-items改为align-content,则结构变为:
- align-item不需要换行也可以产生变化,而align-content则需要
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 500px;
border: 1px black solid;
display: flex;
align-items: flex-end;
}
</style>
</head>
<body>
<div class="main">
xyz
<img src="./1.png" alt="">
</div>
</body>
</html>
result:
将align-items改为baseline。则会依据小写x对齐
6.内联与块的上下左右居中布局
- 内联文字对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/* .box {
width: 300px;
height: 200px;
background: skyblue;
display: flex;
align-items: center;
} */
/* .box {
width: 300px;
height: 200px;
background: skyblue;
display: flex;
flex-wrap: wrap;
align-content: center;
} */
/* 可利用行高,但不适合多行布局 */
/* .box {
width: 300px;
height: 200px;
background: skyblue;
line-height: 200px;
} */
/* .box {
width: 300px;
height: 200px;
background: skyblue;
display: table-cell;
vertical-align: middle;
} */
</style>
</head>
<body>
<div class="box">
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</body>
</html>
- 内部块级元素对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/* .box {
width: 300px;
height: 200px;
background: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
.box div {
width: 100px;
height: 100px;
background: pink;
} */
/* .box {
width: 300px;
height: 200px;
background: skyblue;
position: relative;
}
.box div {
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} */
/* .box {
width: 300px;
height: 200px;
background: skyblue;
position: relative;
display: flex;
}
.box div {
width: 100px;
height: 100px;
background: pink;
margin: auto;
} */
.box {
width: 300px;
height: 200px;
background: skyblue;
position: relative;
}
.box div {
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>
7.不定项居中布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/* 1.用弹性布局来完成 */
/* .box {
width: 300px;
height: 150px;
background: skyblue;
display: flex;
justify-content: center;
align-items: flex-end;
}
.box div {
width: 30px;
height: 30px;
background: pink;
border-radius: 50%;
margin: 10px;
} */
/* 2.用传统布局来完成 */
.box {
width: 300px;
height: 150px;
background: skyblue;
position: relative;
}
.box section {
/* inline-block支持文字居中 */
text-align: center;
width: 100%;
position: absolute;
bottom: 0;
font-size: 0;
}
.box div {
width: 30px;
height: 30px;
background: pink;
border-radius: 50%;
/* inline-block有默认间距,可以通过给父项设置font-size:0;来消除。同时为了使文字显示,需要在子项中再次设置font-size为正常文字大小 */
display: inline-block;
font-size: 16px;
margin: 5px;
}
</style>
</head>
<body>
<div class="box">
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</div>
</body>
</html>
result:
8.均分列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/* 1.用弹性布局来做 */
/* .main {
height: 200px;
background: skyblue;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 20px;
}
.main div {
width: 30px;
height: 30px;
background: pink;
border-radius: 50%;
} */
/* 2.用传统浮动方法来做(非常不方便) */
.main {
width: 500px;
height: 200px;
background: skyblue;
overflow: hidden;
padding: 0 20px;
box-sizing: border-box;
}
.main section {
width: 600px;
}
.main div {
width: 30px;
height: 30px;
background: pink;
border-radius: 50%;
float: left;
margin-right: 70px;
}
</style>
</head>
<body>
<!-- <div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
</div> -->
<div class="main">
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
</body>
</html>
result:
9.子项分组布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/* 方式一:让子元素也是弹性 */
/* .main {
height: 200px;
background: skyblue;
display: flex;
justify-content: space-between;
align-items: center;
}
.main div:nth-child(2) {
display: flex;
margin-left: 10px;
}
.main .box {
width: 50px;
height: 100px;
background: pink;
} */
.main {
height: 200px;
background: skyblue;
display: flex;
align-items: center;
}
.main div {
width: 50px;
height: 100px;
background: pink;
margin-right: 10px;
}
.main div:nth-of-type(1) {
margin-right: auto;
}
.main div:nth-of-type(4) {
margin-right: auto;
}
</style>
</head>
<body>
<!-- <div class="main">
<div class="box">1</div>
<div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</div> -->
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>
result:
10.flex-grow扩展比例
flex-grow:默认值是0,表示不占用剩余的空白间隙扩展自己的宽度
- 只有一个子元素时:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 300px;
background: skyblue;
display: flex;
}
.main div {
width: 100px;
height: 100px;
background: pink;
/* flex-grow: 0; 默认*/
/* 如果比例值为1,就占满剩余的所有空间。 */
/* 如果比例值为0.5,剩余空间为(500-100)*0.5 */
/* 如果比例值大于等于1的时候,都会占满整个空间 */
flex-grow: .5;
}
</style>
</head>
<body>
<!-- <div class="main">
<div>1</div>
</div> -->
</body>
</html>
- 有多个元素时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main2 {
width: 500px;
height: 300px;
background: skyblue;
display: flex;
}
/* 当flex-grow值都为1时,等比分配。(没有剩余空间) */
/* 当flex-grow值一个为2,一个为1时,会把剩余空间按2/3和1/3等比分配。(没有剩余空间) */
/* 当flex-grow值一个为0.5,一个为0.2,会占剩余空间的5/10和2/10(还有剩余空间) */
.main2 div:nth-of-type(1) {
width: 200px;
height: 100px;
background: pink;
flex-grow: 0.5;
}
.main2 div:nth-of-type(2) {
width: 100px;
height: 100px;
background: pink;
flex-grow: 0.2;
}
</style>
</head>
<body>
<div class="main2">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
11.flex-shrink收缩比例
默认值是1,表示flex容器空间不足时,元素的收缩比例
- 有一个元素时:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 200px;
background: skyblue;
display: flex;
}
.main div {
width: 600px;
height: 100px;
background: pink;
/* flex-shrink: 1; 自动收缩,跟容器大小相同*/
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
</div>
</body>
</html>
result:
将flex-shrink改为0,结果变为:
将flex-shrink改为0.5,结果变为:
可以看到其是按比例进行收缩的。
- 当有两个元素时:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main2 {
width: 500px;
height: 200px;
background: skyblue;
display: flex;
}
.main2 div:nth-of-type(1) {
width: 300px;
height: 100px;
background: pink;
flex-shrink: 0.2;
}
.main2 div:nth-of-type(2) {
width: 400px;
height: 100px;
background: pink;
flex-shrink: 0.1;
}
/* 300+400-500 -> 200 */
/* 第一块占比:3/7 */
/* 第二块占比:4/7 */
/* 当flex-shrink都是1或者不写时 */
/* 总共瓜分200,占比3:4 */
/* 第一块收缩到:300-3/7*200 */
/* 第二块收缩到:400-4/7*200 */
/* 当第一个为2,第二个为1时 */
/* 总共瓜分还是200,但是第一个占比6:4 */
/* 300 - 3*2/10*200 */
/* 400 - 4/10*200 */
/* 当第一个为0.2,第二个为0.1时 */
/* 总共瓜分200*(0.2+0.1),占比300*0.2/(300*0.2+400*0.1) : 400*0.1/(300*0.2+400*0.1) */
/* 300-300*0.2/(300*0.2+400*0.1)*200*0.3 */
/* 400-400*0.1/(300*0.2+400*0.1)*200*0.3 */
</style>
</head>
<body>
<div class="main2">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
12.flex-basis及flex缩写
默认值是auto,指定了flex元素在主轴方向上的初始大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
}
.main div {
width: 100px;
height: 100px;
background: pink;
/* 当主轴是水平方向时,200会覆盖宽度的100 */
/* 当主轴是垂直方向时,200会覆盖高度的100 */
flex-basis: 200px;
}
</style>
</head>
<body>
<div class="main">
<div></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
align-items: flex-start;
}
.main div {
background: pink;
/* 选择auto会自适应内容宽度 */
/* flex-basis: auto; */
/* 选择0,会保留最小宽度,既一个文字的宽度,其余文字会竖着排列 */
flex-basis: 0;
}
</style>
</head>
<body>
<div class="main">
<div>测试文字</div>
</div>
</body>
</html>
flex-basis为auto的结果:
flex-basis为0的结果:
flex属性是flex-grow,flex-shrink和flex-basis的缩写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
align-items: flex-start;
}
.main div {
background: pink;
/* flex:1时:flex-grow:1,flex-shrink:1,flex-basis:0%。等价于:flex:1,1,0%; */
/* flex:0时:flex-grow:0,flex-shrink:1,flex-basis:0% */
/* flex:auto时:flex-grow:1,flex-shrink:1,flex-basis:auto */
flex: 1;
}
</style>
</head>
<body>
<div class="main">
<div>测试文字</div>
</div>
</body>
</html>
13.order及align-self
order默认值为0,改变某一个flex子项的排序位置。值为-1的排到值为0的前面,值为1的排到值为0的后面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
align-items: flex-start;
}
.main div {
width: 100px;
height: 100px;
background: pink;
}
.main div:nth-of-type(1) {
order: 1;
}
.main div:nth-of-type(4) {
order: -1;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
result:
align-self:默认值是auto(即跟父容器的align-items相同),控制单独某一个flex子项的垂直对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: flex;
align-items: center;
}
.main div {
width: 100px;
height: 100px;
background: pink;
}
.main div:nth-of-type(4) {
height: 50px;
align-self: flex-start;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
result:
14.等高布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
background: skyblue;
display: flex;
justify-content: space-between;
}
.main div {
width: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
</div>
<div>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
</div>
</div>
</body>
</html>
result(flex布局默认是等高布局的,及高度会根据最高一块元素高度的改变而改变):
用常规方式进行等高布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.main {
width: 500px;
background: skyblue;
overflow: hidden;
}
.main div {
width: 100px;
background: pink;
float: left;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.main div:nth-of-type(2) {
float: right;
}
</style>
</head>
<body>
<div class="main">
<div>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
</div>
<div></div>
</div>
</body>
</html>
result(通过padding拉伸,再用负的margin抵消):
15.两列与三列布局
两列布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
margin: 0;
}
.main {
height: 100vh;
background: skyblue;
display: flex;
}
.col1 {
width: 200px;
background: pink;
}
.col2 {
flex-grow: 1;
background: springgreen;
}
</style>
</head>
<body>
<div class="main">
<div class="col1"></div>
<div class="col2"></div>
</div>
</body>
</html>
三列布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
margin: 0;
}
.main {
height: 100vh;
background: skyblue;
display: flex;
}
.col1 {
width: 200px;
background: pink;
}
.col2 {
flex-grow: 1;
background: springgreen;
}
.col3 {
width: 100px;
background: tomato;
}
</style>
</head>
<body>
<div class="main">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
</body>
</html>
result:
使用常规方法写:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
margin: 0;
}
.main {
height: 100vh;
background: skyblue;
}
.col1 {
width: 200px;
height: 100%;
float: left;
background: pink;
}
.col2 {
height: 100%;
background: lightcoral;
/* margin-left: 200px; */
/* 使用BFC: */
overflow: hidden;
}
</style>
</head>
<body>
<div class="main">
<div class="col1"></div>
<div class="col2"></div>
</div>
</body>
</html>
16.StickyFooter布局
即当中间内容不足以撑开剩余页面时,页脚会处于页面最底端。而中间内容撑开页面时,页脚会处于中间内容相邻底部。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
margin: 0;
}
.main {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main .header {
height: 100px;
background: pink;
}
.main .content {
flex-grow: 1;
}
.main .footer {
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div class="main">
<div class="header"></div>
<div class="content">
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
</div>
<div class="footer"></div>
</div>
</body>
</html>
result:
17.溢出项布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
margin: 0;
}
.main {
height: 100px;
background: skyblue;
display: flex;
align-items: center;
}
.main div {
width: 100px;
height: 80px;
background: pink;
margin-right: 10px;
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
使用常规布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
margin: 0;
}
.main {
height: 100px;
background: skyblue;
}
.main section {
/* 此处要给个固定宽 */
width: 1000px;
}
.main div {
width: 100px;
height: 80px;
background: pink;
margin-right: 10px;
float: left;
}
</style>
</head>
<body>
<div class="main">
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</section>
</div>
</body>
</html>
18.Swiper轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./iconfont.css">
<link rel="stylesheet" href="./reset.css">
<style>
.swiper-container {
position: relative;
}
.swiper-wrapper {
display: flex;
}
.swiper-slide {
width: 100%;
flex-shrink: 0;
}
.swiper-slide img {
width: 100%;
}
.swiper-pagination {
position: absolute;
height: 28px;
width: 100%;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background: #c6bcaf;
margin: 0 4px;
}
.swiper-pagination-bullet-active {
background: #fff;
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 0;
height: 100%;
display: flex;
align-items: center;
}
.swiper-button-prev {
left: 0;
}
.swiper-button-next {
right: 0;
}
.swiper-button-prev i,
.swiper-button-next i {
font-size: 44px;
color: white;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img
src="https://pic3.iqiyipic.com/common/lego/20210609/e66f0e28608f4aa7b08b5d93088c73c6.jpg?caplist=jpg,webp"
alt=""></div>
<div class="swiper-slide"><img
src="https://pic0.iqiyipic.com/common/lego/20210614/71f0084bddcb446db323fa9eebf53585.jpg?caplist=jpg,webp"
alt=""></div>
<div class="swiper-slide"><img
src="https://m.iqiyipic.com/common/lego/20210613/80bfb766ac36470f9ec3a3788f85eabe.jpg?caplist=jpg,webp"
alt=""></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination">
<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev">
<i class="iconfont icon-swiperhoutui"></i>
</div>
<div class="swiper-button-next">
<i class="iconfont icon-swiperqianjin"></i>
</div>
</div>
</body>
</html>
19.知乎导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./iconfont.css">
<style>
body {
background: #f6f6f6;
}
.header-container {
background: #fff;
}
.header-wrapper {
margin: 0 auto;
height: 52px;
min-width: 1000px;
max-width: 1156px;
display: flex;
align-items: center;
}
.header-logo {
margin-right: 40px;
}
.header-nav {
display: flex;
}
.header-nav li {
margin-right: 30px;
}
.header-search {
flex-grow: 1;
display: flex;
justify-content: center;
}
.header-search-wrapper {
/* 当.header-search给了flex,就会使得其跟随内容展开,而不会跟随下面的max-width展开 */
max-width: 482px;
height: 34px;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;
background: #f6f6f6;
border-radius: 100px;
}
.header-search-wrapper i {
margin: 0 20px;
}
.header-search-input {
background: none;
border: none;
margin: 0 20px;
}
.header-btn {
display: flex;
}
/* button有默认边框和背景色,要去掉 */
/* button的border不会加在height外面 */
.header-btn-login {
width: 60px;
height: 32px;
border: 1px #0066ff solid;
border-radius: 3px;
color: #0066ff;
background: none;
cursor: pointer;
display: block;
margin-left: 20px;
}
.header-btn-zhihu {
width: 90px;
height: 32px;
background: #0066ff;
color: white;
border: none;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="header-container">
<div class="header-wrapper">
<div class="header-logo">
<a href="#"><img src="./logo.png" alt=""></a>
</div>
<ul class="header-nav">
<li>首页</li>
<li>会员</li>
<li>发现</li>
<li>等你来答</li>
</ul>
<div class="header-search">
<div class="header-search-wrapper">
<input type="text" class="header-search-input" placeholder="xxcxxc">
<i class="iconfont icon-fangdajing"></i>
</div>
</div>
<div class="header-btn">
<button class="header-btn-login">登录</button>
<button class="header-btn-zhihu">加入知乎</button>
</div>
</div>
</div>
</body>
</html>
四、grid网格布局
CSS网格是一个用于web的二维布局系统。利用网格,你可以把内容按照行与列的格式进行排版。另外,网格还能非常轻松地实现一些复杂的布局
1.定义网格及fr单位
grid-template-rows及grid-template-columns:基于网格行和列的维度,去定义网格线的名称和网格轨道的尺寸大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
/* 定义3列,列的宽分别为100*100*100 */
grid-template-columns: 100px 100px 100px;
}
.main div {
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
result:
改为:
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
改为:
/* auto会自适应剩余空间 */
grid-template-columns: 50px 20% auto;
grid-template-rows: 50px 50px;
改为:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
改为:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 2fr 1fr;
改为:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 0.3fr 0.3fr;
改为:
grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 0.3fr 0.3fr;
2.合并网格和网格命名
grid-template-areas:使用命名方式定义网格区域,需配合grid-area属性进行使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a1 a2"
"a1 a1 a2"
"a3 a3 a3"
;
}
.main div {
background: pink;
border: 1px solid #000;
box-sizing: border-box;
}
.main div:nth-of-type(1) {
grid-area: a1;
}
.main div:nth-of-type(2) {
grid-area: a2;
}
.main div:nth-of-type(3) {
grid-area: a3;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a2 a3"
;
}
.main div {
background: pink;
border: 1px solid #000;
box-sizing: border-box;
}
.main div:nth-of-type(1) {
grid-area: a1;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
result:
改为:
.main div:nth-of-type(1) {
grid-area: a2;
}
改为:
.main div:nth-of-type(1) {
grid-area: a3;
}
网格默认会进行自动填充,而不会因为我们没有设置就没有显现
- grid-template
grid-template-rows,grid-template-columns和grid-template-areas属性的缩写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template:
"a1 a2 a3" 1fr
"a1 a2 a3" 1fr
"a1 a2 a3" 1fr
/ 1fr 1fr 1fr;
;
}
.main div {
background: pink;
border: 1px solid #000;
box-sizing: border-box;
}
.main div:nth-of-type(1) {
grid-area: a1;
}
.main div:nth-of-type(2) {
grid-area: a2;
}
.main div:nth-of-type(3) {
grid-area: a3;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
result:
3.网格间隙及简写
用来设置元素行列之间的间隙大小,推荐使用row-gap,column-gap,gap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
/* auto会自适应剩余空间 */
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a1 a2"
"a1 a1 a2"
"a3 a3 a3";
/* grid-row-gap: 20px;
grid-column-gap: 30px; */
row-gap: 20px;
column-gap: 30px;
}
.main div {
background: pink;
border: 1px solid #000;
box-sizing: border-box;
}
.main div:nth-of-type(1) {
grid-area: a1;
}
.main div:nth-of-type(2) {
grid-area: a2;
}
.main div:nth-of-type(3) {
grid-area: a3;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
result:
现在不推荐用grid-***-gap写法。而是使用row-gap及column-gap。
以上写法也可以使用:grid-gap:20px 30px; 简写。或者使用gap:20px 30px;
- 对弹性布局使用间距:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main2 {
width: 300px;
background: skyblue;
display: flex;
flex-wrap: wrap;
row-gap: 20px;
column-gap: 30px;
}
.main2 div {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="main2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
result:
4.网格对齐方式及简写
justify-items、align-items、place-items:默认值stretch,指定了子项在网格中的对齐方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.main div {
width: 50px;
height: 50px;
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
result:
给.main添加如下属性:
justify-items: end;
改为:
justify-items: center;
再给.main添加如下属性:
align-items: center;
将justify-items、align-items合并为place-items:
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
place-items: end start;
}
由此可见place-items的第一项为align-items,第二项为justify-items。且align-items及justify-items的默认值都是start。
- justify-content、align-content、place-content
默认值stretch,指定了所有网格在grid容器中的对齐方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
justify-content: end;
}
.main div {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
result:
将justify-content改为space-around:
添加align-content: space-evenly;
将.main修改为:
.main {
width: 500px;
height: 500px;
background: skyblue;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
place-content: end space-around;
}
align-items等是子项小于单元格的情况。align-content是单元格小于容器时的情况。
5.基于线的元素放置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.main div:nth-of-type(1) {
background: pink;
grid-column-start: 2;
grid-column-end: 3;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
</div>
</body>
</html>
result:
将.main修改为:
.main div:nth-of-type(1) {
background: pink;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
result:
将grid-row-end改为4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.main div:nth-of-type(1) {
background: pink;
grid-column-start: 2;
grid-column-end: 3;
/* 默认值是auto,所以当grid-row-start、grid-row-end不写时,第二个元素会自动适应 */
/* grid-row-start: 2;
grid-row-end: 4; */
}
.main div:nth-of-type(2) {
background: gray;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.main div:nth-of-type(1) {
background: pink;
/* span代表从开始(gird-column-start中有指定则为指定位置,没指定为0)占几列。此处3列超出了容器容量,故只占两列 */
grid-column-start: 2;
grid-column-end: span 3;
}
.main div:nth-of-type(2) {
background: gray;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
result:
- 使用命名来设置网格分布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: [col1]1fr [col2]1fr [col3]1fr [col4];
grid-template-rows: [row1]1fr [row2]1fr [row3]1fr [row4];
}
.main div:nth-of-type(1) {
background: pink;
grid-column-start: col2;
grid-column-end: col4;
}
.main div:nth-of-type(2) {
background: gray;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
result:
- 简写方式
grid-column、grid-row:基于线对应位置的缩写方式,通过 / 作为分割
.main div:nth-of-type(1) {
background: pink;
grid-column: 2 / 3;
grid-row: 2/3;
}
- grid-area
grid-row-start、grid-column-start、grid-row-end以及grid-column-end属性的缩写,以及额外支持grid-template-areas设置的网格名称
.main div:nth-of-type(1) {
background: pink;
grid-area: 2 / 2 / 4 /3;
}
- 子项对齐方式
justify-self、align-self、place-self:跟place-item用法相同,只不过是操作指定的子项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: [col1]1fr [col2]1fr [col3]1fr [col4];
grid-template-rows: [row1]1fr [row2]1fr [row3]1fr [row4];
}
.main div:nth-of-type(1) {
width: 50px;
height: 50px;
background: pink;
justify-self: center;
align-self: center;
grid-area: 2/2/4/3;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
</div>
</body>
</html>
result:
由于此div占据了两个单元格。所以会在两个单元格的中间
6.repeat()与minmax()
repeat()方法及auto-fill可选值,指定可重复的数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
height: 400px;
background: skyblue;
display: grid;
/* grid-template-columns: 100px 100px 100px; */
grid-template-columns: repeat(3, 100px);
grid-template-rows: 100px;
}
.main div {
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
result:
同时,如下语法也相同:
grid-template-columns: 150px 100px 100px;
grid-template-columns: 150px repeat(2, 100px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
height: 400px;
background: skyblue;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: 100px;
}
.main div {
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
result:
将grid-template-columns改为:
grid-template-columns: repeat(auto-fill, 100px);
result:(auto-fill会根据容器、网格大小自动改变网格分布)
minmax()方法,设置最小和最大值的范围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
height: 400px;
background: skyblue;
display: grid;
grid-template-columns: 100px 1fr 100px;
grid-template-rows: 100px;
}
.main div {
background: pink;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
通过设置中间单元格为1fr,来实现自适应
result:
将grid-template-columns改为:
grid-template-columns: 100px minmax(100px, 1fr) 100px;
此时就会有最小值100px,和最大值1fr。
- 设置响应式网格:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
background: skyblue;
display: grid;
/* grid-template-columns: 100px 1fr 100px; */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 设置显式网格 */
grid-template-rows: 100px;
/* 设置隐式网格 */
grid-auto-rows: 100px;
grid-gap: 20px 20px;
}
.main div {
background: pink;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</div>
</body>
</html>
7.比定位更方便的叠加布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 530px;
height: 300px;
background: skyblue;
display: grid;
}
.main img {
grid-area: 1/1/1/1;
}
.main span {
grid-area: 1/1/1/1;
justify-self: end;
margin: 5px;
}
.main p {
grid-area: 1/1/1/1;
align-self: end;
/* 去掉默认样式 */
margin: 0;
padding: 0;
background: rgba(0, 0, 0, 0.5);
height: 30px;
line-height: 30px;
color: white;
}
</style>
</head>
<body>
<div class="main">
<img src="./phone.png" alt="">
<span>纸质</span>
<p>手机热卖中...</p>
</div>
</body>
</html>
result:
网格默认拉伸,所以宽度会自适应屏幕
8.多种组合排列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 5px;
}
.main div {
background: pink;
}
.main div:nth-of-type(1) {
/* grid-area: 1/1/span 2/span 2; */
grid-area: 2/2/span 2/span 2;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
result:
9.栅格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.row {
background: skyblue;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px;
grid-auto-rows: 50px;
}
.row div {
background: pink;
border: 1px black solid;
}
.row .col-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-12 {
grid-area: auto/auto/auto/span 12;
}
</style>
</head>
<body>
<!-- 此种设置无论屏幕多宽,都是一行4个div -->
<div class="row">
<div class="col-1">1</div>
<div class="col-3">1</div>
<div class="col-4">1</div>
<div class="col-5">1</div>
</div>
</body>
</html>
result:
10.容器自适应行列布局
- 用网格做行的自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
background: skyblue;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
gap: 5px;
}
.main div {
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
result:
- 用网格做列的自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
height: 300px;
background: skyblue;
/* 此处不设置宽度,则会根据容器自适应宽度,用inline-grid来实现根据内容决定宽度,也可以使用inline-grid来实现。 */
display: inline-grid;
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: column;
grid-auto-columns: 100px;
gap: 5px;
}
.main div {
background: pink;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
result:
11.综合案例一、百度热词风云榜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<style>
.top {
width: 308px;
border: 1px solid #000;
margin: 20px auto;
}
.top-title {
height: 30px;
display: flex;
align-items: center;
margin-left: 15px;
font-size: 14px;
font-weight: 700;
}
.top-list {
height: 352px;
margin: 0 14px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
/* 注意:grid-template-areas内部及外部必须是矩形 */
grid-template-areas:
"a1 a3 a3"
"a2 a3 a3"
"a4 a4 a5"
"a6 a6 a7"
;
gap: 8px 8px;
}
.top-list div:nth-of-type(1) {
grid-area: a1;
}
.top-list div:nth-of-type(2) {
grid-area: a2;
}
.top-list div:nth-of-type(3) {
grid-area: a3;
}
.top-list div:nth-of-type(4) {
grid-area: a4;
}
.top-list div:nth-of-type(5) {
grid-area: a5;
}
.top-list div:nth-of-type(6) {
grid-area: a6;
}
.top-list div:nth-of-type(7) {
grid-area: a7;
}
.top-list a {
width: 100%;
height: 100%;
display: block;
color: wheat;
line-height: 30px;
}
.top-list h3 {
text-align: right;
margin-right: 4px;
}
.top-list p {
text-align: center;
}
.top-page {
height: 40px;
margin: 0 10px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.top-page a {
border: 1px #cbcbcb solid;
margin-left: 2px;
padding: 3px 4px;
}
.top-page span {
padding: 4px;
}
.theme1 {
background-image: linear-gradient(#187fe6, #32aff2);
border: 1px #2a9adc solid;
}
.theme2 {
background-image: linear-gradient(#f2246c, #fe5bac);
border: 1px #da2061 solid;
}
.theme3 {
background-image: linear-gradient(#d46300, #e5ad1c);
border: 1px #cd9818 solid;
}
</style>
</head>
<body>
<div class="top">
<div class="top-title">
今日上榜
</div>
<div class="top-list">
<div class="theme1">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
<div class="theme2">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
<div class="theme1">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
<div class="theme1">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
<div class="theme1">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
<div class="theme3">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
<div class="theme3">
<a href="#">
<h3>实时热点</h3>
<p>阿里第一颗芯</p>
</a>
</div>
</div>
<div class="top-page">
<span>1</span>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
</body>
</html>
result:
12.综合案例二、小米商品导航菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./iconfont.css">
<link rel="stylesheet" href="./reset.css">
<style>
.nav {
width: 233px;
height: 100vh;
background: rgba(0, 0, 0, .5);
}
.nav>li {
display: flex;
justify-content: space-between;
align-items: center;
height: 42px;
padding: 0 28px;
cursor: pointer;
color: white;
position: relative;
}
.nav>li a {
color: inherit;
}
.nav>li:hover {
background: #ff6081;
}
.nav>li:hover .nav-menu {
display: grid;
}
.nav-menu {
display: none;
position: absolute;
left: 100%;
top: 0;
height: 460px;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: 305px;
grid-auto-flow: column;
/* 设置隐式网格。使得接下来的列都是305px */
grid-auto-columns: 305px;
background: white;
border: 1px solid #e1e1e1;
box-shadow: 5px 5px 10px #ccc;
color: #36303c;
}
.nav-menu>li {
display: flex;
align-items: center;
}
.nav-menu>li>img {
margin-left: 26px;
margin-right: 21px;
}
</style>
<title>Document</title>
</head>
<body>
<ul class="nav">
<li>
<div>
<a href="#">手机</a>
<a href="#">电话卡</a>
</div>
<i class="iconfont icon-right-arrow"></i>
<ul class="nav-menu">
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
</ul>
</li>
<li>
<div>
<a href="#">笔记本</a>
<a href="#">显示器</a>
<a href="#">平板</a>
</div>
<i class="iconfont icon-right-arrow"></i>
</li>
<li>
<div>
<a href="#">手机</a>
<a href="#">电话卡</a>
</div>
<i class="iconfont icon-right-arrow"></i>
<ul class="nav-menu">
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
<li>
<img src="./phone.png" alt="">
<p>小米 MIX FOLD</p>
</li>
</ul>
</li>
<li>
<div>
<a href="#">笔记本</a>
<a href="#">显示器</a>
<a href="#">平板</a>
</div>
<i class="iconfont icon-right-arrow"></i>
</li>
<li>
<div>
<a href="#">手机</a>
<a href="#">电话卡</a>
</div>
<i class="iconfont icon-right-arrow"></i>
</li>
<li>
<div>
<a href="#">笔记本</a>
<a href="#">显示器</a>
<a href="#">平板</a>
</div>
<i class="iconfont icon-right-arrow"></i>
</li>
</ul>
</body>
</html>
result:
五、移动端适配
随着移动互联网的发展,移动端布局显得非常的重要。移动端布局并不复杂,主要是现实各种设备的等比适配,让所有移动
端设备看起来是相同的。
1.移动端rem布局原理解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
/* font-size:30px; */ /*iphone6*/
font-size: 35px; /* iphone6 plus */
}
body {
font-size: 20px;
}
.box {
width: 100px;
height: 100px;
background: pink;
/* em是指当前字体的基本大小,默认字体的基本大小为16px,1em=16px */
/* 当修改font-size时,em也会随之改变 */
/* 当给font-size设置em单位时,会去找其父元素的字体大小 */
font-size: 2em;
/* rem:root+em。及是去寻找html的font-size */
border: 2rem skyblue solid;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html{
/* font-size: 100vw; */ /* 在iphone6 -> 375px */
font-size: 26.666667vw; /* 在iphone6 -> 100px,如此设置后,使得1rem等于100px */
}
body{
font-size: 0.16rem; /* rem布局一定要在body重置font-size大小,将font-size重置为16px */
}
.box{
width: 1rem; /* 页面可视区分成了100vw和100vh */
height: 1rem;
background: pink;
}
</style>
</head>
<body>
<div class="box">哈哈</div>
</body>
</html>
2.测量rem数值及插件使用
1.vsCode工具中的px to rem 插件
2.利用蓝湖、PxCook,获取rem数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-size: 26.66667vw;
}
/* alt+z:对选中px单位进行rem转换 */
/* ps中量取的数值,是物理像素,css中设置的是逻辑像素,所以对量取的值进行除以2 */
.head {
width: .72rem;
height: .72rem;
margin: 1rem;
background: red;
}
.font {
width: 2rem;
margin: 3rem;
}
</style>
</head>
<body>
</body>
</html>
3.rem案例:网易移动端新闻列表实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/reset.css">
<style>
html {
/* 在iphone6下换算成1rem */
font-size: 26.666667vw;
}
body {
/* 因为html中文字过大,此处将文字大小恢复成默认文字大小 */
font-size: .16rem;
;
}
a {
color: #34372e;
}
.head {
height: .43rem;
background: #ef1b1a;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 .1rem;
}
.head i {
font-size: .18rem;
}
.head-user,
.head-email {
width: 25%;
font-size: .14rem;
}
.head-email {
text-align: right;
}
.head-logo {
width: 50%;
text-align: center;
}
.head-logo img {
height: .21rem;
}
.nav {
height: .46rem;
border-bottom: .005rem solid #ededed;
padding: 0 .1rem;
display: flex;
align-items: center;
/* a标签可以继承字体大小 */
font-size: .18rem;
}
.nav li {
/* 通过display:flex;来将子元素横向对齐,再通过flex-grow使得子元素均分。再用text-align将子元素文字居中 */
flex-grow: 1;
text-align: center;
position: relative;
}
.nav li.active a {
color: #ef191b;
}
.nav li.active::after {
content: "";
position: absolute;
left: 50%;
bottom: -0.12rem;
margin-left: -0.07rem;
width: .15rem;
height: .02rem;
background: #ef191b;
}
.nav-sub {
padding: .11rem .1rem .07rem .1rem;
background: #f8f8f8;
position: relative;
}
.nav-sub-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
/* 设置每个网格的隐式宽度 */
grid-auto-rows: .35rem;
}
.nav-sub__closed {
height: .7rem;
overflow: hidden;
}
.nav-sub__closed+.nav-sub-arrow {
transform: rotate(0);
}
.nav-sub-arrow {
position: absolute;
right: .1rem;
bottom: .1rem;
transform: rotate(180deg);
}
.news {
padding: 0 .1rem;
}
.news.title {
font-size: .18rem;
line-height: .66rem;
}
.news-item {
margin-bottom: .25rem;
}
.news-item-title {
width: 2.95rem;
line-height: .22rem;
font-size: .17rem;
margin-bottom: .08rem;
font-weight: 400;
}
.news-item-info {
font-size: .12rem;
color: #b3b4b6;
}
.news-item-img img {
width: 100%;
margin-top: .05rem;
margin-bottom: .09rem;
}
.news2 {}
.news2-item {
display: flex;
border-top: .005rem #f6f7f9 solid;
padding: .1rem;
}
.news2-item-content {
/* 在news2-item-img中定义好了宽度,此处设置flex-grow:1。则可占据剩余空间 */
flex-grow: 1;
margin-right: .15rem;
}
.news2-item-title {
line-height: .22rem;
font-size: .17rem;
margin-bottom: .08rem;
font-weight: 400;
}
.news2-item-info {
font-size: .12rem;
color: #b3b4b6;
display: flex;
justify-content: space-between;
align-items: center;
}
.news2-item-img {
width: 1.17rem;
}
.news2-item-img img {
width: 100%;
height: 100%;
/* 让图片等比拉伸 */
object-fit: cover;
}
.app {
color: #fb1515;
border: .005rem solid #fbbab8;
border-radius: 1rem;
padding: .02rem .05rem;
}
</style>
</head>
<body>
<div class="head">
<div class="head-user">
<i class="iconfont icon-yonghu"></i>
</div>
<div class="head-logo">
<img src="./img/logo.png" alt="">
</div>
<div class="head-email">
<i class="iconfont icon-youxiang"></i>
邮箱
<i class="iconfont icon-jiantou"></i>
</div>
</div>
<ul class="nav">
<li class="active">
<a href="#">要闻</a>
</li>
<li>
<a href="#">推荐</a>
</li>
<li>
<a href="#">原创</a>
</li>
<li>
<a href="#">热点</a>
</li>
</ul>
<div class="nav-sub">
<!-- 规范:nav-sub__closed:控制显示消失的类会加两个‘_’ -->
<ul class="nav-sub-list nav-sub__closed">
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">抗疫</a>
</li>
<li>
<a href="#">娱乐</a>
</li>
<li>
<a href="#">体育</a>
</li>
<li>
<a href="#">财经</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">抗疫</a>
</li>
<li>
<a href="#">娱乐</a>
</li>
<li>
<a href="#">体育</a>
</li>
<li>
<a href="#">财经</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">抗疫</a>
</li>
<li>
<a href="#">娱乐</a>
</li>
<li>
<a href="#">体育</a>
</li>
<li>
<a href="#">财经</a>
</li>
</ul>
<div class="nav-sub-arrow">
<i class="iconfont icon-down-arrow"></i>
</div>
</div>
<div class="news">
<h2 class="news-title">今日要闻</h2>
<div class="news-item">
<h3 class="news-item-title">测试文字测试文字</h3>
<div class="news-item-info">央视网 1小时前 879跟帖</div>
</div>
<div class="news-item">
<h3 class="news-item-title">测试文字测试文字测试文字测试文字测试文字测试文字</h3>
<div class="news-item-info">央视网 1小时前 879跟帖</div>
</div>
<div class="news-item">
<h3 class="news-item-title">测试文字测试文字测试文字测试文字测试文字测试文字</h3>
<div class="news-item-img"><img src="./img/news.jpg" alt=""></div>
<div class="news-item-info">央视网 1小时前 879跟帖</div>
</div>
</div>
<div class="news2">
<div class="news2-item">
<div class="news2-item-content">
<h3 class="news2-item-title">测试文字测试文字</h3>
<!-- 此处p标签中不能添加div,会出现布局错误 -->
<!-- <p class="news2-item-info">
<span>上游新闻 2287跟帖</span>
<div class="news2-item-app">打开App</div>
</p> -->
<p class="news2-item-info">
<span>上游新闻 2287跟帖</span>
<span class="app">打开App</span>
</p>
</div>
<div class="news2-item-img">
<img src="./img/news2.jpg" alt="">
</div>
</div>
<div class="news2-item">
<div class="news2-item-content">
<h3 class="news2-item-title">测试文字测试文字</h3>
<p class="news2-item-info">
<span>上游新闻 2287跟帖</span>
<span class="app">打开App</span>
</p>
</div>
<div class="news2-item-img">
<img src="./img/news3.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
3.移动端vw布局及插件使用
将屏幕分成100份,一份为1vw。
4.B站移动端视频列表实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/reset.css">
<style>
a {
color: #4c514d;
}
body {
font-size: 4.267vw;
}
.iconfont {
font-size: 4.267vw;
}
.head {
height: 11.733vw;
display: flex;
align-items: center;
padding: 0 2.667vw;
}
.head-logo {
margin-left: 2.133vw;
/* 此处设置margin-right:auto;之后,其右边的标签会全部居父容器右边 */
margin-right: auto;
}
.head-logo i {
font-size: 7.467vw;
color: #f47296;
}
.head-search i {
font-size: 5.867vw;
color: #c9c9c9;
}
.head-login {
margin-left: 5.333vw;
font-size: 3.2vw;
background-color: #e8e8e8;
border-radius: 50%;
padding: 1.867vw;
}
.head-login a {
color: #f47296;
}
.head-app {
margin-right: 0.533vw;
margin-left: 5.333vw;
background: #f47396;
border-radius: 1.067vw;
padding: 1.333vw 2.667vw;
}
.head-app a {
color: #fffefc;
}
.nav {
height: 10.667vw;
border-bottom: 0.133vw solid #f3f3f3;
padding: 0 2.667vw;
position: relative;
}
.nav-list {
height: 10.667vw;
display: flex;
align-items: center;
overflow: hidden;
}
.nav-list li {
width: 10.667vw;
margin-right: 5.333vw;
flex-shrink: 0;
text-align: center;
position: relative;
}
.nav-list li.active a {
color: #f47296;
}
.nav-list li.active::after {
content: '';
position: absolute;
left: -0.533vw;
bottom: -2.667vw;
width: 11.733vw;
height: 0.533vw;
background: #f47296;
}
.nav-arrow {
position: absolute;
right: 0;
top: 0;
padding-left: 2.667vw;
width: 8vw;
height: 100%;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.video {
padding: 2.133vw 2.667vw;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2.667vw;
}
.video-item {}
.video-item-pic {
display: grid;
}
.video-item-pic img {
grid-area: 1/1/1/1;
/* 此处的宽度为网格布局1fr所分配的宽度 */
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0.8vw;
}
.video-item-pic span {
grid-area: 1/1/1/1;
align-self: flex-end;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.533vw;
}
.video-item-pic i {
margin-right: 1.333vw;
}
.video-item-title {
margin-top: 1.867vw;
margin-bottom: 4vw;
font-size: 3.2vw;
line-height: 4.267vw;
}
</style>
</head>
<body>
<div class="head">
<div class="head-logo">
<i class="iconfont icon-BILIBILI_LOGO"></i>
</div>
<div class="head-search">
<i class="iconfont icon-fangdajing"></i>
</div>
<div class="head-login">
<a href="#">登录</a>
</div>
<div class="head-app">
<a href="#">下载 App</a>
</div>
</div>
<div class="nav">
<ul class="nav-list">
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">动画</a>
</li>
<li>
<a href="#">番剧</a>
</li>
<li>
<a href="#">国创</a>
</li>
<li>
<a href="#">音乐</a>
</li>
<li>
<a href="#">舞蹈</a>
</li>
<li>
<a href="#">音乐</a>
</li>
</ul>
<div class="nav-arrow">
<i class="iconfont icon-arrow-bottom"></i>
</div>
</div>
<ul class="video">
<li class="video-item">
<div class="video-item-pic">
<img src="./img/video1.jpg" alt="">
<span>
<span>
<i class="iconfont icon-703bofang-fangxing-xianxing"></i>
73.7万
</span>
<span>
<i class="iconfont icon-xinxi"></i>
5591
</span>
</span>
</div>
<h3 class="video-item-title">
<a href="#">测试标题测试标题</a>
</h3>
</li>
<li class="video-item">
<div class="video-item-pic">
<img src="./img/video2.jpg" alt="">
<span>
<span>
<i class="iconfont icon-703bofang-fangxing-xianxing"></i>
73.7万
</span>
<span>
<i class="iconfont icon-xinxi"></i>
5591
</span>
</span>
</div>
<h3 class="video-item-title">
<a href="#">测试标题测试标题</a>
</h3>
</li>
<li class="video-item">
<div class="video-item-pic">
<img src="./img/video3.jpg" alt="">
<span>
<span>
<i class="iconfont icon-703bofang-fangxing-xianxing"></i>
73.7万
</span>
<span>
<i class="iconfont icon-xinxi"></i>
5591
</span>
</span>
</div>
<h3 class="video-item-title">
<a href="#">测试标题测试标题</a>
</h3>
</li>
<li class="video-item">
<div class="video-item-pic">
<img src="./img/video1.jpg" alt="">
<span>
<span>
<i class="iconfont icon-703bofang-fangxing-xianxing"></i>
73.7万
</span>
<span>
<i class="iconfont icon-xinxi"></i>
5591
</span>
</span>
</div>
<h3 class="video-item-title">
<a href="#">测试标题测试标题</a>
</h3>
</li>
<li class="video-item">
<div class="video-item-pic">
<img src="./img/video2.jpg" alt="">
<span>
<span>
<i class="iconfont icon-703bofang-fangxing-xianxing"></i>
73.7万
</span>
<span>
<i class="iconfont icon-xinxi"></i>
5591
</span>
</span>
</div>
<h3 class="video-item-title">
<a href="#">测试标题测试标题</a>
</h3>
</li>
<li class="video-item">
<div class="video-item-pic">
<img src="./img/video3.jpg" alt="">
<span>
<span>
<i class="iconfont icon-703bofang-fangxing-xianxing"></i>
73.7万
</span>
<span>
<i class="iconfont icon-xinxi"></i>
5591
</span>
</span>
</div>
<h3 class="video-item-title">
<a href="#">测试标题测试标题</a>
</h3>
</li>
</ul>
</body>
</html>
六、响应式布局
媒体查询语法详解
媒体查询的编写位置及顺序
响应断点(阈值)的设定
响应式栅格系统
响应式交互实现
响应式框架bootstrap
1.媒体查询语法详解
媒体类型(Media types)描述设备的一般类别
all:适用于所有设备
print:适用于在打印预览模式
screen:主要用于屏幕
speech:主要用于语音合成器
<style>
@media print {
.box {
font-size: 60px;
}
}
</style>
媒体特性(Media features)描述了user agent、输出设备,或是浏览环境的具体特征
width:viewport的宽度
height:viewport的高度
aspect-ratio:viewport的宽高比
orientation:viewport的旋转方向
/* 在竖屏下显示粉色,在横屏下显示蓝色 */
@media (orientation:portrait) {
.box {
width: 200px;
height: 200px;
background: pink;
}
}
@media (orientation:landscape) {
.box {
width: 200px;
height: 200px;
background: skyblue;
}
}
逻辑操作符(logical operators)not,and和only可用于联合构造复杂的媒体查询
and:用于将多个媒体查询规则组合成单条媒体查询
not:用于否定媒体查询,如果不满足这个条件则返回true,否则返回false
only:用于旧版浏览器识别媒体类型使用
逗号:用于将多个媒体查询合并为一个规则(相当于或,一行媒体查询中只要有一个满足及生效)
@media (min-width:700px) and (max-width:1200px) {
.box {
width: 200px;
height: 200px;
background: pink;
}
}
/* 此时只有小于700px就会显示 */
@media not screen and (min-width:700px) {
.box {
width: 200px;
height: 200px;
background: pink;
}
}
@media print,
screen and (min-width:700px) {
.box {
width: 200px;
height: 200px;
background: pink;
}
}
4.通过media属性设置媒体查询类型和媒体特性
<link rel="stylesheet" href="./a.css" media="(orientation:portrait)">
<link rel="stylesheet" href="./b.css" media="(orientation:landscape)">
2.媒体查询的编写位置及顺序
- 添加到样式表的底部,对CSS进行优先级的覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: red;
}
/* 此时页面默认显示pink,而当小于700px时,就会显示red */
@media(min-width:700px) {
.box {
background: pink;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.移动端 -> PC端的适配原则:min-width从小到大
PC端 -> 移动端的适配原则:max-width从大到小(响应式布局推荐移动->PC)
/* 如果多条件的时候,min-width编写顺序:从小到大进行适配 */
/* 个人理解:条件区间要从大到小,而min-width是要求大于其后面的值才能生效,所以要不断增加要大于的值。 */
/* min-width方式:移动优先的原则,先编写移动端设备,然后响应式过渡到PC端 */
/* @media (min-width:700px) {
.box {
background: pink;
}
}
@media (min-width:1000px) {
.box {
background: green;
}
} */
/* 如何从PC端响应式过渡到移动端?max-width,从大到小适配 */
/* 个人理解:条件区间要从大到小,而max-width是要求小于其后面的值才能生效,所以要不断减小要晓于的值。 */
@media (max-width:1000px) {
.box {
background: pink;
}
}
@media (max-width:700px) {
.box {
background: green;
}
}
3.响应断点(阈值)的设定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d-none {
display: none;
}
@media (min-width:576px) {
.d-sm-none {
display: none;
}
}
@media (min-width:768px) {
.d-md-none {
display: none;
}
}
@media (min-width:992px) {
.d-lg-none {
display: none;
}
}
@media (min-width:1200px) {
.d-xl-none {
display: none;
}
}
@media (min-width:1400px) {
.d-xxl-none {
display: none;
}
}
</style>
</head>
<body>
<div class="d-none">11111</div>
<div class="d-sm-none">22222</div>
<div class="d-md-none">33333</div>
<div class="d-lg-none">44444</div>
<div class="d-xl-none">55555</div>
<div class="d-xxl-none">66666</div>
</body>
</html>
4.响应式栅格系统
栅格布局 + 断点设定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.row {
background: skyblue;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px;
grid-auto-rows: 50px;
}
.row div {
background: pink;
border: 1px black solid;
/* 通过此行使得在未添加响应式的情况下每行能够占满整行 */
grid-area: auto/auto/auto/span 12;
}
@media (min-width:576px) {
.row .col-sm-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-sm-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-sm-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-sm-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-sm-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-sm-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-sm-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-sm-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-sm-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-sm-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-sm-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-sm-12 {
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width:768px) {
.row .col-md-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-md-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-md-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-md-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-md-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-md-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-md-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-md-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-md-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-md-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-md-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-md-12 {
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width:992px) {
.row .col-lg-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-lg-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-lg-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-lg-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-lg-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-lg-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-lg-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-lg-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-lg-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-lg-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-lg-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-lg-12 {
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width:1200px) {
.row .col-xl-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-xl-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-xl-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-xl-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-xl-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-xl-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-xl-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-xl-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-xl-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-xl-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-xl-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-xl-12 {
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width:1400px) {
.row .col-xxl-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-xxl-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-xxl-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-xxl-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-xxl-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-xxl-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-xxl-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-xxl-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-xxl-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-xxl-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-xxl-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-xxl-12 {
grid-area: auto/auto/auto/span 12;
}
}
</style>
</head>
<body>
<!-- 此种情况下,屏幕一旦缩小 xxl、xl、lg、md、sm依次失去栅格效果 -->
<div class="row">
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
</div>
<div class="row">
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
</div>
<div class="row">
<div class="col-xl-3">col-xl-3</div>
<div class="col-xl-3">col-xl-3</div>
<div class="col-xl-3">col-xl-3</div>
<div class="col-xl-3">col-xl-3</div>
</div>
<div class="row">
<div class="col-xxl-3">col-xxl-3</div>
<div class="col-xxl-3">col-xxl-3</div>
<div class="col-xxl-3">col-xxl-3</div>
<div class="col-xxl-3">col-xxl-3</div>
</div>
<!-- 以下代码实现了在不同分辨率下每行显示的列数不同 -->
<div class="row">
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
<div class="col-xxl-3 col-lg-4 col-sm-6">col</div>
</div>
</body>
</html>
5.响应式交互实现
1.利用:checked伪类
2.利用JavaScript脚本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
display: none;
}
/* 该input只是为了使得点击label标签也能触发input的:checked伪类,实际用不到,故隐藏 */
input {
display: none;
}
/* 此处的含义是,当input框被选中时,找到其ul并显示 */
input:checked+ul {
display: block;
}
@media (min-width:700px) {
ul {
display: block;
}
span {
display: none;
}
}
</style>
</head>
<body>
<label for="menu">
<span>
菜单按钮
</span>
</label>
<!-- 此处复选框必须放在要显示隐藏的元素的上方,否则就无法用css选择器找到ul标签了 -->
<input type="checkbox" id="menu">
<ul>
<li>首页</li>
<li>教程</li>
<li>论坛</li>
<li>文章</li>
</ul>
</body>
</html>
6.ghost博客案例
- css/col.css
.row {
display: grid;
/* 可以通过如下方法添加网格间的间隙。也可以在媒体查询中在特定范围的辨别率中添加padding */
/* column-gap: 30px; */
grid-template-columns: repeat(12, 1fr);
}
/* 此处表示子选项中以col开头的类名元素 */
.row>[class*='col'] {
grid-area: auto/auto/auto/span 12;
}
@media (min-width:576px) {
.row .col-sm-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-sm-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-sm-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-sm-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-sm-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-sm-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-sm-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-sm-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-sm-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-sm-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-sm-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-sm-12 {
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width:768px) {
.nav-bar{
display: none!important;
}
.nav-list{
display: flex!important;
justify-content: center;
align-items: center;
}
.row .col-md-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-md-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-md-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-md-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-md-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-md-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-md-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-md-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-md-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-md-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-md-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-md-12 {
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width:992px) {
:root{
--container:940px!important;
}
.row>[class*='col'] {
padding: 0 15px;
}
.row .col-lg-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-lg-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-lg-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-lg-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-lg-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-lg-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-lg-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-lg-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-lg-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-lg-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-lg-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-lg-12 {
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width:1200px) {
:root{
--container:1160px!important;
}
.row>[class*='col'] {
padding: 0 15px;
}
.row .col-xl-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-xl-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-xl-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-xl-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-xl-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-xl-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-xl-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-xl-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-xl-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-xl-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-xl-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-xl-12 {
grid-area: auto/auto/auto/span 12;
}
}
@media (min-width:1400px) {
.row .col-xxl-1 {
grid-area: auto/auto/auto/span 1;
}
.row .col-xxl-2 {
grid-area: auto/auto/auto/span 2;
}
.row .col-xxl-3 {
grid-area: auto/auto/auto/span 3;
}
.row .col-xxl-4 {
grid-area: auto/auto/auto/span 4;
}
.row .col-xxl-5 {
grid-area: auto/auto/auto/span 5;
}
.row .col-xxl-6 {
grid-area: auto/auto/auto/span 6;
}
.row .col-xxl-7 {
grid-area: auto/auto/auto/span 7;
}
.row .col-xxl-8 {
grid-area: auto/auto/auto/span 8;
}
.row .col-xxl-9 {
grid-area: auto/auto/auto/span 9;
}
.row .col-xxl-10 {
grid-area: auto/auto/auto/span 10;
}
.row .col-xxl-11 {
grid-area: auto/auto/auto/span 11;
}
.row .col-xxl-12 {
grid-area: auto/auto/auto/span 12;
}
}
- ghost.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/col.css">
<style>
:root {
--container: 100%;
}
body {
background: #ebebeb;
}
a {
color: #505050;
}
.head {
height: 190px;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.head-logo {
width: 200px;
}
.nav {
border-top: #ebebeb 1px solid;
border-bottom: 2px #e1e1e1 solid;
background: white;
padding: 0 15px;
}
.nav-bar {
height: 56px;
display: flex;
justify-content: center;
align-items: center;
}
.nav-bar i {
cursor: pointer;
}
.nav-list {
display: none;
}
.nav-list li {
height: 56px;
line-height: 56px;
position: relative;
padding: 0 21px;
}
.nav-list li.active::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: #e57e22;
left: 0;
bottom: 0;
}
.nav-toggle {
display: none;
}
.nav-toggle:checked+.nav-list {
display: block;
}
.main {
padding: 0 15px;
width: var(--container);
margin: 0 auto;
box-sizing: border-box;
}
.main-article {
margin-top: 35px;
background: white;
padding: 35px;
}
.main-article h2 {
font-size: 35px;
text-align: center;
font-weight: 400;
}
.main-article div {
text-align: center;
line-height: 30px;
color: #959595;
}
.main-article p {
margin-top: 25px;
font-size: 18px;
line-height: 1.5;
}
.main-article button {
border: none;
background: #e67e22;
color: white;
padding: 10px;
cursor: pointer;
margin: 30px 0;
}
.main-article section {
border-top: 1px #ebebeb solid;
padding-top: 20px;
}
.main-article section i {
margin-right: 10px
}
.main-aside {
background: white;
padding: 35px;
margin-top: 35px;
}
.main-aside h3 {
font-size: 20px;
font-weight: 400;
padding-bottom: 10px;
border-bottom: 1px #cccccc solid;
position: relative;
}
.main-aside h3::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 90px;
height: 1px;
background: #e67e22;
}
.main-aside p {
margin-top: 30px;
}
.main-aside div {
margin-top: 20px;
}
.main-aside div a {
border: 1px solid #ebebeb;
display: inline-block;
margin: 11px 7px 0 0;
padding: 5px 10px;
}
.main-aside button {
border: none;
background: #e67e22;
color: white;
padding: 10px;
cursor: pointer;
margin-top: 30px;
width: 100%;
}
.foot {
margin-top: 35px;
padding-top: 35px;
background: #202020;
border: 1px solid transparent;
}
.foot-wrapper {
width: var(--container);
margin: 0 auto;
}
.foot-item {
padding: 0 30px;
/* 此处会发生margin-bottom传递问题:及最后一个foot-item的margin-bottom属性传递到了foot中,可以通过给foot添加透明边框或者溢出隐藏来解决 */
margin-bottom: 30px;
}
.foot-item h3 {
color: white;
font-size: 22px;
font-weight: 400;
padding-bottom: 10px;
border-bottom: 1px #cccccc solid;
position: relative;
}
.foot-item h3::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 90px;
height: 1px;
background: #e67e22;
}
.foot-item div {
margin-top: 20px;
}
.foot-item div a {
margin: 10px;
/* 添加行块级元素后,可以让其上下外边距生效,同时使得其不会单个元素发生换行。 */
display: inline-block;
color: #959595;
}
.copyright {
background: #111;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
color: #555;
}
</style>
</head>
<body>
<div class="head">
<img class="head-logo" src="./img/ghost-logo.png" alt="">
</div>
<div class="nav">
<div class="nav-bar">
<label for="nav-toggle">
<i class="iconfont icon-zhedie"></i>
</label>
</div>
<input type="checkbox" class="nav-toggle" id="nav-toggle">
<ul class="nav-list">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">快捷手册</a></li>
<li><a href="#">中文文档</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<div class="main row">
<div class="col-lg-8">
<div class="main-article">
<h2>全新的 Ghost 文档上线</h2>
<div>
<span>作者:X赛</span>·<span>2021年7月4号</span>
</div>
<p>
作为文化工业的产物,galgame的影响当然有限,但不可否认它同时又是受众狭小、粉丝圈相对封闭的一类游戏类型。其中,不少作品充斥了作者的理想主义和对现实生活的不满、谩骂,虚构的乌托邦和“报复社会”在张狂的叙事里“梦幻共演”。这个意识形态“飞地”已经为解读带来新的可能。重新挖掘gal的价值并不是说回到游戏中未被人发现的闪光点,而是通过“误读”重新打开一个新的实践,为现实、为社会公平打开可能性。
</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-wenjianjia"></i>
<a href="#">Android</a>
<a href="#">客户端</a>
</section>
</div>
<div class="main-article">
<h2>全新的 Ghost 文档上线</h2>
<div>
<span>作者:X赛</span>·<span>2021年7月4号</span>
</div>
<p>
作为文化工业的产物,galgame的影响当然有限,但不可否认它同时又是受众狭小、粉丝圈相对封闭的一类游戏类型。其中,不少作品充斥了作者的理想主义和对现实生活的不满、谩骂,虚构的乌托邦和“报复社会”在张狂的叙事里“梦幻共演”。这个意识形态“飞地”已经为解读带来新的可能。重新挖掘gal的价值并不是说回到游戏中未被人发现的闪光点,而是通过“误读”重新打开一个新的实践,为现实、为社会公平打开可能性。
</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-wenjianjia"></i>
<a href="#">Android</a>
<a href="#">客户端</a>
</section>
</div>
<div class="main-article">
<h2>全新的 Ghost 文档上线</h2>
<div>
<span>作者:X赛</span>·<span>2021年7月4号</span>
</div>
<p>
作为文化工业的产物,galgame的影响当然有限,但不可否认它同时又是受众狭小、粉丝圈相对封闭的一类游戏类型。其中,不少作品充斥了作者的理想主义和对现实生活的不满、谩骂,虚构的乌托邦和“报复社会”在张狂的叙事里“梦幻共演”。这个意识形态“飞地”已经为解读带来新的可能。重新挖掘gal的价值并不是说回到游戏中未被人发现的闪光点,而是通过“误读”重新打开一个新的实践,为现实、为社会公平打开可能性。
</p>
<button>阅读全文</button>
<section>
<i class="iconfont icon-wenjianjia"></i>
<a href="#">Android</a>
<a href="#">客户端</a>
</section>
</div>
</div>
<div class="col-lg-4">
<div class="main-aside">
<h3>声明</h3>
<p>Ghost中文版不再继续维护,请去官方下载</p>
</div>
<div class="main-aside">
<h3>下载</h3>
<button>Ghost最新版</button>
</div>
<div class="main-aside">
<h3>标签云</h3>
<div>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
</div>
</div>
</div>
</div>
<div class="foot">
<div class="foot-wrapper row">
<div class="foot-item col-lg-4">
<h3>友链</h3>
<div>
<a href=" #">Bootstrap中文网</a>
<a href="#">React</a>
<a href="#">Vue.js</a>
<a href="#">Babel</a>
<a href="#">Webpack</a>
<a href="#">XXC</a>
<a href="#">jmz</a>
<a href="#">Bootstrap中文网</a>
<a href="#">React</a>
<a href="#">Vue.js</a>
<a href="#">Babel</a>
<a href="#">Webpack</a>
<a href="#">XXC</a>
<a href="#">jmz</a>
</div>
</div>
<div class="foot-item col-lg-4">
<h3>标签云</h3>
<div>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
</div>
</div>
<div class="foot-item col-lg-4">
<h3>合作伙伴</h3>
<div>
<a href="#">腾讯</a>
<a href="#">阿里巴巴</a>
<a href="#">百度</a>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>我希望带着现在的知识经验重新分析对我影响最大的作品,也算是不给16岁的那次不经意间的邂逅留下遗憾。</p>
</div>
</body>
</html>
七、综合实战AntDesignPro管理系统
对之前讲解的知识点进行综合实战训练,如:弹性布局、网格布局、响应式布局等
通过综合实战训练,理解项目开发流程及项目开发规范等。
1.完成侧边栏及其交互
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/global.css">
</head>
<body>
<div class="g-ant">
<div class="g-ant__sider">
<div class="g-ant-sider__wrap g-ant-sider__wrap--fixed">
<div class="g-ant-sider__head">
<a href="#" class="m-logo">
<img src="./static/logo.svg" alt="">
<h1>Ant Design Pro</h1>
</a>
</div>
<ul class="g-ant-sider__main">
<li class="m-menu m-menu--selected">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowup"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li class="m-menu__sub--selected">监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
</ul>
<div class="g-ant-sider__foot">
<i class="iconfont icon-outdent u-bar"></i>
</div>
</div>
</div>
<div class="g-ant__main">
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxx</p>
</div>
</div>
<script type="text/javascript">
var menuTitles = document.querySelectorAll('.m-menu__title');
for (var i = 0; i < menuTitles.length; i++) {
menuTitles[i].onclick = function () {
var menu = this.parentElement;
menu.classList.toggle('m-menu--selected');
if (menu.className.includes('m-menu--selected')) {
// 打开状态
var arrow = this.querySelector('[class*="icon-arrow"]')
arrow.className = 'iconfont icon-arrowup';
} else {
// 关闭状态
var arrow = this.querySelector('[class*="icon-arrow"]')
arrow.className = 'iconfont icon-arrowdown'
}
}
}
var bar = document.querySelector('.u-bar');
var sider = document.querySelector('.g-ant__sider');
var menus = document.querySelectorAll('.m-menu');
bar.onclick = function () {
sider.classList.toggle('g-ant__sider--closed');
menus[0].classList.add('m-menu--selected');
menus[0].querySelector('[class*="icon-arrow"]').className = 'iconfont icon-arrowup';
for (var i = 1; i < menus.length; i++) {
menus[i].classList.remove('m-menu--selected')
menus[i].querySelector('[class*="icon-arrow"]').className = 'iconfont icon-arrowdown';
}
}
</script>
</body>
</html>
- css/global.css
@charset "utf-8";
/* --------------------重置样式-------------------------------- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
button,
input,
textarea,
th,
td {
margin : 0;
padding: 0
}
/*设置默认字体*/
body {
font-size : 14px;
font-style : normal;
font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}
/*字体太小用户体检不好,让small恢复12px*/
small {
font-size: 12px
}
h1 {
font-size: 18px
}
h2 {
font-size: 16px
}
h3 {
font-size: 14px
}
h4,
h5,
h6 {
font-size: 100%
}
ul,
ol {
list-style: none
}
a {
text-decoration : none;
background-color: transparent
}
a:hover,
a:active {
outline-width : 0;
text-decoration: none
}
/*重置表格*/
table {
border-collapse: collapse;
border-spacing : 0
}
/*重置hr*/
hr {
border: 0;
height: 1px
}
/*图形图片*/
img {
border-style: none
}
img:not([src]) {
display: none
}
svg:not(:root) {
overflow: hidden
}
/*下面的操作是针对于html5页面布局准备的,不支持ie6~8以及其他低版本的浏览器*/
html {
/*禁用系统默认菜单*/
-webkit-touch-callout : none;
/*关闭iphone & Android的浏览器纵向和横向模式中自动调整字体大小的功能*/
-webkit-text-size-adjust: 100%
}
input,
textarea,
button,
a {
/*表单或者a标签在手机点击时会出现边框或彩色的背景区域,意思是去除点击背景框*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
/*重置html5元素的默认样式*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block
}
audio,
canvas,
progress,
video {
display: inline-block
}
audio:not([controls]),
video:not([controls]) {
display: none;
height : 0
}
progress {
vertical-align: baseline
}
mark {
background-color: #ff0;
color : #000
}
sub,
sup {
position : relative;
font-size : 75%;
line-height : 0;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
button,
input,
select,
textarea {
font-size: 100%;
outline : 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
textarea {
overflow: auto
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding : 0
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding : 0
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset : -2px
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color : inherit;
opacity: .54
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font : inherit
}
/*-----------------通用方法-----------------------*/
.show{
display: block !important;
}
.hide{
display: none !important;
}
/*-----------------通用布局(g-)-----------------------*/
.g-ant{
display: flex;
}
.g-ant__sider{
flex-shrink: 0;
background: #00152a;
width: 208px;
min-height: 100vh;
}
.g-ant__sider--closed{
width: 48px;
overflow: hidden;
}
/* 弹性布局,若g-ant-main超出可视区,也会导致g-ant-sider超出可视区。故需要给g-ant-sider添加固定定位。 */
.g-ant__main{
flex-grow: 1;
}
/* 给它.g-ant__sider中添加一个靠内容撑开的容器,并设置为固定,则可以产生main区域滑动时sider不动的情况 */
.g-ant-sider__wrap{
/* 将容器高度改为与 可视区 高度相同。固定定位+height:100%:可以使得此侧边框的始终占满可视区而不会随其外层容器的宽度而拉伸。 */
height: 100%;
display: flex;
flex-direction: column;
}
.g-ant-sider__wrap--fixed{
position: fixed;
width: inherit;
overflow: hidden;
}
/* 通过给head和foot加flex-shrink,给main加flex-grow,使得页面上下挤压时只有main会收缩。同时让main占据剩余空间,以达到布局的目的 */
/* 在没有固定定位时,wrap的高会继承父容器的高,foot会被撑到非可视区的底部 */
.g-ant-sider__head{
flex-shrink: 0;
}
.g-ant-sider__main{
flex-grow: 1;
/* 通过overflow:auto在加上下面三个样式,可以实现自定义滚动条,注意要加前缀,否则会导致窗口滚动条也发送变化 */
overflow: none auto;
}
.g-ant-sider__main::-webkit-scrollbar{
width: 6px;
height: 6px;
}
.g-ant-sider__main::-webkit-scrollbar-thumb{
background: #51606d;
border-radius: 3px;
}
.g-ant-sider__main::-webkit-scrollbar-track{
background: #263849;
border-radius: 3px;
}
.g-ant-sider__foot{
flex-shrink: 0;
}
/*-----------------通用模块(m-)-----------------------*/
.m-logo{
display: flex;
align-items: center;
padding: 16px;
color:white;
}
.m-logo>img{
width: 32px;
}
.m-logo>h1{
font-weight: 600;
margin-left:12px;
flex-shrink: 0;
}
.g-ant__sider--closed .m-logo{
padding: 16px 8px;
}
.m-menu{
color:#8c959e;
cursor: pointer;
}
.m-menu--selected .m-menu__title{
color:white;
}
.m-menu--selected .m-menu__sub{
display: block;
}
.m-menu__title{
height: 44px;
display: flex;
align-items: center;
column-gap: 10px;
padding:0 15px;
}
.g-ant__sider--closed .m-menu__title{
transform: scale(1.5);
}
.m-menu__title>span{
margin-right: auto;
}
.m-menu__sub{
display: none;
}
.g-ant__sider--closed .m-menu__sub{
display: none;
}
.m-menu__sub>li{
height: 40px;
padding-left: 45px;
line-height: 40px;
}
.m-menu__sub--selected{
color: white;
background: #1890ff;
}
/*-----------------通用元件(u-)-----------------------*/
.u-bar{
font-size:18px;
color: white;
display: block;
padding: 15px;
cursor: pointer;
}
/*-----------------响应式系统-----------------------*/
2.完成全部功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/global2.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="g-ant">
<div class="g-ant__sider">
<div class="g-ant-sider__wrap g-ant-sider__wrap--fixed">
<div class="g-ant-sider__head">
<a href="#" class="m-logo">
<img src="./static/logo.svg" alt="">
<h1>Ant Design Pro</h1>
</a>
</div>
<ul class="g-ant-sider__main">
<li class="m-menu m-menu--selected">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowup"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li class="m-menu__sub--selected">监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
<li class="m-menu">
<div class="m-menu__title">
<i class="iconfont icon-car"></i>
<span>Dashboard</span>
<i class="iconfont icon-arrowdown"></i>
</div>
<ul class="m-menu__sub">
<li>分析页</li>
<li>监控页</li>
<li>工作台</li>
</ul>
</li>
</ul>
<div class="g-ant-sider__foot">
<i class="iconfont icon-outdent u-bar"></i>
</div>
</div>
</div>
<div class="u-mask"></div>
<div class="g-ant__main">
<div class="g-ant-main__head g-ant-main__head--fixed">
<div class="m-logo2">
<img src="./static/logo.svg" alt="">
<i class="iconfont icon-outdent u-bar"></i>
</div>
<i class="iconfont icon-idcard"></i>
<i class="iconfont icon-check-circle"></i>
<i class="iconfont icon-read"></i>
<i class="iconfont icon-user"></i>
<span>admin</span>
<i class="iconfont icon-error"></i>
</div>
<div class="g-ant-main__main">
<div class="index-main">
<div class="m-card">
<div class="m-card__title">
活动实时交易情况
</div>
<div class="m-card__body">
<div class="index-main__bg1"></div>
</div>
</div>
<div class="m-card">
<div class="m-card__title">
活动情况预测
</div>
<div class="m-card__body">
<div class="index-main__bg2"></div>
</div>
</div>
<div class="m-card">
<div class="m-card__title">
劵核效率
</div>
<div class="m-card__body">
<div class="index-main__bg3"></div>
</div>
</div>
<div class="m-card">
<div class="m-card__title">
各品类占比
</div>
<div class="m-card__body">
<div class="index-main__bg4"></div>
</div>
</div>
<div class="m-card">
<div class="m-card__title">
热门搜索
</div>
<div class="m-card__body">
<div class="index-main__bg5"></div>
</div>
</div>
<div class="m-card">
<div class="m-card__title">
资源剩余
</div>
<div class="m-card__body">
<div class="index-main__bg6"></div>
</div>
</div>
</div>
</div>
<div class="g-ant-main__foot">
<p>
<a href="#">Ant Design Pro</a>
<a href="#">
<i class="iconfont icon-github-fill"></i>
</a>
<a href="#">Ant Design</a>
</p>
<p>
<i class="iconfont icon-user"></i>
最终赋予了认同的神话色彩,这种象征界的逃离并不发生在自己被侵犯之后,而是早在故事呈现的经历之前就发生了,她预设了一个完美的自我形象,早早构筑起了精神洁癖。
</p>
</div>
</div>
</div>
<div class="m-setting">
<div class="m-setting__bar">
<i class="iconfont icon-setting"></i>
</div>
<div class="m-setting__item">
<h3>主题色</h3>
<ul class="m-setting-item__theme">
<li class="u-foxiaolan"><i class="iconfont icon-check"></i></li>
<li class="u-bomu"></i></li>
<li class="u-huoshan"></i></li>
<li class="u-rimu"></i></li>
<li class="u-mingqing"></i></li>
<li class="u-jiguanglv"></i></li>
<li class="u-jikelan"></i></li>
<li class="u-jiangzi"></i></li>
</ul>
</div>
<div class="m-setting__item">
<h3>固定内容</h3>
<ul class="m-setting-item__toggle">
<li>
<span>内容头部</span>
<!-- 规定:j-不用在样式中,而是给js调用的钩子,用于js获取元素 -->
<div class="u-switch j-head--fixed">
<div class="u-switch__handle"></div>
</div>
</li>
<li>
<span>侧边菜单</span>
<div class="u-switch j-sider--fixed">
<div class="u-switch__handle"></div>
</div>
</li>
</ul>
</div>
<div class="u-divider"></div>
<div class="m-setting__item">
<h3>显示内容</h3>
<ul class="m-setting-item__toggle">
<li>
<span>内容头部</span>
<div class="u-switch j-head--show">
<div class="u-switch__handle"></div>
</div>
</li>
<li>
<span>侧边菜单</span>
<div class="u-switch j-sider--show">
<div class="u-switch__handle"></div>
</div>
</li>
</ul>
</div>
</div>
<div class="u-mask"></div>
<script type="text/javascript">
// 侧边栏选项交互
var menuTitles = document.querySelectorAll('.m-menu__title');
for (var i = 0; i < menuTitles.length; i++) {
menuTitles[i].onclick = function () {
var menu = this.parentElement;
menu.classList.toggle('m-menu--selected');
if (menu.className.includes('m-menu--selected')) {
// 打开状态
var arrow = this.querySelector('[class*="icon-arrow"]')
arrow.className = 'iconfont icon-arrowup';
} else {
// 关闭状态
var arrow = this.querySelector('[class*="icon-arrow"]')
arrow.className = 'iconfont icon-arrowdown'
}
}
}
// 侧边栏显示隐藏交互
var bar = document.querySelector('.g-ant-sider__foot .u-bar');
var sider = document.querySelector('.g-ant__sider');
var menus = document.querySelectorAll('.m-menu');
bar.onclick = function () {
sider.classList.toggle('g-ant__sider--closed');
menus[0].classList.add('m-menu--selected');
menus[0].querySelector('[class*="icon-arrow"]').className = 'iconfont icon-arrowup';
for (var i = 1; i < menus.length; i++) {
menus[i].classList.remove('m-menu--selected')
menus[i].querySelector('[class*="icon-arrow"]').className = 'iconfont icon-arrowdown';
}
}
// 设置中的颜色交互
var setting = document.querySelector('.m-setting')
var settingBar = document.querySelector('.m-setting__bar')
var themes = document.querySelectorAll('.m-setting-item__theme>li')
settingBar.onclick = function () {
setting.classList.toggle('m-setting--open')
if (setting.className.includes('m-setting--open')) {
var icon = this.querySelector('i');
icon.className = 'iconfont icon-close';
} else {
var icon = this.querySelector('i');
icon.className = 'iconfont icon-setting';
}
}
for (var i = 0; i < themes.length; i++) {
themes[i].onclick = function () {
for (var i = 0; i < themes.length; i++) {
themes[i].innerHTML = '';
}
this.innerHTML = '<i class="iconfont icon-check"></i>';
// 实现主题颜色修改,在框架中会把其作为本地存储。
var color = getComputedStyle(this).backgroundColor;
document.documentElement.style.setProperty('--theme', color);
}
}
// 设置中的按钮交互
var headFixed = document.querySelector('.j-head--fixed');
var siderFixed = document.querySelector('.j-sider--fixed');
var headShow = document.querySelector('.j-head--show');
var siderShow = document.querySelector('.j-sider--show');
var mainHead = document.querySelector('.g-ant-main__head')
var siderWrap = document.querySelector('.g-ant-sider__wrap')
headFixed.onclick = function () {
this.classList.toggle('u-switch--closed');
mainHead.classList.toggle('g-ant-main__head--fixed')
}
siderFixed.onclick = function () {
this.classList.toggle('u-switch--closed');
siderWrap.classList.toggle('g-ant-sider__wrap--fixed')
}
headShow.onclick = function () {
this.classList.toggle('u-switch--closed');
mainHead.classList.toggle('hide')
}
siderShow.onclick = function () {
this.classList.toggle('u-switch--closed');
sider.classList.toggle('hide')
}
// 小屏幕下的按钮交互
var bar2 = document.querySelector('.m-logo2 .u-bar');
var mask = document.querySelector('.g-ant__sider + .u-mask')
bar2.onclick = function () {
// 判断是否在设置中的按钮中添加了hide属性,若添加了,则即便点击也不显示。
if (!sider.className.includes('hide')) {
sider.classList.add('show')
}
}
mask.onclick = function () {
sider.classList.remove('show')
}
</script>
</body>
</html>
- css/global2.css
@charset "utf-8";
/* --------------------重置样式-------------------------------- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
button,
input,
textarea,
th,
td {
margin : 0;
padding: 0
}
/*设置默认字体*/
body {
font-size : 14px;
font-style : normal;
font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}
/*字体太小用户体检不好,让small恢复12px*/
small {
font-size: 12px
}
h1 {
font-size: 18px
}
h2 {
font-size: 16px
}
h3 {
font-size: 14px
}
h4,
h5,
h6 {
font-size: 100%
}
ul,
ol {
list-style: none
}
a {
text-decoration : none;
background-color: transparent
}
a:hover,
a:active {
outline-width : 0;
text-decoration: none
}
/*重置表格*/
table {
border-collapse: collapse;
border-spacing : 0
}
/*重置hr*/
hr {
border: 0;
height: 1px
}
/*图形图片*/
img {
border-style: none
}
img:not([src]) {
display: none
}
svg:not(:root) {
overflow: hidden
}
/*下面的操作是针对于html5页面布局准备的,不支持ie6~8以及其他低版本的浏览器*/
html {
/*禁用系统默认菜单*/
-webkit-touch-callout : none;
/*关闭iphone & Android的浏览器纵向和横向模式中自动调整字体大小的功能*/
-webkit-text-size-adjust: 100%
}
input,
textarea,
button,
a {
/*表单或者a标签在手机点击时会出现边框或彩色的背景区域,意思是去除点击背景框*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
/*重置html5元素的默认样式*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block
}
audio,
canvas,
progress,
video {
display: inline-block
}
audio:not([controls]),
video:not([controls]) {
display: none;
height : 0
}
progress {
vertical-align: baseline
}
mark {
background-color: #ff0;
color : #000
}
sub,
sup {
position : relative;
font-size : 75%;
line-height : 0;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
button,
input,
select,
textarea {
font-size: 100%;
outline : 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
textarea {
overflow: auto
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding : 0
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding : 0
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset : -2px
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color : inherit;
opacity: .54
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font : inherit
}
/*-----------------通用方法-----------------------*/
:root{
--theme:#115348;
}
.show{
display: block !important;
}
.hide{
display: none !important;
}
/*-----------------通用布局(g-)-----------------------*/
.g-ant{
display: flex;
}
.g-ant__sider{
/* 此处加flex-shrink是为了避免当可视区宽度缩小,sider被压缩导致,而其子元素因为的宽为inherit,只能是其一开始的208px,则会出现溢出。此种溢出因为子元素宽度一直未变,所以即便使用overflow:hidden;也没用 */
flex-shrink: 0;
background: #00152a;
width: 208px;
min-height: 100vh;
z-index: 3;
}
.g-ant__sider--closed{
width: 48px;
overflow: hidden;
}
/* 给.g-ant__sider中添加一个靠内容撑开的容器,并设置为固定,则可以产生main区域滑动时sider不动的情况 */
.g-ant-sider__wrap{
/* 将容器高度改为与 可视区 高度相同。固定定位+height:100%:可以使得此侧边框的始终占满可视区而不会随其外层容器的高度而拉伸。 */
height: 100%;
display: flex;
flex-direction: column;
}
.g-ant-sider__wrap--fixed{
position: fixed;
width: inherit;
overflow: hidden;
}
/* 通过给head和foot加flex-shrink,给main加flex-grow,使得页面上下挤压时只有main会收缩。同时让main占据剩余空间,以达到布局的目的 */
/* 在没有固定定位时,wrap的高会继承父容器的高,foot会被撑到非可视区的底部 */
.g-ant-sider__head{
flex-shrink: 0;
}
.g-ant-sider__main{
flex-grow: 1;
/* 通过overflow:auto在加上下面三个样式,可以实现自定义滚动条,注意要加前缀,否则会导致窗口滚动条也发送变化 */
overflow: hidden auto;
}
.g-ant-sider__main::-webkit-scrollbar{
width: 6px;
height: 6px;
}
.g-ant-sider__main::-webkit-scrollbar-thumb{
background: #51606d;
border-radius: 3px;
}
.g-ant-sider__main::-webkit-scrollbar-track{
background: #263849;
border-radius: 3px;
}
.g-ant-sider__foot{
flex-shrink: 0;
}
/* 弹性布局,若g-ant-main超出可视区,也会导致g-ant-sider超出可视区。故需要给g-ant-sider添加固定定位。 */
.g-ant__main{
flex-grow: 1;
display: flex;
flex-direction: column;
background: #f1f2f6;
}
.g-ant-main__head{
height: 48px;
background: white;
flex-shrink: 0;
display: flex;
justify-content: flex-end;
align-items: center;
box-shadow: 0 1px 4px #ccc;
column-gap: 20px;
padding-right: 0 20px;
}
.g-ant-main__head--fixed{
position: fixed;
/* 固定定位默认宽度为内容宽 */
/* 此处不能用宽度继承,因为父容器是靠子元素撑开的,没有具体宽 */
/* width: inherit; */
/* 通过设置左右都为0,可以让元素占满整个视口宽度。然后再设置层级小于侧边栏层级,即可实现效果。 */
left: 0;
right: 0;
z-index: 2;
}
/* :not(.hide)表示当.g-ant-main__head--fixed所在元素不具备.hide的情况下 */
.g-ant-main__head--fixed:not(.hide) + .g-ant-main__main{
margin-top: 48px;
}
.g-ant-main__head>span{
/* 将span与其左边元素靠近 */
margin-left: -15px;
}
.g-ant-main__main{
flex-grow: 1;
}
.g-ant-main__foot{
margin-top:70px;
margin-bottom:30px;
line-height: 30px;
text-align: center;
color: #868782;
}
.g-ant-main__foot a{
color: inherit;
margin: 0 20px;
}
/*-----------------通用模块(m-)-----------------------*/
.m-logo{
display: flex;
align-items: center;
padding: 16px;
color:white;
}
.m-logo>img{
width: 32px;
}
.m-logo>h1{
font-weight: 600;
margin-left:12px;
flex-shrink: 0;
}
.g-ant__sider--closed .m-logo{
padding: 16px 8px;
}
.m-menu{
color:#8c959e;
cursor: pointer;
}
.m-menu--selected .m-menu__title{
color:white;
}
.m-menu--selected .m-menu__sub{
display: block;
}
.m-menu__title{
height: 44px;
display: flex;
align-items: center;
column-gap: 10px;
padding:0 15px;
}
.g-ant__sider--closed .m-menu__title{
transform: scale(1.5);
}
.m-menu__title>span{
margin-right: auto;
}
.m-menu__sub{
display: none;
}
.g-ant__sider--closed .m-menu__sub{
display: none;
}
.m-menu__sub>li{
height: 40px;
text-indent: 45px;
line-height: 40px;
}
.m-menu__sub--selected{
color: white;
background: var(--theme);
}
.m-card{
font-size: 16px;
height: 100%;
width: 100%;
background: white;
display: flex;
flex-direction: column;
border-radius: 2px;
}
.m-logo2{
display: none;
align-items: center;
margin-right: auto;
}
.m-logo2>img{
width: 32px;
}
.m-logo2>.u-bar{
color: inherit;
}
.m-card__title{
flex-shrink: 0;
height: 57px;
border-bottom:1px #f1f1f1 solid;
display: flex;
align-items: center;
padding-left: 20px;
}
.m-card__body{
flex-grow: 1;
padding: 20px;
}
.m-setting{
width: 300px;
height: 100vh;
background: white;
position: fixed;
right: -300px;
top: 0;
padding: 0 15px;
box-sizing: border-box;
z-index: 10;
}
.m-setting--open{
right: 0;
}
.m-setting--open+.u-mask{
display: block;
}
.m-setting__bar{
width: 48px;
height: 48px;
background: var(--theme);
border-radius: 2px;
/* 此处是因为父元素设置了固定定位,所以可以参照父元素做绝对定位 */
position: absolute;
left: -48px;
top: calc(50% - 24px);
color:white;
display: flex;
justify-content: center;
align-items: center;
}
.m-setting__bar>i{
font-size: 22px;
cursor: pointer;
}
.m-setting__item{
margin: 50px 0;
}
.m-setting-item__theme{
display: flex;
justify-content: space-between;
margin: 30px 0;
}
.m-setting-item__theme>li{
cursor: pointer;
}
.m-setting-item__toggle{
}
.m-setting-item__toggle>li{
display: flex;
justify-content: space-between;
margin: 30px 0;
}
/*-----------------通用元件(u-)-----------------------*/
.u-bar{
font-size:18px;
color: white;
display: block;
padding: 15px;
cursor: pointer;
}
.u-foxiaolan,.u-bomu,.u-huoshan,.u-rimu,.u-mingqing,.u-jiguanglv,.u-jikelan,.u-jiangzi{
width: 20px;
height: 20px;
color: white;
border-radius: 2px;
line-height: 20px;
text-align: center;
}
.u-foxiaolan{
background: #188efc;
}
.u-bomu{
background: #f5212d;
}
.u-huoshan{
background: #fe531f;
}
.u-rimu{
background: #fbae14;
}
.u-mingqing{
background: #14c2c3;
}
.u-jiguanglv{
background: #53c41a;
}
.u-jikelan{
background: #2f54eb;
}
.u-jiangzi{
background: #722ed1;
}
.u-divider{
width: 100%;
height: 1px;
background: #f0f0f0;
margin: 25px 0;
}
.u-switch{
width: 28px;
height: 16px;
border-radius: 100px;
background: var(--theme);
cursor: pointer;
}
.u-switch--closed{
background: rgba(0, 0, 0, 0.25);
}
.u-switch__handle{
width: 12px;
height: 12px;
border-radius: 6px;
background: white;
position: relative;
left: 2px;
top: 2px;
}
.u-switch--closed .u-switch__handle{
left: 14px;
}
.u-mask{
display: none;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
/*-----------------响应式系统-----------------------*/
@media(max-width:1400px){}
@media(max-width:1200px){}
@media(max-width:992px){
.m-logo2{
display: flex;
}
/* 保证在响应式情况下侧边栏是固定定位 */
.g-ant__sider{
display: none;
position: fixed;
left: 0;
top: 0;
z-index: 6;
}
/* :is(.show) 表示左侧菜单有.show类名时,才能生效 */
.g-ant__sider:is(.show)+.u-mask{
display: block;
}
}
@media(max-width:768px){}
@media(max-width:576px){}
- css/index.css
/* 针对首页的css */
.index-main{
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(3,285px);
gap:24px;
margin: 24px;
grid-template-areas:
"a1 a1 a1 a2"
"a1 a1 a1 a3"
"a4 a4 a5 a6"
;
}
.index-main .m-card:nth-of-type(1){
grid-area: a1;
}
.index-main .m-card:nth-of-type(2){
grid-area: a2;
}
.index-main .m-card:nth-of-type(3){
grid-area: a3;
}
.index-main .m-card:nth-of-type(4){
grid-area: a4;
}
.index-main .m-card:nth-of-type(5){
grid-area: a5;
}
.index-main .m-card:nth-of-type(6){
grid-area: a6;
}
.index-main__bg1,
.index-main__bg2,
.index-main__bg3,
.index-main__bg4,
.index-main__bg5,
.index-main__bg6{
background-repeat: no-repeat;
background-position: center center;
background-size: contain; /*contain表示覆盖整个区域*/
width: 100%;
height: 100%;
}
.index-main__bg1{
background-image: url(../static/index-1.jpg);
}
.index-main__bg2{
background-image: url(../static/index-2.jpg);
}
.index-main__bg3{
background-image: url(../static/index-3.jpg);
}
.index-main__bg4{
background-image: url(../static/index-4.jpg);
}
.index-main__bg5{
background-image: url(../static/index-5.jpg);
}
.index-main__bg6{
background-image: url(../static/index-6.jpg);
}
@media(max-width:1400px){
}
@media(max-width:1200px){
.index-main{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(4,285px);
gap:24px;
margin: 24px;
grid-template-areas:
"a1 a1 a1"
"a1 a1 a1"
"a2 a3 a5"
"a4 a4 a6"
;
}
}
@media(max-width:992px){
.index-main{
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(5,285px);
gap:24px;
margin: 24px;
grid-template-areas:
"a1 a1"
"a1 a1"
"a2 a3"
"a4 a4"
"a5 a6"
;
}
}
@media(max-width:768px){
.index-main{
display: grid;
grid-template-columns: repeat(1,1fr);
grid-template-rows: repeat(6,285px);
gap:24px;
margin: 24px;
grid-template-areas:
"a1"
"a2"
"a3"
"a4"
"a5"
"a6"
;
}
}
@media(max-width:576px){
}