devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML5+CSS3实现小米商城（有源码）_小米商城菜单html代码

作者：花生_TL007 | 2024-04-02 19:45:43

赞

踩

小米商城菜单html代码

前言

这个小米商城用到了html+css，内容是2023年11月份的。

因为没有使用js，所以结构相对简单，比较容易理解，适合刚学完css的朋友。

一.效果展示

二.部分代码展示

1.头部

  1. <!-- 头部 -->
  2.     <div class="header">
  3.  
  4.       <!-- 黑色头部 -->
  5.       <div class="top_header">
  6.         <!-- 内容 -->
  7.         <div class="container">
  8.           <!-- 品类名字 -->
  9.           <div class="name_top">
  10.             <a href="#" class="nofollow">小米官网</a>
  11.             <span class="sep">|</span>
  12.             <a href="#" class="nofollow">小米商城</a>
  13.             <span class="sep">|</span>
  14.             <a href="#" class="nofollow">小米澎湃OS</a>
  15.             <span class="sep">|</span>
  16.             <a href="#" class="nofollow">IoT</a>
  17.             <span class="sep">|</span>
  18.             <a href="#" class="nofollow">云服务</a>
  19.             <span class="sep">|</span>
  20.             <a href="#" class="nofollow">天星数科</a>
  21.             <span class="sep">|</span>
  22.             <a href="#" class="nofollow">有品</a>
  23.             <span class="sep">|</span>
  24.             <a href="#" class="nofollow">小爱开放平台</a>
  25.             <span class="sep">|</span>
  26.             <a href="#" class="nofollow">资质证照</a>
  27.             <span class="sep">|</span>
  28.             <a href="#" class="nofollow">协议规则</a>
  29.             <span class="sep">|</span>
  30.             <a href="#" class="nofollow">下载app</a>
  31.             <span class="sep">|</span>
  32.             <a href="#" class="nofollow">Select Location</a>
  33.           </div>
  34.  
  35.           <!-- 购物车 -->
  36.           <div class="car_top">
  37.             <a href="#">
  38.               <em class="iconfont icon-gouwuche"></em>
  39.               购物车
  40.               <span>(0)</span>
  41.             </a>
  42.           </div>
  43.  
  44.           <!-- 信息通知 -->
  45.           <div class="txt_top">
  46.             <a href="#">登录</a>
  47.             <span class="sep">|</span>
  48.             <a href="#">注册</a>
  49.             <span class="sep">|</span>
  50.             <span class="message">
  51.               <a href="#">消息通知</a>
  52.             </span>
  53.           </div>
  54.  
  55.         </div>
  56.       </div>
  57.  
  58.       <!-- 白色部分 -->
  59.       <div class="middle_header">
  60.         <!-- 版心居中 -->
  61.         <div class="container">
  62.  
  63.           <!-- 小米logo -->
  64.           <div class="header_logo">
  65.             <a href="#">小米商城</a>
  66.           </div>
  67.  
  68.           <!-- 弹窗文字 -->
  69.           <div class="header_nav">
  70.             <ul class="nav_list">
  71.               <li class="nav-category"></li>
  72.               <li><a href="#">Xiaomi手机</a></li>
  73.               <li><a href="#">Redmi手机</a></li>
  74.               <li><a href="#">电视</a></li>
  75.               <li><a href="#">笔记本</a></li>
  76.               <li><a href="#">平板</a></li>
  77.               <li><a href="#">家电</a></li>
  78.               <li><a href="#">路由器</a></li>
  79.               <li><a href="#">服务中心</a></li>
  80.               <li><a href="#">社区</a></li>
  81.             </ul>
  82.           </div>
  83.  
  84.           <!-- 搜索 -->
  85.           <div class="header_search">
  86.               <div class="text"><input type="text"></div>
  87.               <div class="iconfont icon-sousuo" id="serarch"></div>
  88.           </div>
  89.  
  90.         </div>
  91.       </div>
  92.  
  93.     </div>
  1. /* 头部 */
  2. .header {
  3.   width: 100%;
  4.   height: 140px;
  5.   /* background-color: #b0b0b0; */
  6. }
  7.  
  8. /* 黑色部分 */
  9. .header .top_header {
  10.   position: relative;
  11.   height: 40px;
  12.   font-size: 12px;
  13.   color: #b0b0b0;
  14.   background-color: #333;
  15. }
  16.  
  17. .header .top_header .container {
  18.   width: 1226px;
  19.   height: 40px;
  20.   margin-right: auto;
  21.   margin-left: auto;
  22. }
  23.  
  24. /* 顶部品类区 */
  25. .header .top_header .container .name_top {
  26.   float: left;
  27.   height: 40px;
  28.   line-height: 40px;
  29. }
  30.  
  31. .name_top .sep {
  32.   margin: 0 .3em;
  33.   color: #424242;
  34. }
  35.  
  36. .name_top a {
  37.   color: #b0b0b0;
  38.   line-height: 40px;
  39.   display: inline-block;
  40. }
  41.  
  42. .name_top a:hover {
  43.   color: #fff;
  44. }
  45.  
  46. /* 顶部注册信息区 */
  47. .header .top_header .container .txt_top {
  48.   position: relative;
  49.   float: right;
  50.   height: 40px;
  51.   line-height: 40px;
  52. }
  53. .txt_top .sep {
  54.   margin: 0 .3em;
  55.   color: #424242;
  56. }
  57.  
  58. .txt_top a {
  59.   color: #b0b0b0;
  60.   line-height: 40px;
  61.   display: inline-block;
  62. }
  63.  
  64. .txt_top a:hover {
  65.   color: #fff;
  66. }
  67.  
  68. .txt_top .message {
  69.   padding: 0 10px;
  70. }
  71.  
  72.  
  73. /* 顶部购物车 */
  74. .header .top_header .container .car_top {
  75.   position: relative;
  76.   float: right;
  77.   width: 120px;
  78.   height: 40px;
  79.   line-height: 40px;
  80.   margin-left: 15px;
  81.   text-align: center;
  82. }
  83.  
  84. .car_top .iconfont .icon-gouwuche {
  85.   margin-right: 4px;
  86.   font-size: 20px;
  87.   line-height: 20px;
  88.   vertical-align: -4px
  89. }
  90.  
  91. /* 购物车超链接 */
  92. .car_top a {
  93.   position: relative;
  94.   font-size: 12px;
  95.   display: block;
  96.   height: 40px;
  97.   line-height: 40px;
  98.   text-align: center;
  99.   color: #b0b0b0;
  100.   background: #424242;  
  101. }
  102.  
  103. .car_top a:hover {
  104.   background-color: #fff;
  105.   color: #ff6700;
  106.   
  107. }

2.轮播图

  1.     <!-- 轮播图 -->
  2.     <div class="carousel">
  3.       <div class="img"><a href=""><img src="./img/小米14.png" alt=""></a></div>
  4.       <!-- 侧边 -->
  5.       <div class="site-category">
  6.         <ul class="category">
  7.           <li class="li-category">
  8.             <a href="#">手机<em class="iconfont icon-youjiantou"></em></a>
  9.           </li>
  10.           <li class="li-category">
  11.             <a href="#">电视<em class="iconfont icon-youjiantou"></em></a>
  12.           </li>
  13.           <li class="li-category">
  14.             <a href="#">家电<em class="iconfont icon-youjiantou"></em></a>
  15.           </li>
  16.           <li class="li-category">
  17.             <a href="#">笔记本 平板<em class="iconfont icon-youjiantou"></em></a>
  18.           </li>
  19.           <li class="li-category">
  20.             <a href="#">出行 穿戴<em class="iconfont icon-youjiantou"></em></a>
  21.           </li>
  22.           <li class="li-category">
  23.             <a href="#">耳机 音箱<em class="iconfont icon-youjiantou"></em></a>
  24.           </li>
  25.           <li class="li-category">
  26.             <a href="#">健康 儿童<em class="iconfont icon-youjiantou"></em></a>
  27.           </li>
  28.           <li class="li-category">
  29.             <a href="#">生活 箱包<em class="iconfont icon-youjiantou"></em></a>
  30.           </li>
  31.           <li class="li-category">
  32.             <a href="#">智能 路由器<em class="iconfont icon-youjiantou"></em></a>
  33.           </li>
  34.           <li class="li-category">
  35.             <a href="#">电源 配件<em class="iconfont icon-youjiantou"></em></a>
  36.           </li>
  37.         </ul>
  38.       </div>
  1.  
  2. /* 轮播图 */
  3. .app .carousel {
  4.   position: relative;
  5.   height: 670px;
  6.   width: 1226px;
  7.   overflow: hidden;
  8.   margin-right: auto;
  9.   margin-left: auto;
  10. }
  11.  
  12. .app .carousel img {
  13.   display: block;
  14.   width: 1226px;
  15.   height: 460px;
  16. }
  17.  
  18. .carousel .site-category {
  19.   position: absolute;
  20.   top: 0;
  21.   left: 0;
  22.   width: 234px;
  23.   height: 460px;
  24.   border: 0;
  25.   font-size: 14px;
  26.   background: rgba(105,101,101,.6);
  27.   color: #fff;
  28. }
  29.  
  30. .carousel .site-category .category {
  31.   height: 460px;
  32.   margin: 0;
  33.   padding: 20px 0;
  34.   list-style-type: none;
  35.   color: #424242;
  36. }
  37.  
  38. .carousel .site-category .category .li-category a {
  39.   position: relative;
  40.   display: block;
  41.   padding-left: 30px;
  42.   height: 42px;
  43.   line-height: 42px;
  44.   color: #fff;
  45.   font-size: 14px;
  46. }
  47.  
  48. .icon-youjiantou {
  49.   position: absolute;
  50.   top: 12px;
  51.   right: 20px;
  52.   font-size: 16px;
  53.   line-height: 16px;
  54.   color: #e0e0e0;
  55. }
  56.  
  57. .li-category a:hover {
  58.   background-color: #ff6700;
  59. }
  60.  
  61. /* 轮播图下4块小格 */
  62. .carousel .carousel_bottom {
  63.   width: 1240px;
  64.   height: 170px;
  65.   /* background-color: pink; */
  66.   margin-top: 14px;
  67.   margin-left: -14px;
  68.   display: flex;
  69. }
  70.  
  71. .carousel .carousel_bottom .six {
  72.   width: 234px;
  73.   /* background-color: #b0b0b0; */
  74.   float: left;
  75.   margin-left: 14px;
  76. }
  77.  
  78. .carousel .carousel_bottom .three {
  79.   width: 978px;
  80.   /* background-color: antiquewhite; */
  81.   float: right;
  82.   margin-left: 14px;
  83. }
  84.  
  85. .carousel .carousel_bottom .three ul {
  86.   display: flex;
  87. }
  88.  
  89. .carousel .carousel_bottom .three li {
  90.   margin-left: 15px;
  91.   float: left;
  92.   width: 316px;
  93.   height: 170px;
  94.   /* background-color: yellow; */
  95. }
  96.  
  97. .carousel .carousel_bottom .three li  img{
  98.   display: block;
  99.   width: 316px;
  100.   height: 170px;
  101. }
  102.  
  103. .carousel .carousel_bottom .three .first {
  104.   margin-left: 0;
  105. }
  106.  
  107. /* 轮播图下的六块 */
  108. .carousel_bottom .six {
  109.   margin-left: 14px;
  110.   min-height: 1px;
  111. }
  112.  
  113. .carousel_bottom .six ul {
  114.   float: left;
  115.   margin: 0;
  116.   padding: 3px;
  117.   list-style-type: none;
  118.   font-size: 12px;
  119.   text-align: left;
  120.   background-color: #5f5750;
  121. }
  122.  
  123. .carousel_bottom .six .six_li li {
  124.   position: relative;
  125.   float: left;
  126.   width: 76px;
  127.   height: 82px;
  128.   padding: 0 3px;
  129. }
  130.  
  131. .carousel_bottom .six .six_li li a {
  132.   display: block;
  133.   padding-top: 18px;
  134.   color: #fff;
  135.   opacity: .7;
  136.   transition: opacity .2s;
  137.   text-align: center;
  138. }
  139.  
  140. .carousel_bottom .six .six_li li a:hover {
  141.   opacity: 1;
  142. }
  143.  
  144. .carousel_bottom .six .six_li li img {
  145.   display: block;
  146.   width: 24px;
  147.   height: 24px;
  148.   margin: 0 auto 4px;
  149. }

代码过长不全，如果需要完整代码私信我

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/353525
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号