【Web】HTML+CSS（No.55）实现小米官网首页静态效果_官网web网站参考效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43251850/article/details/99328784

模仿实现小米官网首页静态布局

效果图

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米官网</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 顶部 -->
<div class="top">
    <div class="super">
        <ul class="dami">
            <li><a href="#">大米网</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">MIUI</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">米聊</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">游戏</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">多看阅读</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">云服务</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">大米移动版</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">问题反馈</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">Select&nbsp;Region</a></li>
        </ul>
        <ul class="shop">
            <li><a href="#">登陆</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">购物车（0）</a></li>
        </ul>
    </div>
</div>

<!-- 上部分 -->
<div class="upside">
    <!-- 导航栏 -->
    <div class="nav-up">
        <img src="img/xiaomi_logo.png" alt="">
        <ul>
            <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="3">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
        </ul>
        <div class="input">
            <input type="text">
            <button>GO</button>
        </div>
    </div>
    
    <div class="nav-down">
        <div class="cata">
            <ul>
                <li>
                    <a href="#">手机</a>
                    <a href="#">平板</a>
                    <span>〉</span>
                </li>
                <li>
                    <a href="#">电视</a
                    ><a href="#">盒子</a>
                    <span>〉</span>
                </li>
                <li>
                    <a href="#">路由器</a>
                    <a href="#">智能配件</a>
                    <span>〉</span>
                </li>
                <li>
                    <a href="#">移动电源</a>
                    <a href="#">插线板</a>
                    <span>〉</span>
                </li>
                <li>
                    <a href="#">耳机</a>
                    <a href="#">音箱</a>
                    <span>〉</span>
                </li>
                <li>
                    <a href="#">电池</a>
                    <a href="#">存储卡</a>
                    <span>〉</span>
                </li>
                <li>
                    <a href="#">保护套</a>
                    <a href="#">后盖</a>
                    <span>〉</span>
                </li>
                <li>
                    <a href="#">贴膜</a>
                    <a href="#">其他配件</a>
                    <span>〉</span>
                </li>
                <li>
                    <a href="#">米兔</a>
                    <a href="#">服装</a
                    ><span>〉</span>
                </li>
                <li>
                    <a href="#">背包</a>
                    <a href="#">其他周边</a>
                    <span>〉</span>
                </li>
            </ul>
        </div>
    </div>
    
    <!-- 广告 -->
    <div class="advertisement">
        <div class="ad">
            <div class="ad-up">
                <div class="up1">
                    <p>START</p>
                    <p>开房购买</p>
                </div>
                <div class="up2">
                    <p>GROUND</p>
                    <p>企业团购</p>
                </div>
                <div class="up3">
                    <p>RETROFIT</p>
                    <p>官方产品</p>
                </div>
            </div>
            <div class="ad-down">
                <div class="down1">
                    <p>CHANNEL</p>
                    <p>F码通道</p>
                </div>
                <div class="down2">
                    <p>RECHARGE</p>
                    <p>话费充值</p>
                </div>
                <div class="down3">
                    <p>SECURITY</p>
                    <p>防伪检查</p>
                </div>
            </div>
        </div>
        <div class="ad-img">
            <img src="img/T184E_BQWT1RXrhCrK.jpg" alt="">
        </div>
        <div class="ad-img">
            <img src="img/T1yvd_BQDT1RXrhCrK.jpg" alt="">
        </div>
        <div class="ad-img">
            <img src="img/T1mahQBmKT1RXrhCrK.jpg" alt="">
        </div>
    </div>
    
    <!-- 大米明星单品 -->
    <div class="star">
        <div class="box">
            <p>大米明星单品</p>
            <div class="button">
                <div class="but01">〈</div>
                <div class="but01">〉</div>
            </div>
        </div>
        <div class="star1">
            <img src="img/T1riKjB7VT1RXrhCrK.jpg" alt="">
            <p>大米电视2/2S&nbsp;全系列</p>
            <a href="#">40/48/49/55英寸&nbsp;&nbsp;现货购买</a>
        </div>
        <div class="star2">
            <img src="img/T19AbjBCDT1RXrhCrK.jpg" alt="">
            <p>大米平板</p>
            <a href="#">全球首款&nbsp;NVIDIA&nbsp;Tegra&nbsp;K1&nbsp;平板</a>
        </div>
        <div class="star3">
            <img src="img/T1meZjBCAT1RXrhCrK.jpg" alt="">
            <p>大米盒子增强版&nbsp;&nbsp;1G</p>
            <a href="#">首款4K超高清网络机顶盒</a>
        </div>
        <div class="star4">
            <img src="img/T1tsEgB7DT1RXrhCrK.jpg" alt="">
            <p>全新大米路由器</p>
            <a href="#">顶配路由器，企业级性能</a>
        </div>
        <div class="star5">
            <img src="img/T10TJjB5hT1RXrhCrK.jpg" alt="">
            <p>大米头戴式耳机</p>
            <a href="#">媲美主流千元级头戴耳机</a>
        </div>
    </div>
    
    
</div>

<!-- 中部分 -->
<div class="center">
    <div class="noopsyche">
        <p>智能硬件</p>
        <div class="noo-l">
        </div>
        <div class="noo-r">
            <div class="r-up">
                <div class="noo1">
                    <img src="img/T1odEjB5bT1RXrhCrK.jpg" alt="">
                    <p>大米智能家庭套装</p>
                    <a href="#">3分钟快速安装，30多种智能玩法</a>
                    <p class="money">199元</p>
                </div>
                <div class="noo2">
                    <img src="img/T1JKxvBXhv1RXrhCrK.jpg" alt="">
                    <p>大米随身WIFI&nbsp;8GB&nbsp;U盘版</p>
                    <a href="#">随身上网神器，内置8GB&nbsp;U盘</a>
                    <p class="money">49.9元</p>
                </div>
                <div class="noo3">
                    <img src="img/T18yZQBCET1RXrhCrK.jpg" alt="">
                    <p>小蚁智能摄像机</p>
                    <a href="#">能看能听能说，手机远程观看</a>
                    <p class="money">149元</p>
                </div>
                <div class="noo4">
                    <img src="img/T1YoZQByYT1RXrhCrK.jpg" alt="">
                    <p>大米体重称</p>
                    <a href="#">高精度压力传感器&nbsp;｜&nbsp;手机管理全家健康</a>
                    <p class="money">99元</p>
                </div>
            </div>
            <div class="r-down">
                <div class="noo5">
                    <img src="img/T16nVjBCKT1RXrhCrK.jpg" alt="">
                    <p>小蚁运动机</p>
                    <a href="#">边玩边录边拍，手机随时分享</a>
                    <p class="money">399元</p>
                </div>
                <div class="noo6">
                    <img src="img/T18zWQB4WT1RXrhCrK.jpg" alt="">
                    <p>大米路由器&nbsp;mini</p>
                    <a href="#">主流双频AC智能路由器，性价比之王</a>
                    <p class="money">129元</p>
                </div>
                <div class="noo7">
                    <img src="img/T1oixjB5bT1RXrhCrK.jpg" alt="">
                    <p>大米智能插座</p>
                    <a href="#">手机远程遥控开关，带USB接口</a>
                    <p class="money">59元</p>
                </div>
                <div class="noo8">
                    <img src="img/T1KzbQBvbT1RXrhCrK.jpg" alt="">
                    <p>大米水质TDS检测笔</p>
                    <a href="#">准确检测家中水质纯度</a>
                    <p class="money">39元</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 下部分 -->
<div class="bottom">
    <div class="b-up">
        <ul>
            <li>
                <a href="#">1小时快修服务</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </li>
            <li>
                <a href="#">7天无理由退货</a>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </li>
            <li>
                <a href="#">15天免费换货</a>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </li>
            <li>
                <a href="#">满150元包邮</a>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <li>
                <a href="#">520余家售后网点</a>
            </li>
        </ul>
    </div>
    <div class="b-center">
        <div class="c-l">
            <ul>
                <li class="y">帮助中心</li>
                <li><a href="#">购物指南</a></li>
                <li><a href="#">支付方式</a></li>
                <li><a href="#">配送方式</a></li>
            </ul>
            <ul>
                <li class="y">服务支持</li>
                <li><a href="#">售后政策</a></li>
                <li><a href="#">自助服务</a></li>
                <li><a href="#">相关下载</a></li>
            </ul>
            <ul>
                <li class="y">大米之家</li>
                <li><a href="#">大米之家</a></li>
                <li><a href="#">服务网点</a></li>
                <li><a href="#">预约亲临到店服务</a></li>
            </ul>
            <ul>
                <li class="y">关注我们</li>
                <li><a href="#">新浪微博</a></li>
                <li><a href="#">大米部落</a></li>
                <li><a href="#">官方微信</a></li>
            </ul>
        </div>
        <div class="c-r">
            <p class="tel">400-100-5678</p>
            <p class="time">周一至周日&nbsp;8:00-18:00</p>
            <p class="jin">（仅收市话费）</p>
            <div class="online">24小时在线客服</div>
        </div>
    </div>
    <div class="b-down">
        <div class="img">
            <img src="img/cheng.png" alt="">
        </div>
        <div class="tail01">
            <a href="#">大米网</a>
            <span>|</span>
            <a href="#">MIUI</a>
            <span>|</span>
            <a href="#">米聊</a>
            <span>;|</span>
            <a href="#">多看书城</a>
            <span>|</span>
            <a href="#">大米路由器</a>
            <span>|</span>
            <a href="#">大米后院</a>
            <span>|</span>
            <a href="#">大米天猫店</a>
            <span>|</span>
            <a href="#">大米淘宝直营店</a>
            <span>|</span>
            <a href="#">大米网盟</a>
            <span>|</span>
            <a href="#">问题反馈</a>
            <span>|</span>
            <a href="#">Select&nbsp;Region</a>
        </div>
        <p class="tail02">5555555号</p>
    </div>
</div>
</body>
</html>

CSS代码

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- 公共部分 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    size: 13px;
    text-decoration:none;
}

a:hover {
    color: #ff6700 !important;
}

li {
    list-style:none;
}

body {
    min-width: 1230px;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- 顶部-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
.top {
    width: 100%;
    height: 40px;
    background-color: #333333;
}

.super {
    width: 1226px;
    height: 100%;
    margin: 0 auto;
}

.dami>li {
    font-size: 12px;
    color: #b0b0b0;
    float: left;
    line-height: 40px;
}

.dami>li>a{
    font-size: 12px;
    color: #b0b0b0;
}

.shop {
    float: right;
}

.shop>li {
    font-size: 13px;
    color: #b0b0b0;
    float: left;
    line-height: 40px;
}

.shop>li>a {
    font-size: 13px;
    color: #b0b0b0;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- 上部分 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
.upside {
    width: 100%;
    height: 1210px;
    background-color: #ffffff;
}

/* 导航栏 */
.nav-up {
    width: 1226px;
    height: 100px;
    margin: 0 auto;
}

.nav-up>img {
    width: 49px;
    height: 49px;
    margin-top: 21px;
    margin-right: 70px;
    float: left;
}

.nav-up>ul {
    width: 750px;
    height: 100%;
    margin-left: 60px;
    float: left;
}
.nav-up>ul li {
    line-height: 100px;
    float: left;
    padding-left: 30px;
}

.nav-up>ul li>a {
    font-size: 18px;
    color: #424242;
}

.input {
    padding-top: 30px;
    height: 100%;
    float: right;
}

.input>input {
    width: 200px;
    height: 40px;
    float: left;
    border:1px solid #f0f0f0;
}

.input>button {
    width: 50px;
    height: 40px;
    border:1px solid #f0f0f0;
    background: none;
    font-family: "Adobe Gothic Std B";
    font-size: 16px;
    color: #424242;
}

.nav-down {
    width: 1226px;
    height: 460px;
    margin: 0 auto;
    background-image: url(../img/T1vWdTBKDv1RXrhCrK.jpg);
}

.cata {
    width: 248px;
    height: 100%;
    background-color: #2f0c00;
}

.cata>ul {
   padding-top: 15px;
    padding-left: 35px;
    padding-right: 15px;
}

.cata>ul li {
    height: 43px;
    line-height: 43px;
}

.cata>ul li>a,
.cata>ul li>span {
    color: #ffffff;
    font-size: 12px;
}

.cata>ul li>a {
    margin-right: 13px;
}

.cata>ul li>span {
    float: right;
}

/* 广告 */
.advertisement {
    width: 1226px;
    height: 170px;
    margin: 20px auto;
}

.ad {
    width: 248px;
    height: 100%;
    background-color: #5f5750;
    float: left;
    padding: 0px 5px 5px 5px;
}

.ad-up,
.ad-down {
    width: 241px;
    height: 81px;
    margin-top: 5px;
}

.up1,
.up2,
.up3,
.down1,
.down2,
.down3 {
    width: 77px;
    height: 78px;
    float: left;
    text-align: center;
}

.up1>p,
.up2>p,
.up3>p,
.down1>p,
.down2>p,
.down3>p {
    color: #ffffff;
    font-size: 13px;
    margin-top: 15px;
}

.up1 {
    border-right: 1px solid #888888;
    border-bottom:  1px solid #888888;
}

.up2 {
    border-left:  1px solid #888888;
    border-right:  1px solid #888888;
    border-bottom:  1px solid #888888;
    margin-left: 4px;
}

.up3 {
    border-left:  1px solid #888888;
    border-bottom:  1px solid #888888;
    margin-left: 4px;
}

.down1 {
    border-top:  1px solid #888888;
    border-right:  1px solid #888888;
}

.down2 {
    border-left:  1px solid #888888;
    border-top:  1px solid #888888;
    border-right:  1px solid #888888;
    margin-left: 4px;
}

.down3 {
    border-left:  1px solid #888888;
    border-top:  1px solid #888888;
    margin-left: 4px;
}

.ad-img {
    float: left;
    margin-left: 10px;
}

/* 大米明星单品 */
.star {
    width: 1226px;
    height: 380px;
    margin: 0 auto;
}

.box {
    width: 100%;
    height: 30px;
}

.box>p {
    font-size: 20px;
    color: #8e8e8e;
    line-height: 30px;
    float: left;
}

.button {
    float: right;
    text-align: center;
}

.but01,
.but02 {
    float: left;
    width: 40px;
    height: 28px;
    border: 1px solid #f0f0f0;
    color: #bec4d4;
    font-size: 12px;
    line-height: 23px;
}

.star1,
.star2,
.star3,
.star4,
.star5 {
    width: 242px;
    height: 350px;
    float: left;
    margin-top: 20px;
    background-color: #fafafa;
    text-align: center;
}

.star1 {
    border-top: 2px solid #ff7600;
}

.star2 {
    border-top: 2px solid #ff0000;
    margin-left: 4px;
}

.star3 {
    border-top: 2px solid #adff2f;
    margin-left: 4px;
}

.star4 {
    border-top: 2px solid #6495ed;
    margin-left: 4px;
}

.star5 {
    border-top: 2px solid #6a5acd;
    margin-left: 4px;
}

.star1>img,
.star2>img,
.star3>img,
.star4>img,
.star5>img {
    margin-top: 30px;
}

.star1>p,
.star2>p,
.star3>p,
.star4>p,
.star5>p {
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 8px;
}

.star1>a,
.star2>a,
.star3>a,
.star4>a,
.star5>a {
    font-size: 10px;
    color: #b0b0b0;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- 中部分 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
.center {
    width: 100%;
    height: 810px;
    background-color: #f5f5f5;
}

.noopsyche {
    width: 1226px;
    height: 100%;
    margin: 0 auto;
}

.noopsyche>p {
    height: 100px;
    font-size: 20px;
    color: #8e8e8e;
    line-height: 30px;
    line-height: 100px;
}

.noo-l {
    width: 234px;
    height: 614px;
    background: url(../img/T1IhLjBC_T1RXrhCrK.jpg) no-repeat;
    float: left;
}

.noo-r {
    width: 992px;
    height: 614px;
    float: left;
}

.r-up {
    width: 100%;
    height: 302px;
    margin-bottom: 8px;
}

.noo1,
.noo2,
.noo3,
.noo4,
.noo5,
.noo6,
.noo7,
.noo8 {
    width: 240px;
    height: 305px;
    float: left;
    margin-left: 8px;
    background-color: #ffffff;
    text-align: center;
}

.noo1>p,
.noo2>p,
.noo3>p,
.noo4>p,
.noo5>p,
.noo6>p,
.noo7>p,
.noo8>p {
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 2px;
}

.noo1>a,
.noo2>a,
.noo3>a,
.noo4>a,
.noo5>a,
.noo6>a,
.noo7>a,
.noo8>a {
    font-size: 10px;
    color: #b0b0b0;
}

.money {
    font-size: 12px;
    color: #ff6700;
    margin-top: 15px;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- 下部分 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
.bottom {
    width: 100%;
    height: 350px;
    text-align: center;
}

.b-up {
    width: 1226px;
    height: 100px;
    margin: 0 auto;
    padding-left: 120px;
    border-bottom: 1px solid #bebebe;
}

.b-up>ul {
    display: inline;
    line-height: 100px;
    font-size: 18px;
}

.b-up>ul li {
    float: left;
    color: #9d9d9d;
    font-size: 18px;
}

.b-up>ul li>a {
    color: #9d9d9d;
}

.b-center {
    width: 1226px;
    height: 200px;
    margin: 0 auto;
    padding-top: 30px;
}

.c-l {
    width: 900px;
    height: 100%;
    padding-left: 20px;
    float: left;
}

.c-l>ul {
    width: 200px;
    height: 100%;
    float: left;
    text-align: left;
    padding-left: 70px;
    font-size: 16px;
}

.y {
    line-height: 25px;
    color: #000000;
    font-size: 16px;
    margin-bottom: 20px;
}

.c-l>ul li>a {
    color: #9d9d9d;
    font-size: 12px;
    line-height: 25px;
}

.c-r {
    margin-top: 5px;
    height: 110px;
    border-left: 2px solid #bebebe;
    float: left;
    padding-left: 75px;
}

.tel {
    font-size: 17px;
    color: #ff6700;
    margin-bottom: 7px;
}

.time,
.jin {
    font-size: 12px;
    color: #000000;
    margin-bottom: 3px;
}

.online {
    width: 120px;
    height: 30px;
    border: 1px solid #ff6700;
    font-size: 13px;
    color: #ff6700;
    margin-top: 15px;
    padding-top: 4px;
    line-height: 20px;
}

.b-down {
    width: 1226px;
    height: 50px;
    margin: 0 auto;
    text-align: left;
}

.img {
    float: left;
    margin-right: 10px;
}

tail01 {
    float: left;
}

.tail01>a {
    font-size: 12px;
    color: #757575;
}

.tail01>span {
    font-size: 12px;
}

.b-down>span>a {
    font-size: 12px;
}

.tail02 {
    font-size: 12px;
    color: #757575;
}