# 常用的 CSS 主流布局案例（41~48）
涵盖功能和技术点
- 常见的网页布局以及功能模块
- 涉及 HTML/HTML5、CSS/CSS3 主流布局相关知识点（常规布局和 Flex 布局等）
- 专项 CSS 主流布局案例（针对性训练）
# 41、数字统计效果
应用场景和技术要点
重点：flex 布局
See the Pen 41、 数字统计效果 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.number {
display: inline-flex;
flex-direction: column; /*从上往下排列*/
align-items: center;
}
.number-value {
font-size: 60px;
font-weight: 500;
}
.number-label {
font-size: 16px;
font-weight: 700;
text-transform: uppercase; /*大写字母*/
}
</style>
<body>
<div class="number">
<span class="number-value">1K+</span>
<span class="number-label">stars</span>
</div>
</body>
# 42、时间轴效果（timeline）
应用场景和技术要点
重点：时间轴的布局原理，核心知识 position 定位与 float 浮动
See the Pen 42、时间轴效果（timeline） by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
body {
margin: 0;
background-image: linear-gradient(to right, #fdf1d8, #b1bbf9);
}
h3 {
margin: 0;
font-weight: 400;
}
/*清除浮动样式*/
.clearfix::after {
content: "";
display: block;
clear: both;
}
.time-axis {
width: 804px;
margin: 50px auto 0px;
}
/*时间轴左边区域*/
.time-axis .left {
width: 400px;
float: left;
border-right: 4px solid #b1bbf9;
position: relative;
}
/*时间轴右边区域*/
.time-axis .right {
width: 400px;
float: right;
border-left: 4px solid #b1bbf9;
position: relative;
}
/*时间轴线上圆点*/
.time-axis .dot {
width: 10px;
height: 10px;
background-color: #fff;
display: block;
border: 2px solid #b1bbf9;
border-radius: 7px;
position: absolute;
top: 50%;
margin-top: -7px;
}
.time-axis .left .dot {
right: -9px;
}
.time-axis .right .dot {
left: -9px;
}
/*时间轴线上三角形*/
.time-axis .jiantou {
width: 32px;
height: 32px;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
}
.time-axis .left .jiantou {
right: 0px;
background: url(images/r-jiantou.png);
}
.time-axis .right .jiantou {
background: url(images/l-jiantou.png);
left: 0px;
}
/*内容样式修饰*/
.time-axis .con {
background-color: #fff;
padding: 15px;
border-radius: 10px;
text-align: center;
}
.time-axis .left .con {
margin-right: 22px;
}
.time-axis .right .con {
margin-left: 22px;
}
</style>
<body>
<div class="time-axis clearfix">
<div class="left">
<span class="dot"></span>
<span class="jiantou"></span>
<div class="con">
<h3>时间轴内容在这里可以随便布局......</h3>
</div>
</div>
<div class="right">
<span class="dot"></span>
<span class="jiantou"></span>
<div class="con">
<h3>时间轴内容在这里可以随便布局...</h3>
</div>
</div>
</div>
</body>
# 43、表格首列冻结
应用场景和技术要点
重点：表格首列冻结原理，核心知识 position 定位
See the Pen 43、表格首列冻结 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.container {
position: relative; /*相对定位*/
width: 400px;
}
.scroll {
overflow-x: scroll; /*x轴超出部分显示滚动条*/
}
.container table {
border-collapse: collapse; /*合并单元格边框线*/
}
.container table tr th {
min-width: 100px;
}
.container table tr td,
table tr th {
border: 1px solid #333;
text-align: center;
font-weight: 400;
}
/*冻结列相对于最外面container绝对定位*/
table.header {
position: absolute;
left: 0px;
top: 0px;
}
/*冻结列样式*/
table.header tr td,
table.header tr th {
background-color: #ddd;
font-weight: bold;
}
</style>
<body>
<div class="container">
<div class="scroll">
<table>
<thead>
<tr>
<th class="header">分类</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<td>排行</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</thead>
</table>
</div>
<!--冻结列的布局-->
<table class="header">
<thead>
<tr>
<th class="">分类</th>
</tr>
<tr>
<td class="">排行</td>
</tr>
</thead>
</table>
</div>
</body>
# 44、表格首行冻结
应用场景和技术要点
重点：表格首行冻结原理，核心知识 position 定位
See the Pen 44、表格首行冻结 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.container {
position: relative; /*相对定位*/
}
.scroll {
overflow-y: scroll; /*x轴超出部分显示滚动条*/
height: 100px;
}
.container table {
width: 100%;
border-collapse: collapse; /*合并单元格边框线*/
}
.container table tr td,
table tr th {
border: 1px solid #333;
text-align: center;
font-weight: 400;
}
/*冻结列相对于最外面container绝对定位*/
table.header {
width: calc(100% - 17px);
position: absolute;
left: 0px;
right: 0px;
top: 0px;
}
/*冻结列样式*/
table.header tr td,
table.header tr th {
background-color: #ddd;
font-weight: bold;
}
</style>
<body>
<div class="container">
<div class="scroll">
<table>
<thead>
<tr>
<th>分类</th>
<th>排行</th>
<th>歌曲</th>
<th>歌手</th>
<th>时间</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</thead>
</table>
</div>
<!--冻结列的布局-->
<table class="header">
<thead>
<tr>
<th>分类</th>
<th>排行</th>
<th>歌曲</th>
<th>歌手</th>
<th>时间</th>
</tr>
</thead>
</table>
</div>
</body>
# 45、泪滴效果
应用场景和技术要点
重点：flex 布局，transform 旋转、linear-gradient 线性渐变
See the Pen 45、泪滴效果 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.teardrop {
/* 子项内容居中 */
display: flex;
align-items: center;
justify-content: center;
/* 绘制泪滴效果 */
height: 64px;
width: 64px;
border-radius: 0px 50% 50% 50%;
/* 顺时针旋转45deg */
transform: rotate(45deg);
/*绘制背景*/
background-image: linear-gradient(
rgb(246, 69, 69, 0.8),
rgb(246, 69, 69, 0.9),
rgb(246, 69, 69, 0.7)
);
margin-top: 20px;
}
.teardrop-content {
transform: rotate(-45deg);
color: #fff;
}
</style>
<body>
<div class="teardrop">
<div class="teardrop-content">热销</div>
</div>
</body>
# 46、3D 卡片效果
应用场景和技术要点
重点：position 定位、transform 位移和斜切
See the Pen 46、3D卡片效果 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
:root {
--three-dimensions-card-left-side-width: 16px;
}
.three-dimensions-card {
position: relative;
min-height: 100px;
width: 300px;
margin: 50px auto;
border: 1px solid #ddd;
padding: 10px;
}
/* 左边阴影 */
.three-dimensions-card::before {
content: "";
background: #ddd;
position: absolute;
top: var(--three-dimensions-card-left-side-width);
left: 0px;
transform: translate(-100%, 0) skewY(-47deg); /*位移和斜切*/
transform-origin: left top;
height: 100%;
width: var(--three-dimensions-card-left-side-width);
}
/* 底部阴影 */
.three-dimensions-card::after {
background: rgba(0, 0, 0, 0.3);
content: "";
/* Position */
position: absolute;
bottom: 0px;
left: 0px;
transform: translate(0, 100%) skewX(-45deg);
transform-origin: left top;
height: var(--three-dimensions-card-left-side-width);
width: 100%;
}
</style>
<body>
<div class="three-dimensions-card">...</div>
</body>
# 47、时间轴
应用场景和技术要点
重点：position 定位
See the Pen 47、时间轴 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
ul,
li {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.timeline {
position: relative;
}
.timeline .line {
height: 100%;
border-right: 2px solid pink;
position: absolute;
left: 10px; /*值为是圆的半径大小*/
top: 0px;
z-index: -1; /*时间线在最下面*/
}
.item {
margin-bottom: 18px; /*每一项间距*/
}
.item-top {
display: flex;
align-items: center;
}
.item-top-circle {
height: 20px;
width: 20px;
border-radius: 9999px;
background-color: pink;
}
.item-top-title {
flex: 1;
padding-left: 10px;
line-height: 35px;
}
.item-content {
margin-left: 40px;
background-color: pink;
min-height: 100px;
}
</style>
<body>
<div class="timeline">
<!--左侧垂直时间线 -->
<div class="line"></div>
<!-- 时间线上第一项内容 -->
<ul class="timeline-list">
<!-- 每一项内容 -->
<li class="item">
<!-- 每一项圆点和标题 -->
<div class="item-top">
<div class="item-top-circle"></div>
<div class="item-top-title">标题......</div>
</div>
<!-- 每项主体内容 -->
<div class="item-content">...</div>
</li>
<li class="item">
<div class="item-top">
<div class="item-top-circle"></div>
<div class="item-top-title">标题......</div>
</div>
<div class="item-content">...</div>
</li>
</ul>
</div>
</body>
# 48、树状结构思维导图
应用场景和技术要点
重点：树状结构图绘制原理，涉及::before、::after 、first-child、last-child、position 定位、flex 布局
See the Pen 48、树状结构思维导图 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
ul {
list-style-type: none;
margin: 0;
}
.tree-diagram ul {
display: flex;
position: relative;
padding: 20px 10px 0px 10px;
}
/*层级竖线*/
.tree-diagram ul ul::before {
content: "";
border-right: 1px solid red;
position: absolute;
top: 0;
right: 50%;
height: 20px;
width: 50%;
}
.tree-diagram li {
padding: 20px 10px 0px 10px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
/*每项上方横线和右方竖线*/
.tree-diagram li::before {
content: "";
height: 20px;
width: 50%;
border-right: 1px solid blue;
border-top: 1px solid #333;
/* Position */
position: absolute;
top: 0;
right: 50%;
}
/*每项上方横线*/
.tree-diagram li::after {
border-top: 1px solid blue;
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
}
/* 移除第一项和最后一项上方横线*/
.tree-diagram li:first-child::before,
.tree-diagram li:last-child::after {
border-top: none;
}
/*去掉根节点上方竖线*/
li.tree-diagram__root::before {
border-right: none;
}
</style>
<body>
<div class="tree-diagram">
<ul>
<li class="tree-diagram__root">
结构01-1...
<ul>
<li>
结构02-1...
<ul>
<li>结构03-1</li>
<li>结构03-2</li>
<li>
结构03-3
<ul>
<li>结构04-1</li>
<li>结构04-2</li>
<li>结构04-3</li>
</ul>
</li>
</ul>
</li>
<li>结构02-2...</li>
</ul>
</li>
</ul>
</div>
</body>
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X