一二级菜单的小米商城自动轮播图(HTML+CSS+JS实现)

最新推荐文章于 2026-05-09 05:15:11 发布
原创 最新推荐文章于 2026-05-09 05:15:11 发布 · 4.7k 阅读 · 50 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
前端

当前文章被收录于：

前端
3 篇文章 1 人学习

学习前端

订阅专栏 查看详情
本文介绍了一个仿照小米商城的轮播图实现方案，包括HTML结构、CSS样式及JavaScript交互逻辑，展示了如何创建带有菜单栏及轮播效果的页面。

实验结果如下：
在这里插入图片描述

如上图，主要仿小米商城的轮播图，左边为菜单栏，分为一二级菜单
如下所示：
在这里插入图片描述项目结构如下：
在这里插入图片描述

废话少说，直接上代码：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css"  href="css/style.css">
    <link rel="stylesheet" href="css/iconfont.css">
</head>
<body>
<div class="main" id="main">
    <div class="menu-box"></div>
<!--    子菜单-->
    <div class="sub-menu hide" id="sub-menu">
        <div class="inner-box " >
          <div class="sub-inner-box">
              <div class="title">手机，配件1</div>
              <div class="sub-row">
                <span class="bold mr10">手机通信：</span>
                 <a href="">手机</a>
                <span class="ml10 mr10">/</span>
                <a href="">手机维修</a>
                <span class="ml10 mr10">/</span>
                <a href="">以旧换新</a>
            </div>
              <div class="sub-row">
                  <span class="bold mr10">手机通信：</span>
                  <a href="">手机</a>
                  <span class="ml10 mr10">/</span>
                  <a href="">手机维修</a>
                  <span class="ml10 mr10">/</span>
                  <a href="">以旧换新</a>
              </div>
              <div class="sub-row">
                  <span class="bold mr10">手机通信：</span>
                  <a href="">手机</a>
                  <span class="ml10 mr10">/</span>
                  <a href="">手机维修</a>
                  <span class="ml10 mr10">/</span>
                  <a href="">以旧换新</a>
              </div>


          </div>
        </div>
        <div class="inner-box" >
            <div class="sub-inner-box">
                <div class="title">手机，配件2</div>
                <div class="sub-row">
                    <span class="bold mr10">手机通信：</span>
                    <a href="">手机</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">手机维修</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">以旧换新</a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">手机通信：</span>
                    <a href="">手机</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">手机维修</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">以旧换新</a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">手机通信：</span>
                    <a href="">手机</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">手机维修</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">以旧换新</a>
                </div>


            </div>
        </div>
        <div class="inner-box" >
            <div class="sub-inner-box">
                <div class="title">手机，配件3</div>
                <div class="sub-row">
                    <span class="bold mr10">手机通信：</span>
                    <a href="">手机</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">手机维修</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">以旧换新</a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">手机通信：</span>
                    <a href="">手机</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">手机维修</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">以旧换新</a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">手机通信：</span>
                    <a href="">手机</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">手机维修</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">以旧换新</a>
                </div>


            </div>
        </div>
        <div class="inner-box" >
            <div class="sub-inner-box">
                <div class="title">手机，配件4</div>
                <div class="sub-row">
                    <span class="bold mr10">手机通信：</span>
                    <a href="">手机</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">手机维修</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">以旧换新</a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">手机通信：</span>
                    <a href="">手机</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">手机维修</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">以旧换新</a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">手机通信：</span>
                    <a href="">手机</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">手机维修</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">以旧换新</a>
                </div>


            </div>
        </div>
    </div>
<!--    主菜单-->
    <div class="menu-content" id="menu-content">
        <div class="menu-item">
            <a href="">
                <span>手机/配件</span>
                <i class="iconfont icon ">&#xe601;</i>
            </a>
        </div>
        <div class="menu-item">
            <a href="">
                <span>电脑</span>
                <i class="iconfont icon ">&#xe601;</i>
            </a>
        </div>
        <div class="menu-item">
            <a href="">
                <span>家用电器</span>
                <i class="iconfont icon ">&#xe601;</i>
            </a>
        </div>
        <div class="menu-item">
            <a href="">
                <span>家具</span>
                <i class="iconfont icon ">&#xe601;</i>
            </a>
        </div>

    </div>
<!--    焦点图-->
    <div class="banner" id="banner">
       <a href="">
           <div class="banner-slide slide1 slide-active"></div>
       </a>
        <a href="">
            <div class="banner-slide slide2"></div>
        </a>
        <a href="">
            <div class="banner-slide slide3"></div>
        </a>
    </div>

    <a href="javascript:void(0)" class="button prev" id="prev">
    </a>
    <a href="javascript:void(0)" class="button next" id="next">
    </a>
    <div class="dots" id="dots">
        <span class="active"></span>
        <span></span>
        <span></span>
    </div>
</div>

<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

样式stycle.css

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: "微软雅黑";
    color: #14191e;
}

a{
    text-decoration: none;
}

a:link,a:visited{
    color: #5e5e5e;
}


/*@font-face {*/
/*    font-family: "iconfont";*/
/*    src: url(https://blog.csdn.net/'../img/font/iconfont.eot');*/
/*    src: url(https://blog.csdn.net/"../img/font/iconfont.eot") format('embedded-opentype'),*/
/*    url(https://blog.csdn.net/"../img/font/iconfont.woff") format('woff'),*/
/*    url(https://blog.csdn.net/"../img/font/iconfont.ttf") format('truetype'),*/
/*    url(https://blog.csdn.net/"../img/font/iconfont.svg#iconfont") format('svg'),*/
/*    */
/*}*/


.main{
    width: 1200px;
    height: 460px;
    margin: 30px auto;
    overflow: hidden;
    position: relative;
}

/*焦点图*/
.banner{
    width: 1200px;
    height: 460px;
    overflow: hidden;
}

.banner-slide{
    width: 1200px;
    height: 460px;
    float: left;
    background-repeat: no-repeat;
    display: none;
}

.slide-active{
    display: block;
}

.slide1{
    background-image: url(https://blog.csdn.net/"../img/bg1.jpg");
}

.slide2{
    background-image: url(https://blog.csdn.net/"../img/bg2.jpg");
}

.slide3{
    background-image: url(https://blog.csdn.net/"../img/bg3.jpg");
}

.button{
    position: absolute;
    width: 40px;
    height: 80px;
    left: 244px;
    background: url(https://blog.csdn.net/"../img/arrow.png") center center no-repeat;
    top: 50%;
    margin-top: -40px;
    transform: rotate(180deg);
}

.button:hover{
    background-color: #333;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.next{
    left: auto;
    right: 0;
    transform: rotate(0deg);
}
.dots{
    position: absolute;
    right:24px;
    bottom: 24px;
    line-height: 12px;

}


.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(7,17,27,0.4);
    margin-left: 8px;
    box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset ;
    cursor: pointer;
}

.dots span.active{
    background-color: #fff;
    box-shadow:0 0 0 2px  rgba(7,17,27,0.4) inset ;
}

.menu-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 244px;
    height: 460px;
    background: rgba(7,17,27,0.3);
    z-index: 1;

}

.menu-content{
    position: absolute;
    left: 0;
    top: 0;
    width: 244px;
    height: 460px;
    z-index: 2;
}

.menu-item{
    height: 64px;
    line-height: 66px;
    cursor: pointer;
    padding: 0 24px;
}

.menu-item a{
    display: block;
    color: #fff;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    height: 63px;
    padding: 0 8px;
    position: relative;


}

.menu-item:last-child a{
    border-bottom: none;
}

.menu-item i{
    position: absolute;
    right: 32px;
    top: 2px;
    color: rgba(255,255,255,0.5);
    font-style: normal;
    font-weight: normal;
    font-family: "iconfont";
    font-size: 24px;
}

.sub-menu{
    width: 730px;
    height: 458px;
    position: absolute;
    left: 244px;
    top: 0;
    background: #fff;
    z-index: 500;
    border: 1px solid #d9dde1;
    box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1);
}

.inner-box{
    width: 100%;
    height: 100%;
    background: url(https://blog.csdn.net/"../img/fe.png")  no-repeat;
    display: none;

}

.sub-inner-box{
    width: 652px;
    margin-left: 40px;
    overflow: hidden;
}


.title{
    font-size: 16px;
    color: #f01414;
    line-height: 16px;
    font-weight: bold;
    margin: 28px 0 30px 0;
}

.sub-row{
    margin-bottom: 25px;
}

.bold{
    font-weight: 700;

}

.mr10{
    margin-right: 10px;
}

.ml10{
    margin-left: 10px;
}

.hide{
    display: none;
}

因为箭头用了阿里矢量图片，需引入相应 iconfont.css

@font-face {font-family: "iconfont";
  src: url(https://blog.csdn.net/'iconfont.eot?t=1605661472363'); /* IE9 */
  src: url(https://blog.csdn.net/'iconfont.eot?t=1605661472363#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url(https://blog.csdn.net/'data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALYAAsAAAAABrgAAAKMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBEIEWATYCJAMMCwgABCAFhG0HRRvrBREVjEGyH5JEgTqIqBSUzQkFkplACggUAAAAABAP/43ju29mvogIrpCkqBTA2Da0PZ2Ryn9hbpiGvlCukUTiHeuX7fedfVjzlkmJEAmR/zv1v1BsTqEAxoILx+zyYnMc3d5usAaDiRW8ovc/l9ObQAfS+laU0xwbj3oBxgEFtre1yYooIW6RXcSduIjTBGoNmhcHR10PRgo0KRD371QJjAohRTGy1UJlw8oiXkCF6vSQ2PA8+n58tRojkooMzTxfOjks//FpIN/wzTWOQJggr69AxjwKcaMxdQm6wqCyWlWvu7hSEdJc0UNMJPIVlfgPjySISqiyHkwr6cSHoFwSnwYkd53JcHe8TGCFbH9siLbWo++19auRwgGJQX+/tuOUPXojqSp79GmEoqv5vL2M3FDzfR17MLYty8r8Z9/HpA4ONl1Znx6ln/oZKq3vuj0PzYrbLZB/Jj0lTlqkV+mXQHDqN9YWURv/yboC3rxuITIUsHKqJcDiPyYGthRfisy5uCIqCj1ZG8CRkAWm1yHka/V+vK7jrnKhWscIX5WBO/RUG8/QQs5DhTrrUKmaextqzfHW12kjuqLUYNZbgtDsA0mjl5A1+6KF/EGFTn+o1BxdqHUh2nasMxnpZF/QV4wguEIackXEqpO4eo3xsfAlL40Ye5QmjYJj2uWshxXKHHOaU+yqEpBwCSvpPCwKhlo4w1DNRLVeWBY1vckMuWxN7BPIp1AEBK5AKsQqxDurSeXzayh2VPBJB63Hv4dEI+0dOEw2APVUFYh2L9c0TmIupQgggpXAShqGCgUG6uZhGRRSpmREorZg4XYEVZnra8rv2wW10GU5UuQo6m6L8NmQNE50/gLFRoGkrRY=') format('woff2'),
  url(https://blog.csdn.net/'iconfont.woff?t=1605661472363') format('woff'),
  url(https://blog.csdn.net/'iconfont.ttf?t=1605661472363') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url(https://blog.csdn.net/'iconfont.svg?t=1605661472363#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconarrow-right:before {
  content: "\e81d";
}

.iconiconfont-left:before {
  content: "\e601";
}

script.js

var index=0,
    timer=null,//定时器
    main=byId("main"),
    prev=byId("prev"),
    next=byId("next"),
    pics=byId("banner").getElementsByTagName("div"),
    banner=byId("banner"),
    dots=byId("dots").getElementsByTagName("span"),
    menuContent=byId("menu-content"),
    menuItems=menuContent.getElementsByClassName("menu-item"),
    subMenu=byId("sub-menu"),
    innerBox=subMenu.getElementsByClassName("inner-box"),
    size=pics.length;




function  byId(id) {
   return typeof(id) == "string" ? document.getElementById(id):id;
}

//封装通用事件绑定方法
function addHander(element,type,handler){
    if(element.addEventListener){
        element.addEventListener(type,handler,true);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,handler);
    }else {
        element["on"+type]=handler;
    }
}

//当鼠标停放在图片上，停止自动轮播
function stopAutoPlay() {
  if(timer){
      clearInterval(timer);
  }
}



//自动轮播
function startAutoPlay() {
    timer=setInterval(function () {
  index++;
  if(index>=size) index=0;
  changeImg();

    },2000)
}


//切换图片
function changeImg() {
    for (var i=0;i<size;i++){
        pics[i].style.display="none";
        dots[i].className="";
    }
    pics[index].style.display="block";
    dots[index].className="active";
}
//下一张图片
addHander(next,"click",function () {
    index++;
    if(index>=size) index=0;
   changeImg();

})

addHander(prev,"click",function () {
    index--;
    if(index<0) index=size-1;
    changeImg();

})

//点击圆点切换图片
for (var d=0;d<size;d++){
    dots[d].setAttribute("data-id",d);
    addHander(dots[d],"click",function () {
     index=this.getAttribute("data-id");
     changeImg();
    })
}

//
for(var m=0,idx,mlen=menuItems.length;m<mlen;m++){
    menuItems[m].setAttribute("data-index",m);
    addHander(menuItems[m],"mouseover",function () {
   subMenu.className="sub-menu";
   idx=this.getAttribute("data-index");
   for (var j=0,jlen=innerBox.length;j<jlen;j++){
       innerBox[j].style.display="none";
       menuItems[j].style.background="none";
   }

   innerBox[idx].style.display="block";
   menuItems[idx].style.background="rgba(0,0,0,0.1)";

    })
}

//鼠标离开banner
addHander(banner,"mouseout",function () {
  subMenu.className="sub-menu hide";
})


addHander(menuContent,"mouseout",function () {
    subMenu.className="sub-menu hide";
})

addHander(subMenu,"mouseover",function () {
    this.className="sub-menu ";
})

addHander(subMenu,"mouseout",function () {
    this.className="sub-menu hide ";
})


//鼠标换入main,停止轮播
addHander(main,"mouseover",stopAutoPlay)
//鼠标离开main,继续轮播
addHander(main,"mouseout",startAutoPlay)
startAutoPlay();

图片资源如下：
轮播图片：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述上下一张箭头图片：
在这里插入图片描述二级菜单背景图片：
在这里插入图片描述创作不易，来个一键三连，有不会怀孕？

标签
#css #javascript #html5 #css3
左侧分类菜单图片轮播组合布局
06-01
原生js实现手机商城左侧分类菜单和产品图片轮播切换组合布局效果。适用于各种商城的主屏页面商品图片和导航菜单布局样式代码
小米商城前端页面显示html设计
06-11
小米商城页面设计，对小白友好的设计示例，有需要的可以看看
小白学习路之js实现图片轮播切换效果
wy__kobe的博客
10-08 679
最近在b站上学习的时候，学到了一个用原生js实现图片轮播切换效果的实战，码下来收藏，嘻嘻嘻~ 上图是这个小实战的效果图，整个小实战所实现的功能是图片自动轮播切换、点击上下键图片切换上下图片、点击右下角圆点切换相应图片、点击主菜单显示相应子菜单内容。 html页面布局 &lt;body&gt; &lt;!--主区域，存放所有需要元素--&gt; &lt;div id="main" class=...
从Async FIFO到握手协议：手把手教你给不同异步电路写‘个性化’的CDC约束（含Relax技巧）
最新发布
weixin_33720078的博客
05-09 1125
本文深入探讨了异步电路CDC约束的精准定制策略，从Async FIFO到握手协议，详细解析了不同异步电路的约束优化方法。通过工程实践案例，展示了如何避免过度约束问题，提升时序收敛效率，特别包含Relax技巧的应用。适用于后端设计工程师在signOff阶段优化CDC约束。
仿京东商城首页（图片轮播、左侧悬浮导航栏、头部悬浮搜索框、右侧悬浮栏）
热门推荐
积极废人的博客
08-10 1万+
首页太长截成几个小部分写的东西基本都在里面了 基本的html+css布局，图片轮播，左侧悬浮导航栏 头部悬浮搜索框 右侧导航按钮（详情见图5） 。适合学完html+css对js，jquery有一定了解的人学习。代码太多，来个大神教一下怎么上传代码 要资源的给个赞呗？ ...
CSS——使用swiper插件实现小米商城轮播图
Bonsoir777的博客
07-04 1310
本文主要介绍了小米商城首页面的部分实现过程以及 swiper插件的简易使用方法
HTML5+CSS3实现小米商城和购物车（课程设计大作业）
m0_63512120的博客
11-24 3956
用的是HTML和CSS和JS做的小米商城首页和一个小米的购物车案例！项目末尾有项目完整源代码，其中 小米商城用 js 实现了和以及购物车页面实现了以及还有华为和小米和哔哩哔哩的一些其他相关页面就不在这里展示了，如果需要了可以后台私信我！那话不多说，先展示一下我的这两个页面实现效果吧！
Web课程设计——小米商城页面实战（html，css，js实现）
m0_67494167的博客
12-04 6811
基于html，css和js完成的三个页面，由于时间紧张，包含一部分未修正bug，欢迎交流
小米商城轮播图的实现
qq_45746940的博客
12-26 1238
小米商城轮播图 用了div+css+js+jsjquery 要引入jquery库 <div class="Container lunbo"> <!-- 中间大图 --> <div id="play" class="play"> <ul class="imgList"> <li class="current"> &lt
HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
02-24 4373
HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业
模拟静态小米商城官网html+css
m0_47937523的博客
05-29 6189
静态仿小米官网 目录 项目结构 页面截图 部分功能 下载地址 项目结构 mi.html 小米官网的首页 mi.css 小米官网首页样式表 base.css 公共样式表（存放如clearfix，默认字体，和页面大小等代码） fa 字体图标文件夹 img 网页图片文件夹 页面截图 ...
小米官网轮播图.zip
02-27
使用JavaScript写的小米官网轮播图！使用的jquery结合原生JavaScript写的一个可以移植到不同需求的场景使用的轮播图
HTML5+CSS3实现小米商城（有源码）
m0_74131551的博客
11-19 2378
使用HTML5和CSS3快速实现小米商城，适合刚学完css的朋友，如果有问题可以联系我。
HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码...
qq_365392777
03-02 2489
HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码常见网页设计作业题材有 ​​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明...
Vue - [完整源码] 实现分类菜单 + 轮播图组合布局效果，类似左侧菜单与右侧轮播图连接在一起的效果（当鼠标移入菜单时，侧边出现子菜单列表）常见于商城系统，示例代码注释详细开箱即用！
🏆 前端领域优质创作者
04-20 2999
vue左侧菜单分类盖在右侧轮播图之上的效果，vuecss实现分类菜单+轮播图合在一起效果，vue仿小米商城的导航及轮播图拼在一起的效果，vuenuxt左侧分类菜单右侧轮播图的组合布局，css实现左边菜单分类右边轮播图，vuecss左侧分类导航菜单和右侧图片轮播滚动布局代码，vuecss实现带二级菜单的图片轮播动画，vuecss如何实现垂直菜单,鼠标移入后出现二级菜单，vue有没有左侧是垂直菜单(鼠标移入后出现二级菜单)右侧是图片轮播图带左右箭头，vuecss左侧菜单分类与右侧轮播图盖在一
小米官网
犹如菜鸡的博客
01-05 3512
小米官网页面 效果图 菜单栏显示 HTML部分 <!-- 导航栏 --> <div class="topBar"> <div class="container1"> <div class="topBar-nav"> <a href="">小米商城</a> <span class...
【网站制作】三、实战 - 小米商城
悟已往之不谏 知来者之可追
02-18 1298
小米商城导航栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小米商城</title> <style type="text/css"> *{margin: 0;padding: 0;} .top {width: 10...
构建仿小米购物商城前端实战
weixin_34392511的博客
07-27 1130
htmltable {th, td {th {pre {简介：本项目旨在构建一个类似小米商城的在线购物平台前端，着重实现基本功能如首页展示、搜索功能、商品列表和交互体验。涉及的关键技术包括HTML页面结构设计、CSS样式美化以及JavaScript实现动态交互。项目中使用了轮播图、动态加载、模态框等前端技术，以提升用户体验。适合初学者学习和提升前端开发能力。
小米商城轮播图部分
Moerin_的博客
08-24 656
【代码】小米商城轮播图部分。
小米商城HTML（大一）
2301_81069484的博客
11-19 147
<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 >
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值