day-08、09 项目搭建（小米官网）

最新推荐文章于 2023-01-05 23:44:19 发布

蔡大爷的小甜心

最新推荐文章于 2023-01-05 23:44:19 发布

阅读量545

点赞数 1

本文链接：https://blog.csdn.net/qq_43361287/article/details/109443720

版权

HTML5 和 CSS3 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

项目搭建（小米官网）

项目搭建
代码参考
- HTML模块
CSS模块
注意

项目搭建

代码参考

HTML模块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题参考小米官网 -->
    <title>
        小米商城 - 小米10 Pro、Redmi K30 Pro、小米MIX Alpha，小米电视官方网站
    </title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./quanju.css">
    <link rel="stylesheet" href="./inconfont/iconfont.css">
    <link rel="icon" href="./favicon.ico">
</head>

<body>
    <!-- 设置导航条容器 -->
    <div class="daohang">
        <!-- 设置导航条 -->
        <div class="daohangtiao">
            <!-- 设置导航条左侧 -->
            <ul class="zuoce">
                <li>
                    <a href="#">小米商城</a>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">MIUI</a>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">IOT</a>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">云服务</a>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">天星数科</a>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">有品</a>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">小爱开放平台</a>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">企业团购</a>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">资质证照</a>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">协议规则</a>
                    <i>|</i>
                </li>
                <li class="xiazai">
                    <a class="xiala" href="#">下载app</a>
                    <!-- 设置二维码容器 -->
                    <div class="erweima">
                        <a href="#">
                            <img src="./xiaomitupian/weweima.png" alt="">
                            <span>小米商城APP</span>
                        </a>
                    </div>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">智能生活</a>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">Select Location</a>
                </li>
            </ul>

            <!-- 这里将购物车部分与导航条右侧调换位置是为了在模块浮动时保证购物车出现在导航条的最右部分-->
            <!-- 设置导航条购物车部分 -->
            <ul class="gouwuche">
                <a class="baobei" href="#">
                    <i class="iconfont">&#xe600;</i>
                    购物车（0）
                </a>
                <!-- 设置购物车的下拉框 -->
                <div class="xialakuang">
                    <a href="#">
                    </a>
                    <span class="tishi">购物车中还没有选中的商品，赶紧选购吧！</span>
                </div>
            </ul>

            <!-- 设置导航条右侧 -->
            <ul class="youce">
                <li>
                    <a href="#">登录</a>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">注册</a>
                    <i>|</i>
                </li>
                <li>
                    <a href="#">消息通知</a>
                </li>
            </ul>


        </div>
    </div>

    <!-- 设置中间部分容器 -->
    <div class="zhongjian">
        <!-- 设置内容区 -->
        <div class="zhongjianneirong">

            <!-- 设置左侧图标区 -->
            <div class="zuoce">
                <a href="#">
                    <div class="tupain"></div>
                </a>

            </div>

            <!-- 设置中间区域 -->
            <div class="zhongjian">
                <ul class="fenlei">
                    <li>
                        <a herf="#">全部商品分类</a>
                    </li>
                    <li>
                        <a herf="#">小米手机</a>
                    </li>
                    <li>
                        <a herf="#">Redmi红米</a>
                    </li>
                    <li>
                        <a herf="#">电视</a>
                    </li>
                    <li>
                        <a herf="#">笔记本</a>
                    </li>
                    <li>
                        <a herf="#">家电</a>
                    </li>
                    <li>
                        <a herf="#">路由器</a>
                    </li>
                    <li>
                        <a herf="#">智能硬件</a>
                    </li>
                    <li>
                        <a herf="#">服务</a>
                    </li>
                    <li>
                        <a herf="#">社区</a>
                    </li>
                </ul>
                <!-- 中间下拉框 -->
                <div class="zhongxia">

                </div>
            </div>

            <!-- 设置右侧搜索框区域 -->
            <div class="youce">
                <input class="kuangkuang" type="text" name="sousuo" value="    出行">
                
                <a class="fangniu" herf="#">
                    <button class="anniu">
                        <i class="iconfont">&#xe644;</i>
                    </button>
                </a>
                <div class="xiala"></div>
            </div>

        </div>
    </div>

    <!-- 设置中下图片 -->
    <div class="zhongxiatu">
        <ul class="lunbotu">
            <li class="tupian"><a href="javascript:;"><img src="./xiaomitupian/zhongjian01.png"></a></li>
            <li class="tupian"><a href="javascript:;"><img src="./xiaomitupian/zhongjian02.png"></a></li>
            <li class="tupian"><a href="javascript:;"><img src="./xiaomitupian/zhongjian03.png"></a></li>
            <li class="tupian"><a href="javascript:;"><img src="./xiaomitupian/zhongjian04.png"></a></li>

            <!-- 点点 -->
            <div class="diandian">
                <a class="nihao" href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>

            <!-- 设置左面上浮层 -->
            <div class="zuomianshang">
                <div class="shangfu">
                    <div class="tiaotiao">
                        <a href="#">
                            <div class="zizi">手机 电话卡</div>
                        </a>
                    </div>
                    <div class="tiaotiao">
                        <a href="#">
                            <div class="zizi">电视 盒子</div>
                        </a>
                    </div>
                    <div class="tiaotiao">
                        <a href="#">
                            <div class="zizi">笔记本 显示器</div>
                        </a>
                    </div>
                    <div class="tiaotiao">
                        <a href="#">
                            <div class="zizi">家电 插线板</div>
                        </a>
                    </div>
                    <div class="tiaotiao">
                        <a href="#">
                            <div class="zizi">出行 穿戴</div>
                        </a>
                    </div>
                    <div class="tiaotiao">
                        <a href="#">
                            <div class="zizi">智能 路由器</div>
                        </a>
                    </div>
                    <div class="tiaotiao">
                        <a href="#">
                            <div class="zizi">电源 配件</div>
                        </a>
                    </div>
                    <div class="tiaotiao">
                        <a href="#">
                            <div class="zizi">健康 儿童</div>
                        </a>
                    </div>
                    <div class="tiaotiao">
                        <a href="#">
                            <div class="zizi">耳机 音响</div>
                        </a>
                    </div>
                    <div class="tiaotiao">
                        <a href="#">
                            <div class="zizi">生活 箱包</div>
                        </a>
                    </div>
                    <div class="youlakuang"></div>
                </div>
            </div>
        </ul>
    </div>

    <!-- 设置下下图片 -->
    <div class="xiaxiatu">
        <div class="neirongqu">
            <ul class="xiatu">
                <li class="tupian"><a href="javascript:;"><img src="./xiaomitupian/zhongxia01.png"></a></li>
                <li class="tupian"><a href="javascript:;"><img src="./xiaomitupian/zhongxia02.png"></a></li>
                <li class="tupian"><a href="javascript:;"><img src="./xiaomitupian/zhongxia03.png"></a></li>
            </ul>
            <div class="zuoxiao">
                <a href="#">
                    <i class="iconfont">&#xe608;</i>
                    <span>小米秒杀</span>
                </a>
                <a href="#">
                    <i class="iconfont">&#xe62f;</i>
                    <span>企业团购</span>
                </a>
                <a href="#">
                    <i class="iconfont">&#xe60b;</i>
                    <span>F码通道</span>
                </a>
                <a href="#">
                    <i class="iconfont">&#xe611;</i>
                    <span>米粉卡</span>
                </a>
                <a href="#">
                    <i class="iconfont">&#xe641;</i>
                    <span>以旧换新</span>
                </a>
                <a href="#">
                    <i class="iconfont">&#xe648;</i>
                    <span>话费</span>
                </a>

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

    <!-- 设置右侧工具栏 -->
    <div class="gongju">

    </div>
</body>

</html>

CSS模块

/* 设置导航背景样式 */
.daohang{
    height: 40px;
    background-color: #515151;
}
/* 设置导航条 */
.daohangtiao{
    width: 1226px;
    height: 40px;
    background-color: #515151;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 40px;
    font-size: 12px;
}

.daohangtiao li{
    position: relative;
}

.daohangtiao li a{
    color: rgb(176,176,176);
    text-decoration: none;
}

.daohangtiao li:hover{
    color: rgb(255, 255, 255);
}
    
.daohangtiao li i{
        color: rgb(66, 66, 66);
}

.daohangtiao li.xiala{
        position: relative;
}
/* 设置下载app的小三角 */
/* .daohangtiao .xiazai:hover> .xiala::after{
    content: " ";
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: none;
    border-bottom-color: rgb(255, 255, 255);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.daohangtiao .xiazai:hover .erweima{
        display: block;
} */
/* 或者 */
.daohangtiao .xiala::after{ 
    content: " ";
    width: 0;
    display: none;
    height: 0;
    border: 10px solid transparent;
    border-top: none;
    border-bottom-color: rgb(255, 255, 255);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.daohangtiao .xiazai:hover .erweima,
.daohangtiao .xiala:hover::after{
        display: block;
        height: 190px;
}

/* 设置下载app下拉框 */
.daohangtiao .zuoce .erweima{
    /* display: none; */
    left: -52.5px;
    width: 160px;
    height: 0px;
    overflow: hidden;
    text-align: center;
    box-shadow:0 0 10px rgba(0, 0, 0, .4);
    position: absolute;
    background-color: rgb(255, 255, 255);
    color: rgb(255,255,255);
    z-index: 9999;
    /* 设置过渡效果 */
    transition: height 1s;
}
/* 设置下拉框的文字 */
.daohangtiao .zuoce .erweima span{
    font-size: 16px;
    color: rgb(0,0,0);
}
/* 设置二维码下拉框的二维码图片 */
.daohangtiao .zuoce .erweima img{
    margin-top: 20px;
    width: 120px;
    display: block;
}
.daohangtiao .zuoce li,
.daohangtiao .youce li{
    float: left;
    padding: 0 4px;
}

.daohangtiao .youce,
.daohangtiao .gouwuche{
    float: right;
    height: 40px;
    top: 0;
}
.daohangtiao .youce a,
.daohangtiao .zuoce a{
    display: inline-block;
}
.daohangtiao .youce a:hover,
.daohangtiao .zuoce a:hover{
    color: rgb(255, 255, 255);
}

.daohangtiao .gouwuche{
    position: relative;
}

.daohangtiao .gouwuche .baobei{
    height: 40px;
    display: block;
    color: rgb(176,176,176);
    background-color: rgb(66, 66, 66);
    text-decoration: none;
    padding-left: 8px;
    margin-left: 14px;
    position: relative;
}

.daohangtiao .gouwuche .baobei:hover{
    color: rgb(255,103,0);
    background-color: rgb(255, 255, 255);
    text-decoration: none;
    padding-bottom: 2px;
}

.daohangtiao .gouwuche .xialakuang{
    display: none;
}

.daohangtiao .gouwuche:hover .xialakuang{
    width: 474px;
    height: 152px;
    display: block;
    background-color: rgb(255, 255, 255);
    position: absolute;
    box-shadow:0 3px 3px rgba(0, 0, 0, .2);
    right: 0;
    top: 40px;
    z-index: 9999;
}
.daohangtiao .gouwuche .xialakuang .tishi{
    padding-left: 100px;
    line-height: 152px;
    color: rgb(96, 96, 96);
    font-size: 14px;
}


/* 中间导航 */
.zhongjian{
    height: 100px;
}
/* 中间内容区 */
.zhongjian .zhongjianneirong{
    width: 1226px;
    height: 100px;
    left: 0;
    right: 0;
    margin: auto;
}

.zhongjian .zhongjianneirong .zuoce{
    width: 55px;
    height: 55px;
    float: left;
    overflow: hidden;
    margin-top: 22.5px;
    /* background-color:darkgoldenrod ; */
}
/* .zhongjian .zhongjianneirong .zuoce a{
    display: block;
} */
.zhongjian .zhongjianneirong .zuoce .tupain{
    width: 110px;
    height: 55px;
    background-image: linear-gradient(to left, green, red);
}

.zhongjian .zhongjianneirong .zuoce:hover .tupain{
    background-position: -55px 0;
}

.zhongjian .zhongjianneirong .zhongjian{
    height: 100px;
    float: left;
    margin-left: 30px;
}

.zhongjian .zhongjianneirong .zhongjian li{
    float: left;
    padding: 0 10px;
}
.zhongjian .zhongjianneirong .zhongjian a{
    display: block;
    line-height:100px;
    font-size: 16px;
    color: rgb(51, 51, 51);
}

.zhongjian .zhongjianneirong .zhongjian a:hover{
    color: rgb(255, 103, 0);
}

.zhongjian .zhongjianneirong .youce{
    float: right;
    width: 297px;
    height: 50px;
    margin-top: 25px;
    /* border: 1px solid rgb(176, 176, 176); */
    position: relative;
}

.zhongjian .zhongjianneirong .kuangkuang{
    float: left;
    border: 1px solid rgb(176, 176, 176);
    width: 245px;
    height: 46px;
    outline: none;
    position: absolute;
}

.zhongjian .zhongjianneirong .kuangkuang:focus,
.zhongjian .zhongjianneirong .kuangkuang:focus+ .fangniu .anniu{
    border: 1px solid rgb(255,103,0);
}

.zhongjian .zhongjianneirong .anniu{
    right: 0;
    outline: none;
    width: 52px;
    height: 50px;
    padding: 0;
    border: none;
    border: 1px solid rgb(176, 176, 176);
    background-color:rgb(255, 255, 255) ;
    position: absolute;
    z-index: 1;
}

.zhongjian .zhongjianneirong .anniu:hover{
    border: 1px solid rgb(255,103,0);
    border-left: none;
}

.zhongjian .zhongjianneirong i{
    color: rgb(97, 97, 97);
    font-size: 20px;
}

.zhongjian .zhongjianneirong .fenlei li:first-of-type{
    visibility: hidden;
}
.zhongjian .zhongjianneirong .youce .xiala{
    display: none;
    width: 244px;
    height: 360px;
    border: rgb(255, 103, 0) 1px solid;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 49px;
    z-index: 999;
}
.zhongjian .zhongjianneirong .youce .kuangkuang:focus~.xiala{
    display: block;
}

.zhongjian .zhongjianneirong .youce .fangniu:hover i,
.zhongjian .zhongjianneirong .youce .fangniu:hover .anniu{
    background-color: rgb(255,103,0);
    color: rgb(255,255,255);
}
/* 中间下拉框 */
.zhongjian .zhongjianneirong .fenlei:hover~ .zhongxia,
.zhongxia:hover{
        height: 0;
        transition: height 1s;
}

.zhongjian .zhongjianneirong .fenlei:hover~.zhongxia,
.zhongxia:hover{
    width: 100%;
    height: 152px;
    overflow: hidden;
    background-color: rgb(255,255,255);
    position: absolute;
    box-shadow:0 3px 6px rgba(0, 0, 0, .2);
    left: 0;
    top: 140px;
    z-index: 999;
    
}

/*  设置中下图*/
.zhongxiatu{
    height: 460px;
    position: relative;
}
.zhongxiatu .zuomianshang{
    width: 243px;
    height: 460px;
    background-color:rgba(0, 0, 0, .4);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
}
.zhongxiatu .zuomianshang .shangfu{
    padding: 20px 0;
    position: relative;
}

.zhongxiatu .zuomianshang .tiaotiao:hover ~ .youlakuang,
.youlakuang:hover{
    display: block;
    width: 800px;
    height: 460px;
    background-color:rgb(255,255,255);
    box-shadow:0 0 10px rgba(0, 0, 0, .2);
    position: absolute;
    top: 0px;
    left: 243px;
    z-index: 9999;
}


.zhongxiatu .zuomianshang .tiaotiao{
    height: 42px;
    line-height: 42px;
}

.zhongxiatu .zuomianshang .tiaotiao a{
    text-decoration: none;
    color: rgb(255,255,255);
}
.zhongxiatu .zuomianshang .tiaotiao .zizi::after{
    content: ">";
    float: right;
    padding-right: 10px;
}
.zhongxiatu .zuomianshang .tiaotiao:hover{
    background-color: rgb(255, 103, 0);
}

.zhongxiatu .zuomianshang .tiaotiao .zizi{
    padding-left: 30px;
    font-size: 14px;
}
.zhongxiatu .lunbotu{
    width: 1226px;
    height: 460px;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
}
.zhongxiatu .lunbotu img{
    width: 1226px;
    height: 460px;
}

.lunbotu .diandian a{
    float: left;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin: 0 4px;
    /* 将背景颜色设置到内容区，边框和内边距不再有颜色 */
    background-clip: content-box;
    /* 将边框设置为transparent，但背景颜色会延伸到border */
    border: 2px solid transparent;
    background-color: rgba(255, 255, 255, .4);
}

.lunbotu{
    width: 590px;
    height: 470px;
    margin: 50px auto;
    position: relative;
}
.lunbotu li{
    position: absolute;
}
/* 保证选中显示的图片最优先展示 */
.lunbotu .tupian:nth-child(3){
    z-index: 1;
}
.lunbotu .diandian{
    position: absolute;
    height: 15px;
    z-index: 9999;
    bottom: 20px;
    right: 40px;
}
.lunbotu .diandian a{
    float: left;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin: 0 4px;
    /* 将背景颜色设置到内容区，边框和内边距不再有颜色 */
    background-clip: content-box;
    /* 将边框设置为transparent，但背景颜色会延伸到border */
    border: 2px solid transparent;
    background-color: rgba(255, 255, 255, .4);
}
.lunbotu .diandian .nihao,
.lunbotu .diandian :hover{
    border: 2px solid rgba(255, 255, 255, .2);
}

/* 下下图 */
.xiaxiatu{
    height: 170px;
}
.xiaxiatu .neirongqu{
    width: 1226px;
    height: 460px;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    padding-top: 10px;
}
.xiaxiatu .xiatu {
    width: 978px;
    height: 170px;
    float: right;
    overflow: hidden;
}
.xiaxiatu .xiatu img{
    float: right;
    width: 316px;
    height: 170px;
    padding-left: 10px;
}

.xiaxiatu .zuoxiao{
    width: 234px;
    height: 170px;
    background-color: rgb(95, 87, 80);
    float: left;
    overflow: hidden;
    text-align:center;
}

.xiaxiatu .zuoxiao a{
    display: block;
    width: 70px;
    float: left;
    height: 70px;
    color: rgb(255,255,255);
    text-decoration: none;
    line-height:35px;
    color: rgb(207, 204, 202);
    padding: 8px 4px;
}

.xiaxiatu .zuoxiao span{
    display: block;
    color: rgb(207, 204, 202);
}

.xiaxiatu .neirongqu .zuoxiao a:hover span,
.xiaxiatu .neirongqu .zuoxiao a:hover{
    color: rgb(255, 255, 255);
}

.gongju{
    width: 27px;
    height: 261px;
    background-color: salmon;
    position: fixed;
    bottom: 60px;
    float: right;
    right: 50%;
    margin-right: -640px;

}

注意

1、这里引用了reset.css文件去除浏览器默认样式的情况下进行的渲染，可参考day02-layout盒模型中浏览器的默认样式模块下的reset.css链接自行下载使用；
<link rel="stylesheet" href="../CSS/reset.css">

2、引用CSS自定义文件index.css，以上给出的CSS代码均为index.css内容；
<link rel="stylesheet" href="./index.css">

3、这里是全局配置，此次项目并未使用；
<link rel="stylesheet" href="./quanju.css">

4、这里引用的向下箭头、定位表为图标字体，可自行在iconfont阿里巴巴矢量图标库自行下载，可参考day03-布置练习中导航条模块下的使用示例进行使用
<link rel="stylesheet" href="./inconfont/iconfont.css">

5、这里引用小米官网的图标直接设置左上角的网站图标，网站图标一般存在根目录下，通常都为根目录/favicon.ico，这里为https://www.mi.com/favicon.ico 下载并放在与html同级目录下面
<link rel="icon" href="./favicon.ico">

6、导航条左下部分并未使用小米图标，适应渐变颜色来做出效果，原理都是一样的，均利用雪碧图的原理，这里不做过多强调；

7、购物车的下拉框、下载app的下拉二维码、中间标题的下拉框、搜索框的下拉框、左侧浮动导航栏的右拉框、右侧工具栏框，样式均做出来效果，并未充实，其余模块相应的点击变化效果模块均和小米官网类似；
8、本文使用的图片均在官网查找、这里在html同级目录下的图片，名称分别为