前端基础之小米网页编写（基础）

最新推荐文章于 2022-07-31 21:15:41 发布
最新推荐文章于 2022-07-31 21:15:41 发布
阅读量1.6k 收藏 10
点赞数 2
文章标签： 前端 html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clover_oreo/article/details/121851731
版权

之前犯了没有规划布局的错，版排丑陋、问题一堆，以至于满盘皆输、从头来过，所以重新返工的我老老实实从规划布局开始，观察小米官网，发现其首页可看做四个长方形大盒子排排站，每一个大盒子里又可分为若干小盒子，小盒子里又可嵌套小小盒子……盒子盒子无穷尽也。

html中关于box的类定义真的很多，定义时一定要分清，略作归类区别，以免后期太多混淆。

轮播：

Bootstrap官网→v4→快速入门→组件→轮播

Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并定制你的网站。

里面有运行的实例和代码可以引用学习。

关于轮播时间间隔：

在想要安排时间间隔的代码总的div里加入data-interval="3000"，"(单位：毫秒，一般是x000，可以是1000ms=1s)"

运行代码：

<!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>
    <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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>


    <style>
        .box {
            width: 1500px;
            height: 750px;
            align-content: center;
        }
        
        .box1 {
            width: 1500px;
            height: 30px;
            background-color: rgb(8, 8, 8);
        }
        
        .box11 {
            height: 28px;
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 4px;
            /* float: left; */
            overflow: hidden;
            text-align: center;
            color: ghostwhite;
            font-size: small;
            line-height: 20px;
            display: inline-block;
        }
        
        .box12 {
            height: 28px;
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 4px;
            float: right;
            overflow: hidden;
            text-align: center;
            color: ghostwhite;
            font-size: small;
            line-height: 20px;
            display: inline-block;
        }
        
        .box2 {
            width: 1500px;
            height: 100px;
            background-color: white;
        }
        
        .box21 {
            width: 100px;
            height: 50px;
            float: left;
            margin-top: 35px;
            margin-left: 5px;
        }
        
        .box22 {
            /* background-color: white; */
            position: relative;
            width: 20px;
            height: 20px;
            top: 0px;
            left: 2px;
        }
        
        #box22:hover {
            background-color: orange;
            /* cursor: pointer; */
        }
        
        #box22:hover img {
            content: url("./搜索.png");
        }
        
        .box3 {
            width: 1500px;
            height: 400px;
            margin-left: 5%;
        }
        
        .box31 {
            width: 250px;
            height: 400px;
            float: left;
            background-color: grey;
        }
        
        .box311 {
            width: 250px;
            height: 40px;
            float: left;
            color: white;
            /* border: 1px solid red; */
            /* text-align: center; */
            line-height: 40px;
            padding-left: 20px;
        }
        
        .box311 img {
            height: 20px;
            width: 20px;
            float: right;
            position: relative;
            left: -20px;
            top: 6px;
        }
        
        .box311:hover {
            background-color: orange;
        }
        
        .box32 {
            width: 950px;
            height: 400px;
            float: left;
            position: relative;
            /* left: 50px; */
        }
        
        .box33 {
            width: 300px;
            height: 400px;
            float: left;
        }
        
        .box331 {
            margin-top: 20px;
        }
        
        .box332:hover {
            content: url("收款.png");
            width: 250px;
            height: 250px;
            /* position: absolute;
            margin-top: 50px;
            margin-left: 900px; */
        }
        
        .box333:hover {
            content: url("收款.png");
            width: 250px;
            height: 250px;
        }
        /* .box333 {
            background-color: white;
        } */
        
        .box334:hover {
            content: url("收款.png");
            width: 250px;
            height: 250px;
        }
        
        .box335:hover {
            content: url("收款.png");
            width: 250px;
            height: 250px;
        }
        
        .box336:hover {
            content: url("收款.png");
            width: 250px;
            height: 250px;
        }
        
        .box4 {
            width: 1500px;
            height: 200px;
            margin-left: 5%;
        }
        
        .box41 {
            width: 240px;
            height: 200px;
            background-color: black;
            font-size: 10px;
            margin-left: 0px;
            float: left;
        }
        
        .box411 {
            width: 80px;
            height: 50px;
            float: left;
            position: relative;
            top: 50px;
            left: 20px;
        }
        
        .box42 {
            width: 300px;
            height: 200px;
            margin-left: 20px;
            float: left;
        }
        
        .box43 {
            width: 300px;
            height: 200px;
            margin-left: 20px;
            float: left;
        }
        
        .box44 {
            width: 300px;
            height: 200px;
            margin-left: 20px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">

        <div class="box1">
            <span class="box11">小米商城&nbsp;|</span>
            <span class="box11">MIUI&nbsp;|</span>
            <span class="box11">IoT&nbsp;|</span>
            <span class="box11">云服务&nbsp;|</span>
            <span class="box11">天星数科&nbsp;|</span>
            <span class="box11">有品&nbsp;|</span>
            <span class="box11">小爱开放平台&nbsp;|</span>
            <span class="box11">企业团购&nbsp;|</span>
            <span class="box11">资质证照&nbsp;|</span>
            <span class="box11">协议规则&nbsp;|</span>
            <span class="box11">下载app&nbsp;|</span>
            <span class="box11">智能生活&nbsp;|</span>
            <span class="box11">Select Location&nbsp;|</span>


            <span class="box12">购物车（0）</span>
            <img class="box12" src="F:/VS Code相关/小米网页/购物车空.png" width="28" height="28"></img>
            <span class="box12">消息通知&nbsp;|</span>
            <span class="box12">注册&nbsp;|</span>
            <span class="box12">登录&nbsp;|</span>
        </div>
        <div class="box2">
            <img src="F:/VS Code相关/小米网页/mi.png" style="position: absolute;width: 85px;height:85px;top: 40px;left: 70px;">

            <div class="box21" style="margin-left: 250px;">Xiaomi手机</div>
            <div class="box21">Redmi 红米</div>
            <div class="box21">电视</div>
            <div class="box21">笔记本</div>
            <div class="box21">平板</div>
            <div class="box21">家电</div>
            <div class="box21">路由器</div>
            <div class="box21">服务</div>
            <div class="box21">社区</div>

            <form action="" style="position:relative;left: 50px;top: 35px;">
                <input type="select" placeholder="请输入搜索内容">
                <span id="box22"><img class="box22" src="./搜索小.png" style=""></span>
            </form>
        </div>

        <div class="box3">
            <div class="box31">
                <div class="box311" style="margin-top: 5px;">手机
                    <img src="F:/VS Code相关/小米网页/右箭头.png" alt="">
                </div>
                <div class="box311">电视
                    <img src="F:/VS Code相关/小米网页/右箭头.png" alt="">
                </div>
                <div class="box311">笔记本 平板
                    <img src="F:/VS Code相关/小米网页/右箭头.png" alt="">
                </div>
                <div class="box311">家电
                    <img src="F:/VS Code相关/小米网页/右箭头.png" alt="">
                </div>
                <div class="box311">出行 穿戴
                    <img src="F:/VS Code相关/小米网页/右箭头.png" alt="">
                </div>
                <div class="box311">智能 路由器
                    <img src="F:/VS Code相关/小米网页/右箭头.png" alt="">
                </div>
                <div class="box311">电源 配件
                    <img src="F:/VS Code相关/小米网页/右箭头.png" alt="">
                </div>
                <div class="box311">健康 儿童
                    <img src="F:/VS Code相关/小米网页/右箭头.png" alt="">
                </div>
                <div class="box311">耳机 音响
                    <img src="F:/VS Code相关/小米网页/右箭头.png" alt="">
                </div>
                <div class="box311">生活 箱包
                    <img src="F:/VS Code相关/小米网页/右箭头.png" alt="">
                </div>
            </div>

            <div class="box32">
                <!-- <img src="F:/VS Code相关/小米网页/1.jpg" " alt=" " style="width: 1150px;height: 600px; "> -->

                <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="3000">
                    <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="F:/VS Code相关/小米网页/1.jpg" class="d-block w-100" alt="..." style="height: 400px;width: 1150px;">
                            <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="F:/VS Code相关/小米网页/11.jpg" class="d-block w-100" alt="..." style="height: 400px;width: 1150px;">

                            <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="F:/VS Code相关/小米网页/111.jpg" class="d-block w-100" alt="..." style="height: 400px;width: 1150px;">
                            <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="F:/VS Code相关/小米网页/1111.jpg" class="d-block w-100" alt="..." style="height: 400px;width: 1150px;">
                            <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>
                    <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>

            </div>

            <div class="box33 ">
                <div class="box331 ">
                    <div class="box332 ">
                        <img src="F:/VS Code相关/小米网页/手机.png " alt=" " style="width:70px;height: 70px; ">
                        <div style="color: gray; ">手机APP</div>
                        <!-- <div>
                        <img src="F:/VS Code相关/小米网页/收款.png" alt="" style="position: absolute;margin-top: -100px;margin-left: -400px;">
                    </div> -->
                    </div>
                    <div class="box333 ">
                        <img src="F:/VS Code相关/小米网页/用户.png " alt=" " style="width:70px;height: 70px; ">
                        <div style="color: gray; ">个人中心</div>
                    </div>
                    <div class="box334 ">
                        <img src="F:/VS Code相关/小米网页/我的－售后.png " alt=" " style="width: 70px;height: 70px; ">
                        <div style="color: gray; ">售后服务</div>
                    </div>
                    <div class="box335 ">
                        <img src="F:/VS Code相关/小米网页/人工客服.png " alt=" " style="width: 70px;height: 70px; ">
                        <div style="color: gray; ">人工客服</div>
                    </div>
                    <div class="box336 ">
                        <img src="F:/VS Code相关/小米网页/购物车.png " alt=" " style="width: 70px;height: 70px; ">
                        <div style="color: gray; ">购物车</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="box4 ">
            <div class="box41 ">
                <div class="box411 ">
                    <img src="F:/VS Code相关/小米网页/时间.png " alt=" " style="width: 30px;height: 30px; ">
                    <div style="color: gray; ">保障服务</div>
                </div>
                <div class="box411 ">
                    <img src="F:/VS Code相关/小米网页/企业.png " alt=" " style="width: 30px;height: 30px; ">
                    <div style="color: gray; ">企业团购</div>
                </div>
                <div class="box411 ">
                    <img src="F:/VS Code相关/小米网页/F码.png " alt=" " style="width: 30px;height: 30px; ">
                    <div style="color: gray; ">F码通道</div>
                </div>
                <div class="box411 ">
                    <img src="F:/VS Code相关/小米网页/内存卡.png " alt=" " style="width: 30px;height: 30px; ">
                    <div style="color: gray; ">米粉卡</div>
                </div>
                <div class="box411 ">
                    <img src="F:/VS Code相关/小米网页/付款.png " alt=" " style="width: 30px;height: 30px; ">
                    <div style="color: gray; ">以旧换新</div>
                </div>
                <div class="box411 ">
                    <img src="F:/VS Code相关/小米网页/话费.png " alt=" " style="width: 30px;height: 30px; ">
                    <div style="color: gray; ">话费充值</div>
                </div>
            </div>
            <div class="box42 ">
                <img src="F:/VS Code相关/小米网页/2.jpg " alt=" " style="width: 300px;height: 200px; ">
            </div>
            <div class="box43 ">
                <img src="F:/VS Code相关/小米网页/3.jpg " alt=" " style="width: 300px;height: 200px; ">
            </div>
            <div class="box44 ">
                <img src="F:/VS Code相关/小米网页/4.jpg " alt=" " style="width: 300px;height: 200px; ">
            </div>
        </div>

    </div>

</body>

</html>

成品展示：

 

中途产生了很多错误和小瑕疵，幸亏有高尚老师和友友们帮助解惑，十分感谢大家呀！

谢谢大家不离不弃，不嫌弃我这个人形bug制造机，耐心解答帮助我，啾咪~

私心藏了个彩蛋，扫码即可向我转账O(∩_∩)O

王小小鸭
关注
小米官网HTML网页制作项目
04-29
关于小米官网的一个项目,如果说有初学者的话,项目不会做可以参考一下.
小米虚拟网页制作
m0_46381479的博客
03-03 572
花了两个晚上写出来的部分小米网页 以下是我的HTML代码实现： css代码如下： 实现效果如下：
小米官网页面设计.zip
04-20
此项目属于自己个人爱好所编写 在家闲来无事写写代码 在这里分享给大家 一个跟小米官网极其相似的网站写法非常简单 一看就懂 不需有任何疑问，如果下载完成之后 你觉得看不懂 欢迎私聊 我会带领你走向前端 一起学习前端 ，谢谢大家，再次声明 此官网页面属于自己个人编写 中间采用了小米网站 链接 ，会转载至小米网站；声明结束，谢谢大家。
网页设计作业-小米网站
06-13
自己做的网页设计作业，仿照小米官方网站。小小作业而已，无商务用途。
小米商城网页制作（附源码）
热门推荐
才下眉头n.的博客
03-28 1万+
本人学习时所做，源码链接在文末( • ̀ω•́ )✧。 目录 前言 一、介绍 二、首页 1.*轮播图 2.css动画实现秒杀模块 3.小米秒杀模块左侧 4.*侧边栏 5.购物车经过弹出盒子 6.必要模块字体图标 二、商品页面 1.商品分类展示 2.*放大镜 三、注册页面 1.页面展示 2.经过注册小米账号出现彩条 总结 前言 当时学习完html/css/js/jquery后，自己动手做了一个小米官网的静态页面（包括首页、商品详情页、注册页面。当......
web前端基础实战项目-小米商城
06-21
HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api，可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以移动设备上完美兼容啦。
Web前端项目之小米SU7官网制作
最新发布
06-02
在本项目"Web前端项目之小米SU7官网制作"中，我们将探讨三个主要的技术领域：HTML、CSS和JavaScript，这些都是构建现代网页应用的基础。这个项目包含完整的代码、视频教程和相关图片，为学习者提供了一个实际操作的...
仿写小米官网网页前端.zip
04-23
【标题】"仿写小米官网网页前端.zip"的解析与知识点详解 在当前的压缩包文件"仿写小米官网网页前端.zip"中，我们可以预见到一个完整的前端开发项目，主要涵盖了HTML、CSS和JavaScript这三个核心的技术领域。这些...
前端web结课作业 小米商城 纯HTML+CSS
06-20
这个项目是基于前端Web技术实现的小米商城的模拟页面，主要采用了HTML和CSS两种基础语言进行开发。HTML（HyperText Markup Language）是网页内容的结构化标记语言，用于定义网页的基本元素和布局；CSS（Cascading ...
前端模仿搭建小米官网项目
08-18
在前端开发领域，模仿搭建知名网站是学习网页设计与开发的一种常见方法。在这个项目中，我们将专注于使用HTML和CSS技术来构建一个类似小米官网的页面。这个实践过程可以帮助初学者深入理解这两种语言的基础以及如何...
html+css制作小米官网
07-18
学习前端的时候制作的网页，有需要的可以下载看看，前期学习html和css只要做出来这个我局的基本可以了，剩下的就是查缺补漏，把一些技巧再掌握的熟练一下就好了。
web html 网页css 设计参照小米主页的登陆页面
11-19
web html 网页 设计参照小米主页的登陆页面 运用了CSS
仿小米商城html网页源码
03-31
仿小米商城html网页源码，包括主页和详情页、购物页面，等等。内容非常丰富，适宜做学习商城网站前端页面参考，源码很棒，建议下载。
小米首页手工代码html+CSS
11-26
小米首页手工代码html+CSS，未使用任何框架，供学习参考。
仿小米官网(html+js+css)
11-09
学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码
HTML--网页制作（小米官网）
weixin_45274946的博客
12-10 1443
一、代码 二、效果：
HTML+CSS制作小米手机产品模块
weixin_47824847的博客
07-31 2151
利用html和css制作小米手机产品模块，展示在网页上，方便推广给客户。
用html和css制作静态小米网页（一）
qq_48802281的博客
07-06 1868
用html和css制作静态小米网页
【小米商城首页简单设计】
akisi的博客
12-10 2484
效果如图，但做一个官网首页还需要设置轮播图和鼠标悬停和图片隐藏。 首先是爬取素材 利用F12查看网页布局和源代码，找到要爬取的图片链接以新标签页打开再保存即可。 然后是搭建页面布局框架 从图片可以看出这个官网总体是有四个大块，每个大块又分成多个小块，例如中间所占面积最大的主体部分就可以分为一个大框中有两个中框，第一个中框里面又有10个小框，其他布局以此类推。 设置定位和偏移量 素材和总体框架搭好之后需要把素材放到合适的位置，因此需要设置图片图标的大小和位置。 前一篇已经讲过定位的基本方式，..
HTML+CSS实践：小米官网首页设计与实现教程
首先，HTML（HyperText Markup Language）是网页的基础，用于定义网页的结构。在这个项目中，HTML5被用作标准，它引入了新的元素和属性，使得网页结构更加语义化。例如，使用`<header>`、`<nav>`、`<main>`、`...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值