# 常用的 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>

← 常用的 CSS 主流布局案例（57~64）常用的 CSS 主流布局案例（73~80） →

大厂最新技术学习分享群

微信扫一扫进群，获取资料

# 常用的 CSS 主流布局案例（65~72）

# 65、 带图标按扭

# 66、 滑动器

# 67、自定义复选框

# 68、 自定义单选按扭

# 69、 浮动文字

# 70、 表单搜索

# 71 、自定义开关

# 72、星级评估

# 65、带图标按扭

# 66、滑动器

# 68、自定义单选按扭

# 69、浮动文字

# 70、表单搜索