Hello World

# 常用的 CSS 主流布局案例（9~16）

涵盖功能和技术点

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

# 9、颜色开关

应用场景和技术要点

当颜色的开关数量很多时，我们可以通过自定义属性来定义颜色值，然后通过 var 函数来获取自定义属性的颜色。

See the Pen 09、颜色开关 by arry (@arryblog) on CodePen.

点击查看完整源代码 
<style>
  .color-swatch {
    width: 200px;
    display: flex; /*弹性布局*/
    flex-wrap: wrap; /*放不下时换行*/
  }
  .color-swatch-item {
    border-radius: 100%; /*圆角*/
    height: 25px;
    width: 25px;
    margin: 3px;
    /*--color为自定属性  var函数可以获取自定义属性的值*/
    background-color: var(--color);
  }
</style>
<body>
  <div class="color-swatch">
    <div class="color-swatch-item" style="--color: red"></div>
    <div class="color-swatch-item" style="--color: khaki"></div>
    <div class="color-swatch-item" style="--color: blue"></div>
    <div class="color-swatch-item" style="--color: green"></div>
    <div class="color-swatch-item" style="--color: pink"></div>
    <div class="color-swatch-item" style="--color: orange"></div>
    <div class="color-swatch-item" style="--color: tomato"></div>
    <div class="color-swatch-item" style="--color: skyblue"></div>
    <div class="color-swatch-item" style="--color: tomato"></div>
    <div class="color-swatch-item" style="--color: aqua"></div>
    <div class="color-swatch-item" style="--color: blueviolet"></div>
    <div class="color-swatch-item" style="--color: springgreen"></div>
    <div class="color-swatch-item" style="--color: teal"></div>
    ......
  </div>
</body>

# 10 、凹角布局

应用场景和技术要点

在根元选择器:root 中设置自定义背景色和凹角的半径属性。我们只需要修改自定义属性的值，就可以轻松实现不同颜色大小的凹角布局效果

See the Pen 10 、凹角布局 by arry (@arryblog) on CodePen.

点击查看完整源代码 
<style>
  /*:root是根选择器，相当于html*/
  :root {
    /*--开头的是自定义属性*/
    --concave-corners-background: pink;
    --concave-corners-size: 20px; /*定义凹角半径的大小*/
  }
  .concave-corners {
    /*var函数通过自定义属性名，可以获取到自定义属性值*/
    background-color: var(--concave-corners-background);
    position: relative;
    min-height: 100px;
  }
  .concave-corners__corner {
    position: absolute;
    height: var(--concave-corners-size);
    width: var(--concave-corners-size);
    background: #fff;
  }
  .concave-corners__corner--tl {
    left: 0;
    top: 0;
    border-radius: 0 0 var(--concave-corners-size) 0;
  }
  .concave-corners__corner--tr {
    right: 0;
    top: 0;
    border-radius: 0 0 0 var(--concave-corners-size);
  }
  .concave-corners__corner--bl {
    bottom: 0;
    left: 0;
    border-radius: 0 var(--concave-corners-size) 0 0;
  }
  .concave-corners__corner--br {
    bottom: 0;
    right: 0;
    border-radius: var(--concave-corners-size) 0 0 0;
  }
</style>
<body>
  <div class="concave-corners">
    <!-- 左上角 -->
    <div class="concave-corners__corner concave-corners__corner--tl"></div>
    <!-- 右上角 -->
    <div class="concave-corners__corner concave-corners__corner--tr"></div>
    <!-- 左下角 -->
    <div class="concave-corners__corner concave-corners__corner--bl"></div>
    <!-- 右下角 -->
    <div class="concave-corners__corner concave-corners__corner--br"></div>
    <!-- 内容写往下写就好 -->
    ...
  </div>
</body>

# 11 、网站底部通栏横幅

应用场景和技术要点

这里的核心就是运用position:fixed;固定定位来实现元素定位在浏览器左侧最底部。

See the Pen 11 、网站底部通栏横幅 by arry (@arryblog) on CodePen.

点击查看完整源代码 
<style>
  body {
    height: 2000px;
  }
  .banner {
    width: 100%;
    /*固定定位在浏览器左边的最底部*/
    position: fixed;
    bottom: 0;
    left: 0;
    /*横幅中内容水平垂直居中显示 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: pink;
  }
  .banner-content {
    /* 自适应缩放 相当于 flex-shrink: 1;flex-grow: 1; flex-basis: 0; */
    flex: 1;
    min-height: 100px; /*最小高度*/
  }
</style>
<body>
  <div class="banner">
    <div class="banner-content">......</div>
    <!-- 关闭按扭可以加下面,关闭按扭不会写，看前面第8个案例 -->
    <div class="close-button"></div>
  </div>
</body>

# 12 、拐角丝带

应用场景和技术要点

拐角丝带的制作原理：定义一个长方形盒子定位在父元素左上角，然后 rotate 旋转长方形盒子形成斜角效果。最后给父元素添加 overflow:hidden 把多超出部分隐藏。

See the Pen 12 、拐角丝带 by arry (@arryblog) on CodePen.

点击查看完整源代码 
<style>
  .container {
    position: relative; /*相对定位*/
    border: 1px solid #ddd;
    min-height: 200px;
    overflow: hidden; /*超出部分隐藏*/
  }
  .container-ribbon {
    height: 24px;
    width: 206px;
    position: absolute; /*绝对定位*/
    top: 32px;
    left: -64px;
    transform: rotate(-45deg); /*逆时针旋转45deg*/
    background-color: red;
    text-align: center;
    color: #fff;
  }
</style>
<body>
  <div class="container">
    <!--丝带-->
    <div class="container-ribbon">hot</div>
    <!--内容区-->
    <div class="container-content">....</div>
  </div>
</body>

# 13、弧形背景

应用场景和技术要点

通过 linear-gradient 来绘制背景渐变色，再结合 border-radius 来绘制左右下角的弧度。

See the Pen 13、弧形背景 by arry (@arryblog) on CodePen.

点击查看完整源代码 
<style>
  .container {
    min-height: 100px;
    /*背景图线型渐变 从上到下*/
    background-image: linear-gradient(
      to bottom,
      rgba(251, 165, 165, 0.3) 0%,
      rgba(251, 165, 165, 0.1) 100%
    );
    border-bottom-left-radius: 50% 40%; /*左下角弧度*/
    border-bottom-right-radius: 50% 40%; /*右下角弧度*/
  }
</style>
<body>
  <div class="container">...</div>
</body>

# 14、 斜切布局

应用场景和技术要点

元素斜切后，里面的内容也会发生斜切，为了避免这种效果。我们采用::before 来制用斜切的效果，然后再用 z-index 让伪元素显示在最底层（文字下方）

See the Pen 14、 斜切布局 by arry (@arryblog) on CodePen.

点击查看完整源代码 
<style>
  .diagonal {
    margin: 100px auto;
    width: 400px;
    min-height: 200px;
    position: relative; /*相对定位*/
    padding: 20px;
  }
  .diagonal::before {
    display: block;
    content: "";
    height: 100%;
    width: 100%;
    position: absolute; /*绝对定位*/
    left: 0px;
    top: 0px;
    transform: skewY(-5deg); /*y轴斜切*/
    background-color: pink;
    z-index: -1; /*控制层级-最底层*/
  }
</style>
<body>
  <div class="diagonal">......内容区</div>
</body>

# 15 、拐角按扭

应用场景和技术要点

这里的重难点是：如何让按扭的中心点对准拐角的中心点。先让按扭定位在父元素最顶部top:0;和最右边right:0;。然后再利用transform: translate(50%, -50%);将按扭向上和向右移动自身宽高的一半就可以。

See the Pen 15 、拐角按扭 by arry (@arryblog) on CodePen.

点击查看完整源代码 
<style>
  .container {
    position: relative; /*相对定位*/
    width: 200px;
    height: 200px;
    border: 1px solid #ddd;
    margin: 50px;
  }
  .close-button {
    width: 30px;
    height: 30px;
    font-size: 16px;
    color: #fff;
    position: absolute; /*绝对定位*/
    /*以下三行代码，控制元素中心在扭角上*/
    right: 0;
    top: 0;
    transform: translate(50%, -50%); /*向右 向上移动自身宽高的一半*/
    display: flex; /* 弹性布局*/
    align-items: center; /*子项垂直居中*/
    justify-content: center; /*子项水平居中*/
    border-radius: 100%;
    background-color: pink;
    cursor: pointer; /*鼠标手指样式*/
  }
</style>
<body>
  <div class="container">
    <div class="close-button">X</div>
    ......
  </div>
</body>

# 16 、点引导线

应用场景和技术要点

这个效果的重点是：点引导线如何自适就宽度的变化。可以利用 flex:1;来实现点引导线元素的自适应缩放效果。

See the Pen 16 、点引导线 by arry (@arryblog) on CodePen.

点击查看完整源代码 
<style>
  .container {
    border: 1px solid #ddd;
    padding: 10px;
  }
  .item {
    display: flex; /*弹性布局*/
    align-items: center; /*垂直居中*/
    justify-content: center; /*水平居中*/
    margin: 5px 0px;
  }
  .item-dots {
    border-bottom: 1px dashed #ddd;
    flex: 1; /*自适应缩放-剩余空间*/
    margin: 0px 4px;
  }
  .item-label {
    padding: 3px 4px;
    border-radius: 4px;
    background-color: var(--color); /*调用自定义属性的颜色值*/
    font-size: 14px;
    color: #fff;
  }
</style>
<body>
  <div class="container">
    <div class="item">
      <!-- 左边标题 -->
      <div class="item-title">把中国饭碗端得更牢</div>
      <!-- 中间点引导线 -->
      <div class="item-dots"></div>
      <!-- 右边标签 -->
      <div class="item-label" style="--color: pink">新</div>
    </div>

    <div class="item">
      <div class="item-title">教育部回应教材插图事件</div>
      <div class="item-dots"></div>
      <div class="item-label" style="--color: skyblue">热</div>
    </div>

    <div class="item">
      <div class="item-title">欧冠决赛</div>
      <div class="item-dots"></div>
      <div class="item-label" style="--color: orange">热</div>
    </div>
  </div>
</body>
上次更新时间: 6/8/2023, 9:23:17 PM

← 常用的 CSS 主流布局案例（17~24） →

大厂最新技术学习分享群

大厂最新技术学习分享群

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

X