仿小米商城网站开发（2）

最新推荐文章于 2023-08-18 01:51:43 发布
最新推荐文章于 2023-08-18 01:51:43 发布
阅读量409 收藏 1
点赞数 8
分类专栏： html css JavaScript基本响应式布局 文章标签： javascript css html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57479246/article/details/125186366
版权

目录

1技术栈

2开发代码

1.中部栏目

2.中部图片

3.商品栏

1技术栈

需要用到的技术

JavaScript

html

css

库：jQuery

2开发代码

1.中部栏目

html代码：

<!--------------------------------->
    <div class="centre">
        <div class="cen_left">
            <div><a href="#"><img src="./images/001.png">保障服务</a></div>
            <div><a href="#"><img src="./images/002.png">企业团购</a></div>
            <div class="qc"><a href="#"><img src="./images/003.png">F码通道</a></div>
            <div><a href="#"><img src="./images/004.png">米粉卡</a></div>
            <div><a href="#"><img src="./images/005.png">以旧换新</a></div>
            <div class="qc"><a href="#"><img src="./images/006.png">话费充值</a></div>
        </div>
        <div class="cen_right">
            <a href="#"><img src="./images/redmi.jpg"></a>
            <a href="#"><img src="./images/note11t.jpg"></a>
            <a href="#"><img src="./images/xiaomi.jpg" class="imgr"></a>
        </div>
    </div>

css代码：

/* ------------------------------------------ */
.centre {
    width: 1226px;
    height: 170px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 30px;
}

.centre .cen_left {
    /* 左边 */
    height: 170px;
    width: 234px;
    float: left;
    background-color: #5f5750;
    padding-left: 4px;
    position: relative;
}

.centre .cen_left div {
    width: 76px;
    height: 82px;
    display: inline-block;
    float: left;
}

.centre .cen_left div::after {
    content: "";
    height: 70px;
    width: 1px;
    background-color: #665e57;
    position: absolute;
    margin-top: 7px;
    margin-left: 3px;
}

.centre .cen_left .qc::after {
    width: 0;
}

.centre .cen_left div a:hover {
    color: #ffffff;
}

.centre .cen_left div a {
    display: inline-block;
    width: 70px;
    height: 64px;
    color: #cfccca;
    font-size: 12px;
    text-align: center;
    padding-top: 18px;
    border-top: 1px solid #665e57;
}

.centre .cen_left div a img {
    display: block;
    width: 24px;
    height: 24px;
    margin: auto;
}

/* ------------------------- */
/* right */
.centre .cen_right {
    height: 170px;
    width: 978px;
    float: right;
}

.centre .cen_right a img {
    width: 316px;
    height: 170px;
    display: inline-block;
    margin-right: 15px;
    float: left;
}

.centre .cen_right a .imgr {
    margin-right: 0;
}

/* -------------------------------------------- */

2.中部图片

 

html代码：

 

<div class="tpjg"></div>
        <div class="tp">
            <a href="#">
                <img src="./images/e.webp">
            </a>
        </div>

cs代码：

.zjbj .tpjg {
    width: 1226px;
    height: 20px;
    margin-left: auto;
    margin-right: auto;
}

.zjbj .tp {
    width: 1226px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

3.商品栏

这里能够实现鼠标放到商品上后商品栏目背部有阴影以及出现一种漂浮的效果

 

这里能够通鼠标放在穿戴 热门上进行视频栏切换 

 

 

 html代码：

<div class="sj">
            手机
            <a href="#">查看更多 </a>
        </div>
        <div class="sjnr">
            <div class="sjLeft">
                <img src="./images/xmsj.webp">
            </div>
            <div class="sjRight">
                <div>
                    <a href="#">
                        <img src="./images/sj1.webp">
                        <h3>Redmi Note 11T Pro+</h3>
                        <p class="oo1">天玑8100|真旗舰芯</p>
                        <p class="oo2">
                            <span>1999元起</span>
                            <del><span>2099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sj1.webp">
                        <h3>Redmi Note 11T Pro+</h3>
                        <p class="oo1">天玑8100|真旗舰芯</p>
                        <p class="oo2">
                            <span>1999元起</span>
                            <del><span>2099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sj1.webp">
                        <h3>Redmi Note 11T Pro+</h3>
                        <p class="oo1">天玑8100|真旗舰芯</p>
                        <p class="oo2">
                            <span>1999元起</span>
                            <del><span>2099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sj1.webp">
                        <h3>Redmi Note 11T Pro+</h3>
                        <p class="oo1">天玑8100|真旗舰芯</p>
                        <p class="oo2">
                            <span>1999元起</span>
                            <del><span>2099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sj1.webp">
                        <h3>Redmi Note 11T Pro+</h3>
                        <p class="oo1">天玑8100|真旗舰芯</p>
                        <p class="oo2">
                            <span>1999元起</span>
                            <del><span>2099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sj1.webp">
                        <h3>Redmi Note 11T Pro+</h3>
                        <p class="oo1">天玑8100|真旗舰芯</p>
                        <p class="oo2">
                            <span>1999元起</span>
                            <del><span>2099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sj1.webp">
                        <h3>Redmi Note 11T Pro+</h3>
                        <p class="oo1">天玑8100|真旗舰芯</p>
                        <p class="oo2">
                            <span>1999元起</span>
                            <del><span>2099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sj1.webp">
                        <h3>Redmi Note 11T Pro+</h3>
                        <p class="oo1">天玑8100|真旗舰芯</p>
                        <p class="oo2">
                            <span>1999元起</span>
                            <del><span>2099元</span></del>
                        </p>
                    </a>
                </div>
            </div>
        </div>
        <!-- ------------------------------------------ -->
        <div class="sj">
            智能穿戴
            <a href="#">
                <a href="#" id="rm">热门 </a>
                <a href="#" id="cd">穿戴</a>
            </a>
        </div>
        <div class="sjnr">
            <div class="sjLeft">
                <img src="./images/hmsj.webp">
            </div>
            <div class="sjRight" id="sjR1">
                <div id="sjRt">
                    <a href="#">
                        <img src="./images/sb1.webp">
                        <h3>Xiaomi Watch S1</h3>
                        <p class="oo1">蓝宝石玻璃镜面|不锈钢中框|</p>
                        <p class="oo2">
                            <span>1049元起</span>
                            <del><span>1099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sb1.webp">
                        <h3>Xiaomi Watch S1</h3>
                        <p class="oo1">蓝宝石玻璃镜面|不锈钢中框|</p>
                        <p class="oo2">
                            <span>1049元起</span>
                            <del><span>1099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sb1.webp">
                        <h3>Xiaomi Watch S1</h3>
                        <p class="oo1">蓝宝石玻璃镜面|不锈钢中框|</p>
                        <p class="oo2">
                            <span>1049元起</span>
                            <del><span>1099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sb1.webp">
                        <h3>Xiaomi Watch S1</h3>
                        <p class="oo1">蓝宝石玻璃镜面|不锈钢中框|</p>
                        <p class="oo2">
                            <span>1049元起</span>
                            <del><span>1099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sb1.webp">
                        <h3>Xiaomi Watch S1</h3>
                        <p class="oo1">蓝宝石玻璃镜面|不锈钢中框|</p>
                        <p class="oo2">
                            <span>1049元起</span>
                            <del><span>1099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sb1.webp">
                        <h3>Xiaomi Watch S1</h3>
                        <p class="oo1">蓝宝石玻璃镜面|不锈钢中框|</p>
                        <p class="oo2">
                            <span>1049元起</span>
                            <del><span>1099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sb1.webp">
                        <h3>Xiaomi Watch S1</h3>
                        <p class="oo1">蓝宝石玻璃镜面|不锈钢中框|</p>
                        <p class="oo2">
                            <span>1049元起</span>
                            <del><span>1099元</span></del>
                        </p>
                    </a>
                    <a href="#" id="llgd">
                        <span class="zo">
                            <span id="sp1">浏览更多</span>
                            <span id="sp2">热门</span>
                        </span>
                        <span class="yo"></span>
                    </a>
                </div>
                <div id="sjRi">
                    <a href="#">
                        <img src="./images/sb1.webp">
                        <h3>Xiaomi Watch S1</h3>
                        <p class="oo1">蓝宝石玻璃镜面|不锈钢中框|</p>
                        <p class="oo2">
                            <span>1049元起</span>
                            <del><span>1099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sb1.webp">
                        <h3>Xiaomi Watch S1</h3>
                        <p class="oo1">蓝宝石玻璃镜面|不锈钢中框|</p>
                        <p class="oo2">
                            <span>1049元起</span>
                            <del><span>1099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sb1.webp">
                        <h3>Xiaomi Watch S1</h3>
                        <p class="oo1">蓝宝石玻璃镜面|不锈钢中框|</p>
                        <p class="oo2">
                            <span>1049元起</span>
                            <del><span>1099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sb1.webp">
                        <h3>Xiaomi Watch S1</h3>
                        <p class="oo1">蓝宝石玻璃镜面|不锈钢中框|</p>
                        <p class="oo2">
                            <span>1049元起</span>
                            <del><span>1099元</span></del>
                        </p>
                    </a>
                    <a href="#">
                        <img src="./images/sb1.webp">
                        <h3>Xiaomi Watch S1</h3>
                        <p class="oo1">蓝宝石玻璃镜面|不锈钢中框|</p>
                        <p class="oo2">
                            <span>1049元起</span>
                            <del><span>1099元</span></del>
                        </p>
                    </a>
                    <a href="#" id="llgd">
                        <span class="zo">
                            <span id="sp1">浏览更多</span>
                            <span id="sp2">热门</span>
                        </span>
                        <span class="yo"></span>
                    </a>
                </div>
            </div>
        </div>
        <!-- ---------------------------------------------- -->

 css代码：

/* -------------------------------------------- */
.zjbj {
    background-color: #f5f5f5;
    width: 100%;
    height: 4000px;
}

.zjbj .tpjg {
    width: 1226px;
    height: 20px;
    margin-left: auto;
    margin-right: auto;
}

.zjbj .tp {
    width: 1226px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.zjbj div a img {
    display: block;
    width: 1226px;
    height: 120px;
    margin: auto;
}

.zjbj .sj {
    width: 1226px;
    height: 58px;
    margin-left: auto;
    margin-right: auto;
    line-height: 58px;
    font-size: 22px;
    color: #424242;
}

.zjbj .sj a {
    height: 58px;
    float: right;
    line-height: 58px;
    font-size: 18px;
    color: #424242;
    font-family: 'icomoon';
}

.zjbj .sj a:hover {
    color: #ff6a00;
}

.zjbj .sjnr {
    width: 1226px;
    height: 628px;
    margin-left: auto;
    margin-right: auto;
}

.zjbj .sjnr .sjLeft {
    display: inline-block;
    height: 628px;
    width: 234px;
    float: left;
    perspective: 100px;
}

.zjbj .sjnr .sjLeft img {
    width: 234px;
    height: 614px;
    background-color: #ffffff;
}

@keyframes shang {
    0% {
        position: relative;
        top: 0;
    }

    100% {
        position: relative;
        top: -4px;
        box-shadow: 0px 0px 30px 10px #e7e5e5;
    }
}

.zjbj .sjnr .sjLeft img:hover {
    /* 点击样式 */
    cursor: pointer;
    animation-name: shang;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.zjbj .sjnr .sjRight {
    display: inline-block;
    height: 628px;
    width: 978px;
    float: right;
}

.zjbj .sjnr .sjRight div {
    width: 992px;
    height: 614px;
    margin-left: -14px;
}

.zjbj .sjnr .sjRight div a {
    width: 234px;
    height: 300px;
    padding: 30px 0;
    float: left;
    background-color: #ffffff;
    margin-left: 14px;
    margin-bottom: 14px;
}

.zjbj .sjnr .sjRight div a:hover {
    /* 点击样式 */
    cursor: pointer;
    animation-name: shang;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.zjbj .sjnr .sjRight div a img {
    width: 160px;
    height: 160px;

}

.zjbj .sjnr .sjRight div a h3 {
    width: 214px;
    height: 21px;
    text-align: center;
    margin: 10px;
    font-size: 12.6px;
    margin-bottom: 0;
    color: #333333;
}

.zjbj .sjnr .sjRight div a .oo1 {
    width: 214px;
    height: 18px;
    text-align: center;
    font-size: 12px;
    margin: 10px;
    margin-top: 0;
    color: #b0b0b0;
}

.zjbj .sjnr .sjRight div a .oo2 {
    width: 214px;
    height: 21px;
    text-align: center;
    font-size: 12px;
    margin: 10px;
}

.zjbj .sjnr .sjRight div a .oo2>span {
    color: #ff6a00;
}

.zjbj .sjnr .sjRight div a .oo2 del {
    color: #b4b4b4;
}

/* --------------------------------------- */
#rm {
    display: inline-block;
    text-align: center;
}

#cd {
    display: inline-block;
    width: 100px;
    color: #ff6a00;
}

#llgd {
    height: 150px;
    position: relative;
}

#llgd .yo {
    font-family: 'icomoon';
    font-size: 50px;
    position: absolute;
    top: 50px;
    right: 40px;
    color: #ff6a00;
}

#llgd .zo {
    position: absolute;
    top: 60px;
    left: 30px;
    color: #ff6a00;
}

#llgd .zo span {
    display: block;
    color: #333333;
}

#llgd .zo #sp1 {
    font-size: 20px;

}

#llgd .zo #sp2 {
    font-size: 12px;
    color: #757575;
}
/* ------------------------------- */

 JavaScript代码：

<script>
        $(function () {
            $('#sjRt').show()
            $('#sjRi').hide()
        });

        $('#cd').mouseenter(function () {
            $('#cd').css("color", "#ff6a00")
            $('#rm').css("color", "#424242")
            $('#sjRt').show()
            $('#sjRi').hide()
        })
        $('#rm').mouseenter(function () {
            $('#rm').css("color", "#ff6a00")
            $('#cd').css("color", "#424242")
            $('#sjRt').hide()
            $('#sjRi').show()
        })
    </script>

最终效果：

 

vinchenaaacc
关注
专栏目录
仿小米商城界面开发（原创）
weixin_57479246的博客
06-08 530
仿小米商城开发（1） 本次开发了小米的首页的部分内容 要求学会JavaScript html css 对css3 html5的要求不高
仿小米商城网页版（全套）
09-28
仿小米商城的全套页面。包含首页，订单页，列表页，详情页，个人中心，购物车，等等几十个页面。
模仿小米商城官网网页html+css
07-17
小米官网html+css
项目实战：仿小米商城官网
最新发布
qq_14815089的博客
08-18 475
ps：目前项目还未完成，决定在两周时间内持续完成后续页面。index.html代码。base.css代码。
仿照小米页面.zip
07-29
初学前端，第一周老师布置的小米首页作业，代码写了很多，写的比较差，继续努力。
仿小米手机官网-html页面实现
02-18
仿小米手机商城的全套页面。包含首页,订单页,列表页,商品详情页,个人中心,购物车,等等几十个页面。 有轮播的实现，demo 基于html css 实现小米官网部分内容搭建。基本功能都实现了
2022最新仿小米商城首页html+css+js
09-22
本资源名为“2022最新仿小米商城首页html+css+js”，这是一套完整的前端开发代码，旨在模仿小米商城的首页布局和功能。它包括了HTML、CSS和JavaScript三个主要组成部分，这些都是构建动态、交互式网页的基础技术。 ...
仿小米商城html网页源码
03-31
【标题】"仿小米商城html网页源码"所涉及的知识点主要集中在网页设计与开发领域，特别是前端技术的运用。这个项目是模仿小米商城官方网站创建的HTML源代码，旨在为学习者提供一个实践和理解商城类网站前端设计的实例...
仿小米商城的微信小程序源码.rar
06-08
【标题】"仿小米商城的微信小程序源码"是一个针对微信小程序开发的项目，旨在模仿小米商城的部分界面设计。这个源码集可能是开发者为了学习、练习或是展示如何构建类似电商平台的小程序界面而创建的。 【描述】提到...
(毕业开发设计项目)基于vue开发的仿小米商城电商系统静态网页适用于微信小程序，网站，android、ios
10-14
这是一个基于Vue技术栈的毕业设计项目，主要目的是构建一个仿小米商城的电商系统，该系统不仅适配于网站，还支持微信小程序以及Android和iOS移动端。在这个项目中，开发者运用了HBuilder工具来开发uni-app应用，这是...
HTML小米商城代码 注册 登入
10-22
小米商城首页 登入 注册 代码
小米商城html+css+js全代码
weixin_57774021的博客
03-21 1万+
小米商城全代码，供参考，互相学习
教你用html和css仿制小米官网页面
SunAndYou
12-13 9508
学习HTML和css也已经有一两个月了。比起后端的c语言和java感觉前端真的轻松，而且视觉冲击很大，写完后浏览器打开会立刻感受到满满的成就感。就像是看着一个孩子在自己手中慢慢的变成自己想要的模样！因为在学校天天都有琐事的原因，导致学习效率并不是很高。大三了，还有考研，还要参加互联网＋比赛和大创项目。每天真的好忙啊，但有时候又会没有动力学习。这几天又没去图书馆，害，大概是废了。又想考研，又想参加比赛，还想学好编程，要做的事真的太多了，就会导致一事无成。
商城静态页面（仿小米官网）
joey_hao的博客
04-27 4807
  这是一个仿小米商城静态首页的小练习，后续我会继续添加相应的一些动态效果，目前还没学会。 最终效果（目前还有点丑，不太完善） 下面是我的源代码： HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网站项目</tit...
仿小米商城官网源码
热门推荐
lojieo的博客
05-04 2万+
这个为以前所写，代码有瑕疵什么的，请谅解！纯手写仿小米官网静态HTML模板，包含登录、注册页面，没有后台数据相关。预览地址 ：http://www.5ibj.xyz/xiaomi源码下载地址 ： https://pan.baidu.com/s/1ssBimSsI3LVUYSBkR0Gb7g密码：b3yu...
仿小米商城
qq_41898048的博客
09-25 4465
首先我们先看一下真小米商城吧 上图就是真小米商城的基本Ui以及整体框架页面 首先我们先看整体框架吧！ 有底部菜单栏，说明每一个按钮将会对应一个页面，这个我们就用最简单的方式ViewPager（嵌套Fragment）+RadioGroup（嵌套RadioButton）实现吧！而且整体页面是不可滑动的，只能点击底部菜单栏来实现页面切换，下面我们来看看如何实现它吧！ 首先看眼布局： ...
HTML5期末大作业：仿小米手机商城网站设计——仿小米手机商城全套(37页) 商城网购HTM5网页设计作业成品
11-24 943
HTML5期末大作业：仿小米手机商城网站设计——仿小米手机商城全套(37页) 商城网购HTM5网页设计作业成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值