学习CSS——小米商城官网（第9、10天）

最新推荐文章于 2023-12-08 09:34:35 发布
最新推荐文章于 2023-12-08 09:34:35 发布
阅读量915 收藏 4
点赞数
文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdywxwxld/article/details/121849145
版权

记录自己用所学全部前端知识完成模仿小米商城官网的全过程

1、目前所学全部知识的思维导图

在这里插入图片描述

2、小米商城官网原图+我的代码实现效果图

小米商城官网原图
我的代码实现的效果图

3、具体步骤

  1. 用F12打开链接将需要的图保存下来，有些图标是用代码实现的，所以去Iconfont(阿里巴巴矢量图标库)找类似的图片下载。
  2. 用盒子布置整体布局，先画4个大盒子，再分别画小盒子。
  3. 用CSS分别调整颜色、位置等，使其接近原布局。
  4. 布局调好后加入鼠标悬停效果，变色、换图并显示隐藏框。
  5. 最后加入bootstrap V4的轮播图。
    head头文件
    轮播图

4、小米商城官网目前代码（不完整）

<!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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
    <style>
        .box1 {
            width: 1500px;
            height: 40px;
            background-color: black;
            margin: 0 auto;
        }
        
        .box2 {
            width: 1500px;
            height: 100px;
            margin-left: 100px;
            margin-top: 20px;
        }
        
        .box3 {
            width: 1500px;
            height: 400px;
            color: white;
        }
        
        .box4 {
            width: 1500px;
            height: 200px;
            margin-top: 20px;
        }
        
        .box11 {
            font-size: 10px;
            color: rgb(148, 147, 147);
            float: left;
            margin-top: 10px;
            margin-left: 20px;
        }
        
        .box11:hover {
            color: white;
        }
        
        .box21 {
            margin-left: 20px;
            opacity: 1;
        }
        
        .box21:hover {
            color: orange;
        }
        
        .box22 {
            width: 1000px;
            height: 100px;
            opacity: 0;
            position: absolute;
            margin-top: 10px;
            margin-left: 200px;
            background-color: white;
        }
        
        .box21:hover+.box22 {
            opacity: 1;
            z-index: 999;
        }
        
        .box23 {
            border: 1px solid gray;
            display: inline-block;
            width: 45px;
            height: 45px;
            margin-top: 10px;
            position: relative;
            top: -10px;
            left: -6px;
            text-align: center;
        }
        
        .box23:hover {
            background-color: orange;
        }
        
        .box31 {
            width: 250px;
            height: 400px;
            background-color: gray;
            margin-left: 100px;
            float: left;
        }
        
        .box311 {
            margin-top: 15px;
            margin-left: 30px;
            margin-right: 30px;
        }
        
        .box311:hover {
            background-color: orange;
            color: orange;
            opacity: 0.5;
        }
        
        .box32 {
            width: 1000px;
            height: 400px;
            float: left;
        }
        
        .box33 {
            width: 100px;
            height: 500px;
            position: fixed;
            left: 1400px;
        }
        
        .box331 {
            margin-top: 20px;
        }
        
        .box332:hover img {
            content: url("手机APP2.png");
            width: 50px;
            height: 50px;
        }
        
        .box332:hover div {
            color: orange;
        }
        
        .box333:hover img {
            content: url("个人中心2.png");
            width: 50px;
            height: 50px;
        }
        
        .box333:hover div {
            color: orange;
        }
        
        .box334:hover img {
            content: url("售后服务2.png");
            width: 50px;
            height: 50px;
        }
        
        .box334:hover div {
            color: orange;
        }
        
        .box335:hover img {
            content: url("人工客服2.png");
            width: 50px;
            height: 50px;
        }
        
        .box335:hover div {
            color: orange;
        }
        
        .box336:hover img {
            content: url("购物车2.png");
            width: 50px;
            height: 50px;
        }
        
        .box336:hover div {
            color: orange;
        }
        
        .box337 {
            color: gray;
        }
        
        .box41 {
            width: 250px;
            height: 200px;
            background-color: black;
            font-size: 10px;
            margin-left: 100px;
            float: left;
        }
        
        .box411 {
            width: 80px;
            height: 100px;
            float: left;
            position: relative;
            top: 20px;
            left: 20px;
        }
        
        .box42 {
            width: 320px;
            height: 200px;
            margin-left: 20px;
            float: left;
        }
        
        .box43 {
            width: 320px;
            height: 200px;
            margin-left: 20px;
            float: left;
        }
        
        .box44 {
            width: 320px;
            height: 200px;
            margin-left: 20px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box11" style="margin-left: 100px;">小米商城</div>
        <div class="box11">MIUI</div>
        <div class="box11">IoT</div>
        <div class="box11">云服务</div>
        <div class="box11">天星数科</div>
        <div class="box11">有品</div>
        <div class="box11">小爱开放平台</div>
        <div class="box11">企业团购</div>
        <div class="box11">资质证照</div>
        <div class="box11">协议规则</div>
        <div class="box11">下载app</div>
        <div class="box11">智能生活</div>
        <div class="box11">Select Location</div>
        <div class="box11" style="margin-left: 100px;">登录</div>
        <div class="box11">注册</div>
        <div class="box11">消息通知</div>
        <div class="box11" style="height: 40px;width: 150px;background-color: rgb(71, 70, 70);margin-top: 0;text-align: center;">
            <img src="D:/大四上/实训/小米/购物车1.png" alt="" style="width: 20px;height: 20px;position: relative;top: 9px;">
            <span style="position: relative;top: 10px;">购物车（0）</span>
        </div>
    </div>
    <div class="box2">
        <img src="D:/大四上/实训/小米/icon-小米归属.png" alt="" style="height: 60px;width: 60px;">
        <span class="box21" style="margin-left: 200px;">Xiaomi手机</span>
        <div class="box22">
            <img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
        </div>
        <span class="box21">Redmi红米</span>
        <div class="box22">
            <img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
        </div>
        <span class="box21">电视</span>
        <div class="box22">
            <img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
        </div>
        <span class="box21">笔记本</span>
        <div class="box22">
            <img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
        </div>
        <span class="box21">平板</span>
        <div class="box22">
            <img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
        </div>
        <span class="box21">家电</span>
        <div class="box22">
            <img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
        </div>
        <span class="box21">路由器</span>
        <div class="box22">
            <img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
        </div>
        <span class="box21">服务</span>
        <div class="box22">
            <img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
        </div>
        <span class="box21">社区</span>
        <div class="box22">
            <img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
        </div>
        <input type="text" style="margin-left: 150px;height: 45px;">
        <span class="box23"><img src="D:/大四上/实训/小米/搜索.png" alt="" style="height: 15px;width: 15px;position: relative;top: 9px">
        </span>

    </div>
    <div class="box3">
        <div class="box31">
            <div class="box311" style="margin-top: 10px;">手机
                <img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
            </div>
            <div class="box311">电视
                <img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
            </div>
            <div class="box311">笔记本 平板
                <img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
            </div>
            <div class="box311">家电
                <img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
            </div>
            <div class="box311">出行 穿戴
                <img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
            </div>
            <div class="box311">智能 路由器
                <img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
            </div>
            <div class="box311">电源 配件
                <img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
            </div>
            <div class="box311">健康 儿童
                <img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
            </div>
            <div class="box311">耳机 音响
                <img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
            </div>
            <div class="box311">生活 箱包
                <img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
            </div>
        </div>
        <div class="box32">
            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="D:/大四上/实训/小米/中间图.jpg" class="d-block w-100" alt="..." style="width: 1000px;height: 400px;">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>First slide label</h5>
                            <p>Some representative placeholder content for the first slide.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="D:/大四上/实训/小米/中间图2.webp" class="d-block w-100" alt="..." style="width: 1000px;height: 400px;">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Second slide label</h5>
                            <p>Some representative placeholder content for the second slide.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="D:/大四上/实训/小米/中间图3.webp" class="d-block w-100" alt="..." style="width: 1000px;height: 400px;">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Third slide label</h5>
                            <p>Some representative placeholder content for the third slide.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="D:/大四上/实训/小米/中间图4.webp" class="d-block w-100" alt="..." style="width: 1000px;height: 400px;">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Fourth slide label</h5>
                            <p>Some representative placeholder content for the third slide.</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </button>
            </div>
            <!-- <img src="D:/大四上/实训/小米/中间图.jpg" alt="" style="width: 1000px;height: 400px;"> -->
        </div>
        <div class="box33">
            <div class="box331">
                <div class="box332">
                    <img src="D:/大四上/实训/小米/手机APP.png" alt="" style="width: 50px;height: 50px;">
                    <div class="box337">手机APP</div>
                </div>
                <div class="box333">
                    <img src="D:/大四上/实训/小米/个人中心.png" alt="" style="width: 50px;height: 50px;">
                    <div class="box337">个人中心</div>
                </div>
                <div class="box334">
                    <img src="D:/大四上/实训/小米/售后服务.png" alt="" style="width: 50px;height: 50px;">
                    <div class="box337">售后服务</div>
                </div>
                <div class="box335">
                    <img src="D:/大四上/实训/小米/人工客服.png" alt="" style="width: 50px;height: 50px;">
                    <div class="box337">人工客服</div>
                </div>
                <div class="box336">
                    <img src="D:/大四上/实训/小米/购物车1.png" alt="" style="width: 50px;height: 50px;">
                    <div class="box337">购物车</div>
                </div>
            </div>
        </div>
    </div>
    <div class="box4">
        <div class="box41">
            <div class="box411">
                <img src="D:/大四上/实训/小米/保障服务.png" alt="" style="width: 30px;height: 30px;">
                <div style="color: gray;">保障服务</div>
            </div>
            <div class="box411">
                <img src="D:/大四上/实训/小米/企业团购.png" alt="" style="width: 30px;height: 30px;">
                <div style="color: gray;">企业团购</div>
            </div>
            <div class="box411">
                <img src="D:/大四上/实训/小米/F码通道.png" alt="" style="width: 30px;height: 30px;">
                <div style="color: gray;">F码通道</div>
            </div>
            <div class="box411">
                <img src="D:/大四上/实训/小米/米粉卡.png" alt="" style="width: 30px;height: 30px;">
                <div style="color: gray;">米粉卡</div>
            </div>
            <div class="box411">
                <img src="D:/大四上/实训/小米/以旧换新.png" alt="" style="width: 30px;height: 30px;">
                <div style="color: gray;">以旧换新</div>
            </div>
            <div class="box411">
                <img src="D:/大四上/实训/小米/话费充值.png" alt="" style="width: 30px;height: 30px;">
                <div style="color: gray;">话费充值</div>
            </div>
        </div>
        <div class="box42">
            <img src="D:/大四上/实训/小米/下图1.jpg" alt="" style="width: 300px;height: 200px;">
        </div>
        <div class="box43">
            <img src="D:/大四上/实训/小米/下图2.jpg" alt="" style="width: 300px;height: 200px;">
        </div>
        <div class="box44">
            <img src="D:/大四上/实训/小米/下图3.jpeg" alt="" style="width: 300px;height: 200px;">
        </div>
    </div>

</body>

</html>

5、遇到的问题

1、鼠标悬停时不显示隐藏框。所以隐藏框需要和显示框相邻设置，用兄弟选择器选择设置。
2、设置轮播图后，隐藏框被覆盖。用z-index: 999;设置层级为999最高，这样就不会被轮播图遮挡，始终显示在最前方。

由于时间不够了，目前网页未实现的小米官网效果，今后有空慢慢添加。

沐风游云
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小米商城HTML/CSS
03-23
小米商城HTML/CSS
实战小米官网静态页面1：导航栏部分
qq_51704382的博客
11-11 1384
实战小米官网静态页面1：导航栏部分
前端 ：用HTML和css制作一个小米官网的静态页面
aisheisadas的博客
10-28 2082
【代码】前端 ：用HTML和css制作一个小米官网的静态页面。
电子商务网站前端页面（基于bootstrap框架）
05-28
电子商务前端页面，使用bootstrap前端框架。界面简洁，商品定位为书和CD。https://github.com/isixline/Book-CD
购物商城设计（参考小米商城）(boostrap前台JSP页面+struts2+mysql数据库)
10-29
eclipse中的gradle项目，内含gradle文件夹和mysql数据库文件，解压后导入mysql数据库，文件夹导入eclipse即可使用。 实现了功能有用户注册登录找回密码、商品轮播、添加删除购物车、加入修改删除订单，后台可添加删除商品，查看订单、发货等。 注意：发邮件找回密码需要去searchPsw.action修改
小米商城html项目实战，js+css+html
12-12
小米商城html项目实战，js+css+html
HTML+CSS购物网站——小米有品
03-23
HTML和CSS是构建网页的基本技术，本项目是一个以"小米有品"为主题的购物网站实现，涵盖了用户在在线购物过程中可能遇到的各种页面。下面将详细解释这些知识点。 首先，HTML（HyperText Markup Language）是用于创建...
2022最新仿小米商城首页html+css+js
09-22
在仿小米商城的项目中，CSS将用于实现页面的颜色搭配、字体设置、布局定位以及动画效果。例如，CSS可能会定义轮播图的过渡动画，使图片平滑切换；或者设定产品展示区的网格系统，使得商品可以整齐地按行滑动。使用...
小米商城（HTML+CSS）网页设计期末作业
01-04
内容概要：这份资源写的是静态小米商城，点开资源前大家可以去小米商城官网查看设计效果，通过带着读者手写简化版小米商城网页，逐步巩固学习到的HTML和css基础知识，例如：背景属性的使用background、iconfont字体...
HTML+CSS大作业——vivo官方商城
07-08
【HTML+CSS大作业——vivo官方商城】这个项目是一个基于HTML和CSS技术构建的模拟vivo官方网站的页面设计。这个任务旨在让学生掌握基础的网页布局、元素样式控制以及响应式设计等关键技能。 HTML（HyperText Markup ...
java小米商城模拟登陆
04-04
网络上看到的，觉得不错就上传出来，供大家一起共同分享学习。
仿小米官网(html+js+css)
11-09
学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码
基于html和css的小米商城前端页面仿写源码.zip
08-26
基于html和css的小米商城前端页面仿写源码.zip基于html和css的小米商城前端页面仿写源码.zip基于html和css的小米商城前端页面仿写源码.zip基于html和css的小米商城前端页面仿写源码.zip基于html和css的小米商城前端...
HTML5+CSS3实现小米官网（完整版）
m0_63512120的博客
03-10 8333
纯html+css实现的小米官网，文章结尾附有源代码和图片素材。希望能够帮助到大家！！！
Dreamweaver简单网页——HTML+CSS小米官网首页的设计与实现
12-08 493
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
java 实现小米商城系统
灵魂漫步的博客
06-19 5834
1.小米商城系统选题背景 本系统是模仿小米商城来做的一个商城系统，功能比较完善 ，可以作为课程设计和毕业设计 。 2.在线考试系统技术架构 主要技术 JSP、JSTL、jQuery、HTML、CSS、JS Mysql bootstrap 开发工具和环境 Eclipse Tomcat 7 JDK 1.8 Mysql 5.6 Win10 操作系统 3.功能简介 小米商城首页 小米商城注册功能 小米...
HTML+CSS制作小米官网
weixin_45232818的博客
11-08 5202
经过一个星期学习了中国大学MOOC上北京林业大学精品课——《Web前端开发》（对小白来说太友好）。看完之后为了巩固学过的知识点，对着小米官网的布局敲了一遍。本着记录学习的想法发了这篇文章。 以下为小米官网预览图： 这是对着官网写的页面： Html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
HTML5+CSS3实现小米商城 （完整版）
热门推荐
m0_63512120的博客
07-20 1万+
做了一个小米商场的网页，用HTML5+CSS3做出来的，在文章最后附带 网页所有的源码和图片素材供大家参考。原创不易，大家有任何问题都可在评论区指出。
html➕css仿小米商城购物车
最新发布
06-22
创建一个HTML和CSS的简单购物车模拟器，你可以使用基本的HTML结构来构建页面布局，结合CSS来美化外观，使其类似小米商城的购物车。以下是一个基础示例： ```html <!DOCTYPE html> , initial-scale=1.0"> 小米...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值