# 常用的 CSS 主流布局案例（17~24）
涵盖功能和技术点
- 常见的网页布局以及功能模块
- 涉及 HTML/HTML5、CSS/CSS3 主流布局相关知识点（常规布局和 Flex 布局等）
- 专项 CSS 主流布局案例（针对性训练）
# 17、文件放置区域
应用场景和技术要点
重点：如何使文字和图片内容自适应水平和垂直居中，同时文字和图片要禁止被选中
See the Pen 17、文件放置区域 by arry (@arryblog) on CodePen.
点击查看完整代码
<style>
.container {
display: flex; /*弹性布局*/
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
border: 4px dashed rgba(0, 0, 0, 0.3);
border-radius: 4px;
min-height: 200px;
color: #ddd;
font-size: 24px;
user-select: none; /*禁止用户选取（中）元素*/
}
</style>
<body>
<div class="container">
<p>拖放图片或文件至此</p>
<img src="images/folderPlus.png" alt="" />
</div>
</body>
# 18、首字下沉
实现原理
使用 :first-letter伪类选择第一个文字，然后设置 float:left 左浮动即可
See the Pen 18、首字下沉 by arry (@arryblog) on CodePen.
点击查看完整代码
<style>
.container {
position: relative; /*相对定位*/
width: 100px;
border: 1px solid #ddd;
}
.container-content {
height: 200px;
overflow-y: scroll; /*垂直方向超出内容显示滚动条*/
}
.container-fading {
position: absolute;
bottom: 0;
left: 0;
height: 30px;
width: 100%;
background: linear-gradient(
rgba(0, 0, 0, 0.01),
#fff
); /*线性渐变，从黑色透明0.01到白色*/
}
</style>
<body>
<div class="container">
<div class="container-content">
........尾部文字衰减效果尾部文字衰减效果尾部文字衰减效果
尾部文字衰减效果尾部文字衰减效果尾部文字衰减效果
</div>
<div class="container-fading"></div>
</div>
</body>
# 19、尾部文字衰减
应用场景和技术要点
重点：尾部文字衰减效果原理。构建一个长方形盒子，然后定位在当前区块的尾部。为了实现尾部文字衰减效果，我们给长方形添加线性渐变的背景图，背景图从上往下以黑色的 0.01 的透明度过渡到#fff 白色。
See the Pen 19、尾部文字衰减 by arry (@arryblog) on CodePen.
点击查看完整代码
<style>
.container {
position: relative; /*相对定位*/
width: 100px;
border: 1px solid #ddd;
}
.container-content {
height: 200px;
overflow-y: scroll; /*垂直方向超出内容显示滚动条*/
}
.container-fading {
position: absolute;
bottom: 0;
left: 0;
height: 30px;
width: 100%;
background: linear-gradient(
rgba(0, 0, 0, 0.01),
#fff
); /*线性渐变，从黑色透明0.01到白色*/
}
</style>
<body>
<div class="container">
<div class="container-content">
........尾部文字衰减效果尾部文字衰减效果尾部文字衰减效果
尾部文字衰减效果尾部文字衰减效果尾部文字衰减效果
</div>
<div class="container-fading"></div>
</div>
</body>
# 20、分类导航
应用场景和技术要点
重点：元素左右两端对齐，左侧元素宽度自适应缩放。熟练掌握 flex 布局的 flex:1;的应用
See the Pen 20、分类导航 by arry (@arryblog) on CodePen.
点击查看完整代码
<style>
body,
h3 {
margin: 0;
padding: 0;
}
.nav {
display: flex;
align-items: center; /*子项垂直居中*/
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
padding: 12px 0px;
}
.nav h3 {
flex: 1; /*自适应缩放，有空间占满剩余空间，没有就自我收缩*/
margin-right: 16px;
}
.nav span {
margin-right: 16px;
}
</style>
<body>
<div class="nav">
<h3>家用电器</h3>
<span>扫地机</span>
<span>空净</span>
<span>清洁</span>
<span>风扇</span>
</div>
</body>
# 21、左右列表布局
应用场景和技术要点
重点：左右两列自适应布局，如何选择奇偶项来定义样式
See the Pen 21、左右列表布局 by arry (@arryblog) on CodePen.
点击查看完整代码
<style>
.item {
display: flex;
width: 500px;
margin: 16px 0;
border: 1px solid #ddd;
}
.item-image {
width: 128px;
}
.item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.item-info {
flex: 1; /*自适应父元素缩放，占满剩余空间*/
}
.item .item-image:nth-child(odd) {
margin-right: 10px;
}
.item .item-image:nth-child(even) {
margin-left: 10px;
}
</style>
<body>
<div class="item">
<div class="item-image"><img src="images/tx1.jpg" alt="" /></div>
<div class="item-info">.......</div>
</div>
<div class="item">
<div class="item-info">.......</div>
<div class="item-image"><img src="images/tx2.png" alt="" /></div>
</div>
</body>
# 22 、拐角三角形标签
应用场景和技术要点
重点：定位的应用、CSS 绘制三角形，文字旋转transform: rotate(-45deg);处理
See the Pen 22 、拐角三角形标签 by arry (@arryblog) on CodePen.
点击查看完整代码
<style>
.container {
position: relative; /*相对定位*/
width: 150px;
height: 150px;
background-color: #ddd;
}
.container-corner--tl {
position: absolute; /*绝对定位*/
left: 0px;
top: 0px;
width: 60px;
height: 60px;
}
/*放文字内容*/
.container-corner--tl::after {
position: absolute;
content: "推荐";
left: 0px;
top: 0px;
width: 60px;
height: 60px;
transform: rotate(-45deg); /*旋转文字*/
text-align: center;
color: #fff;
font-size: 14px;
line-height: 2;
}
/*绘制三角形图标*/
.container-corner--tl::before {
content: "";
width: 0;
position: absolute;
left: 0;
top: 0;
border: 30px solid transparent;
border-top: 30px solid red;
border-left: 30px solid red;
}
</style>
<body>
<div class="container">
<div class="container-corner container-corner--tl">推荐</div>
..........................
</div>
</body>
# 23、右侧悬浮菜单
应用场景和技术要点
重点：如何把元素固定在浏览器右边中间位置，利用position:fixed;和transform: translate(0px, -50%);来实现
See the Pen 23、右侧悬浮菜单 by arry (@arryblog) on CodePen.
点击查看完整代码
<style>
body {
height: 2000px;
}
.container {
right: 0;
position: fixed;
top: 50%;
transform: translate(0px, -50%);
background-color: red;
width: 100px;
height: 200px;
}
</style>
<body>
<div class="container">...</div>
</body>
# 24、文件夹结构
应用场景和技术要点
重点：每一层结构中对应的竖线和横的绘制原理。这里涉及到 padding、margin、position、::after、::before、transform 的综合应用
See the Pen 24、文件夹结构 by arry (@arryblog) on CodePen.
点击查看完整代码
<style>
:root {
--folder-structure-item-height: 15px;
--folder-structure-item-margin-left: 30px;
--folder-structure-item-padding-top: 15px;
}
body,
ul,
li {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
/*左外边距，产生不同级别水平方向间距*/
margin-left: var(--folder-structure-item-margin-left);
}
.folder-structure {
padding-left: 100px;
}
.folder-structure li {
/*上内边距，产生每一项上下间距*/
padding-top: var(--folder-structure-item-padding-top);
position: relative;
}
/*结构-竖直线*/
.folder-structure li::before {
border-left: 1px solid #333;
content: "";
position: absolute;
top: 0;
left: 0;
/*向左移动 左外边距宽*/
transform: translate(
calc(-1 * var(--folder-structure-item-margin-left)),
0
);
height: 100%;
}
/*结构-水平横线*/
.folder-structure li::after {
border-bottom: 1px solid #333;
content: "";
left: 0;
position: absolute;
/*水平横线与li顶部的位置*/
top: calc(
var(--folder-structure-item-padding-top) + var(
--folder-structure-item-height
) / 2
);
transform: translate(-100%, 0);
width: var(--folder-structure-item-margin-left);
}
/* 移除每一级最后一项的竖直边框线 */
.folder-structure li:last-child::before {
height: calc(
var(--folder-structure-item-padding-top) + var(
--folder-structure-item-height
) / 2
);
}
</style>
<body>
<div class="folder-structure">
<ul>
<!--一级结构 -->
<li>
1...
<ul>
<!-- 二级结构 -->
<li>
1.1...
<ul>
<!-- 三级结构 -->
<li>1.1.1...</li>
<li>1.1.2...</li>
</ul>
</li>
<li>1.2...</li>
<li>1.3...</li>
</ul>
</li>
</ul>
</div>
</body>
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X