# 常用的 CSS 主流布局案例(73~80)

涵盖功能和技术点

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

# 73、面包屑导航

应用场景和技术要点

重点:面包屑导航的分隔线以 / 字符来实现就好

See the Pen 81、面包屑导航 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  .nav {
    display: flex;
    align-items: center;
  }
  .nav-separator {
    margin: 0 8px;
  }
</style>
<body>
  <div class="nav">
    <a>首页</a>
    <!-- 分隔器 -->
    <div class="nav-separator">/</div>
    <a>商品</a>
    <div class="nav-separator">/</div>
    <a>鞋子</a>
    <div class="nav-separator">/</div>
  </div>
</body>

# 74、圆形导航

应用场景和技术要点

圆形导航布局原理:所有子项都相对于中间的圆形定位,因为所有子项最后要形成一个圆形,所以子项是先旋转再进行位置的移动。

See the Pen 82、圆形导航 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  .nav {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
    border-radius: 50%;
    margin: 100px auto;
  }
  .nav-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    /*总共6个子项,每个子项的旋转角度为 360deg / 6=60deg*/
    transform: rotate(calc(var(--i) * 60deg)) translateX(-100px);
    /* opacity: 0; */
  }
  .nav-content {
    width: 100%;
    height: 100%;
    background-color: pink;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*元素发生旋转后,造成文字的角度也发生了变化,把要逆时针旋转相同角度*/
    transform: rotate(calc(var(--i) * -60deg));
  }
</style>
<body>
  <!-- 点击nav,将触发显示所有圆圈 -->
  <div class="nav">
    首页
    <!--圆形菜单项-->
    <div class="nav-circle" style="--i: 0">
      <div class="nav-content">菜单1</div>
    </div>
    <div class="nav-circle" style="--i: 1">
      <div class="nav-content">菜单2</div>
    </div>
    <div class="nav-circle" style="--i: 2">
      <div class="nav-content">菜单3</div>
    </div>
    <!--下面再重复3项-->
  </div>
</body>

# 75、普通菜单

应用场景和技术要点

重点:通过给最后一个子项设置 margin-left:auto;使元素在最右边对齐

See the Pen 83、普通菜单 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  .menu {
    display: flex;
    flex-direction: column;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 0px 10px;
  }
  .menu-item {
    display: flex;
    align-items: center;
    margin: 2px 0;
  }
  .menu-hotkey {
    margin-left: auto;
    padding: 3px 4px;
    border-radius: 5px;
    background-color: pink;
  }
  .img-up {
    margin-right: 5px;
  }
</style>
<body>
  <div class="menu">
    <div class="menu-item">
      <!-- 第一种菜单 -->
      <div>第二种菜单</div>
      <span class="menu-hotkey"></span>
    </div>
    <div class="menu-item">
      <!-- 第二种菜单 -->
      <img src="images/up.png" alt="" class="img-up" />
      <div class="title">第二种菜单</div>
      <span class="menu-hotkey"></span>
    </div>
  </div>
</body>

# 76、抽屉式导航

应用场景和技术要点

重点:黑色的半透明全屏遮罩层设置。

See the Pen 84、抽屉式导航 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  /* 容器全屏 */
  .container {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    background-image: linear-gradient(to right, yellow, pink);
  }
  /*背景幕布-黑色半透明遮罩*/
  .overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }
  /*左侧菜单*/
  .sidebar {
    height: 100%;
    width: 200px;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #fff;
  }
</style>
<body>
  <div class="container">
    <!-- 黑色半透明幕布 -->
    <div class="overlay"></div>
    <!-- 左侧菜单 -->
    <div class="sidebar">...菜单</div>
  </div>
</body>

# 77、下拉菜单

应用场景和技术要点

  • 下拉菜单布局原理:子项向对于父元素垂直定位,然后子项 默认设置为 display:none;
  • 当鼠标滑动到父元素时,设置子项 display:block,让子项显示。

See the Pen 85、下拉菜单 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  .menu {
    position: relative;
  }
  .menu-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 30px;
    border: 1px solid #333;
    padding-right: 20px;
    background: url(images/down.png) no-repeat 90px 6px;
    background-size: 24px;
  }
  /* 默认隐藏下拉菜单内容*/
  .menu-content {
    height: 200px;
    width: 200px;
    background-color: pink;
    padding-top: 4px;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 9999;
    display: none;
  }
  /*鼠标滑上去,显示下拉菜单内容*/
  .menu:hover .menu-content {
    display: block;
  }
</style>
<body>
  <div class="menu">
    <div class="menu-title">产品分类</div>
    <!-- 下拉菜单内容 -->
    <div class="menu-content">.......</div>
  </div>
</body>

# 78、全屏菜单

应用场景和技术要点

重点:如何利用 flex 布局来控制菜单内容在水平和垂直方向居中

See the Pen 86、全屏菜单 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  .container {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
  }
  /*关闭按扭*/
  .container-close {
    background-color: #ddd;
    border: 1px solid #333;
    position: absolute;
    right: 16px;
    top: 16px;
  }
</style>
<body>
  <div class="container">
    <!-- The close button -->
    <button class="container-close">X</button>
    <!-- 菜单 -->
    <ul>
      <li>菜单1</li>
      <li>菜单2</li>
      ...
    </ul>
  </div>
</body>

# 79、通栏菜单

应用场景和技术要点

通栏菜单的核心点是:二级菜单并不是相对于直接的父元素定位,而是相对于父元素的父元素定位。

See the Pen 87、通栏菜单 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  .container {
    height: 50px;
    position: relative; /*通栏导航相对定位元素*/
    display: flex;
    background-color: skyblue;
  }
  .container .item {
    padding: 0px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .item-content {
    width: 100%;
    min-height: 100px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-top-width: 0;
    background: pink;
    margin-top: -1px;
    position: absolute; /*绝对定位-相对于最外层的.container*/
    left: 0px;
    top: 100%;
    box-sizing: border-box;
    z-index: 9999;
    display: none;
  }
  .item:hover {
    background-color: pink;
  }
  /*鼠标滑动显示超大菜单内容*/
  .item:hover .item-content {
    display: block;
  }
</style>
<body>
  <div class="container">
    <div class="item">菜单1</div>
    <div class="item">菜单2</div>
    <div class="item">
      菜单3
      <div class="item-content">通栏二级菜单</div>
    </div>
    <div class="item">菜单4</div>
  </div>
</body>

# 80、多级下拉菜单

应用场景和技术要点

重点:通过绝对定位来控制下拉菜单的位置,通过 display 属性来设置菜单的显示与隐藏。通过:hover 来实现鼠标滑动上去显示,移开隐藏。

See the Pen 88、多级下拉菜单 by arry (@arryblog) on CodePen.

点击查看完整源代码
<style>
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .dropdown {
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0.3);
  }
  .dropdown li {
    padding: 8px;
    position: relative;
  }
  /* 子下拉菜单 */
  .dropdown ul {
    width: 200px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    top: 100%;
    display: none; /*默认隐藏*/
  }
  /* 第二级子下拉列表 */
  .dropdown ul ul {
    position: absolute;
    left: 100%;
    top: 0;
  }
  /*鼠标滑动显示背景色*/
  .dropdown li:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
  /* 悬停列表项时显示直接子下拉列表 */
  .dropdown li:hover > ul {
    display: block;
  }
</style>
<body>
  <ul class="dropdown">
    <li>首页</li>
    <li>
      <div>视频教程</div>
      <ul>
        <!-- 一级下拉菜单-->
        <li>前端</li>
        <li>java</li>
        <li>
          <div>大数据</div>
          <ul>
            <!--二级下拉菜单 -->
            <li>基础</li>
            <li>高级</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>产品展示</li>
    <li>关于我们</li>
  </ul>
</body>
上次更新时间: 6/8/2023, 9:23:17 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

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

X