!!!!声明内容来自本人学习笔记,跟着bibi尚硅谷讲师李立超学习制作
制作效果:效果时评保存在bibi上:链接:小米网页部分_哔哩哔哩_bilibili
小米网页部分
不废话先来html:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="/___vscode_livepreview_injected_script"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站
</title>
<!--引入图标文件-->
<link rel="stylesheet" href="/font/css/all.css">
<!--映入当前页面的样式表-->
<link rel="stylesheet" href="/index.css">
<!--引入公共样式表-->
<link rel="stylesheet" href="/base.css">
</head>
<body>
<!--设置顶部的容器-->
<div class="top-bar-wrapper">
<!--设置内部的容器-->
<div class="top-bar width clearfix">
<!--设置左侧的导航条-->
<ul class="service">
<li>
<a href="#">小米商城</a>
</li>
<li class="line">|</li>
<li>
<a href="#">MUI</a>
</li>
<li class="line">|</li>
<li>
<a href="#">IoT</a>
</li>
<li class="line">|</li>
<li>
<a href="#">云服务</a>
</li>
<li class="line">|</li>
<li>
<a href="#">天星数科</a>
</li>
<li class="line">|</li>
<li>
<a href="#">有品</a>
</li>
<li class="line">|</li>
<li>
<a href="#">小爱开放平台</a>
</li>
<li class="line">|</li>
<li>
<a href="#">企业团购</a>
</li>
<li class="line">|</li>
<li>
<a href="#">资质证照</a>
</li>
<li class="line">|</li>
<li>
<a href="#">协议规则</a>
</li>
<li class="line">|</li>
<li class="app-li">
<a class="app" href="#">下载app
<div class="qrcode">
<img src="/imglist/01.png">
<span>小米商城app</span>
</div>
</a>
</li>
<li class="line">|</li>
<li>
<a href="#">Select Location</a>
</li>
</ul>
<ul class="shop-cart">
<li><a href="#">
<i class="fas fa-shopping-cart"></i>
购物车(0)</a></li>
<div class="shop-list">
<span>购物车还没有商品哦,赶紧选购吧!</span>
</div>
</ul>
<!--设置右侧的导航条-->
<ul class="user">
<li>
<a href="#">登录</a>
</li>
<li class="line">|</li>
<li>
<a href="#">注册</a>
</li>
<li class="line">|</li>
<li>
<a href="#">消息通知</a>
</li>
<li class="line">|</li>
</ul>
</div>
</div>
<!--创建头部容器-->
<div class="header-wrapper">
<div class="header width">
<!--创建logo-->
<h1 class="logo">
<a href="#"></a>
</h1>
<!--创建中间的导航条-->
<div class="nav-wrapper">
<ul class="nav">
<li class="all-goods-wrapper"><a class="all-goods" href="#">全部商品分类</a>
<ul class="left-menu">
<li><a href="#">
手机
<i class="fas fa-angle-right"></i>
</a></li>
<li><a href="#">
电视
<i class="fas fa-angle-right"></i>
</a></li>
<li><a href="#">
笔记本 平板
<i class="fas fa-angle-right"></i>
</a></li>
<li><a href="#">
家电
<i class="fas fa-angle-right"></i>
</a></li>
<li><a href="#">
出行 穿戴
<i class="fas fa-angle-right"></i>
</a></li>
<li><a href="#">
智能 路由器
<i class="fas fa-angle-right"></i>
</a></li>
<li><a href="#">
电源 配件
<i class="fas fa-angle-right"></i>
</a></li>
<li><a href="#">
健康 儿童
<i class="fas fa-angle-right"></i>
</a></li>
<li><a href="#">
耳机 音响
<i class="fas fa-angle-right"></i>
</a></li>
<li><a href="#">
生活 箱包
<i class="fas fa-angle-right"></i>
</a></li>
</ul>
</li>
<li class="show-goods"><a href="#">Xiaomi手机</a></li>
<li class="show-goods"><a href="#">Redmi红米</a></li>
<li class="show-goods"><a href="#">电视</a></li>
<li class="show-goods"><a href="#">笔记本</a></li>
<li class="show-goods"><a href="#">平板</a></li>
<li class="show-goods"><a href="#">家电</a></li>
<li class="show-goods"><a href="#">路由器</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
<!--创建一个弹出层-->
<div class="goods-info">
</div>
</ul>
</div>
<div class="search-wrapper">
<form class="search" action="#">
<input class="search-inp" type="text">
<button class="search-btn" type="button">
<i class="fas fa-search"></i>
</button>
</form>
</div>
</div>
</div>
<!--创建banner-->
<div class="banner-wrapper width">
<ul class="banner-img-list">
<li><a href="#">
<img src="/imglist/banner2.jpg" alt="第一张">
</a></li>
<li><a href="#">
<img src="/imglist/banner1.jpg" alt="第二张">
</a></li>
<li><a href="#">
<img src="/imglist/banner3.jpg" alt="第三张">
</a></li>
<li><a href="#">
<img src="/imglist/banner4.jpg" alt="第四张">
</a></li>
<li><a href="#">
<img src="/imglist/banner5.jpg" alt="第五张">
</a></li>
</ul>
<!--下面的点-->
<div class="pointer">
<a class="active" href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<!--上下页箭头-->
<div class="pev-next">
<a class="pev" href="#"></a>
<a class="next" href="#"></a>
</div>
</div>
<!--固定定位的工具条-->
<div class="aid width">
<ul class="shortcut">
<li>
<a href="#">
<i class="fas fa-clock"></i>
保障服务</a>
</li>
<li>
<a href="#">
<i class="fas fa-building"></i>
企业团购</a>
</li>
<li>
<a href="#">
<i class="fas fa-building"></i>
F码通道</a>
</li>
<li>
<a href="#">
<i class="fas fa-building"></i>
米粉卡</a>
</li>
<li>
<a href="#">
<i class="fas fa-building"></i>
以旧换新</a>
</li>
<li>
<a href="#">
<i class="fas fa-building"></i>
花费充值</a>
</li>
</ul>
<ul class="di-img">
<li><a href="">
<img src="/imglist/aid-img3.jpg" alt="">
</a></li>
<li><a href="">
<img src="/imglist/aid-img1.jpg" alt="">
</a></li>
<li><a href="">
<img src="/imglist/aid-img.jpg" alt="">
</a></li>
</ul>
</div>
</body>
</body>
</html>接下来css:
/*公共样式*/
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
body{
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color: #333;
min-width: 1226px; /*页面的最小宽度*/
}
.width{
width: 1226px;
margin: 0 auto;
}
a{
text-decoration: none;
}
ul{
list-style-type:none;
}
*{
margin: 0;
padding: 0;
}
form{
margin: 0;
padding: 0;
}
.top-bar-wrapper{
width: 100%;
line-height: 40px;
height: 40px;
background-color: #333;
}
.top-bar a{
color: #b0b0b0;
font-size: 12px;
display: block;
}
.top-bar a:hover{
color: white;
}
.service,.top-bar li{
float: left;
}
.app .qrcode{
left: -38px;
position: absolute;
background-color: #fff;
text-align: center;
line-height: 1;/*重置行高*/
width: 124px;
height: 0px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,.3);
transition: height 1s;
z-index: 9999;
}
.app .qrcode img{
width: 90px;
margin: 17px;
margin-bottom: 10px;
}
.app .qrcode span{
color: #000;
font-size:14px;
}
.user,.shop-cart{
float: right;
}
.top-bar .line{
font-size: 12px;
color: #424242;
margin: 0 8px;
}
.shop-cart a{
width: 120px;
background-color: #424242;
text-align: center;
}
.shop-cart:hover a{
background-color: white;
color: orange;
}
.shop-cart{
margin-left: 25px;
}
.app-li{
position: relative;
}
.app:hover .qrcode{
height: 148px;
}
.shop-cart{
position: relative;
}
.shop-cart .shop-list{
box-shadow: 0 0 10px rgba(0,0,0,.3);
top:40px;
left: -179px;
position: absolute;
width: 300px;
height: 100px;
height: 0;
transition: height 1s;
background-color: white;
text-align: center;
line-height: 100px;
overflow: hidden;
z-index: 9999;
}
.shop-cart:hover .shop-list{
display: block;
height: 100px;
}
.shop-cart .shop-list span{
position: relative;
font-size: 12px;
color: #333;
}
.header-wrapper{
position: relative;
width: 100%;
}
.header{
line-height: 100px;
height: 100px;
}
.header .logo{
margin-top:22px;
float: left;
}
.header .logo a{
background-image: url(/imglist/logo.jpg);
background-position: center;
display: block;
width: 55px;
height: 55px;
}
.header .nav-wrapper{
margin-left: 7px;
float: left;
}
.nav-wrapper .nav{
padding-left: 58px;
line-height: 100px;
height: 100px;
}
.nav>li{
float: left;
}
.all-goods-wrapper{
position: relative;
}
.left-menu{
z-index: 99;
padding: 20px 0;;
line-height: 1; /*消除继承的行高*/
left: -120px;
position: absolute;
width: 234px;
height: 420px;
background-color: rgba(0,0,0,.6);
}
ul.left-menu li a{
font-size: 14px;
margin-right: 0px;
color: #fff;
height: 42px;
line-height: 42px;
padding: 0 20px;
}
ul.left-menu li a:hover{
transition: 0.5s;
color: white;
background-color: orange;
}
.left-menu i{
float: right;
line-height: 42px;
}
.nav li a{
display: block;
font-size: 14px;
color: #000;
margin-right:20px;
}
.nav li a:hover{
color: #ff6700;
}
.nav .all-goods{
visibility: hidden;
}
.nav .goods-info{
width: 100%;
left: 0px;
top: 100px;
position: absolute;
height: 0;
overflow: hidden;
transition: height 1s;
background-color:white;
}
.nav>.show-goods:hover ~ .goods-info,
.goods-info:hover{ /*使用相邻兄弟选择器中的~选中全部的li*/
height: 228px;
border: 1px solid rgb(224,224,244);
box-shadow: 0 3px 3px rgba(0,0,0,.2);
z-index: 100;
}
.search-wrapper{
line-height: 1; /*消除父元素的继承效果*/
float: right;
height: 50px;
width: 296px;
margin-top: 20px;
}
.search-wrapper .search-inp,
.search-wrapper .search-btn{
float: left;
}
.search-wrapper .search-inp{
width: 202px;
border: 1px solid #e0e0e0;
padding: 0 20px;
height: 49px;
color: #424242;
font-size: 16px;
}
.search-wrapper .search-btn{
outline: none;
height: 51px;
width: 52px;
padding: 0;
border: 1px solid #e0e0e0;
background-color: #fff;
color: #616161;
font-size: 20px;
}
.search-wrapper .search-inp:focus{
border: #ff6700;
}
.banner-wrapper{
height: 460px;
position: relative;
}
.banner-img-list li{
position: absolute;
}
.banner-img-list img{
width: 100%;
vertical-align:top;
}
.pointer{
bottom: 22px;
right: 28px;
position: absolute;
}
.pointer a{
margin-left: 6px;
float: left;
width: 6px;
height: 6px;
border: 2px solid rgba(255,255,255,.4);
background-color: rgba(1,1,1.3);
border-radius: 50%;
z-index: 999;
}
.pointer a:hover,
.pointer a.active{
background-color: rgba(255,255,255,.4);
border: rgba(1,1,1.3) solid ;
}
.pev-next a{
top: 0;
bottom: 0;
margin: auto 0;
width: 41px;
height: 69px;
background-image: url(/imglist/icon.png);
position: absolute;
}
.pev-next .pev{
left: 234px;
background-position: -84px 0;
}
.pev-next .pev:hover{
background-position: 0 0;
}
.pev-next .next{
right: 0;
background-position: -125px 0;
}
.pev-next .next:hover{
background-position: -42px 0;
}
.aid{
margin-top: 14px;
height: 170px;
}
.aid .di-img,
.aid .shortcut,
.aid li{
float: left;
}
.aid .shortcut{
float: left;
width: 234px;
height: 170px;
background-color: #5f5750;
margin-right:14px
}
.aid .di-img li{
margin-right: 15px;
height: 170px;
float: left;
width: 316px;
}
.aid .di-img img{
width: 100%;
vertical-align: top;
}
.aid .di-img li:last-child{
margin: 0;
}
.aid .shortcut a{
font-size: 14px;
display: block;
color: #cfccca;
height: 84px;
width: 76px;
text-align: center;
overflow: hidden;
}
.aid .shortcut i{
margin-top: 20px;
display: block;
font-size: 20px;
margin-bottom: 4px;
}
.aid .shortcut a:hover{
color: #fff;
}如果想学习的和参考代码的同学,里面的图片素材请自己去小米官网保存并把bmp格式的图片转换为其他格式就可以使用,
