【前端】web小白实战跟练之--小米商城（一）-CSDN博客

本文链接：https://blog.csdn.net/L456213/article/details/148412052

前言

很多小伙伴入坑前端，只磕课本理论知识，结果发现实战能力为0。所以我们需要大量的实站项目去锻炼我们的编码能力，这里我们用基础的html、css来实现小米商城首页的开发，巩固基础知识，新手快来跟我一起跟练啦！

一、项目分析

参考网页：小米商城 - Xiaomi 15、REDMI K80、MIX Fold 4，小米电视官方网站

整体布局结构

小米商城网页通常采用经典的电商布局模式，包含顶部导航栏、轮播广告区、商品分类展示、促销模块、页脚信息等。整体采用响应式设计，适配不同设备屏幕。（但是我们这里还不能实现动态的交互）

二、准备工作

1.初始化css样式

2.引入图片资源

3.引入字体图标

例如购物车、左箭头、右箭头等图标，都需要我们去专门的库去引入，还不知道怎么引入和使用的小伙伴可以看我上一篇分享的方法哦！

三、跟练实战

1.顶部导航栏

顶部导航栏包含商品分类导航、用户登录/注册入口和购物车图标。通常采用固定定位，随页面滚动保持可见。这里我们可以看到这个黑色导航部分是分为两个部分的，左侧部分是主导航内容，右侧部分是登录注册、购物车等内容。但是无论是左侧还是右侧，都是以列表形式来进行呈现的，所以我们在实现该部分内容的时候使用<ul></ul>加上a标签。

html实现：


    <!-- 顶部导航-->
    <div class="header">
        <div class="nav">
           <ul class="lnav">
            <li><a href="">小米官网</a><span>|</span></li>
            <li><a href="">小米商城</a><span>|</span></li>
            <li><a href="">小米澎湃os</a><span>|</span></li>
            <li><a href="">小米汽车</a><span>|</span></li>
            <li><a href="">云服务</a><span>|</span></li>
            <li><a href="">lot</a><span>|</span></li>
            <li><a href="">有品</a><span>|</span></li>
            <li><a href="">小爱开放平台</a><span>|</span></li>
            <li><a href="">资质证照</a><span>|</span></li>
            <li><a href="">协议规则</a><span>|</span></li>
            <li><a href="">下载APP</a><span>|</span></li>
            <li><a href="">Select Location</a><span>|</span></li>
           </ul>
           <ul class="rnav">
            <li><a href="">注册</a><span>|</span></li>
            <li><a href="">登录</a><span>|</span></li>
            <li><a href="">消息通知</a><span>|</span></li>
            <li class="car"><a href="">购物车</a><span>|</span></li>
           </ul>
        </div>
    </div>
    <!-- 顶部导航-->

css样式：

/*顶部导航*/
.header{
   width: 100%;
   height: 40px;
   line-height: 40px;
   background-color: #333;
   font-size: 14px;
   display: flex;/*设置为弹性盒子*/
   align-items: center;/*使容器内元素居中*/

}
.header .nav{
    width: 1226px;
    margin: 0 auto;
}
.header a{
    color: #b0b0b0;
    text-decoration: none;/*去掉下划线*/
}
.header a:hover {
  color: #fff; /* 变为纯白色 */
}
.header .nav .lnav{
    float: left;/*向左浮动*/
}
.header .nav .rnav{
    float: right;/*向右浮动*/
}
.header .nav li{
    float: left;
    list-style: none;
}
.header .nav li span{
    color: #424242;
    margin: 0 3.6px;
}
/*顶部导航*/

2、顶部导航栏滑动门

1.我们可以观察到当我们滑动到下载app会弹出一个框，框里面会有一个图片和一句文字，这时我们可以找到对应的列表里面添加一个div来承载这个图片和文字。再认真观察一下，发现这个下载app文字下的这个框还有一个箭头指向它，这个箭头我们也可以用css实现，所以这时还需要再添加一个div来改造成箭头。

此时的下载APPhtml结构为下（续第一部分的内容）：

<li>
                <a href="">下载APP</a>
                <span>|</span>
                <div class="download">
                    <img src="image/download.png" alt="">
                    <p>小米商城APP</p>
                </div>
                <!--箭头实现-->
                <div class="stri">

                </div>
            </li>

2.关于怎么实现，这个框会精准出现在下载APP文字下方呢？我们可以用绝对定位方式，即给父容器添加一个 position: relative;，给子容器添加一个position: absolute;。这样之后，还需要对他的左右位置进行调整，才能使其出现在对应文字之下。

3.解决了以上问题之后，该怎么实现滑动到下载APP这个文字之后才会出现这个框呢？我们可以在初始化这个框（即在未悬浮状态下）的高度时设置为0，然后设置其li标签在悬浮状态下（即hover），设置height：148px展开下拉内容，实现了从隐藏到显示的过渡效果。要实现的效果如下：

下载APP的下拉框样式：

.header .nav .lnav li:hover>.download{
    height: 148px;/*滑动到下载APP中才会出现对应框*/
}
.download{/*下拉框的css样式*/
    background: #fff;/*设置背景为白色*/
    width: 124px;
    height: 0px;/*设置默认高度为0*/
    position: absolute;/*使用绝对定位*/
    box-shadow: 0 1px 5px#b0b0b0;/*设置阴影为灰色*/
    top: 40px;
    left:50%;
    margin-left:-62px;
    display: grid;
    place-items: center;/*让图片和文字在框内居中显示*/
    overflow: hidden;/*超出部分隐藏起来*/
}
.download img{
    width:90px ;
    margin: 18px 17px 0;
}
.download p{
    color: #333;
    font-size: 14px;/*设置字体大小为14px*/
    line-height: 14px;

}
.stri{/*箭头的css样式*/
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    left: 40%;
    margin-left: -8px;
    display: none;
    
}
.header .nav .lnav>li:hover>.stri{
    display: block;
}

注意：记得给li标签添加一个相对定位！！如下

.header .nav li{
    float: left;
    list-style: none;
    position: relative;
}

购物车的实现亦如上（其中记得要引入对应图标）。

购物车html结构：

<li class="cart">
                <a href="">
                    <i class="iconfont icon-gouwuche" style="color: coral;"></i>
                    <i>购物车（0）</i>
                </a>
                <div class="cart_box">
                    购物车中还没有商品，赶紧选购吧

                </div>
                
            </li>

购物车css样式：

.cart{
    width: 120px;
    height: 40px;
    background: #424242;
    margin-left: 25px;
}
.cart:hover{
    background: #fff;
}
.cart:hover>a{
    color: coral;
}
.cart_box{
    width: 316px;
    height: 0px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    position: absolute;/**/
    right: 0;
    top: 40px;
    color: #424242;
    overflow: hidden;
    line-height: 100px;
    display: flex;
    justify-content: center;

}
.cart:hover>.cart_box{
    height: 100px;/*滑动到购物车才会出现对应框*/
}

3.白色导航及滑动门

这部分分为三个小部分，左侧为小米的logo，中间为一个导航菜单，右侧则是一个搜索框。我们可以发现这部分的实现跟顶部导航栏的实现是非常相似的，尤其是中间的导航菜单。

关于白色导航栏的整体页面布局实现，我们可以尝试用一个大容器包住三个小容器，在分别实现这三部分的结构。logo部分可以使用图片，也可以使用图标（图标的下载和引用可以参考我上一篇给大家分享的）；中间导航部分可以参考黑色导航部分的实现，即使用列表；搜索框则需要使用到一个文本输入框input和一个按钮button。

参考的html结构如下：

 <!--白色导航栏-->
    <div class="whilt-nav">
        <div class="warp">
            
            <div class="logo">
                <a href="http://www.mi.com"><i class="iconfont icon-milogo" style="color: coral;"></i></a>
            </div>
            <div class="wnav">
                <ul class="nav-list">
                    <li class="tap"></li>
                    <li>
                        <a href="">Xiaomi手机</a>
                        <div class="nav-bar-list">
                            <div class="warp">
                                <ul>
                                 <li>
                                    <a href="https://www.mi.com/shop/buy/detail?product_id=21305">
                                    <div class="nav-img">
                                        <img src="image/ccb333fb5e8dae8ea011e8e968b05627.webp" alt="">
                                    </div>
                                    <p class="name">Xiaomi 5s Pro</p>
                                    <p class="price">5299起</p>
                                    </a>
                                 </li>
                                 <li>
                                    <a href="https://www.mi.com/shop/buy/detail?product_id=21305">
                                    <div class="nav-img">
                                        <img src="image/ccb333fb5e8dae8ea011e8e968b05627.webp" alt="">
                                    </div>
                                    <p class="name">Xiaomi 5s Pro</p>
                                    <p class="price">5299起</p>
                                    </a>
                                 </li>
                                 <li>
                                    <a href="https://www.mi.com/shop/buy/detail?product_id=21305">
                                    <div class="nav-img">
                                        <img src="image/ccb333fb5e8dae8ea011e8e968b05627.webp" alt="">
                                    </div>
                                    <p class="name">Xiaomi 5s Pro</p>
                                    <p class="price">5299起</p>
                                    </a>
                                 </li>
                                 <li>
                                    <a href="https://www.mi.com/shop/buy/detail?product_id=21305">
                                    <div class="nav-img">
                                        <img src="image/ccb333fb5e8dae8ea011e8e968b05627.webp" alt="">
                                    </div>
                                    <p class="name">Xiaomi 5s Pro</p>
                                    <p class="price">5299起</p>
                                    </a>
                                 </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="">Redmi手机</a>
                        <div class="nav-bar-list">
                            <div class="warp">
                                <ul>
                                 <li>
                                    <a href="https://www.mi.com/shop/buy/detail?product_id=21305">
                                    <div class="nav-img">
                                        <img src="image/ccb333fb5e8dae8ea011e8e968b05627.webp" alt="">
                                    </div>
                                    <p class="name">Xiaomi 5s Pro</p>
                                    <p class="price">5299起</p>
                                    </a>
                                 </li>
                                </ul>
                            </div>
                        </div>
                    </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">
                <input type="text" placeholder="小米手机">
                <button class="iconfont icon-sousuo"></button>

            </div>
        </div>
    </div>
    <!--白色导航栏-->

样式实现的参考如下：

每个容器和字体的大小可以参考官网数据（右上角三个点->更多工具->开发者工具）

/*白色导航栏*/
.whilt-nav{
    width: 100%;
    height: 100px;
    background: #fff;
    display: flex;/*设置为弹性盒子*/
    align-items: center;/*使容器内元素居中*/
    justify-content: center;
    position: relative;
}
.logo{
    width: 62px;
    height:56px;
    margin-top: 22.5px;
    float: left;
    overflow: hidden;
    display: flex;          /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}
.logo a .iconfont {
    font-size: 56px;        /* 图标大小 */
    display: block;         /* 转换为块级元素 */
    color: coral;           /* 继承原有颜色 */
    line-height: 1;         /* 防止行高影响 */
    transform-origin: center; /* 缩放中心点 */
    
    /* 响应式缩放（可选） */
    width: 56px;
    height: 56px;
    object-fit: contain;    /* 保持比例填充 */
  }
.wnav{
    width: 850px;
    height: 100px;
    line-height: 100px;
    float: left;
    display: flex;
    justify-content: center;
    place-items: center;
}
.wnav .nav-list{
    padding-left: 0;
}
.search{
    width: 296px;
    height: 100px;
    float: right;
}
.search input{
    width: 244px;
    height: 50px;
    float: left;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    margin-top: 25px;
    padding-left: 0 10px;

}
.search button{
    width: 52px;
    height: 50px;
    float: right;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    margin-top: 25px;

}
.search button:hover{
    color:#fff;
    background-color: #ff6700;
}
.nav-list .tap{
    width: 127px;
    height: 100px;
    padding-right: 15px;
}
.whilt-nav .warp li{
    line-height: 100px;
    list-style: none;
    float: left;/*向左浮动*/
}
.warp{
    width: 1226px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}
.whilt-nav a{
    color: #333;
    padding: 0 10px;
    text-decoration: none;/*去掉下划线*/
}
.whilt-nav li a:hover{
    color: #ff6700;
}
.nav-bar-list{
    width: 100%;
    height:229px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
    position: absolute;/*使用绝对定位，使其出现在白色导航下方*/
    left: 0;
    top: 100px;
    display: none;/*未悬浮之前先不展示*/
}
.whilt-nav li:hover>.nav-bar-list{
    display: block;
}
.nav-bar-list .warp li{
    line-height: normal;
}
.nav-img {
    width: 160px;
    height: 110px; /* 固定图片容器高度 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-img img {
    width: 160px;
    height: 110px;
    object-fit: contain; /* 保持图片比例 */
}

.name, .price {
    line-height: 20px;
    width: 100%; /* 确保文本自适应宽度 */
    text-align: center; /* 文字居中 */
}
.price{
    color: #ff6700;
}

/*白色导航栏*/

这次先到这里哦！还会继续分享剩下来部分的实现过程哒（大佬可以给点意见嘛）