# 常用的 CSS 主流布局案例（33~40）
涵盖功能和技术点
- 常见的网页布局以及功能模块
- 涉及 HTML/HTML5、CSS/CSS3 主流布局相关知识点（常规布局和 Flex 布局等）
- 专项 CSS 主流布局案例（针对性训练）
# 33 、价格标签
应用场景和技术要点
重点：如何利用边框绘制三角形和圆形，同时控制圆形和三角形位置。
See the Pen 33 、价格标签 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
:root {
--price-tag-background: red;
--price-tag-height: 32px;
}
.price-tag {
margin-left: 30px;
position: relative;
max-width: 80px;
padding: 0px 5px;
height: var(--price-tag-height);
background: var(--price-tag-background);
color: #fff;
/* 标签中内容水平垂直居 */
display: flex;
align-items: center;
justify-content: center;
}
/* 绘制三角形 */
.price-tag::before {
content: "";
border: calc(var(--price-tag-height) / 2) solid transparent;
border-right-color: red;
/* 控制三角形位置 */
position: absolute;
left: 0px;
top: 0px;
transform: translate(-100%, 0px); /*水平向左移动自身宽度*/
}
/* 绘制标签中白色圆点*/
.price-tag::after {
content: "";
width: 10px;
height: 10px;
background: #fff;
border-radius: 9999rem;
/*控制圆点位置*/
position: absolute;
left: 0;
top: 50%;
transform: translate(-50%, -50%); /*向左和向上移动自身宽度一半*/
}
</style>
<body>
<div class="price-tag">￥99.09</div>
</body>
# 34 、不定项自适应水平垂直居中
应用场景和技术要点
重点：flex 弹性布局的综合应用与理解
See the Pen 34 、不定项自适应水平垂直居中 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
body,
h3 {
margin: 0;
padding: 0;
}
.container {
/*子项水平垂直据中*/
display: flex;
align-items: center;
justify-content: center;
min-height: 100px;
}
.container-column {
/*内容垂直方向展示，水平垂直居中*/
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
/* 子项间间距 */
margin: 0 8px;
padding: 10px;
/*边框和圆角*/
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.container .container-column .img {
width: 100%;
background-color: #ddd;
height: 100px;
}
</style>
<body>
<div class="container">
<div class="container-column">
<h3>title...</h3>
<div class="img">...</div>
</div>
<div class="container-column">
<h3>title...</h3>
<div class="img">...</div>
<div class="description">.....</div>
<div class="price">￥33.0</div>
<div class="button">提交</div>
</div>
<div class="container-column">
<h3>title...</h3>
<div class="img">...</div>
<div class="description">.....</div>
<div class="price">￥33.0</div>
</div>
</div>
</body>
# 35、新闻列表
应用场景和技术要点
重点：flex 布局实现两端对齐，同时单行文本溢出显示省略号
See the Pen 35、新闻列表 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
body,
ul {
margin: 0;
padding: 0;
}
ul li {
display: flex;
align-items: center;
justify-content: space-between; /*子项两端对齐*/
border-bottom: 1px dashed #ddd;
margin: 0px;
padding: 8px 0px;
}
ul li .title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
ul li .date {
flex-shrink: 0;
}
</style>
<body>
<ul>
<li>
<div class="title">新闻标题</div>
<div class="date">2022-05-31</div>
</li>
<li>
<div class="title">新闻标题</div>
<div class="date">2022-05-31</div>
</li>
<li>
<div class="title">新闻标题</div>
<div class="date">2022-05-31</div>
</li>
</ul>
</body>
# 36 、折叠式问答
应用场景和技术要点
重点：折叠式效果的布局原理
See the Pen 36 、折叠式问答 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.item {
border-bottom: 1px solid #ddd;
margin: 5px 10px;
}
.item-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.item-answer {
display: none;
padding-left: 20px;
font-size: 14px;
}
.item-head .icon {
width: 32px;
height: 32px;
background: url(images/down.png);
transform: rotate(-180deg);
}
.item-head .icon.down {
transform: rotate(0deg);
}
.item-answer--show {
display: block;
}
</style>
<body>
<div class="container">
<div class="item">
<!-- 问题标题 -->
<div class="item-head">
<div class="title">CSS如何实现样式的隔离</div>
<span class="icon"></span>
</div>
<div class="item-answer">....</div>
<!--问题答案-->
</div>
<div class="item">
<div class="item-head">
<div class="title">设置元素水平和垂直居中的7种方法？</div>
<span class="icon down"></span>
</div>
<div class="item-answer item-answer--show">
<p>flex...</p>
<p>position....</p>
</div>
</div>
</div>
</body>
# 37、丝带
应用场景和技术要点
重点：边框的灵活应用及 position 定位的应用
See the Pen 37、丝带 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.ribbon {
height: 32px;
/*弹性布局，子项水平垂直居中*/
display: flex;
align-items: center;
justify-content: center;
background-color: #bbb;
position: relative; /*相对定位*/
margin: 100px 50px; /*可取掉*/
}
/*左右两侧折叠图*/
.ribbon::after,
.ribbon::before {
content: "";
border: 16px solid #ccc;
border-left-color: transparent; /*左三边框线（三角形）颜色透明*/
position: absolute;
bottom: -8px;
z-index: -1;
}
.ribbon::before {
left: -24px;
}
.ribbon::after {
right: -24px;
transform: rotate(180deg);
}
.ribbon-triangle {
/*左右两侧小三角形共同样式*/
position: absolute;
top: 100%;
border: 8px solid transparent;
border-top-color: #aaa;
}
.ribbon-triangle--left {
/*左侧小三角形*/
border-right-width: 0;
left: 0;
}
.ribbon-triangle--right {
/*右侧小三角形*/
border-left-width: 0;
right: 0;
}
</style>
<body>
<div class="ribbon">
<!-- 左下角三角形 -->
<div class="ribbon-triangle ribbon-triangle--left"></div>
<!--右下角三角形 -->
<div class="ribbon-triangle ribbon-triangle--right"></div>
<!--丝带中内容-->
hot.....
</div>
</body>
# 38、标题分隔线
应用场景和技术要点
重点：隔线的制作原理。涉及 border 边框、position 定位、flex 弹性、transform 位移
See the Pen 38、标题分隔线 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.container {
min-height: 150px;
width: 300px;
border: 1px solid #ddd;
}
.container .title {
margin: 0px 10px; /*分隔线左右两侧间距*/
height: 25px;
border-bottom: 1px solid #ddd;
position: relative; /*相对定位*/
/*子项水平居中*/
display: flex;
justify-content: center;
}
/*标题文本区*/
.title-text {
height: 30px;
padding: 0px 10px;
background: #ddd;
box-shadow: 0px 0px 0px 5px #fff;
line-height: 30px;
text-align: center;
/*设置标题文本区与分隔线水平垂直居中*/
position: absolute;
top: 100%;
transform: translateY(-50%);
}
</style>
<body>
<div class="container">
<!-- 标题 -->
<div class="title">
<div class="title-text">最新推荐</div>
</div>
<!--内容区-->
......
</div>
</body>
# 39、卡片堆叠效果
应用场景和技术要点
重点：position 定位、z-index 属性、transform 旋转
See the Pen 39、卡片堆叠效果 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.card {
width: 200px;
height: 300px;
margin: 100px auto;
padding: 10px; /*文字与卡片有间距*/
position: relative; /*相对定位*/
}
.card-item {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
z-index: -1; /*让文字显示在最上*/
background-color: rgb(255, 255, 255);
border: 1px solid #333;
border-radius: 10px;
/*var函数调用自定义属--i的值， calc可用于属性值的算术运算*/
transform: rotate(calc(var(--i) * 5deg)); /*卡片旋转角度*/
}
</style>
<body>
<div class="card">
<div class="card-item" style="--i: 5"></div>
<div class="card-item" style="--i: 4"></div>
<div class="card-item" style="--i: 3"></div>
<div class="card-item" style="--i: 2"></div>
<div class="card-item" style="--i: 1"></div>
<div class="card-item" style="--i: 0"></div>
<!--最上一张卡片内容-->
<div class="card-conten">..........</div>
</div>
</body>
# 40、图章边框
应用场景和技术要点
重点： radial-gradient 径向渐变的绘图原理和应用
See the Pen 40、图章边框 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.container {
background-color: #ddd;
background-image: radial-gradient(#fff 50%, transparent 50%);
background-position: -5px -5px;
background-repeat: repeat;
background-size: 10px 10px;
padding: 5px;
width: 200px; /*宽度要为10的倍数*/
}
.container-inner {
background-color: #ddd;
padding: 10px;
line-height: 30px;
}
</style>
<body>
<div class="container">
<div class="container-inner">...<br />.......<br />....</div>
</div>
</body>
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X