# 常用的 CSS 主流布局案例(17~24)

涵盖功能和技术点

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

# 17、文件放置区域

应用场景和技术要点

重点:如何使文字和图片内容自适应水平和垂直居中,同时文字和图片要禁止被选中

See the Pen 17、文件放置区域 by arry (@arryblog) on CodePen.

点击查看完整代码
<style>
  .container {
    display: flex; /*弹性布局*/
    align-items: center; /*垂直居中*/
    justify-content: center; /*水平居中*/
    border: 4px dashed rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    min-height: 200px;
    color: #ddd;
    font-size: 24px;
    user-select: none; /*禁止用户选取(中)元素*/
  }
</style>
<body>
  <div class="container">
    <p>拖放图片或文件至此</p>
    <img src="images/folderPlus.png" alt="" />
  </div>
</body>

# 18、首字下沉

应用场景和技术要点

重点:滚动条底部的内容会有从不透明到透明的衰减效果。运用定位linear-gradient(rgba(0, 0, 0, 0.01), #fff);来实现

See the Pen 18、首字下沉 by arry (@arryblog) on CodePen.

点击查看完整代码
<style>
  .container {
    position: relative; /*相对定位*/
    width: 100px;
    border: 1px solid #ddd;
  }
  .container-content {
    height: 200px;
    overflow-y: scroll; /*垂直方向超出内容显示滚动条*/
  }
  .container-fading {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 30px;
    width: 100%;
    background: linear-gradient(
      rgba(0, 0, 0, 0.01),
      #fff
    ); /*线性渐变,从黑色透明0.01到白色*/
  }
</style>
<body>
  <div class="container">
    <div class="container-content">
      ........尾部文字衰减效果尾部文字衰减效果尾部文字衰减效果
      尾部文字衰减效果尾部文字衰减效果尾部文字衰减效果
    </div>
    <div class="container-fading"></div>
  </div>
</body>

# 19、尾部文字衰减

应用场景和技术要点

重点:尾部文字衰减效果原理。构建一个长方形盒子,然后定位在当前区块的尾部。为了实现尾部文字衰减效果,我们给长方形添加线性渐变的背景图,背景图从上往下以黑色的 0.01 的透明度过渡到#fff 白色。

See the Pen 19、尾部文字衰减 by arry (@arryblog) on CodePen.

点击查看完整代码
<style>
  .container {
    position: relative; /*相对定位*/
    width: 100px;
    border: 1px solid #ddd;
  }
  .container-content {
    height: 200px;
    overflow-y: scroll; /*垂直方向超出内容显示滚动条*/
  }
  .container-fading {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 30px;
    width: 100%;
    background: linear-gradient(
      rgba(0, 0, 0, 0.01),
      #fff
    ); /*线性渐变,从黑色透明0.01到白色*/
  }
</style>
<body>
  <div class="container">
    <div class="container-content">
      ........尾部文字衰减效果尾部文字衰减效果尾部文字衰减效果
      尾部文字衰减效果尾部文字衰减效果尾部文字衰减效果
    </div>
    <div class="container-fading"></div>
  </div>
</body>

# 20、分类导航

应用场景和技术要点

重点:元素左右两端对齐,左侧元素宽度自适应缩放。熟练掌握 flex 布局的 flex:1;的应用

See the Pen 20、分类导航 by arry (@arryblog) on CodePen.

点击查看完整代码
<style>
  body,
  h3 {
    margin: 0;
    padding: 0;
  }
  .nav {
    display: flex;
    align-items: center; /*子项垂直居中*/
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    padding: 12px 0px;
  }
  .nav h3 {
    flex: 1; /*自适应缩放,有空间占满剩余空间,没有就自我收缩*/
    margin-right: 16px;
  }
  .nav span {
    margin-right: 16px;
  }
</style>
<body>
  <div class="nav">
    <h3>家用电器</h3>
    <span>扫地机</span>
    <span>空净</span>
    <span>清洁</span>
    <span>风扇</span>
  </div>
</body>

# 21、左右列表布局

应用场景和技术要点

重点:左右两列自适应布局,如何选择奇偶项来定义样式

See the Pen 21、左右列表布局 by arry (@arryblog) on CodePen.

点击查看完整代码
<style>
  .item {
    display: flex;
    width: 500px;
    margin: 16px 0;
    border: 1px solid #ddd;
  }
  .item-image {
    width: 128px;
  }
  .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .item-info {
    flex: 1; /*自适应父元素缩放,占满剩余空间*/
  }
  .item .item-image:nth-child(odd) {
    margin-right: 10px;
  }
  .item .item-image:nth-child(even) {
    margin-left: 10px;
  }
</style>
<body>
  <div class="item">
    <div class="item-image"><img src="images/tx1.jpg" alt="" /></div>
    <div class="item-info">.......</div>
  </div>

  <div class="item">
    <div class="item-info">.......</div>
    <div class="item-image"><img src="images/tx2.png" alt="" /></div>
  </div>
</body>

# 22 、拐角三角形标签

应用场景和技术要点

重点:定位的应用、CSS 绘制三角形,文字旋转transform: rotate(-45deg);处理

See the Pen 22 、拐角三角形标签 by arry (@arryblog) on CodePen.

点击查看完整代码
<style>
  .container {
    position: relative; /*相对定位*/
    width: 150px;
    height: 150px;
    background-color: #ddd;
  }
  .container-corner--tl {
    position: absolute; /*绝对定位*/
    left: 0px;
    top: 0px;
    width: 60px;
    height: 60px;
  }
  /*放文字内容*/
  .container-corner--tl::after {
    position: absolute;
    content: "推荐";
    left: 0px;
    top: 0px;
    width: 60px;
    height: 60px;
    transform: rotate(-45deg); /*旋转文字*/
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 2;
  }
  /*绘制三角形图标*/
  .container-corner--tl::before {
    content: "";
    width: 0;
    position: absolute;
    left: 0;
    top: 0;
    border: 30px solid transparent;
    border-top: 30px solid red;
    border-left: 30px solid red;
  }
</style>
<body>
  <div class="container">
    <div class="container-corner container-corner--tl">推荐</div>
    ..........................
  </div>
</body>

# 23、右侧悬浮菜单

应用场景和技术要点

重点:如何把元素固定在浏览器右边中间位置,利用position:fixed;transform: translate(0px, -50%);来实现

See the Pen 23、右侧悬浮菜单 by arry (@arryblog) on CodePen.

点击查看完整代码
<style>
  body {
    height: 2000px;
  }
  .container {
    right: 0;
    position: fixed;
    top: 50%;
    transform: translate(0px, -50%);
    background-color: red;
    width: 100px;
    height: 200px;
  }
</style>
<body>
  <div class="container">...</div>
</body>

# 24、文件夹结构

应用场景和技术要点

重点:每一层结构中对应的竖线和横的绘制原理。这里涉及到 padding、margin、position、::after、::before、transform 的综合应用

See the Pen 24、文件夹结构 by arry (@arryblog) on CodePen.

点击查看完整代码
<style>
  :root {
    --folder-structure-item-height: 15px;
    --folder-structure-item-margin-left: 30px;
    --folder-structure-item-padding-top: 15px;
  }
  body,
  ul,
  li {
    margin: 0;
    padding: 0;
  }
  ul {
    list-style-type: none;
    /*左外边距,产生不同级别水平方向间距*/
    margin-left: var(--folder-structure-item-margin-left);
  }
  .folder-structure {
    padding-left: 100px;
  }
  .folder-structure li {
    /*上内边距,产生每一项上下间距*/
    padding-top: var(--folder-structure-item-padding-top);
    position: relative;
  }
  /*结构-竖直线*/
  .folder-structure li::before {
    border-left: 1px solid #333;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /*向左移动 左外边距宽*/
    transform: translate(
      calc(-1 * var(--folder-structure-item-margin-left)),
      0
    );
    height: 100%;
  }
  /*结构-水平横线*/
  .folder-structure li::after {
    border-bottom: 1px solid #333;
    content: "";
    left: 0;
    position: absolute;
    /*水平横线与li顶部的位置*/
    top: calc(
      var(--folder-structure-item-padding-top) + var(
          --folder-structure-item-height
        ) / 2
    );
    transform: translate(-100%, 0);
    width: var(--folder-structure-item-margin-left);
  }

  /* 移除每一级最后一项的竖直边框线 */
  .folder-structure li:last-child::before {
    height: calc(
      var(--folder-structure-item-padding-top) + var(
          --folder-structure-item-height
        ) / 2
    );
  }
</style>
<body>
  <div class="folder-structure">
    <ul>
      <!--一级结构 -->
      <li>
        1...
        <ul>
          <!-- 二级结构 -->
          <li>
            1.1...
            <ul>
              <!-- 三级结构 -->
              <li>1.1.1...</li>
              <li>1.1.2...</li>
            </ul>
          </li>
          <li>1.2...</li>
          <li>1.3...</li>
        </ul>
      </li>
    </ul>
  </div>
</body>
上次更新时间: 6/8/2023, 9:23:17 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

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

X