# 常用的 CSS 主流布局案例（57~64）

涵盖功能和技术点

常见的网页布局以及功能模块
涉及 HTML/HTML5、CSS/CSS3 主流布局相关知识点（常规布局和 Flex 布局等）
专项 CSS 主流布局案例（针对性训练）

# 57、弹窗效果

应用场景和技术要点

重点：从上往下布局时，如何让底部的两个按扭在最右边显示。给最底部元素添加 justify-content: flex-end; 使子项在最右侧靠

See the Pen 057 - 弹窗效果 by arry (@arryblog) on CodePen.

点击查看完整代码

<style>
  .modal {
    border: 1px solid #333;
    border-radius: 4px;
    padding: 10px;
  }
  .modal-header {
    display: flex;
    justify-content: space-between; /*两端对齐*/
    align-items: center; /*垂直居中对齐*/
    border-bottom: 1px solid #333;
  }
  .modal-header span {
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  /*关闭按扭*/
  .modal-header span::after,
  .modal-header span::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 1px;
    background-color: #333;
    position: absolute;
    left: 0;
    top: 50%;
  }
  .modal-header span::after {
    transform: rotate(45deg); /*顺序针旋转45deg*/
  }
  .modal-header span::before {
    transform: rotate(-45deg); /*逆时针旋转45deg*/
  }
  .modal-content {
    min-height: 100px;
  }
  .modal-footer {
    display: flex;
    justify-content: flex-end; /*右端对齐*/
  }
  /*按扭共同样式*/
  .modal-footer button {
    margin-right: 10px;
    width: 100px;
    height: 35px;
    background-color: tomato;
    color: #fff;
    border: none;
  }
  /*取消按扭样式*/
  .modal-footer button.cancel {
    background-color: #ddd;
    color: #333;
  }
</style>
<body>
  <div class="modal">
    <!-- 弹窗标题与关闭按扭 -->
    <div class="modal-header">
      <h3>登录</h3>
      <span class="close-button"></span>
    </div>
    <!-- 弹窗内容 -->
    <div class="modal-content">..........</div>
    <!-- 底部按扭 -->
    <div class="modal-footer">
      <button>确定</button>
      <button class="cancel">取消</button>
    </div>
  </div>
</body>

# 58、消息框

应用场景和技术要点

重点：使 flex 中子项两端对齐，添加 justify-content: space-between;

左侧元素自适应父元素缩放,给左侧元素添加 flex:1;同时内容放不下时自动换行 flex-wrap:wrap;

See the Pen 58、消息框 by arry (@arryblog) on CodePen.

点击查看完整源代码

<style>
  .notification {
    display: flex;
    justify-content: space-between;
    border: 1px solid #555;
    padding: 20px;
    border-radius: 10px;
  }
  .content {
    flex: 1;
    flex-wrap: wrap;
    margin-right: 10px;
  }
</style>
<body>
  <div class="notification">
    <div class="content">......</div>
    <span class="close-button">X</span>
  </div>
</body>

# 59、对话框

应用场景和技术要点

重点：如何绘制向上的箭头，然后利用绝对定位把箭头定位到合适的位置。

See the Pen 59、对话框 by arry (@arryblog) on CodePen.

点击查看完整源代码

<style>
  .container {
    position: relative;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 10px;
  }
  /*三角形箭头*/
  .container-arrow {
    height: 16px;
    width: 16px;
    background-color: #fff;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
    position: absolute;
    left: 32px;
    top: -1px; /*注意这里是-1不是0*/
    transform: translate(50%, -50%) rotate(45deg);
  }
</style>
<body>
  <div class="container">
    <div class="container-arrow"></div>
    ......<br />
    ........
  </div>
</body>

# 60、进度条

应用场景和技术要点

重点：进度条的实现原理。在元素中添加一个子元素，进度条的进度百分比，就是子元素相对父元素的宽度百比分。

See the Pen 60、进度条 by arry (@arryblog) on CodePen.

点击查看完整源代码

<style>
  .progress-bar {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 9999px;
  }
  .progress-bg {
    display: flex;
    align-items: center; /*文字水平居中*/
    justify-content: center; /*文字垂直居中*/
    background-color: #357edd;
    color: #fff;
    border-radius: 9999px;
  }
</style>
<body>
  <div class="progress-bar">
    <div class="progress-bg" style="width: 40%">40%</div>
  </div>
</body>

# 61、标记标签

应用场景和技术要点

重点：元素如何水平排列，同时垂直居中显示。单独定一个样式，来定义鼠标点击后的样式效果。

See the Pen 61、标记标签 by arry (@arryblog) on CodePen.

点击查看完整源代码

<style>
  .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 9999px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
  }
  .chip-content {
    margin-right: 5px;
  }
  .chip.current {
    background-color: pink;
    border: 1px solid rgb(255, 122, 144);
    color: #fff;
  }
  .chip span {
    display: none;
  }
  /*选中标签样式*/
  .current span {
    color: rgb(255, 122, 144);
    display: block;
  }
</style>
<body>
  <div class="chip">
    <div class="chip-content">颜色</div>
    <span>x</span>
  </div>
  <div class="chip current">
    <div class="chip-content">材料</div>
    <span>x</span>
  </div>
  <div class="chip">
    <div class="chip-content">价格</div>
    <span>x</span>
  </div>
</body>

# 62、可调整框布局

应用场景和技术要点

重点：如何控制子元素位置，使子元素相对于父元素某一边框（水平和垂直居中），同时元素相对父元素某一个某一个边水平或垂直居中

See the Pen 62、可调整框布局 by arry (@arryblog) on CodePen.

点击查看完整源代码

<style>
  body {
    padding: 20px;
  }
  .container {
    width: 200px;
    height: 100px;
    border: 1px dashed #333;
    position: relative;
  }
  .container-resizer {
    /*小正方形共同样式*/
    height: 12px;
    width: 12px;
    position: absolute;
    border: 1px solid #555;
  }
  .container-resizer--tl {
    /*左上*/
    cursor: nwse-resize;
    left: 0px;
    top: 0px;
    transform: translate(-50%, -50%);
  }
  .container-resizer--tc {
    /*上中*/
    cursor: ns-resize;
    left: 50%;
    top: 0px;
    transform: translate(-50%, -50%);
  }
  .container-resizer--tr {
    /*上右*/
    cursor: nesw-resize;
    right: 0px;
    top: 0px;
    transform: translate(50%, -50%);
  }
  .container-resizer--rc {
    /*右中*/
    cursor: ew-resize;
    right: 0px;
    top: 50%;
    transform: translate(50%, -50%);
  }
  .container-resizer--rb {
    /*右底*/
    cursor: nwse-resize;
    bottom: 0px;
    right: 0px;
    transform: translate(50%, 50%);
  }
  .container-resizer--bc {
    /*底中间*/
    cursor: ns-resize;
    bottom: 0px;
    right: 50%;
    transform: translate(50%, 50%);
  }
  .container-resizer--bl {
    /*左底*/
    cursor: nesw-resize;
    bottom: 0px;
    left: 0px;
    transform: translate(-50%, 50%);
  }
  .container-resizer--lc {
    /*左中*/
    cursor: ew-resize;
    left: 0px;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<body>
  <div class="container">
    <!-- 左上角方块 -->
    <div class="container-resizer container-resizer--tl"></div>
    <!-- 顶部中间方块 -->
    <div class="container-resizer container-resizer--tc"></div>
    <!-- 右上角方块-->
    <div class="container-resizer container-resizer--tr"></div>
    <!-- 右中间方块 -->
    <div class="container-resizer container-resizer--rc"></div>
    <!-- 右底部方块-->
    <div class="container-resizer container-resizer--rb"></div>
    <!-- 底部中间方块 -->
    <div class="container-resizer container-resizer--bc"></div>
    <!--底部左边方块-->
    <div class="container-resizer container-resizer--bl"></div>
    <!-- 左边中间方块 -->
    <div class="container-resizer container-resizer--lc"></div>
    ...............
  </div>
</body>

# 63、提示框

应用场景和技术要点

重点：主要考察定位，子元素如何相对父元素水平居中。

See the Pen 63、提示框 by arry (@arryblog) on CodePen.

点击查看完整源代码

<style>
  .tip {
    position: relative;
    width: 200px;
    min-height: 60px;
    margin-top: 200px;
    background-color: #ddd;
  }
  .tip-content {
    opacity: 0;
    pointer-events: none;
    background-color: pink;
    min-width: 100px;
    border-radius: 2px;
    padding: 10px;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -8px);
    z-index: 10;
  }
  .tip-content::after {
    display: block;
    content: "";
    /*绘制三角形*/
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-top-color: pink;
    pointer-events: none;
    /*三角形位置*/
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    z-index: 10;
  }
  /*显示箭头和内容并还原指针事件*/
  .tip:hover .tip-content {
    opacity: 1;
    pointer-events: initial;
  }
</style>
<body>
  <div class="tip">
    <div class="tip-content">.........</div>
    ...
  </div>
</body>

# 064- 表单验证图标

应用场景和技术要点

用于表单验证，成功与否的样式展示

点击查看完整源代码

<!-- 引用阿里图标库 -->
<link rel="stylesheet" href="iconfont/iconfont.css" />
<style>
  .container {
    position: relative;
    width: 200px;
  }
  /*输入框样式*/
  .user-name {
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    height: 40px;
    width: 100%;
    box-sizing: border-box; /*怪异盒模型*/
    padding-right: 24px; /*留给小图标的空间*/
  }
  .user-name--icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
    cursor: pointer;
    font-size: 30px;
  }
  /*打钩*/
  .icon-gou {
    color: green;
  }
  /*打叉*/
  .icon-cha {
    color: red;
  }
</style>
<body>
  <div class="container">
    <input class="user-name" />
    <!-- 打钩图标 -->
    <span class="user-name--icon iconfont icon-gou"></span>
    <!-- 打叉图标 -->
    <!-- <span class="user-name--icon iconfont icon-cha"></span> -->
  </div>
</body>

← 常用的 CSS 主流布局案例（49~56）常用的 CSS 主流布局案例（65~72） →

大厂最新技术学习分享群

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

# 常用的 CSS 主流布局案例（57~64）

# 57、弹窗效果

# 58、消息框

# 59、对话框

# 60、进度条

# 61、 标记标签

# 62、可调整框布局

# 63、提示框

# 064- 表单验证图标

# 61、标记标签