# 常用的 CSS 主流布局案例（65~72）
涵盖功能和技术点
- 常见的网页布局以及功能模块
- 涉及 HTML/HTML5、CSS/CSS3 主流布局相关知识点（常规布局和 Flex 布局等）
- 专项 CSS 主流布局案例（针对性训练）
# 65、 带图标按扭
应用场景和技术要点
重点：如何控制 子项相对父元素水平和垂直方向居中
See the Pen 65、 带图标按扭 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.button {
display: flex;
align-items: center; /*垂直居中*/
justify-content: center;
background-color: palevioletred;
border: none;
color: #fff;
border-radius: 20px;
padding: 3px 20px;
}
/*按扭图标样式*/
.button .icon {
margin-right: 5px;
width: 20px;
height: 20px;
background: url("images/xs.png") no-repeat;
background-size: cover;
}
</style>
<body>
<button class="button">
<span class="icon"></span>
找相似
</button>
</body>
# 66、 滑动器
应用场景和技术要点
重点：滑动器的制作原理。本质就是三个 div 元素排成一排，然后最右侧的元素宽度自适应缩放。通过改变最左边元素的宽度来实现滑动器进度。
See the Pen 66、 滑动器 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.slider {
height: 32px;
display: flex; /*弹性布局，默认水平排列*/
align-items: center; /*垂直居中*/
}
/*滑动条左侧线条*/
.slider-left {
height: 2px;
background-color: pink;
}
/*滑动条中间圆手柄*/
.slider-circle {
height: 32px;
width: 32px;
border-radius: 9999px;
background-color: pink;
}
/*滑动条右侧线条*/
.slider-right {
flex: 1;
height: 2px;
background-color: #ddd;
}
</style>
<body>
<div class="slider">
<!--左边线条 当前进度值来决定宽度 -->
<div class="slider-left" style="width: 40%"></div>
<!-- 圆点 -->
<div class="slider-circle"></div>
<!-- 右边线条 -->
<div class="slider-right"></div>
</div>
</body>
# 67、自定义复选框
应用场景和技术要点
重点：主要考察input:checked 与 + 相邻兄弟选择的应用。不过这里要特别注意<label>标签的作用。
See the Pen 67、自定义复选框 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.label {
display: inline-flex;
align-items: center; /*垂直居中显示*/
cursor: pointer;
font-size: 14px;
}
/*隐藏真实的复选框*/
.label-input {
display: none;
}
.label-square {
/*复选框外轮廓样式*/
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
margin-right: 8px;
padding: 4px;
}
/*中间选中区样式*/
.label-checkbox {
border-radius: 4px;
height: 14px;
width: 14px;
}
/*复选框被选中时点亮背景色*/
input:checked + .label-square .label-checkbox {
background-color: #00449e;
}
</style>
<body>
<label class="label">
<input type="checkbox" class="label-input" />
<div class="label-square">
<div class="label-checkbox"></div>
</div>
苹果
</label>
<!--重复以上代码-->
</body>
# 68、 自定义单选按扭
应用场景和技术要点
重点：主要考察input:checked 与 + 相邻兄弟选择的应用。不过这里要特别注意<label>标签的作用。
See the Pen 68、 自定义单选按扭 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
label {
align-items: center;
display: inline-flex;
cursor: pointer;
}
/*隐藏真实按扭*/
.label-input {
display: none;
}
/*最外层圆*/
.label-circle {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 9999px;
margin-right: 8px;
padding: 4px;
}
/*单选按扭中间的圆*/
.label-radio {
height: 16px;
width: 16px;
border-radius: 9999px;
background-color: transparent;
}
/*单选按扭选中时点亮中间圆背景*/
.label-input:checked + .label-circle .label-radio {
background-color: #00449e;
}
</style>
<body>
<label class="label">
<!--真实的单选按扭-->
<input type="radio" class="label-input" name="sex" checked />
<!--自定义单选按扭-->
<div class="label-circle">
<div class="label-radio"></div>
</div>
男
</label>
<label class="label">
<!--真实的单选按扭-->
<input type="radio" class="label-input" name="sex" />
<!--自定义单选按扭-->
<div class="label-circle">
<div class="label-radio"></div>
</div>
女
</label>
</body>
# 69、 浮动文字
应用场景和技术要点
重点：主要考察:placeholder-shown 伪类选择器 与 transition 过渡动画的结合应用。
See the Pen 69、 浮动文字 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.container {
position: relative;
margin-top: 10px;
}
.text-input {
height: 35px;
}
/*标签样式*/
.container-label {
position: absolute;
left: 8px;
top: 0;
opacity: 0; /*默认隐藏*/
transition: all 200ms; /*属性变化时，过渡动画*/
}
/*当未显示输入的占位符时*/
.text-input:not(:placeholder-shown) + .container-label {
background: #fff;
transform: translate(0, -50%);
opacity: 1;
}
</style>
<body>
<div class="container">
<input placeholder="用户名" class="text-input" />
<label class="container-label">用户名</label>
</div>
<div class="container">
<input type="password" placeholder="密码" class="text-input" />
<label class="container-label">密码</label>
</div>
</body>
# 70、 表单搜索
应用场景和技术要点
重点：左右两列布局
See the Pen 70、 表单搜索 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.search {
display: flex;
width: 100%;
}
/*搜索框样式*/
.search-input {
border: 1px solid rgba(0, 0, 0, 0.3);
flex: 1;
height: 35px;
outline: none;
}
/*搜索按扭样式*/
.search-button {
align-items: center;
display: flex;
justify-content: center;
background-color: tomato;
color: #fff;
padding: 0px 20px;
cursor: pointer;
}
</style>
<body>
<div class="search">
<input type="text" class="search-input" />
<div class="search-button">搜索</div>
</div>
</body>
# 71 、自定义开关
应用场景和技术要点
重点：主要考察 input:checked 与 +号 相邻兄弟选择的结合应用。
See the Pen 71 、自定义开关 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.switch {
display: inline-block;
width: 60px;
height: 34px;
position: relative;
}
/*隐藏真实复选框*/
.switch input {
display: none;
}
/*开关样式*/
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
cursor: pointer;
transition: 0.4s;
border-radius: 20px;
}
.slider:before {
/*开关按扭*/
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 999px;
-webkit-transition: 0.4s;
transition: 0.4s;
}
/*被选中时按扭的背景色*/
input:checked + .slider {
background-color: #2196f3;
}
/*被选中时按扭位置*/
input:checked + .slider::before {
transform: translateX(26px);
}
</style>
<body>
<label class="switch">
<input type="checkbox" />
<div class="slider"></div>
</label>
<label class="switch">
<input type="checkbox" checked />
<div class="slider"></div>
</label>
</body>
# 72、星级评估
应用场景和技术要点
- 如何选择一个元素后面所有元素兄弟元素，使用 ~ 后续兄弟选择器。
- 如何使元素从右往左排列的。可以使用 flex-direction: row-reverse;改变元素的排列顺序，从右往左排列。
- 实心星与空心星如何制作出来。
See the Pen 72、星级评估 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.rating {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row-reverse; /*从右往左排列，关键性代码*/
}
.rating-star {
position: relative;
margin: 0 2px;
font-size: 42px;
color: #ddd;
}
.rating-star::before {
content: "\2605"; /*实心星*/
left: 0;
position: absolute;
}
/*鼠标滑动到星上时，星后面对应的星都变红*/
.rating-star:hover:before,
.rating-star:hover ~ .rating-star:before {
color: red;
}
</style>
<body>
<div class="rating">
<span class="rating-star">☆</span>
<span class="rating-star">☆</span>
<span class="rating-star">☆</span>
<span class="rating-star">☆</span>
<span class="rating-star">☆</span>
</div>
</body>
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X