【前端】web小白实战跟练之--小米商城(一)

前言

   很多小伙伴入坑前端,只磕课本理论知识,结果发现实战能力为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;
}

/*白色导航栏*/

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值