# 常用的 CSS 主流布局案例（25~32）
涵盖功能和技术点
- 常见的网页布局以及功能模块
- 涉及 HTML/HTML5、CSS/CSS3 主流布局相关知识点（常规布局和 Flex 布局等）
- 专项 CSS 主流布局案例（针对性训练）
# 25 、全屏背景
应用场景和技术要点
重点：背景图如何自适应浏览器屏幕大小，同时不会因为放大或缩小而变形
See the Pen 25 、全屏背景 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
html,
body {
margin: 0;
height: 100%;
}
.container {
display: flex;
flex-direction: column; /*主轴为y轴，内容默认从上往下排列*/
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
/*以下代码设置全屏背景图*/
height: 100%;
width: 100%;
background: url(images/6.jpg) center no-repeat;
background-size: cover;
}
</style>
<body>
<div class="container">...........</div>
</body>
# 26 、文字头像
应用场景和技术要点
重点：头像中文字水平垂直居中显示.
See the Pen 26 、文字头像 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.avatar {
position: relative;
display: inline-block;
vertical-align: middle;
height: 48px;
width: 48px;
border-radius: 50%;
background-color: #333;
color: #fff;
}
/*内容水平垂直居中*/
.avatar-letters {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="avatar">
<div class="avatar-letters">Q</div>
</div>
</body>
# 27 、会话布局
应用场景和技术要点
重点：左下角的图标绘制原理。结合border-radius和box-shadow来绘制,然后用 position 定位调整位置
See the Pen 27 、会话布局 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
/*:root是根选择器，相当于html*/
:root {
--inverted-corners-background: pink; /*自定义属性 会话框背景色*/
--inverted-corners-size: 20px; /*自定义属性 转角大小*/
}
.inverted-corners {
position: relative; /*相对定位*/
background-color: var(
--inverted-corners-background
); /*var函数 获取自定义属性*/
padding: 20px;
min-height: 100px;
border-radius: 20px 20px 20px 0px; /*圆角*/
color: #fff;
}
.inverted-corners::before {
content: "";
/*控制转角位置*/
position: absolute;
bottom: calc(-2 * var(--inverted-corners-size)); /*与高度值一样*/
left: 0;
/*绘制转角*/
height: calc(2 * var(--inverted-corners-size));
width: var(--inverted-corners-size);
background-color: transparent;
border-top-left-radius: var(--inverted-corners-size);
box-shadow: 0px calc(-1 * var(--inverted-corners-size)) var(
--inverted-corners-background
); /*阴影*/
}
</style>
<body>
<div class="inverted-corners">..........</div>
</body>
# 28 、 键盘快捷键
应用场景和技术要点
重点：熟悉<kbd>标签和 box-shadow 内外阴影
See the Pen 28 、 键盘快捷键 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.container {
background-color: #ddd;
border-radius: 4px;
color: #333;
padding: 8px;
box-shadow: 0px -2px 0px inset rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4) 0px 1px
1px;
}
</style>
<body>
<!-- <kbd> 标签定义键盘文本样式。 -->
<kbd class="container">Alt+Shift </kbd>
</body>
# 29 、分层卡片
应用场景和技术要点
重点：box-shadow 的应用
See the Pen 29 、分层卡片 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.card {
margin: 0px 20px;
position: relative;
border: 1px solid #ddd;
background-color: #fff;
padding: 10px;
box-shadow: 10px 10px 0px #ddd; /*水平和垂直阴影*/
}
</style>
<body>
<div class="card">...</div>
</body>
# 30 、线条纸张
应用场景和技术要点
重点：掌握linear-gradient绘图原理，要结合background-size和background-position属性一起来理解和应用。
See the Pen 30 、线条纸张 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.container {
min-height: 100px;
padding: 10px 20px;
border: 1px solid #333;
}
.page {
/*线性渐变绘制线条*/
background-image: linear-gradient(#ddd 1px, #fff 0px);
background-size: 100% 35px; /*绘制图片大小*/
background-position-y: 34px; /*绘制线条垂直方向起始位置*/
line-height: 35px;
font-size: 14px;
}
</style>
<body>
<div class="container">
<div class="page">
line1......<br />
.....line 2......<br />
line 3......<br />
......
</div>
</div>
</body>
# 31 、分类标签
应用场景和技术要点
重点： 如何消除inline-block元素间空白间隙。
See the Pen 31 、分类标签 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
a {
text-decoration: none;
}
.tag-list {
border: 1px solid #ddd;
padding: 0px 10px 6px;
font-size: 0; /*字体大小为0，是用来消除a标签间间距*/
background-color: rgb(231, 228, 228);
}
.tag-list a {
display: inline-block;
height: 23px;
line-height: 23px;
padding: 0px 10px;
margin: 6px 10px 0px 0px;
border: 1px solid #dcdcdc;
border-radius: 3px;
background: #f9f9f9;
font-size: 14px;
color: #666;
vertical-align: top;
}
</style>
<body>
<div class="tag-list">
<a href="" class="tag-item">前端开发</a>
<a href="" class="tag-item">web前端</a>
<a href="" class="tag-item">html</a>
<a href="" class="tag-item">css</a>
<a href="" class="tag-item">javascript</a>
<a href="" class="tag-item">vue</a>
<a href="" class="tag-item">html5</a>
<a href="" class="tag-item">css3</a>
<a href="" class="tag-item">react</a>
<a href="" class="tag-item">css</a>
<a href="" class="tag-item">....</a>
<a href="" class="tag-item">.......</a>
</div>
</body>
# 32、遮罩层布局
应用场景和技术要点
重点： position 绝对定位、object-fit 图片裁剪、按扭水平垂直居中
See the Pen 32、遮罩层布局 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.container {
position: relative;
width: 150px;
height: 150px;
border: 1px solid #ddd;
overflow: hidden;
}
.container img.video {
width: 100%;
height: 100%;
/*保持图片原有尺寸比例，以width:100%;和height:100%;大小来裁剪图片*/
object-fit: cover;
}
.container .mask {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
/*遮罩层中内容水平垂直居中*/
display: flex;
align-items: center;
justify-content: center;
}
</style>
<body>
<div class="container">
<img src="images/mz1.jpg" class="video" />
<!--半透明遮罩层和播放按扭-->
<div class="mask">
<img src="images/play-filling.png" alt="" />
</div>
</div>
</body>
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X