html+css实现小米商城首页

最新推荐文章于 2023-05-07 16:28:29 发布
最新推荐文章于 2023-05-07 16:28:29 发布
阅读量988 收藏 8
点赞数 1
分类专栏： css 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42247414/article/details/122246776
版权

实现效果：
在这里插入图片描述

代码：

<!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">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3028312_jwhbry8a2fk.css">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: #f5f5f5;
        }
        .container {
            width: 1226px;
            height: 674px;
            margin: 0 auto;
        }
        .container .top {
            position: relative;
            height: 58px;
            line-height: 58px;
            margin: 0 auto;
        }
        .top .title {
            color: #333;
            font-size: 22px;
            font-weight: 400;
        }
        .top .more {
            position: absolute;
            top: 0;
            right: 0;
            color: #424242;
            font-size: 16px;
        }
        .iconfont{
            font-size: 18px;
            color: #B0B0B0;
        }
        .more:hover {
            color: #ff6700;
        }
        .more:hover i{
            color: #ff6700;
        }
        .container .content {
            width: 1226px;
            height: 614px;
        }

        .content .left {
            float: left;
            width: 234px;
            height: 614px;
        }

        .left li {
            list-style: none;
        }

        .left .pic>img {
            width: 234px;
        }

        .content .right {
            float: left;
            width: 992px;
            height: 614px;
        }

        .right .box>li {
            width: 234px;
            height: 300px;
            list-style: none;
            padding: 20px 0;
            box-sizing: border-box;
        }
        .right .box {
            float: left;
            width: 234px;
            height: 300px;
            text-align: center;
            background-color: #fff;
            margin: 0 0 14px 14px;
        }
        .box .box1>img {
            width: 160px;
            height: 160px;
            margin: 0 0 10px 0;
        }

        .box .box2 {
            color: #333;
            font-size: 14px;
            font-weight: 400;
            margin: 0px 10px 2px;
        }

        .box .box3 {
            color: #B0B0B0;
            font-size: 12px;
            margin: 0px 10px 10px;
        }

        .box .box4 {
            margin: 0px 10px 14px;
        }

        .box4 .span1 {
            color: #ff6700;
            font-size: 14px;
        }

        .box4 .span2 {
            color: #B0B0B0;
            font-size: 14px;
            margin-left: 0.5em;
        }

        .clearFix:after {
            /*  必须拥有content属性 内容为空  */
            content: "";
            /*   必须块标签才能清浮动  */
            display: block;
            /* 高度为0 不占用空间 */
            height: 0;
            /* 清除浮动 */
            clear: both;
        }

        .clearFix {
            /* //兼容ie */
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="top">
            <h2 class="title">手机</h2>
            <span class="more">查看更多  <i class="iconfont icon-xiangyou3fill"></i></span>
        </div>
        <div class="content clearFix">
            <div class="left">
                <ul>
                    <li><a>
                            <div class="pic"><img
                                    src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=263&h=691&f=webp&q=90">
                            </div>
                        </a></li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <div class="box">
                        <li><a>
                                <div class="box1"><img
                                        src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0d4b362431de4bdda03315ffdbc7b32a.jpg?thumb=1&w=225&h=225&f=webp&q=90">
                                </div>
                                <h3 class="box2">Xiaomi 11 青春活力版</h3>
                                <p class="box3">轻薄5G，内外皆出彩</p>
                                <p class="box4"><span class="span1">1799元起</span><s class="span2">4999元起</s></p>
                            </a></li>
                    </div>
                    <div class="box">
                        <li><a>
                                <div class="box1"><img
                                        src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=225&h=225&f=webp&q=90">
                                </div>
                                <h3 class="box2">Redmi Note 11 Pro系列</h3>
                                <p class="box3">Redmi Note 11 Pro系列</p>
                                <p class="box4"><span class="span1">1799元起</span></p>
                            </a></li>
                    </div>
                    <div class="box">
                        <li><a>
                                <div class="box1"><img
                                        src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50da95e9e4496dcac8704da2deb94f6e.jpg?thumb=1&w=225&h=225&f=webp&q=90">
                                </div>
                                <h3 class="box2">Redmi Note 11 5G</h3>
                                <p class="box3">5000mAh大电量</p>
                                <p class="box4"><span class="span1">1199元起</span></p>
                            </a></li>
                    </div>
                    <div class="box">
                        <li><a>
                                <div class="box1"><img
                                        src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c001ebc4aee69bc9ff6fae9ecf9137d0.jpg?thumb=1&w=225&h=225&f=webp&q=90">
                                </div>
                                <h3 class="box2">Redmi Note 11 4G</h3>
                                <p class="box3">5000mAh大电量</p>
                                <p class="box4"><span class="span1">999元起</span></p>
                            </a></li>
                    </div>
                    <div class="box">
                        <li><a>
                                <div class="box1"><img
                                        src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3490cfc52dc7c9abf9badfa1dc2d0eae.png?thumb=1&w=225&h=225&f=webp&q=90">
                                </div>
                                <h3 class="box2">黑鲨4S Pro</h3>
                                <p class="box3">磁动力升降肩键</p>
                                <p class="box4"><span class="span1">4799元起</span></p>
                            </a></li>
                    </div>
                    <div class="box">
                        <li><a>
                                <div class="box1"><img
                                        src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7290b681343512c60e3a845379f3335f.jpg?thumb=1&w=225&h=225&f=webp&q=90">
                                </div>
                                <h3 class="box2">黑鲨4S</h3>
                                <p class="box3">磁动力升降肩键</p>
                                <p class="box4"><span class="span1">2699元起</span></p>
                            </a></li>
                    </div>
                    <div class="box">
                        <li><a>
                                <div class="box1"><img
                                        src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c5c752522100ecd364cc53752bb660bc.jpg?thumb=1&w=225&h=225&f=webp&q=90">
                                </div>
                                <h3 class="box2">Xiaomi Civi</h3>
                                <p class="box3">3200万高清质感自拍</p>
                                <p class="box4"><span class="span1">2599元起</span></p>
                            </a></li>
                    </div>
                    <div class="box">
                        <li><a>
                                <div class="box1"><img
                                        src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab07e0fcbec3beb8b0f409db8bee8da4.jpg?thumb=1&w=225&h=225&f=webp&q=90">
                                </div>
                                <h3 class="box2">Xiaomi MIX 4</h3>
                                <p class="box3">CUP全面屏</p>
                                <p class="box4"><span class="span1">4199元起</span></p>
                            </a></li>
                    </div>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>
wiry_碎碎念
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML+CSS实现小米官网顶部导航栏
重生之我是泰勒
07-01 3526
HTML+CSS实现小米官网顶部导航栏
html5商城页面，网页端demo
09-19
demo采用html5+css,商城页面以及购物车页面，有部分js效果。
购物平台网页（HTML+CSS+JavaScript）
05-07
购物平台网页（HTML+CSS+JavaScript）
HTML5期末大作业：饮食食品主题设计——绿色简洁生鲜超市网站设计(5页) HTML+CSS+JavaScript web前端大二实训大作业
qq_365392777
09-26 1万+
HTML5期末大作业：饮食食品主题设计——绿色简洁生鲜超市网站设计(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平
HTML5+CSS3实现小米商城 （完整版）
m0_63512120的博客
07-20 1万+
做了一个小米商场的网页，用HTML5+CSS3做出来的，在文章最后附带 网页所有的源码和图片素材供大家参考。原创不易，大家有任何问题都可在评论区指出。
HTML+CSS实现小米官网首页功能.zip
最新发布
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
2022最新仿小米商城首页html+css+js
09-22
2022最新仿小米商城首页html+css+js banner可切换，产品可滑动
使用html+css+js+jquery实现小米官网.rar
05-07
使用html+css+js+jquery实现小米官网首页
html+css仿小米商城首页搜索页和商品详情页
12-30
作业
html+css实现仿小米商城主页
01-05
此项目用了html+css实现仿小米商城静态主页，有需要的小伙伴留个关注自取哦
小米商城——HTML，CSS（附：源码）
致未来的你。的博客
11-01 8789
接下来是我自己的一点个人的感受，我们都知道，写一个网页的时候，我们都要从他的名称，每个标签的命名等等开始，很遗憾，我第一次写这样的代码的时候，就没有发现这样的一个问题。因此，在这里给一个很宝贵的意见就是，以后再写代码的时候一定要自己的写注释。因为代码是你自己写的，过一段时间，我们就会忘记，当时的结构和命名规则，所以在这里一定要自己写注释。大家好，作为刚接触前端不久的一个学生来说，我第一次学习完HTML5和CSS的时候，我就自己学习着自己做了一个小米官网，之前一直没有展现出来，最近一直写博客，这才想起来。
HTML+CSS实现小米官网首页
热门推荐
道阻且长，行则将至。
12-28 3万+
一、HTML+CSS实现小米官网首页 仿写小米官网的页面，熬了两个晚上终于把这个页面做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦！我会不定期的跟大家分享文章。 二、页面结构如下： 三、效果图如下： 四、部分源代码如下（如需要全部的源代码请加我QQ或者评论区留言，原创不易，记得点赞和收藏哦）。 HTML部分源代码如下： <!DOCTYPE html> <html lang="en"> <head>
html+css仿制小米商城首页
m0_53394907的博客
08-25 1万+
这是一个仅用css+html实现的页面,不过y页面也用css实现了一些精致的动态效果，比如 老版本小米官网的logo滑动效果，小米的二维码和购物车，导航栏延时下拉效果等。
HTML+CSS3的购物网站（首页+商品页+购买页）
苦涩精灵的博客
06-28 2万+
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/index.css" /> <title></title> </head> <body&g
CSS+HTML静态网页——小米官网（附源代码）
Jsheep91的博客
03-22 9510
链接：https://pan.baidu.com/s/1Bhq1GEZBCH3USx_Tj31jiA?
小米官网导航栏的实现
加油高同志
12-30 3000
小米官网导航栏实现
JavaScript实现小米购物车功能案例
weixin_50821119的博客
01-19 6704
需求 点击全选按钮，按钮全部被选中，结算价格发生变化 ，选中数量变化，取消全选，按钮全部取消选中，结算价格发生变化 ，选中数量变化。 点击单选按钮，按钮选中状态，结算价格发生变化 ，选中数量变化，取消按钮，结算价格发生变化 ，选中数量变化。 点击加号，小计变化，总数量变化。 点击减号，小计变化，总数量变化。 点击加入购物车新增一件商品， 效果图如下 代码如下 HTML代码 <!DOCTYPE html> <html lang="en"> <h...
小米商城html
weixin_74868259的博客
05-07 224
|</h><a>MIUI</a><h>|</h><a>米聊</a><h>|</h><a>多看书城</a><h>|</h><a>大米路由器</a><h>|</h><a>大米后院</a><h>|</h><a>大米天猫店</a><h>|</h><a>大米淘宝直营店</a><h>|</h><a>大米网盟</a><h>|</h><a>问题反馈</a><h>|Select Region
小米商城html+css+js
05-13
小米商城是一个集成了众多电子通用产品的电商平台，在其网页设计中使用了大量的HTML、CSS和JS技术。首先，HTML作为网页的基础语言，小米商城在其网页中使用了结构化的HTML标签来描述网页内容，并使用CSS样式表为其...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值