HTML+CSS 小米官网案例

已于 2022-07-08 13:12:51 修改
阅读量1.4k 收藏 14
点赞数 4
分类专栏： 前端 文章标签： css html css3
于 2022-07-08 13:12:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46040633/article/details/125676335
版权

HTML+CSS 小米官网案例

收获：学会引用阿里矢量图，观察网页布局，熟练掌握float的使用方式，简单实用css动画，调整网页布局，引用css样式。

网页没有完全还原，建议大家找最新的教程

  • xiaomi.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>小米商城 - Xiaomi 12、Redmi K50、MIX FOLD，小米电视官方网站</title>
   
    <!-- 网页更改的图标样式 -->
    <!-- ???无法加载 -->
    <link rel="shortcut icon"  href="https://s01.mifile.cn/favicon.ico" type="image/x-icon" />
   
    <!-- 阿里的矢量库 -->
    <link rel="stylesheet" type="text/css" href="./css/font_lsixqepo8us/iconfont.css">
    
    <!--引入自己定义的样式  -->
    <link rel="stylesheet" href="./css/mi.css" type="text/css">

</head>
<body>
     <!-- 顶部布局 -->
     <div class="miHeader"></div>

     <!-- 小米的菜单栏 -->
     <div class="miMuen">
        <!-- 内容居中 -->
        <div class="cen">
            <div class="dh_left">
                <ul>
                    <li><a href="">小米商城<span>|</span></a></li>
                    <li><a href="">MIUI<span>|</span></a></li>
                    <li><a href="">IoT<span>|</span></a></li>
                    <li><a href="">云服务<span>|</span></a></li>
                    <li><a href="">天星科技<span>|</span></a></li>
                    <li><a href="">有品<span>|</span></a></li>
                    <li><a href="">小米开放平台<span>|</span></a></li>
                    <li><a href="">企业团购<span>|</span></a></li>
                    <li><a href="">资质证照<span>|</span></a></li>
                    <li><a href="">协议规则<span>|</span></a></li>
                    <li><a href="">下载APP<span>|</span></a></li>
                    <li><a href="">智能生活<span>|</span></a></li>
                    <li><a href="">Select Location</a></li>
                </ul>
            </div>
            <div class="dh_right">
                <ul>
                <li class="shop"><i class="iconfont">&#xf0179;</i><a href="">购物车(0)</a></li>
                <li><a href="">消息通知</a></li>
                <li><a href="">登录<span>|</span></a></li>
                <li><a href="">注册<span>|</span></a></li>
                </ul>
                
            </div>
        </div>
     </div>
     <!-- 搜索栏效果 -->
     <div class="miSearch">
        <div class="cen">
            <div class="search_left">
                <ul>
                    <li class="searchLogo"><img src="./img/logo-mi2(1).png" alt=""></li>
                    <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_right" >
                <input type="text" value="Redmi K30" class="find">
                <input type="button" value="&#xe60b" class="findsub iconfont" >
            </div>
        </div>
     </div>
     <!-- 轮播图实现效果 -->
     <div class="Lunbotu">
        <div class="cen">
            <div class="lbt"></div>
        </div>
        
        <div class="hdl">
            <ul>
                <li><a href="">手机</a><i class="iconfont">&#xe62e;</i></li>
                <li><a href="">电视</a><i class="iconfont">&#xe62e;</i></li>
                <li><a href="">笔记本 平板</a><i class="iconfont">&#xe62e;</i></li>
                <li><a href="">出行 穿戴</a><i class="iconfont">&#xe62e;</i></li>
                <li><a href="">耳机 音箱</a><i class="iconfont">&#xe62e;</i></li>
                <li><a href="">家电</a><i class="iconfont">&#xe62e;</i></li>
                <li><a href="">智能 路由器</a><i class="iconfont">&#xe62e;</i></li>
                <li><a href="">电源 配件</a><i class="iconfont">&#xe62e;</i></li>
                <li><a href="">健康 儿童</a><i class="iconfont">&#xe62e;</i></li>
                <li><a href="">生活 箱包</a><i class="iconfont">&#xe62e;</i></li>
            </ul>
        </div>
     </div>
<div class="goodsInfomation">
    <div class="cen">
        <div class="good_div1">
            <ul>
                <li><a href="">保障服务</a></li>
                <li><a href="">企业团购</a></li>
                <li><a href="">F码通道</a></li>
                <li><a href="">米粉卡</a></li>
                <li><a href="">以旧换新</a></li>
                <li><a href="">话费充值</a></li>
            </ul>
        </div>
        <div class="good_div"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340" alt=""></div>
        <div class="good_div"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d1892854c8bb165e755d68bde287d71.jpg?w=632&h=340" alt=""></div>
        <div class="good_div"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/290270b6fc499fc5fcb653417e99fe91.jpg?w=632&h=340" alt=""></div>
    </div>
</div>
<div class="mi6">
   <div class="cen">
    <div class="xioami12s"><img src="./img/2656295f6c067f48a04a425acf15a096.webp" alt=""></div>
    <div class="shouji">
        <h2>手机</h2>
       <div class="div1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b99bcb716c8f76e1fc5475172bdfc27.jpg?thumb=1&w=234&h=614&f=webp&q=90" alt=""></div>
       <div class="div2">
        <ul>
            <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Xiaomi 12S pro</a> </li>
            <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012000_0b9df066c110f201154013ac373df1d9.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Xiaomi 12S</a> </li>
            <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012022_19bbddb6b35c3828f8b53f450c1519a3.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">xiaomi 12 pro 天玑版</a></li>
            <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011841_084ed41d67f248677914605b73faf582.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Xiaomi 12S Ultra</a> </li>
        </ul>
        <div>
            <ul>
                <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/211bb83776a8e0c8358732c3f3aa2864.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Redmi Note 11T Pro+</a></li>
                <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5713971c4bb6512743dfd06023080268.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Redmi Note 11T Pro</a></li>
                <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7fccce9e65aff2d7c913e40f4bee1b0b.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Redmi Note 11SE</a></li>
                <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bcd64f412dfb5e15695fa96d21ecb23.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Xiaomi Civi 1S</a></li>
            </ul>
        </div>
       </div>

    </div>
    <div></div>
    <div></div>
   </div>
</div>

</body>
</html>
  • Mi.css
/* 清除css样式 */
*{
    margin: 0px;
    padding: 0px;
}
.miHeader{
    width: 100%;
    height: 120px;
    background-color: #ff6700;
    background-position: 50%;
    background-size: auto 120;
}
/* 小米导航栏 */
/* 小米导航栏开始 */
.miMuen{
    width: 100%;
    height: 40px;
    background-color: #333333;
}

.cen{
    width: 1226px;
    height: 100%;
    border: 1px solid #e0e0e0;
    margin: 0px auto;
}

ul li{
    list-style: none;
}
.dh_left li{
    float: left;
    line-height: 40px;
}
.dh_left li a,.dh_right a{
 font-size: 12px;
 color: #b0b0b0;;
 text-decoration: none;
}
.dh_left a:hover{
    color: #ffffff;
}
.dh_left span,.dh_right span{
    font-size: 10px;
    color: #424242;
    margin-left: 7px;
    margin-right: 7px;
}
.dh_right li{
    float: right;
    line-height: 40px;

}
.shop{
    height: 40px;
    width: 120px;
    background-color: #424242;
    text-align: center;
    margin-left: 20px;
}
.shop :hover{
    color: #ff6700;
    background-color: #ffffff;
}
.shop i{
    color:#b0b0b0;
    font-size: 18px;
    line-height: 5px;
    margin-right: 2px;
}
/* 小米导航栏结束 */

/* 搜索栏布局 */
.miSearch{
    height: 100px;
    width: 100%;
}
.search_left{
    height: 100px;
    width: 850px;
    float: left;
}
.search_left .searchLogo{
    margin-left: 0px;
    margin-top: 20px;
}
.search_left li{
    float: left;
    line-height: 100px;
    margin-left: 30px;
}
.search_left a{
    font-size: 15px;
    color: #333333;
    text-decoration: none;
}
.search_right  {
    float:right;
    line-height: 100px;

}
.find {
    width: 150px;
    height: 30px;
    border: 1px solid #e0e0e0;
    position: relative;
    left: 5px;
}
.findsub{
    height: 31px;
    width: 35px;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    
}

/* 轮播图效果 */
.Lunbotu {
    width: 100%;
    height: 460px;
}
.lbt{
    width: 100%;
    height: 460px;
    background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/143ceae1731ac47fe7fa68dde2978bdc.jpg?thumb=1&w=1533&h=575&f=webp&q=90);
    animation: 15s sxt infinite;

}
/* 动画 */
@keyframes sxt{
    0%{background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/143ceae1731ac47fe7fa68dde2978bdc.jpg?thumb=1&w=1533&h=575&f=webp&q=90);}
    25%{background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/987c34b474be111ba87f0321082eb2f3.jpg?thumb=1&w=1533&h=575&f=webp&q=90);}
    50%{background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/987c34b474be111ba87f0321082eb2f3.jpg?thumb=1&w=1533&h=575&f=webp&q=90);}
    75%{background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/143ceae1731ac47fe7fa68dde2978bdc.jpg?thumb=1&w=1533&h=575&f=webp&q=90);}
    100%{ background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/143ceae1731ac47fe7fa68dde2978bdc.jpg?thumb=1&w=1533&h=575&f=webp&q=90);}
}

/* 滑动栏效果 */
.hdl{
    width: 234px;
    height: 460px;
    background-color: rgba(105, 101,101, 0.6);
    position:absolute;
    top: 0px;
    left: 147px;
}
.Lunbotu{
    position: relative;
}
.hdl li{
    width: 234px;
    height:46px;
    line-height: 42px;

}
.hdl  a{
    color:#ffffff;  
    font-size: 12px;
    text-decoration: none;
    margin-left: 20px;
}
.hdl li:hover{
    background-color: #ff6700;
}
.hdl i{
    float: right;
    margin-left: 20px;
    color: #e0e0e0;
}
.goodsInfomation{
    height: 170px;
    width: 100%;
    margin-top: 16px;
}

.goodsInfomation .good_div1{
    width: 234px;
    height: 170px;
    background-color: #5f5750;
    float: left;
}
.goodsInfomation .good_div{
    width: 319px;
    height: 170px;
    overflow: auto;
    float: left;
    margin-left: 9px;
}
.good_div img{
    width: 100%;
}
.goodsInfomation li{
    float: left;
    margin-right: 10px;
    border:1px solid ;
    margin-top: 52px;
    margin-bottom: 16px;
    text-align: center;
    
}
/* 商品详情 */
.mi6{
    width: 100%;
    height: 1059px;
    background-color: #f5f5f5;
    margin-top: 65px;
}

.shouji{
    height: 500px;
    width: 100%;
}
.shouji h2{
    font-size: 20px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    margin-top: 12px;
}

.shouji div{
    float: left;
}
.shouji div1{
    width: 250px;
    height: 100%;
    border: solid #333333;
}
.shouji div2{
    width: 800px;
    height: 100%;
    border: solid #333333;
    float: right;
}

.shouji li{
    width: 235px;
    height:300px;
    float: left;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 10px;
    /* border:  1px solid #424242; */
    background-color: #fff;
}
.shouji a{
    color:#333333;  
    font-size: 12px;
    text-decoration: none;
    margin-left: 20px;
   
}
幸以
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css、HTML制作小米商城网页（一）
m0_70516782的博客
07-06 1745
制作首页导航栏属性： float:（浮动）display: block;（显示块元素）display: none;（隐藏块元素）margin（外边距） :hover（悬浮变色）border（边框） line-height:（行高） padding（内边距）border-style（边框样式）text-shadow: 1px 1px 1px red(红); 阴影效果 可选值: 水平效果(必填)，垂直效果(必填)，模糊半径(选填)，颜色(选填)代码：
小米商城（HTML+CSS）网页设计期末作业
01-04
内容概要：这份资源写的是静态小米商城，点开资源前大家可以去小米商城官网查看设计效果，通过带着读者手写简化版小米商城网页，逐步巩固学习到的HTML和css基础知识，例如：背景属性的使用background、iconfont字体...
前端 ：用HTML和css制作一个小米官网的静态页面
aisheisadas的博客
10-28 1892
【代码】前端 ：用HTML和css制作一个小米官网的静态页面。
小米商城html+css
m0_74031471的博客
06-04 3014
完整的代码包括图片和图标在github。
html传统前端布局制作（以小米商城为例，该文章仅学习交流使用）
最新发布
2401_83334819的博客
05-12 524
传统前端布局盒子模型，适合初学者学习交流
HTML5+CSS3实现小米官网（完整版）
m0_63512120的博客
03-10 8022
纯html+css实现的小米官网，文章结尾附有源代码和图片素材。希望能够帮助到大家！！！
小米商城html+css+js全代码
热门推荐
weixin_57774021的博客
03-21 1万+
小米商城全代码，供参考，互相学习
Web项目实战分享——小米官网
初尘屿风的博客
05-09 1565
每个学习过前端的学习者来说，都接触过web项目的实战，业内最真实的的，应该是自己独立编写一个网页项目，当然如果你是大佬的话，这只是小菜一碟，而如果你是小白或正在学习该部分知识的人，这一小节你可以融会贯通的话，说明你就可以出师了，它用到了HTML5+css+JavaScript+iconfont的内容，相信你一定会有所收获的。
小米商城仿写css+html纯静态
08-06
主页仿写
《网页设计与制作项目教程（HTML+CSS+JavaScript）》源代码.zip
02-03
《网页设计与制作项目教程（HTML+CSS+JavaScript）》源代码
Web前端进阶教程，前端HTML5+CSS3+移动端项目实战（魅族官网+小米+迅雷移动端等）_Web前端零基础全套视频教程
05-22
需要视频配套的案例源码 课件 笔记等资料 ，可以私信UP"web",直接拿走吧你~~~ HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。 HTML产生于1990年，1997年...
小米官网源代码
06-11
小米官网源代码
仿小米官网(html+js+css)
11-09
学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码
小米商城html项目实战，js+css+html
12-12
小米商城html项目实战，js+css+html
小米官网.rar html
12-27
小米网站html 撒俄方看见尕娃；JG OJ;AQJ ;我就跟WKA;HAWERHKAERHEBSADLGV ;LA
小米商城html
01-03
利用css和html布局网页
仿小米官网侧边栏.html
05-25
文档中详细介绍了使用HTML、CSS和JavaScript等技术实现仿制小米官网侧边栏的方法和技巧，同时提供了多个实例演示和代码案例，帮助读者更好地理解和掌握前端开发中的相关知识。 无论您是初学者还是有一定经验的前端...
仿效小米商城静态页码html+css
豆子的博客
07-03 593
一 实现效果 2 CSS
html+css实战119-综合案例-小米布局
qq_41632427的博客
06-14 257
html
html+css页面设计案例
11-12
以下是两个HTML+CSS页面设计案例： 1. 学生考试期末作业的水平 这个案例是给学生定制的，符合学生考试期末作业的水平。它采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力，顶部导航及底部区域背景色为100%宽度。有的页面还包含了一些JS效果，例如轮播图等。 2. HTML+CSS课程设计 这个案例是一套完整的HTML+CSS课程设计，包括一个主页以及六个子页面。它的制作精美良好，应付期末的网页课设或者期末大作业肯定是不成问题的。这个案例可以作为学习HTML+CSS的参考，可以从中学习到如何进行页面布局、如何使用CSS样式等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值