菜单 搜索
首页 前端知识 【CSS】小米页面

【CSS】小米页面

2024-05-12 00:05:50 前端知识 前端哥 11 548 我要收藏

❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：

文章目录

  • 导航栏
  • logo菜单部分
  • 子菜单部分
  • 右侧栏（fixed）
  • 轮播图部分
  • 小米页面

导航栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/less">
    *{
      Xbackground-color: rgba(0,0,0,0.1);
      Xbox-shadow:inset 0 0 1px red;
    }
    body{
      margin: 0;
      overflow-y:scroll;
      font: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    }
    /* .top-banner a{
      display: block;
      background-image: url(https://www.qianduange.cn/upload/article/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg);
      background-position:center;
      background-repeat: no-repeat;
      min-width: 1226px;
      background-size:  auto 120px;
      height: 120px;
    }*/
    a{
      text-decoration: none;
    }
    .site-topbar{
      height: 40px;
      background-color: #333;
      min-width: 1226px;
      .site-topbar-inner{
        width: 1226px;
        margin :auto;
        a{
          font-size: 12px;
          color:#b0b0b0;
          line-height: 40px;
          /*内部是块元素，就会打满，外部是行内元素*/
          display: inline-block;
          &:hover{
            color:#fff;
          }
        }
        span{
          font-size: 12px;
          color:#424242;
          margin:0 .3em;
        }
        .site-topbar-right-card{
          float:right;
          .shopping-cart{
            float:right;
            margin-left: 25px;
            background-color: #424242;
            text-align:center;
            position:relative;
            &:hover .shopping-cart-link{
              color: #ff6700;
              background-color: white;
            }
            .shopping-cart-link{
              width: 90px;
              padding:0 15px;
              position: relative;
              z-index: 8;
            }
            .shopping-cart-detail{
              height: 0;
              position:absolute;
              top:100%;
              right:0;
              width: 216px;
              background-color: rgb(240, 237, 237);
              box-shadow:0 2 10px #766f6f;
            }
            &:hover .shopping-cart-detail{
              height: 100px;
              transition: .6s;
            }
          }
        }
      }
    }
  </style>
</head>

<body>
  <!-- <div class="top-banner">
    <a href=""></a>
  </div> -->

  <div class="site-topbar">
    <div class="site-topbar-inner">
      <a href="#">小米官网</a>
      <span class="sep">|</span> <a href="#">小米商城</a>
      <span class="sep">|</span> <a href="#">MIUI</a>
      <span class="sep">|</span> <a href="#">IoT</a>
      <span class="sep">|</span> <a href="#">云服务</a>
      <span class="sep">|</span> <a href="#">天星数科</a>
      <span class="sep">|</span> <a href="#">有品</a>
      <span class="sep">|</span> <a href="#">小爱开放平台</a>
      <span class="sep">|</span> <a href="#">企业团购</a>
      <span class="sep">|</span> <a href="#">资质证照</a>
      <span class="sep">|</span> <a href="#">协议规则</a>
      <span class="sep">|</span> <a href="#">下载app</a>
      <span class="sep">|</span> <a href="#">Select Location</a>
      <div class="site-topbar-right-card">
        <a href="#">登录</a>
        <span>|</span>
        <a href="#">注册</a>
        <span>|</span>
        <a href="#">消息通知</a>

        <div class="shopping-cart">
          <a href="#" class="shopping-cart-link">购物车（0）</a>
          <div class="shopping-cart-detail">
          </div>
        </div>

      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/less"></script>

</html>

logo菜单部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/less">
    *{
      xbackground-color: rgba(0,0,0,0.1);
      xbox-shadow:inset 0 0 1px red;
      outline: none;
    }
    body{
      margin: 0;
      overflow-y:scroll;
      font: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    }
    ul{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    /* .top-banner a{
      display: block;
      background-image: url(https://www.qianduange.cn/upload/article/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg);
      background-position:center;
      background-repeat: no-repeat;
      min-width: 1226px;
      background-size:  auto 120px;
      height: 120px;
    }*/
    a{
      text-decoration: none;
    }
    .site-topbar{
      height: 40px;
      background-color: #333;
      min-width: 1226px;
      .site-topbar-inner{
        width: 1226px;
        margin :auto;
        a{
          font-size: 12px;
          color:#b0b0b0;
          line-height: 40px;
          /*内部是块元素，就会打满，外部是行内元素*/
          display: inline-block;
          &:hover{
            color:#fff;
          }
        }
        span{
          font-size: 12px;
          color:#424242;
          margin:0 .3em;
        }
        .site-topbar-right-card{
          float:right;
          .shopping-cart{
            float:right;
            margin-left: 25px;
            background-color: #424242;
            text-align:center;
            position:relative;
            &:hover .shopping-cart-link{
              color: #ff6700;
              background-color: white;
            }
            .shopping-cart-link{
              width: 90px;
              padding:0 15px;
              position: relative;
              z-index: 8;
            }
            .shopping-cart-detail{
              height: 0;
              position:absolute;
              top:100%;
              right:0;
              width: 216px;
              background-color: rgb(240, 237, 237);
              box-shadow:0 2 10px #766f6f;
            }
            &:hover .shopping-cart-detail{
              height: 100px;
              transition: .6s;
            }
          }
        }
      }
    }

    .site-topnav{
      width: 1226px;
      margin:auto;
      height: 100px;
      .logo-link{
        display: inline-block;
        float:left;
        width: 50px;
        height: 50px;
        margin:25px 0;
      }
      .site-topnav-list{
        display: inline-block;
        margin-left:100px;
        li{
          float:left;
          a{
            display: inline-block;
            padding: 0 10px;
            height: 100px;
            line-height: 100px;
          }
        }
      }
      .site-topnav-search{
        display: inline-flex;
        position: relative;
        margin:25px 0;
        float:right;
        &:hover{
          input,button{
            border-color :#b0b0b0;
          }
        }
        input{
          box-sizing:border-box;
          height: 50px;
          width: 245px;
          border:1px solid #e0e0e0;
          border-right:none;
          &:focus{
            border-color:#ff6700;
            + button{
              border-color: #ff6700;
            }
            ~ .suggestions{
              display: block;
            }
          }
        }
        button{
          width: 50px;
          height: 50px;
          border-color: #e0e0e0;
          &:hover{
            background-color: #ff6700;
            border-color:ff6700;
          }
        }
        .suggestions{
          display: none;
          position: absolute;
          top: 100%;
          left:0;
          border:1px solid #ff6700;
          width: 246px;
          height: 300px;
          box-sizing:border-box;
          border-top:none;
        }
      }
    }
  </style>
</head>

<body>
  <!-- <div class="top-banner">
    <a href=""></a>
  </div> -->

  <div class="site-topbar">
    <div class="site-topbar-inner">
      <a href="#">小米官网</a>
      <span class="sep">|</span> <a href="#">小米商城</a>
      <span class="sep">|</span> <a href="#">MIUI</a>
      <span class="sep">|</span> <a href="#">IoT</a>
      <span class="sep">|</span> <a href="#">云服务</a>
      <span class="sep">|</span> <a href="#">天星数科</a>
      <span class="sep">|</span> <a href="#">有品</a>
      <span class="sep">|</span> <a href="#">小爱开放平台</a>
      <span class="sep">|</span> <a href="#">企业团购</a>
      <span class="sep">|</span> <a href="#">资质证照</a>
      <span class="sep">|</span> <a href="#">协议规则</a>
      <span class="sep">|</span> <a href="#">下载app</a>
      <span class="sep">|</span> <a href="#">Select Location</a>
      <div class="site-topbar-right-card">
        <a href="#">登录</a>
        <span>|</span>
        <a href="#">注册</a>
        <span>|</span>
        <a href="#">消息通知</a>

        <div class="shopping-cart">
          <a href="#" class="shopping-cart-link">购物车（0）</a>
          <div class="shopping-cart-detail">
          </div>
        </div>

      </div>
    </div>
  </div>

  <div class="site-topnav">
    <img class="logo-link" src="https://www.qianduange.cn/upload/article/logo-mi2.png" alt="">

    <ul class="site-topnav-list">
      <li>
        <a href="#">Xiaomi手机</a>
      </li>
      <li><a href="#">Redmi手机</a></li>
      <li><a href="#">电视</a></li>
      <li><a href="#">笔记本</a></li>
      <li><a href="#">平板</a></li>
      <li><a href="#">家电</a></li>
      <li><a href="#">路由器</a></li>
      <li><a href="#">服务中心</a></li>
      <li><a href="#">社区</a></li>
    </ul>
    <form class="site-topnav-search" action="">
      <input autocomplete="off" type="text">
      <button>search</button>
      <ul class="suggestions">
        <li><a href="#"></a></li>
      </ul>
    </form>
  </div>
</body>
<script src=" https://cdn.jsdelivr.net/npm/less"></script>

</html>

子菜单部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/less">
    *{
      background-color: rgba(0,0,0,0.1);
      box-shadow:inset 0 0 1px red;
      outline: none;
    }
    body{
      margin: 0;
      overflow-y:scroll;
      font: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    }
    ul{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    /* .top-banner a{
      display: block;
      background-image: url(https://www.qianduange.cn/upload/article/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg);
      background-position:center;
      background-repeat: no-repeat;
      min-width: 1226px;
      background-size:  auto 120px;
      height: 120px;
    }*/
    a{
      text-decoration: none;
    }
    .site-topbar{
      height: 40px;
      background-color: #333;
      min-width: 1226px;
      .site-topbar-inner{
        width: 1226px;
        margin :auto;
        a{
          font-size: 12px;
          color:#b0b0b0;
          line-height: 40px;
          /*内部是块元素，就会打满，外部是行内元素*/
          display: inline-block;
          &:hover{
            color:#fff;
          }
        }
        span{
          font-size: 12px;
          color:#424242;
          margin:0 .3em;
        }
        .site-topbar-right-card{
          float:right;
          .shopping-cart{
            float:right;
            margin-left: 25px;
            background-color: #424242;
            text-align:center;
            position:relative;
            &:hover .shopping-cart-link{
              color: #ff6700;
              background-color: white;
            }
            .shopping-cart-link{
              width: 90px;
              padding:0 15px;
              position: relative;
              z-index: 8;
            }
            .shopping-cart-detail{
              height: 0;
              position:absolute;
              top:100%;
              right:0;
              width: 216px;
              background-color: rgb(240, 237, 237);
              box-shadow:0 2 10px #766f6f;
            }
            &:hover .shopping-cart-detail{
              height: 100px;
              transition: .6s;
            }
          }
        }
      }
    }
    .top-nav{
      display: flex;
      height: 100px;
      width: 1226px;
      margin:auto;
      align-items: center;
      .logo{
        margin-right: 200px;

        img{
          width: 50px;
          height: 50px;
        }
      }
      .product-category{
        display: flex;
        > li{
          font-size: 14px;
          padding: 0 10px;
          height: 100px;
          line-height : 100px;
          .product-submenu-wrapper{
            background-color: white;
            position: absolute;
            left:0 ;
            width: 100%;
            overflow:hidden;
            height: 0;
            z-index: 555;
            /*鼠标拿开时候，让z-index延迟一秒变化*/
            transition: 1s height,0s 1s z-index;
            ul{
              display: flex;
              width: 1226px;
              margin :auto;
              li{
                width: calc(1226px / 6);
                height: 230px;
              }
            }
          }
          &:hover .product-submenu-wrapper{
            z-index: 888;
            transition: 1s height,0s z-index;
          }
        }
        &:hover >li .product-submenu-wrapper{
          height: 230px;
          transition: 1s height,0s z-index;
        }
      }
      .search-form{
        display: flex;
        margin-left: auto;
        position: relative;
        &:hover{
          button,input{
            border-color : #b0b0b0;
          }
        }
        &:focus-within{
          input,button{
            border-color: #ff6700;
          }
        }
        input{
          width: 245px;
          height: 50px;
          box-sizing:border-box;
          border: 1px solid #e0e0e0;
          border-right: none;
          font-size: 16px;
          outline:none;
        }
        button{
          width: 50px;
          height: 50px;
          border: 1px solid #e0e0e0;
          font-size : 2em;
          display: flex;
          .icon{
            margin:auto;
          }
          &:hover{
            background-color: #ff6700;
            border-color:#ff6700;
            color: white;
            cursor: pointer;
          }
        }
        .suggestions{
          position: absolute;
          display: none;
          left:0;
          top:100%;
        }
        input:focus ~ .suggestions{
          display: block;
        }
      }
    }
  </style>
</head>

<body>
  <!-- <div class="top-banner">
    <a href=""></a>
  </div> -->

  <div class="site-topbar">
    <div class="site-topbar-inner">
      <a href="#">小米官网</a>
      <span class="sep">|</span> <a href="#">小米商城</a>
      <span class="sep">|</span> <a href="#">MIUI</a>
      <span class="sep">|</span> <a href="#">IoT</a>
      <span class="sep">|</span> <a href="#">云服务</a>
      <span class="sep">|</span> <a href="#">天星数科</a>
      <span class="sep">|</span> <a href="#">有品</a>
      <span class="sep">|</span> <a href="#">小爱开放平台</a>
      <span class="sep">|</span> <a href="#">企业团购</a>
      <span class="sep">|</span> <a href="#">资质证照</a>
      <span class="sep">|</span> <a href="#">协议规则</a>
      <span class="sep">|</span> <a href="#">下载app</a>
      <span class="sep">|</span> <a href="#">Select Location</a>
      <div class="site-topbar-right-card">
        <a href="#">登录</a>
        <span>|</span>
        <a href="#">注册</a>
        <span>|</span>
        <a href="#">消息通知</a>

        <div class="shopping-cart">
          <a href="#" class="shopping-cart-link">购物车（0）</a>
          <div class="shopping-cart-detail">
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="top-nav">
    <div class="logo">
      <a href="/">
        <img src="https://www.qianduange.cn/upload/article/logo-mi2.png" alt="">
      </a>
    </div>
    <ul class="product-category">
      <li>Xiaomi手机
        <div class="product-submenu-wrapper">
          <ul class="product-submenu">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>

          </ul>
        </div>
      </li>
      <li>Redmi手机
        <div class="product-submenu-wrapper">
          <ul class="product-submenu">
            <li>fff</li>
            <li>eee</li>
            <li>ddd</li>
            <li>ccc</li>
            <li>bbb</li>
            <li>aaa</li>
          </ul>
        </div>
      </li>
    </ul>

    <ul class="product-category">
      <li>电视</li>
      <li>笔记本</li>
      <li>平板</li>
      <li>家电</li>
      <li>路由器</li>
      <li>服务中心</li>
      <li>社区</li>
    </ul>
    <form class="search-form" action="">
      <input type="text">
      <button><span class="icon icon.search"></span></button>
      <ul class="suggestions">
        <li>小米12</li>
        <li>小米12</li>
        <li>小米12</li>
        <li>小米12</li>
        <li>小米12</li>
      </ul>
    </form>

  </div>
</body>
<script src=" https://cdn.jsdelivr.net/npm/less"></script>

</html>

右侧栏（fixed）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/less">
    *{
      background-color: rgba(0,0,0,0.1);
      box-shadow:inset 0 0 1px red;
      outline: none;
    }
    body{
      margin: 0;
      overflow-y:scroll;
      font: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    }
    ul{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    /* .top-banner a{
      display: block;
      background-image: url(https://www.qianduange.cn/upload/article/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg);
      background-position:center;
      background-repeat: no-repeat;
      min-width: 1226px;
      background-size:  auto 120px;
      height: 120px;
    }*/
    a{
      text-decoration: none;
    }
    .site-topbar{
      height: 40px;
      background-color: #333;
      min-width: 1226px;
      .site-topbar-inner{
        width: 1226px;
        margin :auto;
        a{
          font-size: 12px;
          color:#b0b0b0;
          line-height: 40px;
          /*内部是块元素，就会打满，外部是行内元素*/
          display: inline-block;
          &:hover{
            color:#fff;
          }
        }
        span{
          font-size: 12px;
          color:#424242;
          margin:0 .3em;
        }
        .site-topbar-right-card{
          float:right;
          .shopping-cart{
            float:right;
            margin-left: 25px;
            background-color: #424242;
            text-align:center;
            position:relative;
            &:hover .shopping-cart-link{
              color: #ff6700;
              background-color: white;
            }
            .shopping-cart-link{
              width: 90px;
              padding:0 15px;
              position: relative;
              z-index: 8;
            }
            .shopping-cart-detail{
              height: 0;
              position:absolute;
              top:100%;
              right:0;
              width: 216px;
              background-color: rgb(240, 237, 237);
              box-shadow:0 2 10px #766f6f;
            }
            &:hover .shopping-cart-detail{
              height: 100px;
              transition: .6s;
            }
          }
        }
      }
    }
    .top-nav{
      display: flex;
      height: 100px;
      width: 1226px;
      margin:auto;
      align-items: center;
      .logo{
        margin-right: 200px;

        img{
          width: 50px;
          height: 50px;
        }
      }
      .product-category{
        display: flex;
        > li{
          font-size: 14px;
          padding: 0 10px;
          height: 100px;
          line-height : 100px;
          .product-submenu-wrapper{
            background-color: white;
            position: absolute;
            left:0 ;
            width: 100%;
            overflow:hidden;
            height: 0;
            z-index: 555;
            /*鼠标拿开时候，让z-index延迟一秒变化*/
            transition: 1s height,0s 1s z-index;
            ul{
              display: flex;
              width: 1226px;
              margin :auto;
              li{
                width: calc(1226px / 6);
                height: 230px;
              }
            }
          }
          &:hover .product-submenu-wrapper{
            z-index: 888;
            transition: 1s height,0s z-index;
          }
        }
        &:hover >li .product-submenu-wrapper{
          height: 230px;
          transition: 1s height,0s z-index;
        }
      }
      .search-form{
        display: flex;
        margin-left: auto;
        position: relative;
        &:hover{
          button,input{
            border-color : #b0b0b0;
          }
        }
        &:focus-within{
          input,button{
            border-color: #ff6700;
          }
        }
        input{
          width: 245px;
          height: 50px;
          box-sizing:border-box;
          border: 1px solid #e0e0e0;
          border-right: none;
          font-size: 16px;
          outline:none;
        }
        button{
          width: 50px;
          height: 50px;
          border: 1px solid #e0e0e0;
          font-size : 2em;
          display: flex;
          .icon{
            margin:auto;
          }
          &:hover{
            background-color: #ff6700;
            border-color:#ff6700;
            color: white;
            cursor: pointer;
          }
        }
        .suggestions{
          position: absolute;
          display: none;
          left:0;
          top:100%;
        }
        input:focus ~ .suggestions{
          display: block;
        }
      }
    }

    .fixed-sidebar{
      position: fixed;
      right:0;
      bottom:70px;
      @media (max-width:1460px) {
        left:50%;
        margin-left: calc(1226px / 2);
        right:auto;
      }
      ul{
        li{
          height:70px;
          .icon-text{
            @media (max-width:1460px) {
              display:none;
            }
          }
          .icon{
            display: block;
            font-size: 16px;
            @media(max-width:1460px){
              font-size : 12px;
            }
          }
        }
      }
    }
  </style>
</head>

<body>
  <!-- <div class="top-banner">
    <a href=""></a>
  </div> -->

  <div class="site-topbar">
    <div class="site-topbar-inner">
      <a href="#">小米官网</a>
      <span class="sep">|</span> <a href="#">小米商城</a>
      <span class="sep">|</span> <a href="#">MIUI</a>
      <span class="sep">|</span> <a href="#">IoT</a>
      <span class="sep">|</span> <a href="#">云服务</a>
      <span class="sep">|</span> <a href="#">天星数科</a>
      <span class="sep">|</span> <a href="#">有品</a>
      <span class="sep">|</span> <a href="#">小爱开放平台</a>
      <span class="sep">|</span> <a href="#">企业团购</a>
      <span class="sep">|</span> <a href="#">资质证照</a>
      <span class="sep">|</span> <a href="#">协议规则</a>
      <span class="sep">|</span> <a href="#">下载app</a>
      <span class="sep">|</span> <a href="#">Select Location</a>
      <div class="site-topbar-right-card">
        <a href="#">登录</a>
        <span>|</span>
        <a href="#">注册</a>
        <span>|</span>
        <a href="#">消息通知</a>

        <div class="shopping-cart">
          <a href="#" class="shopping-cart-link">购物车（0）</a>
          <div class="shopping-cart-detail">
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="top-nav">
    <div class="logo">
      <a href="/">
        <img src="https://www.qianduange.cn/upload/article/logo-mi2.png" alt="">
      </a>
    </div>
    <ul class="product-category">
      <li>Xiaomi手机
        <div class="product-submenu-wrapper">
          <ul class="product-submenu">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>

          </ul>
        </div>
      </li>
      <li>Redmi手机
        <div class="product-submenu-wrapper">
          <ul class="product-submenu">
            <li>fff</li>
            <li>eee</li>
            <li>ddd</li>
            <li>ccc</li>
            <li>bbb</li>
            <li>aaa</li>
          </ul>
        </div>
      </li>
    </ul>

    <ul class="product-category">
      <li>电视</li>
      <li>笔记本</li>
      <li>平板</li>
      <li>家电</li>
      <li>路由器</li>
      <li>服务中心</li>
      <li>社区</li>
    </ul>
    <form class="search-form" action="">
      <input type="text">
      <button><span class="icon icon.search"></span></button>
      <ul class="suggestions">
        <li>小米12</li>
        <li>小米12</li>
        <li>小米12</li>
        <li>小米12</li>
        <li>小米12</li>
      </ul>
    </form>

  </div>

  <div class="fixed-sidebar">
    <ul>
      <li><span class="icon icon-shopping-cart">lmp</span>
        <span class="icon-text">手机app</span>
      </li>
      <li><span class="icon icon-shopping-cart">lmp</span>
        <span class="icon-text">个人中心</span>
      </li>
      <li><span class="icon icon-shopping-cart">lmp</span>
        <span class="icon-text">售后服务</span>
      </li>
      <li><span class="icon icon-shopping-cart">lmp</span>
        <span class="icon-text">人工客服</span>
      </li>
      <li><span class="icon icon-shopping-cart">lmp</span>
        <span class="icon-text">购物车</span>
      </li>
    </ul>
  </div>
</body>
<script src=" https://cdn.jsdelivr.net/npm/less"></script>

</html>

轮播图部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/less">
    *{
      background-color: rgba(0,0,0,0.1);
      box-shadow:inset 0 0 1px red;
      outline: none;
    }
    body{
      margin: 0;
      overflow-y:scroll;
      font: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    }
    ul{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    /* .top-banner a{
      display: block;
      background-image: url(https://www.qianduange.cn/upload/article/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg);
      background-position:center;
      background-repeat: no-repeat;
      min-width: 1226px;
      background-size:  auto 120px;
      height: 120px;
    }*/
    a{
      text-decoration: none;
    }
    .site-topbar{
      height: 40px;
      background-color: #333;
      min-width: 1226px;
      .site-topbar-inner{
        width: 1226px;
        margin :auto;
        a{
          font-size: 12px;
          color:#b0b0b0;
          line-height: 40px;
          /*内部是块元素，就会打满，外部是行内元素*/
          display: inline-block;
          &:hover{
            color:#fff;
          }
        }
        span{
          font-size: 12px;
          color:#424242;
          margin:0 .3em;
        }
        .site-topbar-right-card{
          float:right;
          .shopping-cart{
            float:right;
            margin-left: 25px;
            background-color: #424242;
            text-align:center;
            position:relative;
            &:hover .shopping-cart-link{
              color: #ff6700;
              background-color: white;
            }
            .shopping-cart-link{
              width: 90px;
              padding:0 15px;
              position: relative;
              z-index: 8;
            }
            .shopping-cart-detail{
              height: 0;
              position:absolute;
              top:100%;
              right:0;
              width: 216px;
              background-color: rgb(240, 237, 237);
              box-shadow:0 2 10px #766f6f;
            }
            &:hover .shopping-cart-detail{
              height: 100px;
              transition: .6s;
            }
          }
        }
      }
    }
    .top-nav{
      display: flex;
      height: 100px;
      width: 1226px;
      margin:auto;
      align-items: center;
      .logo{
        margin-right: 200px;

        img{
          width: 50px;
          height: 50px;
        }
      }
      .product-category{
        display: flex;
        > li{
          font-size: 14px;
          padding: 0 10px;
          height: 100px;
          line-height : 100px;
          .product-submenu-wrapper{
            background-color: white;
            position: absolute;
            left:0 ;
            width: 100%;
            overflow:hidden;
            height: 0;
            z-index: 555;
            /*鼠标拿开时候，让z-index延迟一秒变化*/
            transition: 1s height,0s 1s z-index;
            ul{
              display: flex;
              width: 1226px;
              margin :auto;
              li{
                width: calc(1226px / 6);
                height: 230px;
              }
            }
          }
          &:hover .product-submenu-wrapper{
            z-index: 888;
            transition: 1s height,0s z-index;
          }
        }
        &:hover >li .product-submenu-wrapper{
          height: 230px;
          transition: 1s height,0s z-index;
        }
      }
      .search-form{
        display: flex;
        margin-left: auto;
        position: relative;
        &:hover{
          button,input{
            border-color : #b0b0b0;
          }
        }
        &:focus-within{
          input,button{
            border-color: #ff6700;
          }
        }
        input{
          width: 245px;
          height: 50px;
          box-sizing:border-box;
          border: 1px solid #e0e0e0;
          border-right: none;
          font-size: 16px;
          outline:none;
        }
        button{
          width: 50px;
          height: 50px;
          border: 1px solid #e0e0e0;
          font-size : 2em;
          display: flex;
          .icon{
            margin:auto;
          }
          &:hover{
            background-color: #ff6700;
            border-color:#ff6700;
            color: white;
            cursor: pointer;
          }
        }
        .suggestions{
          position: absolute;
          display: none;
          left:0;
          top:100%;
        }
        input:focus ~ .suggestions{
          display: block;
        }
      }
    }
    .hero{
     height: 460px;
     width: 1226px;
     margin: auto;
     position:relative;
     ul.product-menu{
      position:absolute;
      background-color: rgba(0,0,0,0.5);
      height: 100%;
      box-sizing :border-box;
      width: 235px;
      padding:20px 0;
      > li{
        color:white;
        height: 42px;
        line-height: 42px;
        padding-left:30px;
        padding-right:20px;
        &::after{
          content:'>';
          float:right;
        }
        &:hover .product-menu-sub{
          display: block;
        }
        .product-menu-sub{
          display: none;
          position: absolute;
          height: 460px;
          left:100% ;
          top:0;
          li{
            background-color: white;
            height: calc(460px / 6);
            width: 248px;
            &:nth-child(n+7){
              margin-left: 248px;
            }
            &:nth-child(n+13){
              margin-left: 496px;
            }
            &:nth-child(n+19){
              margin-left: 744px;
            }
            &:nth-child(6n+7){
              margin-top: -460px;
            }
          }
        }
      }
     }
     div.slider{
      img {
        display: block;
        width: 1226px;
        height: 460px;
      }
     }
    }
    .fixed-sidebar{
      position: fixed;
      right:0;
      bottom:70px;
      @media (max-width:1460px) {
        left:50%;
        margin-left: calc(1226px / 2);
        right:auto;
      }
      ul{
        li{
          height:70px;
          .icon-text{
            @media (max-width:1460px) {
              display:none;
            }
          }
          .icon{
            display: block;
            font-size: 16px;
            @media(max-width:1460px){
              font-size : 12px;
            }
          }
        }
      }
    }


  </style>
</head>

<body>
  <!-- <div class="top-banner">
    <a href=""></a>
  </div> -->

  <div class="site-topbar">
    <div class="site-topbar-inner">
      <a href="#">小米官网</a>
      <span class="sep">|</span> <a href="#">小米商城</a>
      <span class="sep">|</span> <a href="#">MIUI</a>
      <span class="sep">|</span> <a href="#">IoT</a>
      <span class="sep">|</span> <a href="#">云服务</a>
      <span class="sep">|</span> <a href="#">天星数科</a>
      <span class="sep">|</span> <a href="#">有品</a>
      <span class="sep">|</span> <a href="#">小爱开放平台</a>
      <span class="sep">|</span> <a href="#">企业团购</a>
      <span class="sep">|</span> <a href="#">资质证照</a>
      <span class="sep">|</span> <a href="#">协议规则</a>
      <span class="sep">|</span> <a href="#">下载app</a>
      <span class="sep">|</span> <a href="#">Select Location</a>
      <div class="site-topbar-right-card">
        <a href="#">登录</a>
        <span>|</span>
        <a href="#">注册</a>
        <span>|</span>
        <a href="#">消息通知</a>

        <div class="shopping-cart">
          <a href="#" class="shopping-cart-link">购物车（0）</a>
          <div class="shopping-cart-detail">
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="top-nav">
    <div class="logo">
      <a href="/">
        <img src="https://www.qianduange.cn/upload/article/logo-mi2.png" alt="">
      </a>
    </div>
    <ul class="product-category">
      <li>Xiaomi手机
        <div class="product-submenu-wrapper">
          <ul class="product-submenu">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>

          </ul>
        </div>
      </li>
      <li>Redmi手机
        <div class="product-submenu-wrapper">
          <ul class="product-submenu">
            <li>fff</li>
            <li>eee</li>
            <li>ddd</li>
            <li>ccc</li>
            <li>bbb</li>
            <li>aaa</li>
          </ul>
        </div>
      </li>
    </ul>

    <ul class="product-category">
      <li>电视</li>
      <li>笔记本</li>
      <li>平板</li>
      <li>家电</li>
      <li>路由器</li>
      <li>服务中心</li>
      <li>社区</li>
    </ul>
    <form class="search-form" action="">
      <input type="text">
      <button><span class="icon icon.search"></span></button>
      <ul class="suggestions">
        <li>小米12</li>
        <li>小米12</li>
        <li>小米12</li>
        <li>小米12</li>
        <li>小米12</li>
      </ul>
    </form>

  </div>
  <div class="hero">
    <ul class="product-menu">
      <li>手机
        <ul class="product-menu-sub">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
      <li>电视
        <ul class="product-menu-sub">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
      <li>家电
        <ul class="product-menu-sub">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
      <li>笔记本 平板
        <ul class="product-menu-sub">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
      <li>出行 穿戴
        <ul class="product-menu-sub">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
      <li>耳机 音箱
        <ul class="product-menu-sub">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </li>
      <li>健康 儿童</li>
      <li>生活 箱包</li>
      <li>智能 路由器</li>
      <li>电源 配件</li>
    </ul>
    <div class="slider">
      <img
        src="https://www.qianduange.cn/upload/article/6d90fda69e63bf93ae62120901bafc0e.jpg?thumb=1&w=1533&h=575&f=webp&q=90"
        alt="">
    </div>
  </div>
  <div class="fixed-sidebar">
    <ul>
      <li><span class="icon icon-shopping-cart">lmp</span>
        <span class="icon-text">手机app</span>
      </li>
      <li><span class="icon icon-shopping-cart">lmp</span>
        <span class="icon-text">个人中心</span>
      </li>
      <li><span class="icon icon-shopping-cart">lmp</span>
        <span class="icon-text">售后服务</span>
      </li>
      <li><span class="icon icon-shopping-cart">lmp</span>
        <span class="icon-text">人工客服</span>
      </li>
      <li><span class="icon icon-shopping-cart">lmp</span>
        <span class="icon-text">购物车</span>
      </li>
    </ul>
  </div>
</body>
<script src=" https://cdn.jsdelivr.net/npm/less"></script>

</html>

小米页面

小米页面
————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章

转载请注明出处或者链接地址：https://www.qianduange.cn//article/8205.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

人大金仓数据库KingbaseES中JSON_SET函数的使用介绍

2024-05-22 09:05:20

记录 spring boot 无法获取 post json 数据

2024-05-22 09:05:18

利用Jackson封装常用的JsonUtil工具类

2024-05-22 09:05:17

JSON parse: Cannot deserialize value of type ‘XXX‘ from Array value (token `JsonToken.START_ARRRAY`)

2024-05-22 09:05:15

JSON三种数据解析方法

2024-05-22 09:05:13

json-editor-vue3 (Json字段编辑器 )

2024-05-22 09:05:05

JSON parse error: Cannot deserialize value of type `java.lang.String` from Object value (token `Json

2024-05-22 09:05:05

【百度云盘项目实践(1)】：探索JSON与Bundle库的结合应用

2024-05-22 09:05:01

使用nvm管理(切换)node版本

2024-05-22 09:05:48

nvm安装和使用保姆级教程（详细）

2024-05-22 09:05:22

大家推荐的文章
1

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
2

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
3

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
4

UE4.27支持HTML5

2024-05-07 13:05:261000
5

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
6

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
7

jQuery事件处理

2024-03-12 01:03:321000
8

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
9

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
10

echarts实现动态渲染多柱图

2024-02-12 14:02:341000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！