仿作小米商城页面

小鹿崽汁

已于 2022-07-15 06:41:58 修改

阅读量774

点赞数 1

文章标签：大数据 html css 学习

于 2022-07-14 21:08:47 首次发布

本文链接：https://blog.csdn.net/m0_63920995/article/details/125792564

版权

历时一周半的时间，终于在我的不懈努力下，完成了小米商城页面的静态仿作。真的，这个过程我觉得极其漫长，到最后也不敢相信自己能够完成。因为自己距上一次html和css的学习已经有好久了。好多好多的知识都已经忘记了，以至于自己在仿作的过程中遇到了许多的困难，而自己却怎么也想不起来怎么去解决，总是觉得自己做的都对，按理论来说不应该出现这些问题的呀！有时候一个问题会卡老旧老旧了。弄得我一点做下去的心情都没有了。开始，无奈的我还是要想办法解决摆在我面前的每一个问题。无论他是难是简，是我还没学到的知识还是已经学会的知识。于是，我开始一点一点的尝试，而那些被遗忘的记忆也一点一点的被我给唤起，在尝试成功时，那种如释重负的感觉真让人觉得轻松，可是，当我继续往下做下一个模块时，又总是会遇到好多的问题。并且，面对如此庞大的页面，我要去完成的内容有好多好多，总是让我觉得前路漫漫，没有信心和耐心走下去，但是，不积跬步，无以至千里。我就是那么一小步一小步的走下去，一点一点的去完成，从框架到样式，现将大体的页面布局给做好后，一点一点的完成样式，最后将内容给填装进去……

虽然这是我奋尽全力完成的，但是我知道，我还有好多不足，在页面的仿作上也有好多问题，所以，欢迎各位大佬，大神批评指正，我一定会及时改正。

上图

上代码

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>小米商城</title>
    <link rel="stylesheet" href="xiaomi.css">
</head>

<body>
    <!-- 顶部导航 -->
    <div class="nav">
        <div class="container w">
            <div class="left">
                <a href="">小米官网</a>
                <a href="">小米商城</a>
                <a href="">MlUl</a>
                <a href="">loT</a>
                <a href="">云服务</a>
                <a href="">天星科技</a>
                <a href="">有品</a>
                <a href="">小爱开放平台</a>
                <a href="">企业团购</a>
                <a href="">资质证照</a>
                <a href="">协议规则</a>
                <a href="">下载app</a>
                <a href="">SelectLocation</a>
            </div>
            <div class="right">
                <a href="">购物车(0)</a>
            </div>
            <div class="middle">
                <a href="">登录</a>
                <a href="">注册</a>
                <a href="">消息通知</a>
            </div>
        </div>
    </div>

    <div class="header w">
        <!-- 头部盒子 -->
        <!-- Logo部分 -->
        <div class="logo">
            <img src="image/logo.png" alt="">
        </div>
        <!-- 导航栏部分 -->
        <div class="navv">
            <ul>
                <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>
        </div>
        <!-- 搜素模块 -->
        <div class="search">
            <button></button>
            <input type="text" value="输入关键词">
        </div>
    </div>

    <!-- banner部分start -->
    <div class="banner">
        <!-- 版心 -->
        <div class="w">
            <div class="cebianlan">
                <ul>
                    <li><a href="#">手机 <span>&gt;</span></a></li>
                    <li><a href="#">电视 <span>&gt;</span></a></li>
                    <li><a href="#">笔记本 平板 <span>&gt;</span></a></li>
                    <li><a href="#">出行 穿戴 <span>&gt;</span></a></li>
                    <li><a href="#">耳机 音响 <span>&gt;</span></a></li>
                    <li><a href="#">家电 <span>&gt;</span></a></li>
                    <li><a href="#">智能 路由器 <span>&gt;</span></a></li>
                    <li><a href="#">电源 配件 <span>&gt;</span></a></li>
                    <li><a href="#">健康 儿童 <span>&gt;</span></a></li>
                    <li><a href="#">生活 箱包 <span>&gt;</span></a></li>
                </ul>

            </div>
            <div class="tu">
                <img src="image/jiaodian.jpg" alt="">
                <!-- 左侧按钮箭头 -->
                <a href="#" class="prev">&lt;</a>
                <!-- 右侧按钮箭头 -->
                <a href="#" class="next">&gt;</a>
                <!-- 小圆点 -->
                <ul class="promo-nav">
                    <li class="selected"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="sub_row w">
        <div class="span1">
            <ul>
                <li>
                    <a href="#"><img src="image/li1.png" alt="服务保障">服务保障</a>
                </li>
                <li>
                    <a href="#"><img src="image/li2.png" alt="服务保障">服务保障</a>
                </li>
                <li>
                    <a href="#"><img src="image/li3.png" alt="服务保障">服务保障</a>
                </li>
                <li>
                    <a href="#"><img src="image/li4.png" alt="服务保障">服务保障</a>
                </li>
                <li>
                    <a href="#"><img src="image/li5.png" alt="服务保障">服务保障</a>
                </li>
                <li>
                    <a href="#"><img src="image/li6.png" alt="服务保障">服务保障</a>
                </li>
            </ul>
        </div>
        <div class="span2">
            <ul>
                <li>
                    <a href="#"><img src="image/li7.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="image/li8.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="image/li9.jpg" alt=""></a>
                </li>
            </ul>
        </div>
    </div>

    <!-- main部分 -->
    <div class="main">
        <div class="w">
            <div class="banner-box">
                <a href="#">
                    <img src="image/banner-box.webp" alt="">
                </a>
            </div>

            <!-- 1 -->
            <div class="home">
                <div class="box-hd">
                    <h2 class="title">手机</h2>
                    <div class="more">
                        <a href="#">查看更多</a>
                        <i class="rt iconfont">></i>
                    </div>
                </div>
                <div class="box-bd clearfix">
                    <div class="rww">
                        <div class="span4">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="image/phone1.webp" alt="">
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <div class="span16">
                            <ul class="brick-list clearfix">
                                <li class="brick-item">
                                    <a href="#">
                                        <div class="figure"><img src="image/phone2.webp" alt=""></div>
                                        <h3 class="title">Xiaomi 12 SUltra</h3>
                                        <p class="desc">这真徕卡|专业徕卡影像</p>
                                        <p class="price">5999元起</p>
                                    </a>
                                </li>
                                <li class="brick-item">
                                    <a href="#">
                                        <div class="figure"><img src="image/phone3.webp" alt=""></div>
                                        <h3 class="title">Xiaomi 12S Pro</h3>
                                        <p class="desc">骁龙8+旗舰处理器|徕卡影像</p>
                                        <p class="price">4699元起</p>
                                    </a>
                                </li>
                                <li class="brick-item">
                                    <a href="#">
                                        <div class="figure"><img src="image/phone3.webp" alt=""></div>
                                        <h3 class="title">Xiaomi 12S</h3>
                                        <p class="desc">小尺寸性能旗舰|徕卡影像</p>
                                        <p class="price">3999元起</p>
                                    </a>
                                </li>
                                <li class="brick-item">
                                    <a href="#">
                                        <div class="figure"><img src="image/phone4.webp" alt=""></div>
                                        <h3 class="title">Xiaomi 12S Pro 天玑版</h3>
                                        <p class="desc">全球首发天玑9000+|叶脉冷泵散热系</p>
                                        <p class="price">3999元起</p>
                                    </a>
                                </li>
                                <li class="brick-item">
                                    <a href="#">
                                        <div class="figure"><img src="image/phone5.webp" alt=""></div>
                                        <h3 class="title">Redim Note 11T Pro+</h3>
                                        <p class="desc">天玑8100|真旗舰芯</p>
                                        <p class="price">2099元起</p>
                                    </a>
                                </li>
                                <li class="brick-item">
                                    <a href="#">
                                        <div class="figure"><img src="image/phone6.webp" alt=""></div>
                                        <h3 class="title">Redim Note 11T Pro</h3>
                                        <p class="desc">天玑8100|真旗舰芯</p>
                                        <p class="price">1799元起</p>
                                    </a>
                                </li>
                                <li class="brick-item">
                                    <a href="#">
                                        <div class="figure"><img src="image/phone7.webp" alt=""></div>
                                        <h3 class="title">Redim Note 11SE</h3>
                                        <p class="desc">双卡双5G|极速登录</p>
                                        <div class="money">
                                            <p class="price not">999元起 </p>
                                            <del><span class="num"> 1099</span>元</del>
                                        </div>
                                    </a>
                                </li>
                                <li class="brick-item">
                                    <a href="#">
                                        <div class="figure"><img src="image/phone8.webp" alt=""></div>
                                        <h3 class="title">Xiaomi Civi 1S</h3>
                                        <p class="desc">原生美肌人像|奇迹阳光动人新色|</p>
                                        <p class="price">2299元起</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2 -->
            <div class="home">
                <div class="box-hd">
                    <h2 class="title">智能穿戴</h2>
                    <div class="more">
                        <ul class="tab-list">
                            <li>
                                <a href="#" class="zuo"> 热门</a>
                            </li>
                            <li>
                                <a class="rt">穿戴</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="box-bd clearfix">
                    <div class="rww">
                        <div class="span4">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="image/zn1.webp" alt="">
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <div class="span16">
                            <ul class="brick-list clearfix">
                                <li class="brick-item">
                                    <a href="#">
                                        <div class="figure"><img src="image/zn2.webp" alt=""></div>
                                        <h3 class="title">Xiaomi Watch S1</h3>
                                        <p class="desc">蓝宝石玻璃镜面|不锈钢中框|1.43''A…</p>
                                        <p class="price">999元起</p>
                                    </a>
                                </li>
                                <li class="brick-item">
                                    <a href="#">
                                        <div class="figure"><img src="image/zn3.webp" alt=""></div>
                                        <h3 class="title">Xiaomi真无线降噪耳机3</h3>
                                        <p class="desc">40dB宽屏主动降噪|HiFi高保真品质|</p>
                                        <p class="price">349元</p>
                                    </a>
                                </li>
                                <li class="brick-item">
                                    <a href="#">
                                        <div class="figure"><img src="image/zn4.webp" alt=""></div>
                                        <h3 class="title">Redmi 手表 2</h3>
                                        <p class="desc">1.6''AMOLED大屏|117种运动模式|2…</p>
                                        <p class="price">399元</p>
                                    </a>
                                </li>
                                <li class="brick-item">
                                    <a href="#">
                                        <div class="figure"><img src="image/zn5.webp" alt=""></div>
                                        <h3 class="title">小米手环6 NFC 版</h3>
                                        <p class="desc">1.56''跑道全面彩屏|30种运动模式|…</p>
                                        <div class="money">
                                            <p class="price not">229元 </p>
                                            <del><span class="num"> 279</span>元</del>
                                        </div>
                                    </a>
                                </li>
                                <li class="brick-

最低0.47元/天解锁文章

小鹿崽汁

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
仿作小米商城页面

历时一周半的时间，终于在我的不懈努力下，完成了小米商城页面的静态仿作。于是，我开始一点一点的尝试，而那些被遗忘的记忆也一点一点的被我给唤起，在尝试成功时，那种如释重负的感觉真让人觉得轻松，可是，当我继续往下做下一个模块时，又总是会遇到好多的问题。并且，面对如此庞大的页面，我要去完成的内容有好多好多，总是让我觉得前路漫漫，没有信心和耐心走下去，但是，不积跬步，无以至千里。虽然这是我奋尽全力完成的，但是我知道，我还有好多不足，在页面的仿作上也有好多问题，所以，欢迎各位大佬，大神批评指正，我一定会及时改正。...
复制链接

扫一扫