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

【CSS】小米页面

2024-05-12 00:05:50 前端知识 前端哥 41 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基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

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

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

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

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

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

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

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