JS小米商城首页的简单实现

最新推荐文章于 2024-05-24 13:24:04 发布
最新推荐文章于 2024-05-24 13:24:04 发布
阅读量2.6k 收藏 39
点赞数 63
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z1561599530b/article/details/135717128
版权

仅有小米商城首页的一部分,不能跳转到其他页面,没有加动画效果,只是个模板.

主要用到了弹性盒子布局,浮动布局,相对定位,绝对定位,固定定位,子绝父相,点击事件,定时器,块元素转化为内联块级元素等.

效果图:

 

 

 轮播图效果没有加动画,可以点击左右箭头切换图片,每隔2秒会自动换图片.

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0px;
                margin: 0px;
            }
            .head{
                
                width: 1400px;
                height: 60px;
              
                margin: 20px auto;
                display: flex;
                justify-content: space-between;
            }
            .lefthead{
                /* border: 1px solid black; */
                
            }
            .lefthead img{
                height: 60px;
                
            }
            .centerhead{
                /* border: 1px solid black; */
                height: 60px;
                width: 700px;
                text-align: center;
            }
            .nav{
                list-style: none;
                display: flex;
                line-height: 60px;
                justify-content: space-around;
                align-content: center;
            }
            .nav li{
                display: inline-block;
            }
            .nav li a{
                color: #000;
                text-decoration: none;
            }
            .nav li a:hover{
                color: red;
            }
            .righthead{
                /* border: 1px solid black; */
                height: 60px;
            }
            .righthead img{
                height: 60px;
                float: right;
            }
            .c1{
                width: 326px;
                height: 56px;
                /* outline-style: none; */
            }
            
            
            
            .whole{
                width: 1400px;
                height: 550px;
                /* border: 1px solid red; */
                margin: 0px auto;
                
            }
            .left{
                width: 200px;
                height: 100%;
                background-color: #9F9D9D;
                float: left;
                position: relative;
            }
            .left ul{
                width: 100%;
                list-style: none;
                height: 100%;
                /* border: 1px solid red; */
                
                box-sizing: border-box;
            }
            .u1 li{
                /* border: 1px solid red; */
                
                color: white;
                height: 15px;
                display: flex;
                padding: 20px;
                justify-content: space-between;
                line-height: 15px;
                
            }
            .u1 li:hover{
                background-color: red;
            }
            .right{
                width: 1200px;
                height: 100%;
                /* border: 1px solid red; */
                float: right;
                /* overflow: hidden; */
                position: relative;
            }
            .ims img{
                width: 1200px;
                height: 100%;
                
            }
            .ims{
                width: 4800px;
                height: 100%;
          
            }
          
            .lx{
                width: 30px;
                height: 50px;
                background-color: gray;
                line-height: 50px;
                text-align: center;
                color: white;
                position:absolute;
                top: 50%;
                left: 0%;
                margin-top: -25px;
                cursor: pointer;
            }
            .rx{
                width: 30px;
                height: 50px;
                background-color: gray;
                line-height: 50px;
                text-align: center;
                color: white;
                position: absolute;
                top: 50%;
                right: 0%;
                margin-top: -25px;
                cursor: pointer;
            }
            .dian{
                display: flex;
                position: absolute;
                bottom: 5%;
                right: 5%;
                
            }
            .dian1,.dian2,.dian4{
                width: 10px;
                height: 10px;
                background-color: gray;
                border-radius: 50%;
                margin-left: 5px;
            }
            .dian3{
                width: 10px;
                height: 10px;
                background-color: white;
                border-radius: 50%;
                margin-left: 5px;
            }
            .left ul li .zi{
                width: 200px;
                height: 200px;
                background-color: white;
                color: #000;
                position: absolute;
                left: 200px;
               
                top: 2px;
                z-index: 10;
                display: none;
        
            }
            
            .left ul li:hover .zi{
                display: block;
            }
            
            .im{
                display: none;
            }
            .d3{
                width: 1400px;
                margin: 20px auto;
                display: flex;
                justify-content: space-between;
            }
            .d3 img{
                height: 243px;
                
            }
            .i1{
                width: 280px;
                height: 243px;
            }
            .i2,.i3,.i4{
                width:360px ;
                
            }
            .quanbu{
                background-color: #F5F5F5;
                height: 2000px;
                margin-top: 40px;
            }
            .tt{
                width: 1400px;
                margin: 20px auto;
                
            }
            .tt img{
                width: 1400px;
                margin-top: 30px;
            }
            .d1{
                width: 1400px;
                height: 30px;
                margin: 0 auto;
                /* border: 1px solid red; */
                display: flex;
                justify-content: space-between;
                
            }
            .d1 img{
                float: right;
                height: 20px;
                
            }
            .p1{
                font-size: 20px;
                opacity: 0.5;
                line-height: 30px;
            }
            .p2{
                line-height: 30px;
                display: flex;
                align-items: center;
            }
            .p2:hover{
                color: red;
            }
            .fu{
                width: 1400px;
                height: 650px;
                margin: 20px auto;
                display: flex;
                /* border: 1px solid red; */
            }
            .left1{
                width: 280px;
            
            /*     border: 1px solid red; */
            }
            .left1:hover{
                transform: scale(1.05);
            }
            .left1 img{
                height: 100%;
                width: 280px;
            }
            .right1{
                height: 100%;
                width: 1080px;
                margin-left: 40px;
                /* border: 1px solid red; */
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-between;
            }
            .right1 div{
                height:48% ;
                width: 240px;
                background-color: white;
                text-align: center;
                /* border: 1px solid red; */
                
            }
            .right1 div:hover{
                transform: scale(1.05);
            }
            .right1 div img{
                width: 240px;
                height: 60%;
                /* border: 1px solid red; */
            }
            .p4{
                opacity: 0.5;
                font-size: 12px;
                margin: 20px 0px;
            }
            .p5{
                color: red;
            }
            /* 锚点 */
            .maodian{
                width: 70px;
                height: 70px;
                background-color: pink;
                text-align: center;
                line-height: 70px;
                border-radius: 50%;
                position:fixed;
                top: 700px;
                left: 50%;
                margin-left: 700px;
            }
            .maodian a{
                text-decoration: none;
            }
            
            .head2{
                width: 1400px;
                height: 30px;
                margin: 20px auto;
                display: flex;
                justify-content: space-between;
               
            }
            .hl{
                font-size: 20px;
                opacity: 0.5;
            }
            .s1{
                margin-right: 20px;
                color: red;
                border-bottom: 2px solid red;
            }
            .fu2{
                width: 1400px;
                height: 650px;
                background-color: #F5F5F5;
         
                display: flex;
                margin: 0 auto;
            }
            .left2{
                width: 280px;
                height: 100%;
             
            }
            .left2 img{
                width: 280px;
                height: 100%;
            }
            .right2{
                width: 1080px;
                height: 100%;
              
                margin-left: 40px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-between;
                
            }
            .right2 div{
                width: 240px;
                height: 48%;
             
                text-align: center;
            }
            .left2:hover{
                transform: scale(1.05);
            }
            .right2 div:hover{
                transform: scale(1.05);
            }
            .right2 img{
                width: 240px;
                height: 100%;
            }
            .dd{
                background-color:  #F5F5F5;
            }
            .dd div{
                width: 100%;
                height: 48%;
             
            }
            .dd2{
                margin-top: 15px;
            
            }
        </style>
    </head>
    <body>
        <div class="head">
            <div class="lefthead"><img src="../images/x1.jpg" alt="" /></div>
            <div class="centerhead">
                <ul class="nav">
                    <li>
                        <a href="#" name="顶部">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>
            </div>
            <div class="righthead">
                <input type="text" class="c1"/>
                <a href="#">
                    <img src="../images/bb.jpg" alt="" />
                </a>
            </div>
        </div>
        <div class="whole">
            <div class="left">
                <ul class="u1">
                    <li>
                        手机<span>></span>
                        <div class="zi">
                            小米手机<br />
                            红米手机<br />
                        </div>
                        
                    </li>
                    <li>
                        电视<span>></span>
                    </li>
                    <li>
                        家电<span>></span>
                    </li>
                    <li>
                        笔记本 平板<span>></span>
                        <div class="zi">
                            小米手机<br />
                            红米手机<br />
                        </div>
                    </li>
                    <li>
                        出行 穿戴<span>></span>
                    </li>
                    <li>
                        耳机 音箱<span>></span>
                    </li>
                    <li>
                        健康 儿童<span>></span>
                    </li>
                    <li>
                        生活 箱包<span>></span>
                    </li>
                    <li>
                        智能 路由器<span>></span>
                    </li>
                    <li>
                        电源 配件<span>></span>
                    </li>
                </ul>
            </div>
            <div class="right">
                <div class="ims">
                <img src="../images/11.jpg" alt="" class="im" style="display: block;"/>
                <img src="../images/12.jpg" alt="" class="im"/>
                <img src="../images/13.jpg" alt="" class="im"/>
                <img src="../images/14.jpg" alt="" class="im"/>
                </div>
                <div class="lx"  οnclick="last()"><</div>
                <div class="rx"  οnclick="next()">></div>
                <div class="dian">
                    <div class="dian1"></div>
                    <div class="dian2"></div>
                    <div class="dian3"></div>
                    <div class="dian4"></div>
                </div>
            </div>
            
        </div>
        <div class="d3">
            <img src="../images/dd.jpg" alt="" class="i1"/>
            <img src="../images/ee.jpg" alt="" class="i2"/>
            <img src="../images/ff.jpg" alt="" class="i2"/>
            <img src="../images/gg.jpg" alt="" class="i2"/>
        </div>
        <div class="quanbu">
            <div class="tt">
                <a href="#">
                    <img src="../images/tt.jpg" alt="" />
                </a>
            </div>
            
            <div class="d1">
                <span class="p1">手机</span>
                <span class="p2">查看更多
                <img src="../images/jiantou.jpg" alt="" />
                </span>
            </div>
            <div class="fu">
                <div class="left1">
                    <img src="../images/K70.jpg" alt="" />
                </div>
                <div class="right1">
                    <div>
                        <img src="../images/RedK70Pro.jpg" alt="" />
                        <p class="p3">Redmi K70 Pro</p>
                        <p class="p4">第三代骁龙8 年度旗舰平台</p>
                        <p class="p5">3299元起</p>
                    </div>
                    <div>
                        <img src="../images/RedmiK70.jpg" alt="" />
                        <p class="p3">Redmi K70</p>
                        <p class="p4">第二代骁龙8 旗舰芯</p>
                        <p class="p5">2499元起</p>
                    </div>
                    <div>
                        <img src="../images/K70E.jpg" alt="" />
                        <p class="p3">Redmi K70E</p>
                        <p class="p4">新一代旗舰焊门员</p>
                        <p class="p5">1999元起</p>
                    </div>
                    <div>
                        <img src="../images/xiaomi14Pro.jpg" alt="" />
                        <p class="p3">Xiaomi 14 Pro</p>
                        <p class="p4">徕卡Summilux可变光圈镜头|小米澎...</p>
                        <p class="p5">4999元起</p>
                    </div>
                    <div>
                        <img src="../images/xiaomi14.jpg" alt="" />
                        <p class="p3">Xiaomi 14</p>
                        <p class="p4">第三代骁龙8 年度旗舰平台</p>
                        <p class="p5">3999元起</p>
                    </div>
                    <div>
                        <img src="../images/Note13Pro.jpg" alt="" />
                        <p class="p3">Redmi Note 13 Pro</p>
                        <p class="p4">小金刚品牌</p>
                        <p class="p5">1399元起</p>
                    </div>
                    <div>
                        <img src="../images/Note13Pro+.jpg" alt="" />
                        <p class="p3">Redmi Note 13 Pro+</p>
                        <p class="p4">天机 7200-Ultra</p>
                        <p class="p5">1699元起</p>
                    </div>
                    <div>
                        <img src="../images/Note13 5G.jpg" alt="" />
                        <p class="p3">Redmi Note 13 5G</p>
                        <p class="p4">1亿像素 更快更清晰</p>
                        <p class="p5">999元起</p>
                    </div>
                </div>
            </div>
            
            <!--  -->
            <div class="head2">
                <div class="hl">
                    <span>智能穿戴</span>
                </div>
                <div class="lr">
                    <span class="s1">耳机</span>
                    <span>穿戴</span>
                </div>
            </div>
            
            <div class="fu2">
                <div class="left2">
                    <img src="../images/a1.jpg" alt="" />
                </div>
                <div class="right2">
                    <div>
                        <img src="../images/a2.jpg" alt="" />
                    
                    </div>
                    <div>
                        <img src="../images/a3.jpg" alt="" />
                        
                    </div>
                    <div>
                        <img src="../images/a4.jpg" alt="" />
                        
                    </div>
                    <div>
                        <img src="../images/a5.jpg" alt="" />
                        
                    </div>
                    <div>
                        <img src="../images/a6.jpg" alt="" />
                        
                    </div>
                    <div>
                        <img src="../images/a7.jpg" alt="" />
                        
                    </div>
                    <div>
                        <img src="../images/a8.jpg" alt="" />
                        
                    </div>
                    <div class="dd">
                        
                        <div class="dd1">
                            <img src="../images/a9.jpg" alt="" />
                        </div>
                        <div class="dd2">
                            <img src="../images/a10.jpg" alt="" />
                        </div>
                        
                    </div>
                </div>
            </div>
            
            
        </div>
        
        
        
        <div class="maodian">
            <a href="#顶部">返回顶部</a>
        </div>
    </body>
    
    
    
    
    
    
    <script>
        let i=0;
        function next(){
            i++;
            let ims=document.querySelectorAll(".im");
            if(i>=ims.length){
                i=0;
            }
            for(let im of ims){
                im.style.display='none';
            }
            ims[i].style.display='block';
        }
        setInterval(change,3000);
    
        function change(){
            i++;
            let ims =document.querySelectorAll(".im");
            if(i>=ims.length){
                i=0;
            }
            for(let im of ims){
                im.style.display='none';
            }
            ims[i].style.display="block";
        }
      
        function last(){
            i--;
            let ims=document.querySelectorAll(".im");
            if(i<0){
                i=ims.length-1;
            }
            for(let im of ims){
                im.style.display='none';
            }
            ims[i].style.display='block';
        }
        </script>
</html>

不太会敲代码的搬砖工程师
关注
  • 63
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HTML期末大作业 仿小米商城网页设计与制作(HTML+CSS+JavaScript) JavaScript期末大作业 web前端期末大作业 dw静态网页
VX_WJ88950106的博客
07-18 818
关于HTML期末网页制作， ~仿小米商城网页作业HTML+CSS+JavaScript实现，共有10个页面!高仿小米商城HTML+CSS+JS页面设计，可以学习学习，大学网页设计作业，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。此次(html+css+js+image)确定每个页面将使用的页面布局技术（如结合使用CSS及表格、DIV、框架等技术），完成各页面的布局设计。 ...
仿小米官网首页和登录页面静态的
12-27
本资源属于仿小米商城首页和登录页面及购物车页面 页面内容纯静态，不包含JavaScript代码，只包含css和html文件， 首页简化，去掉了一些复杂逻辑页面，简单明了，适合用于学校布置的html网页设计课题。
web课程设计——仿小米商城(10个页面)HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作代码
网页设计与制作
05-24 470
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
小米商城js
weixin_44701378的博客
02-28 1164
var tabs = document.getElementById(“tabs”).getElementsByTagName(“li”); console.log(tabs); var lists = document.getElementById(“lists”).getElementsByTagName(“ul”) console.log(lists); for (var i = 0; i ...
Web课程设计——小米商城页面实战（html，css，js实现）
m0_67494167的博客
12-04 6006
基于html，css和js完成的三个页面，由于时间紧张，包含一部分未修正bug，欢迎交流
小米商城html+css+js全代码
热门推荐
weixin_57774021的博客
03-21 1万+
小米商城全代码，供参考，互相学习
HTML5+CSS3实现小米商城（课程设计版）
m0_63512120的博客
11-06 3704
这个小米商城用到了html+css+js，内容是今年6月份的。 结构相对简单，比较容易理解。 如果想要纯html+css实现的小米商城，可以看我的这个作品 HTML+CSS实现小米商城 如果需要其他网页作品了，可以看主页其他作品。 HTML+CSS实现华为商城 HTML+CSS实现华为官网 HTML+CSS实现哔哩哔哩首页 HTML+CSS实现小米官网 HTML+CSS实现QQ注册页面 下面先展示一个页面整体结构，然后再分析一下实现代码吧！ 文章末尾附项目源代码！！！ 2.广告块部分 3.右侧固定
js小米商城商品加入购物车特效代码
03-20
综上所述，实现“js小米商城商品加入购物车特效代码”涉及到的JavaScript技术广泛且深入，涵盖了事件处理、DOM操作、数据存储、动画效果、用户交互等多个方面。开发者需要熟练掌握这些技能，才能创造出既美观又实用...
仿小米商城网页版（全套）
09-28
这个项目旨在提供一个与小米商城类似的功能齐全、用户体验优良的网页版本，涵盖了多个核心功能模块，包括首页、订单管理、商品列表、商品详情、个人中心以及购物车等。 在开发这样一个网页版仿小米商城的过程中，...
myshop_小米商城_
10-02
【标题】"myshop_小米商城_" 指示的是一个基于JavaWeb技术开发的简易版小米商城在线购物系统。这个项目可能是一个教学或者实践案例，用于帮助学习者理解JavaWeb开发的基础概念。 【描述】"javaweb项目之商城项目，...
仿小米商城前端网页，采用html+css+js,纯原生代码实现完美复刻小米商城
08-01
总的来说，"仿小米商城前端网页"项目是一个全面的前端实战案例，涵盖了从基本的HTML结构到复杂的CSS布局，再到动态交互的JavaScript实现。通过这个项目，学习者不仅可以提升技术能力，还能锻炼解决问题和调试代码的...
原生js小米商城点击商品加入购物车代码
11-02
原生js小米商城点击商品加入购物车代码 原生js小米商城点击商品加入购物车代码
小米商城html项目实战，js+css+html
12-12
小米商城html项目实战，js+css+html
2017小米商城完整版源码
03-16
2017小米商城完整版源码，内含配置安装文档 小米商城 小米商城
小米商城html
01-03
利用css和html布局网页
仿小米官网(html+js+css)
11-09
学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码
模仿小米商城HTML5
09-04
在模仿小米商城的项目中，JavaScript可以用来处理用户输入、更新页面内容、实现轮播图、筛选功能、添加到购物车等动态效果。此外，可能还需要利用到一些JavaScript库或框架，如jQuery或Vue.js，以提高开发效率。 在...
Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页，含有table表格，js表单验证还有首页视频。以及列表页。浮动布局。div+css+js
HTML网页设计
07-28 7425
1网页简介此作品为学生个人主页网页设计题材，HTML+CSS布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平,非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用技术方面主要应用了网页知识中的Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。......
JavaScript 简易小米官网案例
jpmoney的博客
10-09 526
javascript html css 超简单案例
小米商城html简单代码
最新发布
05-29
小米商城的HTML代码是一份比较复杂的前端页面代码，其中涉及到了HTML、CSS和JavaScript等多种技术。由于篇幅限制，我在这里给您提供一个简单的HTML代码示例，您可以作为参考： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>小米商城</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <ul> <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> </nav> <div class="search-box"> <input type="text" placeholder="搜索商品"> <button>搜索</button> </div> </header> <main> <!-- 商品列表 --> </main> <footer> <p>©2021 小米公司 版权所有</p> </footer> </body> </html> ``` 这段代码实现了一个简单的页面布局，包括了顶部导航、搜索框、商品列表和底部版权信息等。需要注意的是，这只是一个简单的示例代码，实际的小米商城页面远比这个复杂。如果您需要更深入的了解，可以参考小米商城的官方网站源代码或者学习相关前端技术。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不太会敲代码的搬砖工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值