移动端布局——（二）
*Ps：笔记来源于慕课教程
▶上下栏布局
1. 中文布局css库
- 实例演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在这里用link标签引入中文布局 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">
<!-- 在这里用link标签引入中文渐变色 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0; }
html, body { height: 100%; } /* 令html和body全屏显示 */
body {
display: grid; /* 先在父元素上设置grid布局 */
grid: var(--上下栏);
gap: 5px; /* 给个合适的间距 */
}
/* 上栏和下栏 */
.top, .bottom {
height: 60px; /* 给个高度或者用内容撑开，不然的话高度会变成0 */
background: var(--紫灰); /* 给个好看的渐变色 */
}
/* 中间 */
.center {
/* 中间会根据上下栏的高度自适应，所以不用写高度 */
background: var(--极光绿); /* 给个好看的渐变色 */
overflow-y: auto /* 竖直方向如有超出则会出现滚动条 */
}
</style>
</head>
<body>
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</body>
</html>
效果如下：
.
2. 固定定位
将上栏以及下栏固定在屏幕的特定位置，然后主盒子添加合适的上下边距：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在这里用link标签引入中文渐变色 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0; }
html, body { height: 100% } /* 令html和body全屏显示 */
body { position: relative; } /* 设置父元素为相对定位 */
/* 上面的那栏 */
.top {
position: fixed; /* 设置为固定定位 */
top: 0; /* 距离上边左边为0 */
left: 0;
width: 100%; /* 宽度铺满屏幕 */
height: 80px; /* 给个合适的高度 */
background: var(--极光绿); /* 绿色背景 */
}
.main {
margin: 90px 0; /* 给个合适的上下边距 */
height: 1000px; /* 给个合适的高度 */
background: var(--灯红酒绿); /* 渐变背景 */
}
/* 下面的那栏 */
.bottom {
position: fixed; /* 设置为固定定位 */
bottom: 0; /* 距离下边左边为0 */
left: 0;
width: 100%; /* 宽度铺满屏幕 */
height: 80px; /* 给个合适的高度 */
background: var(--芒果黄); /* 黄色背景 */
}
div {
color: white; /* 白色文字 */
font-size: 30px ; /* 字体大小 */
}
</style>
</head>
<body>
<div class="top">无论你怎么滑动屏幕，我都是固定不变的</div>
<div class="main">
主盒子顶部
</div>
<div class="bottom">无论你怎么滑动屏幕，我都是固定不变的</div>
</body>
</html>
效果如下：
.
3. 外边距作用
margin: 90px 0; ——加上合适的上下边距。
去掉了外边距就相当于把盒子延展到了最顶端和最底端，因为上下两栏使用了固定定位，固定定位会导致元素脱离默认文档流，也就是说上下两栏不在默认文档流里面占用任何空间，所以上面的文字和下面的文字就会被挡住。
所以我们应该给主盒子一个合适的上下边距，来绕开被挡住的部分。
.
4. 非固定定位
属性： overflow-y: auto
这里的非固定定位与吕形布局的用法相同，只是多了下栏部分。
...
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0; }
html, body { height: 100% } /* 令html和body全屏显示 */
/* 上面的那栏 */
.top {
height: 10%; /* 设置一个合适的高度 */
background: var(--靛蓝); /* 蓝色背景 */
}
/* 主显示区 */
.main {
height: 80%; /* 给个合适的高度 */
overflow-y: auto; /* 竖直方向的溢出设置为自动 */
}
.child {
height: 1000px;
background: var(--天蓝); /* 给个好看的渐变色 */
}
/* 下面的那栏 */
.bottom {
height: 10%; /* 设置一个合适的高度 */
background: var(--宝石蓝); /* 蓝色背景 */
}
/* 盒子的默认样式 */
div {
font-size: 30px;
color: white;
}
</style>
...
<body>
<div class="top"></div>
<div class="main">
<div class="child"></div>
</div>
<div class="bottom"></div>
</body>
效果如下：
.
5. 上下栏布局简单实例
- 实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在这里用link标签引入中文渐变色 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0; }
html, body { height: 100% } /* 令html和body全屏显示 */
/* 上面的那栏 */
.top {
position: fixed; /* 设置为固定定位 */
top: 0; /* 距离上边左边为0 */
left: 0;
width: 100%; /* 宽度铺满屏幕 */
height: 80px; /* 给个合适的高度 */
opacity: 0; /* 令其透明 */
background: var(--宝石蓝) /* 蓝色背景 */
}
.main {
margin-bottom: 80px; /* 给个合适的下边距 */
height: 1000px; /* 给个合适的高度 */
background: var(--天蓝) /* 渐变背景 */
}
/* 下面的那栏 */
.bottom {
position: fixed; /* 设置为固定定位 */
bottom: 0;
left: 0;
width: 100%; /* 宽度铺满屏幕 */
height: 80px; /* 给个合适的高度 */
background: var(--靛蓝) /* 蓝色背景 */
}
</style>
</head>
<body>
<div class="top"></div>
<div class="main"></div>
<div class="bottom"></div>
<script>
/* 获取固定栏*/
const dom = document.getElementsByClassName('top')[0]
window.addEventListener('scroll', _ => {
/* 获取偏移值*/
const top = document.documentElement.scrollTop
/* 设置一个合适的范围*/
if (top <= 150) {
/* 对opacity作计算，透明度从起始到1随偏移值而改变*/
const opacity = top / 150
/* 令上栏的透明度变成计算后的透明度*/
dom.style.opacity = opacity
} else {
/* 在移动一定范围后令其完全不透明*/
dom.style.opacity = 1
}
})
</script>
</body>
</html>
效果如下：
Ps：这里就不用再给主盒子加上边距啦，因为在最上面的时候上栏完全透明，不会覆盖住内容的。
实际例子：
随着页面的滚动,上栏内的文字有一个渐隐渐现的效果；这种效果不但会在刚进入页面时显得更加的整洁，而且更是丰富了交互的趣味性。
.
▶ 九宫格布局
九宫格在我们生活中很常见，如微信客户端的支付首页，朋友圈，微博等，都运用到九宫格布局。
.
1. 中文布局css库
- 实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在这里用link标签引入中文布局 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">
<!-- 在这里用link标签引入中文渐变色 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0 }
ul { list-style: none }
html, body, ul { height: 100% } /* 全屏显示 */
/* 在父元素上写入九宫格 */
ul {
display: grid;
grid: var(--九宫格);
gap: 5px
}
/* 给子元素上色 */
li {
background: var(--极光绿)
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
效果如下：
.
2. 网格布局
Grid 布局是近些年来逐渐兴起的一种布局方式，它的功能十分强大。
两个较为流行的grid入门教程：
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0; }
html, body, ul { height: 100% } /* 全屏显示 */
/* 父元素 */
ul {
list-style: none; /* 清除默认样式 */
display: grid; /* 令其用grid方式去显示 */
grid: repeat(3, 1fr) / repeat(3, 1fr); /* 将其切割成三行三列 */
gap: 3px /* 设置一个合适的间距 */
}
/* 子元素 */
li {
background: var(--芒果黄) /* 黄色渐变 */
}
</style>
...
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
效果如下：
.
3. 表格布局
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0; }
html, body, ul { height: 100% } /* 全屏显示 */
/* 父元素 */
ul {
width: 100%; /* 给个合适的宽度 */
list-style: none; /* 清除默认样式 */
display: table; /* 令其用table方式去显示 */
border-spacing: 3px /* 设置间距 */
}
/* 子元素 */
li {
display: table-row /* 令其用table-row方式去显示 */
}
/* 孙子元素 */
div {
display: table-cell; /* 令其用table-cell方式去显示 */
background: var(--湖蓝) /* 蓝色渐变 */
}
</style>
...
<ul>
<li>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
</li>
</ul>
效果如下：
在有些适合使用表格布局但又不是表格的情况下，可以利用 display属性来模仿表格的行为：
display: table;相当于把元素的行为变成<table></table> ；display: inline-table;相当于把元素的行为变成行内元素版的<table></table>；display: table-row;相当于把元素的行为变成<tr></tr>；display: table-column;相当于把元素的行为变成<col></col>；display: table-cell;相当于把元素的行为变成<td></td>或<th></th>；display: table-caption;相当于把元素的行为变成<caption></caption>。
.
4. 弹性布局
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0; }
html, body, ul { height: 100% } /* 全屏显示 */
/* 父元素 */
ul {
list-style: none; /* 清除默认样式 */
display: flex; /* 显示为弹性布局 */
flex-flow: wrap; /* 允许换行 */
}
/* 子元素 */
li {
width: 33%; /* 宽高都是百分之33*/
height: 33%;
margin: .5px; /* 给个合适的外边距 */
background: var(--黛蓝) /* 深蓝渐变 */
}
</style>
...
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
效果如下：
flex-flow: wrap;允许换行
在 flex 九宫格这个案例中，有一个很重要的要点就是要让弹性盒子换行（默认是不换行的）。
.
5. 左浮动法
- 实例演示
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0; }
html, body, ul { height: 100% } /* 全屏显示 */
/* 父元素 */
ul {
list-style: none; /* 清除默认样式 */
}
/* 伪元素 */
ul::after {
display: block; /* 显示为块级元素 */
content: ''; /* 内容为空 */
clear: both; /* 清除浮动 */
}
/* 子元素 */
li {
width: 33%; /* 宽高都是百分之33*/
height: 33%;
float: left; /* 左浮动 */
margin: .5px; /* 给个合适的外边距 */
background: var(--怦然心动) /* 粉红渐变 */
}
</style>
...
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
效果如下：
.
6. 边框九宫格
给所有的子盒子都定义一样的边框样式，实现方式查看此处。
- 实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在这里用link标签引入中文渐变色 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0; }
html, body, ul { height: 100% } /* 全屏显示 */
/* 父元素 */
ul {
list-style: none; /* 清除默认样式 */
display: grid; /* 显示为网格布局 */
grid: repeat(3, 1fr) / repeat(3, 1fr); /* 均分成三行三列 */
gap: 20px; /* 给个合适的间距 */
padding-right: 20px; /* 添加右下方内边距 */
padding-bottom: 20px;
box-sizing: border-box; /* 设置盒模型 */
border-right: 2px solid black; /* 两像素的右下角边框 */
border-bottom: 2px solid black;
animation: clear-gap 5s ease-out infinite alternate /* 调用动画 */
}
/* 子元素 */
li {
border-top: 2px solid black; /* 两像素的左上角边框 */
border-left: 2px solid black;
}
/* 定义动画 */
@keyframes clear-gap {
to { gap: 0; padding: 0 }
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
7. 九宫格布局实例（经典面试题）
其实面试有时候并不像大家想象的那样问一些很基础的问题，比如：
- 请谈一下你对CSS盒模型的理解
- 你对flex布局了解的怎么样
- 了解过grid布局吗
- 当元素的外边距为负值时会有什么样的行为
- 当元素重叠在一起时如何控制上下层级
- 如何水平垂直居中
- 什么是事件冒泡
- 怎么控制特定位置的元素样式(比如偶数位置的样式)
- 如何判断事件是从哪个元素冒泡过来的
- 哪个CSS属性值可以减少重复定义颜色值
这样问的话效率会比较低，而优秀的面试题只需要一道，就可以考察上述所有的这些问题。
要求如下：
- 边框九宫格的每个格子中的数字都要居中
- 鼠标经过时边框和数字都要变红
- 格子中的数字居中用flex实现
- 点击九宫格会弹出对应的数字
可以自己尝试练习一下，具体参考代码点 here。
扫一扫
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
