前言
很多小伙伴入坑前端,只磕课本理论知识,结果发现实战能力为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;
}
/*白色导航栏*/
这次先到这里哦!还会继续分享剩下来部分的实现过程哒(大佬可以给点意见嘛)