HTML+CSS 小米官网案例
收获:学会引用阿里矢量图,观察网页布局,熟练掌握float的使用方式,简单实用css动画,调整网页布局,引用css样式。
网页没有完全还原,建议大家找最新的教程
<!DOCTYPE html>
<html lang="en">
<head>
<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 12、Redmi K50、MIX FOLD,小米电视官方网站</title>
<!-- 网页更改的图标样式 -->
<!-- ???无法加载 -->
<link rel="shortcut icon" href="https://s01.mifile.cn/favicon.ico" type="image/x-icon" />
<!-- 阿里的矢量库 -->
<link rel="stylesheet" type="text/css" href="./css/font_lsixqepo8us/iconfont.css">
<!--引入自己定义的样式 -->
<link rel="stylesheet" href="./css/mi.css" type="text/css">
</head>
<body>
<!-- 顶部布局 -->
<div class="miHeader"></div>
<!-- 小米的菜单栏 -->
<div class="miMuen">
<!-- 内容居中 -->
<div class="cen">
<div class="dh_left">
<ul>
<li><a href="">小米商城<span>|</span></a></li>
<li><a href="">MIUI<span>|</span></a></li>
<li><a href="">IoT<span>|</span></a></li>
<li><a href="">云服务<span>|</span></a></li>
<li><a href="">天星科技<span>|</span></a></li>
<li><a href="">有品<span>|</span></a></li>
<li><a href="">小米开放平台<span>|</span></a></li>
<li><a href="">企业团购<span>|</span></a></li>
<li><a href="">资质证照<span>|</span></a></li>
<li><a href="">协议规则<span>|</span></a></li>
<li><a href="">下载APP<span>|</span></a></li>
<li><a href="">智能生活<span>|</span></a></li>
<li><a href="">Select Location</a></li>
</ul>
</div>
<div class="dh_right">
<ul>
<li class="shop"><i class="iconfont">󰅹</i><a href="">购物车(0)</a></li>
<li><a href="">消息通知</a></li>
<li><a href="">登录<span>|</span></a></li>
<li><a href="">注册<span>|</span></a></li>
</ul>
</div>
</div>
</div>
<!-- 搜索栏效果 -->
<div class="miSearch">
<div class="cen">
<div class="search_left">
<ul>
<li class="searchLogo"><img src="./img/logo-mi2(1).png" alt=""></li>
<li><a href="">Xiaomi手机</a></li>
<li><a href="">Redmi红米</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>
<li><a href="">社区</a></li>
</ul>
</div>
<div class="search_right" >
<input type="text" value="Redmi K30" class="find">
<input type="button" value="" class="findsub iconfont" >
</div>
</div>
</div>
<!-- 轮播图实现效果 -->
<div class="Lunbotu">
<div class="cen">
<div class="lbt"></div>
</div>
<div class="hdl">
<ul>
<li><a href="">手机</a><i class="iconfont"></i></li>
<li><a href="">电视</a><i class="iconfont"></i></li>
<li><a href="">笔记本 平板</a><i class="iconfont"></i></li>
<li><a href="">出行 穿戴</a><i class="iconfont"></i></li>
<li><a href="">耳机 音箱</a><i class="iconfont"></i></li>
<li><a href="">家电</a><i class="iconfont"></i></li>
<li><a href="">智能 路由器</a><i class="iconfont"></i></li>
<li><a href="">电源 配件</a><i class="iconfont"></i></li>
<li><a href="">健康 儿童</a><i class="iconfont"></i></li>
<li><a href="">生活 箱包</a><i class="iconfont"></i></li>
</ul>
</div>
</div>
<div class="goodsInfomation">
<div class="cen">
<div class="good_div1">
<ul>
<li><a href="">保障服务</a></li>
<li><a href="">企业团购</a></li>
<li><a href="">F码通道</a></li>
<li><a href="">米粉卡</a></li>
<li><a href="">以旧换新</a></li>
<li><a href="">话费充值</a></li>
</ul>
</div>
<div class="good_div"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340" alt=""></div>
<div class="good_div"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d1892854c8bb165e755d68bde287d71.jpg?w=632&h=340" alt=""></div>
<div class="good_div"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/290270b6fc499fc5fcb653417e99fe91.jpg?w=632&h=340" alt=""></div>
</div>
</div>
<div class="mi6">
<div class="cen">
<div class="xioami12s"><img src="./img/2656295f6c067f48a04a425acf15a096.webp" alt=""></div>
<div class="shouji">
<h2>手机</h2>
<div class="div1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b99bcb716c8f76e1fc5475172bdfc27.jpg?thumb=1&w=234&h=614&f=webp&q=90" alt=""></div>
<div class="div2">
<ul>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Xiaomi 12S pro</a> </li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012000_0b9df066c110f201154013ac373df1d9.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Xiaomi 12S</a> </li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012022_19bbddb6b35c3828f8b53f450c1519a3.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">xiaomi 12 pro 天玑版</a></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011841_084ed41d67f248677914605b73faf582.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Xiaomi 12S Ultra</a> </li>
</ul>
<div>
<ul>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/211bb83776a8e0c8358732c3f3aa2864.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Redmi Note 11T Pro+</a></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5713971c4bb6512743dfd06023080268.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Redmi Note 11T Pro</a></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7fccce9e65aff2d7c913e40f4bee1b0b.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Redmi Note 11SE</a></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bcd64f412dfb5e15695fa96d21ecb23.png?thumb=1&w=200&h=200&f=webp&q=90" alt=""><a href="">Xiaomi Civi 1S</a></li>
</ul>
</div>
</div>
</div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
- Mi.css
/* 清除css样式 */
*{
margin: 0px;
padding: 0px;
}
.miHeader{
width: 100%;
height: 120px;
background-color: #ff6700;
background-position: 50%;
background-size: auto 120;
}
/* 小米导航栏 */
/* 小米导航栏开始 */
.miMuen{
width: 100%;
height: 40px;
background-color: #333333;
}
.cen{
width: 1226px;
height: 100%;
border: 1px solid #e0e0e0;
margin: 0px auto;
}
ul li{
list-style: none;
}
.dh_left li{
float: left;
line-height: 40px;
}
.dh_left li a,.dh_right a{
font-size: 12px;
color: #b0b0b0;;
text-decoration: none;
}
.dh_left a:hover{
color: #ffffff;
}
.dh_left span,.dh_right span{
font-size: 10px;
color: #424242;
margin-left: 7px;
margin-right: 7px;
}
.dh_right li{
float: right;
line-height: 40px;
}
.shop{
height: 40px;
width: 120px;
background-color: #424242;
text-align: center;
margin-left: 20px;
}
.shop :hover{
color: #ff6700;
background-color: #ffffff;
}
.shop i{
color:#b0b0b0;
font-size: 18px;
line-height: 5px;
margin-right: 2px;
}
/* 小米导航栏结束 */
/* 搜索栏布局 */
.miSearch{
height: 100px;
width: 100%;
}
.search_left{
height: 100px;
width: 850px;
float: left;
}
.search_left .searchLogo{
margin-left: 0px;
margin-top: 20px;
}
.search_left li{
float: left;
line-height: 100px;
margin-left: 30px;
}
.search_left a{
font-size: 15px;
color: #333333;
text-decoration: none;
}
.search_right {
float:right;
line-height: 100px;
}
.find {
width: 150px;
height: 30px;
border: 1px solid #e0e0e0;
position: relative;
left: 5px;
}
.findsub{
height: 31px;
width: 35px;
border: 1px solid #e0e0e0;
background-color: #ffffff;
}
/* 轮播图效果 */
.Lunbotu {
width: 100%;
height: 460px;
}
.lbt{
width: 100%;
height: 460px;
background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/143ceae1731ac47fe7fa68dde2978bdc.jpg?thumb=1&w=1533&h=575&f=webp&q=90);
animation: 15s sxt infinite;
}
/* 动画 */
@keyframes sxt{
0%{background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/143ceae1731ac47fe7fa68dde2978bdc.jpg?thumb=1&w=1533&h=575&f=webp&q=90);}
25%{background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/987c34b474be111ba87f0321082eb2f3.jpg?thumb=1&w=1533&h=575&f=webp&q=90);}
50%{background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/987c34b474be111ba87f0321082eb2f3.jpg?thumb=1&w=1533&h=575&f=webp&q=90);}
75%{background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/143ceae1731ac47fe7fa68dde2978bdc.jpg?thumb=1&w=1533&h=575&f=webp&q=90);}
100%{ background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/143ceae1731ac47fe7fa68dde2978bdc.jpg?thumb=1&w=1533&h=575&f=webp&q=90);}
}
/* 滑动栏效果 */
.hdl{
width: 234px;
height: 460px;
background-color: rgba(105, 101,101, 0.6);
position:absolute;
top: 0px;
left: 147px;
}
.Lunbotu{
position: relative;
}
.hdl li{
width: 234px;
height:46px;
line-height: 42px;
}
.hdl a{
color:#ffffff;
font-size: 12px;
text-decoration: none;
margin-left: 20px;
}
.hdl li:hover{
background-color: #ff6700;
}
.hdl i{
float: right;
margin-left: 20px;
color: #e0e0e0;
}
.goodsInfomation{
height: 170px;
width: 100%;
margin-top: 16px;
}
.goodsInfomation .good_div1{
width: 234px;
height: 170px;
background-color: #5f5750;
float: left;
}
.goodsInfomation .good_div{
width: 319px;
height: 170px;
overflow: auto;
float: left;
margin-left: 9px;
}
.good_div img{
width: 100%;
}
.goodsInfomation li{
float: left;
margin-right: 10px;
border:1px solid ;
margin-top: 52px;
margin-bottom: 16px;
text-align: center;
}
/* 商品详情 */
.mi6{
width: 100%;
height: 1059px;
background-color: #f5f5f5;
margin-top: 65px;
}
.shouji{
height: 500px;
width: 100%;
}
.shouji h2{
font-size: 20px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
margin-top: 12px;
}
.shouji div{
float: left;
}
.shouji div1{
width: 250px;
height: 100%;
border: solid #333333;
}
.shouji div2{
width: 800px;
height: 100%;
border: solid #333333;
float: right;
}
.shouji li{
width: 235px;
height:300px;
float: left;
text-align: center;
margin-left: 10px;
margin-bottom: 10px;
/* border: 1px solid #424242; */
background-color: #fff;
}
.shouji a{
color:#333333;
font-size: 12px;
text-decoration: none;
margin-left: 20px;
}