简单的小米官网随便写写

最新推荐文章于 2022-07-30 18:35:40 发布
最新推荐文章于 2022-07-30 18:35:40 发布
阅读量113 收藏
点赞数
文章标签： webview css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dietotenljh/article/details/121862402
版权

 

<!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" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>小米官网</title>
</head>
<body>
    <div class="header">
        <div class="inner">
            <div class="naver">
                <a href="#">小米商城</a>
                <span class="kongge">|</span>
                <a href="#">MIUI</a>
                <span class="kongge">|</span>
                <a href="#">loT</a>
                <span class="kongge">|</span>
                <a href="#">云服务</a>
                <span class="kongge">|</span>
                <a href="#">天星数科</a>
                <span class="kongge">|</span>
                <a href="#">有品</a>
                <span class="kongge">|</span>
                <a href="#">小爱开放平台</a>
                <span class="kongge">|</span>
                <a href="#">企业团购</a>
                <span class="kongge">|</span>
                <a href="#">资质证照</a>
                <span class="kongge">|</span>
                <a href="#">协议规则</a>
                <span class="kongge">|</span>
                <a href="#">下载app</a>
                <span class="kongge">|</span>
                <a href="#">智能生活</a>
                <span class="kongge">|</span>
                <a href="#">Select Location</a>
            </div>
            <div class="gwc">
                <a href="#"><p>购物车(0)</p></a>
            </div>
            <div class="mont">
                <a href="#">消息通知</a>
            </div>
            <div class="link">
                <a href="#">登录</a>
                <span class="kongge">|</span>
                <a href="#">注册</a>
                <span class="kongge">|</span>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="headed">
            <div class="logoer">
                <a href="https://www.mi.com/index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <div class="nothing">
            </div>
            <div class="linked">
                <a href="#">Xiaomi手机</a>
                <a href="#">Redmi手机</a>
                <a href="#">电视</a>
                <a href="#">笔记本</a>
                <a href="#">平板</a>
                <a href="#">家电</a>
                <a href="#">路由器</a>
                <a href="#">服务</a>
                <a href="#">社区</a>
            </div>
            <div class="search">
                <div class="boxbig">
                    <div class="boxsmall"><input class="search_text" type="text"></div>
                    <div class="boxsmaller"><input class="search_sear" type="button"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content_left">
            <ul class="list_nav">
                <li class="list_text">
                    <a href="#">手机
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">电脑
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">笔记本&nbsp;平板
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">家电
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">出行&nbsp;穿戴
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">智能&nbsp;路由器
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">电源&nbsp;配件
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">健康&nbsp;儿童
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">耳机&nbsp;音响
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">生活&nbsp;箱包
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="second">
        <div class="channel">
            <ul>
                <li class="channel_il">
                    <a href="#"><img src="images/img11.png" alt="">保障服务</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/img12.png" alt="">企业团购</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/img13.png" alt="">F码通道</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/img14.png" alt="">米粉卡</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/img15.png" alt="">以旧换新</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/img16.png" alt="">话费充值</a>
                </li>
            </ul>
        </div>
        <div class="figure">
            <a href="#"><img src="images/img2.jpg" alt=""></a>
        </div>
        <div class="figure">
            <a href="#"><img src="images/img3.jpg" alt=""></a>
        </div>
        <div class="figure">
            <a href="#"><img src="images/img4.jpg" alt=""></a>
        </div>
    </div>
    <div class="footer">
        <div class="pic_big">
            <a href="#"><img src="images/img5.jpg" alt=""></a>
        </div>
        <h2 class="title">手机
            <div class="next_likned">
                <a href="#">查看更多
                    <div class="next_pic">
                        <div class="next_bol">
                            &gt;
                        </div>
                    </div>
                </a>
            </div>
        </h2>
        <div class="bodyer">
            <div class="pic_fold">
                <a href="#"> <img src="images/img6.jpg" alt=""></a>
            </div>
            <ul class="pic_cont">
                <li class="pic_one">
                    <a href="#">
                        <img src="images/img7.jpg" alt="">
                        <span class="titled">Xiaomi11青春版</span>
                        <span class="titled-1">轻薄5G，内外皆出彩</span>
                        <span class="price">1999元起</span>
                    </a>
                </li>
                <li class="pic_one">
                    <a href="#">
                        <img src="images/img8.jpg" alt="">
                        <span class="titled">Xiaomi11青春版</span>
                        <span class="titled-1">轻薄5G，内外皆出彩</span>
                        <span class="price">1999元起</span>
                    </a>
                </li>
                <li class="pic_one">
                    <a href="#">
                        <img src="images/img9.jpg" alt="">
                        <span class="titled">Xiaomi11青春版</span>
                        <span class="titled-1">轻薄5G，内外皆出彩</span>
                        <span class="price">1999元起</span>
                    </a>
                </li>
                <li class="pic_one">
                    <a href="#">
                        <img src="images/img10.jpg" alt="">
                        <span class="titled">Xiaomi11青春版</span>
                        <span class="titled-1">轻薄5G，内外皆出彩</span>
                        <span class="price">1999元起</span>
                    </a>
                </li>
                <li class="pic_one">
                    <a href="#">
                        <img src="images/img7.jpg" alt="">
                        <span class="titled">Xiaomi11青春版</span>
                        <span class="titled-1">轻薄5G，内外皆出彩</span>
                        <span class="price">1999元起</span>
                    </a>
                </li>
                <li class="pic_one">
                    <a href="#">
                        <img src="images/img8.jpg" alt="">
                        <span class="titled">Xiaomi11青春版</span>
                        <span class="titled-1">轻薄5G，内外皆出彩</span>
                        <span class="price">1999元起</span>
                    </a>
                </li>
                <li class="pic_one">
                    <a href="#">
                        <img src="images/img9.jpg" alt="">
                        <span class="titled">Xiaomi11青春版</span>
                        <span class="titled-1">轻薄5G，内外皆出彩</span>
                        <span class="price">1999元起</span>
                    </a>
                </li>
                <li class="pic_one">
                    <a href="#">
                        <img src="images/img10.jpg" alt="">
                        <span class="titled">Xiaomi11青春版</span>
                        <span class="titled-1">轻薄5G，内外皆出彩</span>
                        <span class="price">1999元起</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

css

a{
    text-decoration: none;
    color: black;
}
/*head部分*/
.header{
    height: 40px;
    background-color: rgb(51, 51, 51);
}
.header .inner{
    width: 1226px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
.header .inner .naver{
    width: 800px;
    float: left;
}
.header .inner .naver a{
    color: rgb(176, 164, 132);
    display: inline-block;
    line-height: 40px;
    font-size: 10px;
}
.header .inner .naver a:hover{
    color: rgb(176, 176, 176);
}
.header .inner .gwc{
    float: right;
    background-color: rgb(66, 66, 66);
    height: 40px;
    width: 120px;
}

.header .inner .gwc a{
    display: block;
    height: 40px;
    float: left;
    padding-top: 10px;
    color: rgb(176, 176, 176);
    font-size: 14px;
    width: 120px;
    text-align: center;
}
.header .inner .gwc a:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(255, 103, 0);
}
.header .inner .mont{
    height: 40px;
    width: 68px;
    float: right;
}
.header .inner .mont a{
    color: rgb(176, 164, 132);
    display: block;
    line-height: 40px;
    font-size: 10px;
    text-align: center;
}
.header .inner .mont a:hover{
    color: rgb(176, 176, 176);
}
.header .inner .naver{
    width: 800px;
    float: left;
}
.header .inner .link{
    float: right;
}
.header .inner .link a{
    color: rgb(176, 164, 132);
    display: inline-block;
    line-height: 40px;
    font-size: 10px;
}
.header .inner .link a:hover{
    color: rgb(176, 176, 176);
}
/* nav开始 */
.nav{
    height: 100px;
}
.nav .headed{
    width: 1226px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
.nav .headed .logoer{
    width: 56px;
    height: 56px;
    float: left;
    margin-top: 22px;  
}
.nav .headed .logoer img{
    width: 56px;
    height: 56px;
}
.nav .headed .nothing{
    height: 100px;
    width: 150px;
    left: 60px;
    float: left;

}
.nav .headed .linked{
    height: 100px;
    width: 650px;
    left: 210px;
    float: left;
}
.nav .headed .linked a{
    display: inline-block;
    line-height: 100px;
    font-size: 16px;
    margin-right: 20px;
}
.nav .headed .linked a:hover{
    color: rgb(255, 103, 0);
}
.nav .headed .search{
    height: 100px;
    width: 350px;
    float: right;
}
.nav .headed .search .boxbig{
    width: 300px;
    height: 50px;
    margin-top: 22px;
    float: right;
    overflow: hidden;
    
}
.nav .headed .search .boxbig .boxsmall{
    width: 238px;
    height: 50px;
    float: left;
    overflow: hidden;
}
.nav .headed .search .boxbig .boxsmaller{
    width: 52px;
    height: 50px;
    float: left;
}
.nav .headed .search .boxbig .boxsmall .search_text{
    width: 240px;
    height: 48px;
    font-size: 20px;
    line-height: 48px;
    border: 1px solid rgb(176, 176, 176);
}
.nav .headed .search .boxbig .boxsmaller .search_sear{
    width: 48px;
    height: 50px;
    font-size: 24px;
    line-height: 24px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(176, 176, 176);
}
.nav .headed .search .boxbig .boxsmaller .search_sear:hover{
    background-color: rgb(255, 103, 0);
    cursor:pointer;
}
.nav .headed .search .boxbig .boxsmall .search_text:focus{
    outline: none;
    border-color:  rgb(255, 103, 0);
}

/* nav结束 */

/*content start*/
.content{
    width: 1226px;
    height: 460px;
    background:url(../images/img1.jpg);
    margin-left: auto;
    margin-right: auto;
}
.content .content_left{
    width: 234px;
    height: 460px;
    float: left;
    background-color: rgba(164, 151, 139, 0.8);
    overflow: hidden;
}
.content .content_left .list_nav{
    width: 234px;
    height: 420px;
    margin-top: 20px;
}
.content .content_left .list_nav .list_text{
    height: 42px;
    position: relative;
    font-weight: 800;
}
.content .content_left .list_nav .list_text a{
    display: block;
    width: 214px;
    height: 100%;
    padding-left: 20px;
    line-height: 42px;
    font-size: 14px;
    color: rgb(255,255,255);
}
.content .content_left .list_nav .list_text .nexted{
    color: rgb(255,255,255);
    font-size: 20px;
    position: absolute;
    right: 20px;
    top: 0;
}
.content .content_left .list_nav .list_text a:hover{
    background-color: rgb(255, 103, 0);
}
/*content end*/

/* second start */
.second{
    width: 1226px;
    height: 170px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
.second .channel{
    height: 170px;
    width: 234px;
    background-color: rgb(95, 87, 80);
    text-align: center;
    float: left;
}
.second .channel .channel_il{
    width: 76px;
    height: 83px;
    float: left;
}
.second .channel .channel_il a{
    display: block;
    height: 64px;
    width: 70px;
    font-size: 12px;
    color: rgb(207, 204, 202);
}
.second .channel .channel_il a img{
    width: 24px;
    height: 24px;
    display: block;
    margin:auto;
    padding-top: 20px;
}
.second .channel .channel_il a:hover{
    color: rgb(255,255,255);
}
.second .figure{
    width: 310px;
    height: 170px;
    float: left;
    margin-left: 20px;
}
.second .figure a{
    display: block;
    width: 310px;
    height: 170px;
    transition:all 1s ease-out;
}
.second .figure a img{
    width: 310px;
    height: 170px;
}
.second .figure a:hover{
    box-shadow:10px 10px 20px -20px #000;
    transform:scale(1.01);
}
/* second end */

/* footer start*/
.footer{
    height: 900px;
    background-color: rgb(245, 245, 245);
    margin-top: 30px;
}
.footer .pic_big{
    width: 1226px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
}
.footer .pic_big a{
    display: block;
    width: 1226px;
    height: 120px;
}
.footer .pic_big a img{
    width: 1226px;
}
.footer .title{
    display: block;
    width: 1226px;
    height: 58px;
    left: 20px;
    margin-top: 20px;
    font-size: 30px;
    position: absolute;
}
.footer .title .next_likned{
    font-size: 18px;
    float: right;
}
.footer .title .next_likned a{
    display: block;
    width: 120px;
}
.footer .title .next_likned a:hover{
    color: rgb(255, 103, 0);
}
.footer .title .next_likned a .next_pic{
    border-radius: 12px;
    width: 25px;
    height: 25px;
    position: relative;
    right: -80px;
    top: -24px;
    background-color: rgb(176, 176, 176);
    color: rgb(255,255,255);
}
.footer .title .next_likned a .next_pic:hover{
    background-color: rgb(255, 103, 0);
}
.footer .title .next_likned a .next_pic .next_bol{
    top:-1px;
    right: -7px;
    width: 17px;
    height: 17px;
    position: relative;
}
.footer .bodyer{
    height: 614px;
    width: 1226px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
}
.footer .bodyer .pic_fold{
    width: 234px;
    height: 614px;
    float: left;
}
.footer .bodyer .pic_fold a{
    display: block;
    width: 234px;
    height: 614px;
    transition:all 1s ease-out;
}
.footer .bodyer .pic_fold a:hover{
    box-shadow:10px 10px 20px -20px #000;
    transform:scale(1.02);
}
.footer .bodyer .pic_fold a img{
    width: 234px;
    height: 614px;
}
.footer .bodyer .pic_cont{
    width: 992px;
    height: 614px;
    float: left;
}
.footer .bodyer .pic_cont .pic_one{
    width: 234px;
    height: 300px;
    margin-left: 12px;
    margin-bottom: 14px;
    float: left;
}
.footer .bodyer .pic_cont .pic_one a{
    display: block;
    width: 234px;
    height: 300px;
    background-color: rgb(255, 255, 255);
    transition:all 1s ease-out;
}
.footer .bodyer .pic_cont .pic_one a:hover{
    box-shadow:10px 10px 20px -25px #000;
    transform:scale(1.1);
}
.footer .bodyer .pic_cont .pic_one a img{
    width: 160px;
    height: 160px;
    display: block;
    margin: auto;
}
.footer .bodyer .pic_cont .pic_one .titled{
    width: 234px;
    height: 21px;
    display: block;
    font-size: 16px;
    float: left;
    text-align: center;
    margin-top: 20px;
}
.footer .bodyer .pic_cont .pic_one .titled-1{
    width: 234px;
    height: 21px;
    display: block;
    font-size: 12px;
    float: left;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 10px;
    color: rgb(207, 204, 202);
}
.footer .bodyer .pic_cont .pic_one .price{
    width: 234px;
    height: 21px;
    display: block;
    font-size: 14px;
    float: left;
    text-align: center;
    margin-bottom: 10px;
    color: rgb(255, 103, 0);
}

Dietotenljh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css练习-小米官网首页静态页面制作
Gogo2328的博客
02-28 674
多有不足，继续学习
小米官网HTML网页制作项目
04-29
关于小米官网的一个项目,如果说有初学者的话,项目不会做可以参考一下.
HTML5作业：实现小米官网静态首页
coding加油站
07-30 5339
小米官网，模仿小米，小米界面作业，小米商城，模仿小米商城
按照小米官网做一个静态网页练习
hyonyg的博客
12-10 438
<!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="s.
小米官网的静态页面
03-14
对于前端页面课程设计练习，包括对HTML和CSS的使用
小米5刷写第三方rec资源+步骤 支持安卓多版本
06-21
小米5刷写第三方rec资源+步骤 支持安卓多版本 1----请使用本人实测的资源来刷写你的机型 2----资源可以支持不同安卓版本刷写第三方rec 3-----内含多个不同安卓版本的刷写资源和详细刷写教程步骤 4-----完美兼容...
小米12pro刷写第三方twrp+操作步骤
07-09
本教程将详细介绍如何为小米12Pro刷写第三方TWRP。首先，确保您了解刷机的风险，包括可能失去保修、可能导致手机无法正常使用，甚至可能损坏硬件。因此，在继续之前，请确保您的设备电量充足，并且备份了所有重要的...
小米6刷写第三方rec资源+步骤 支持安卓多版本
06-21
小米6刷写第三方rec资源+步骤 支持安卓多版本 1----请使用本人实测的资源来刷写你的机型 2----资源可以支持不同安卓版本刷写第三方rec 3-----内含多个不同安卓版本的刷写资源和详细刷写教程步骤 4-----完美兼容...
小米Note3刷写第三方rec资源+步骤 实测支持安卓多版本
06-21
小米Note3刷写第三方rec资源+步骤 实测支持安卓多版本 1----请使用本人实测的资源来刷写你的机型 2----资源可以支持不同安卓版本刷写第三方rec 3-----内含多个不同安卓版本的刷写资源和详细刷写教程步骤 4-----...
小米8刷写第三方rec资源+步骤 支持安卓多版本
06-21
小米8刷写第三方rec资源+步骤 支持安卓多版本 1----请使用本人实测的资源来刷写你的机型 2----资源可以支持不同安卓版本刷写第三方rec 3-----内含多个不同安卓版本的刷写资源和详细刷写教程步骤 4-----完美兼容...
小米官网首页的实现（静态）
10-20
使用div+css对小米官网首页进行代码的实现
仿小米官网html源码.zip
09-23
学了前端一周后，自己制作的仿小米官网，适合初学者，不追求效率的做法，会有一些小bug,但总体模仿了小米官网的特效等，使用jquery，函数都是非常容易理解的，非常适合刚学的朋友哟。
静态小米官网页面.zip
12-05
html+css前端纯静态小米官网首页，不包含javascript，有二级列表，没有页面跳转，布局清晰，效果良好
一千行代码实现高仿小米网站(草稿)
08-21
大一程序员一千行代码实现高仿小米网站（草稿），实现了绝大部分的效果
仿小米商城wed练习HTML+css
05-15
里面有完整的小米商城wed代码，是学wed时的练习，没有登陆注册，其他轮播，下拉列表都有，基本和小米2020的没有不同，需要的可以下载直接用
HTML、CSS小练习-小米官网首屏静态页面
ZS74520的博客
07-29 2555
web前端练习，小米官网静态页面 在练习过程中没有找到相应的图片文字，所以有些图片文字都是重复使用的！ 效果图： html代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
开发“小米商城官网首页”（静态页面）
weixin_30278311的博客
08-11 2117
一，项目题目：开发”小米商城官网首页”（静态页面） 二，项目需求 1.熟练运用所学知识还原小米商城官网首页静态页面 * 不需要做动态效果，只实现静态页面， 后期学完js再回来实现动态效果 　　 三，项目布局 四，效果对比 　　目前的官网图片和小编做的图片对比 官网图片 小编做的效果图 五，代码附上 链接：https://pa...
仿小米商城html网页源码
03-31
仿小米商城html网页源码，包括主页和详情页、购物页面，等等。内容非常丰富，适宜做学习商城网站前端页面参考，源码很棒，建议下载。
小米商城首页静态页面（CSS&HTML）
06-10
本资源面向的对象主要为前端初学者，已经学完CSS和HTML的同学可以参考使用
帮我写一个小米官网的布局
最新发布
03-31
小米官网布局如下： 1.顶部导航栏：包含小米官网的logo、搜索框、登录/注册按钮和购物车图标。 2.轮播图：展示小米最新的产品和活动，吸引用户的眼球。 3.产品分类：将小米的产品按照不同的分类进行展示，例如...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值