记录自己用所学全部前端知识完成模仿小米商城官网的全过程
1、目前所学全部知识的思维导图
2、小米商城官网原图+我的代码实现效果图
3、具体步骤
- 用F12打开链接将需要的图保存下来,有些图标是用代码实现的,所以去Iconfont(阿里巴巴矢量图标库)找类似的图片下载。
- 用盒子布置整体布局,先画4个大盒子,再分别画小盒子。
- 用CSS分别调整颜色、位置等,使其接近原布局。
- 布局调好后加入鼠标悬停效果,变色、换图并显示隐藏框。
- 最后加入bootstrap V4的轮播图。
4、小米商城官网目前代码(不完整)
<!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>小米官网</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<style>
.box1 {
width: 1500px;
height: 40px;
background-color: black;
margin: 0 auto;
}
.box2 {
width: 1500px;
height: 100px;
margin-left: 100px;
margin-top: 20px;
}
.box3 {
width: 1500px;
height: 400px;
color: white;
}
.box4 {
width: 1500px;
height: 200px;
margin-top: 20px;
}
.box11 {
font-size: 10px;
color: rgb(148, 147, 147);
float: left;
margin-top: 10px;
margin-left: 20px;
}
.box11:hover {
color: white;
}
.box21 {
margin-left: 20px;
opacity: 1;
}
.box21:hover {
color: orange;
}
.box22 {
width: 1000px;
height: 100px;
opacity: 0;
position: absolute;
margin-top: 10px;
margin-left: 200px;
background-color: white;
}
.box21:hover+.box22 {
opacity: 1;
z-index: 999;
}
.box23 {
border: 1px solid gray;
display: inline-block;
width: 45px;
height: 45px;
margin-top: 10px;
position: relative;
top: -10px;
left: -6px;
text-align: center;
}
.box23:hover {
background-color: orange;
}
.box31 {
width: 250px;
height: 400px;
background-color: gray;
margin-left: 100px;
float: left;
}
.box311 {
margin-top: 15px;
margin-left: 30px;
margin-right: 30px;
}
.box311:hover {
background-color: orange;
color: orange;
opacity: 0.5;
}
.box32 {
width: 1000px;
height: 400px;
float: left;
}
.box33 {
width: 100px;
height: 500px;
position: fixed;
left: 1400px;
}
.box331 {
margin-top: 20px;
}
.box332:hover img {
content: url("手机APP2.png");
width: 50px;
height: 50px;
}
.box332:hover div {
color: orange;
}
.box333:hover img {
content: url("个人中心2.png");
width: 50px;
height: 50px;
}
.box333:hover div {
color: orange;
}
.box334:hover img {
content: url("售后服务2.png");
width: 50px;
height: 50px;
}
.box334:hover div {
color: orange;
}
.box335:hover img {
content: url("人工客服2.png");
width: 50px;
height: 50px;
}
.box335:hover div {
color: orange;
}
.box336:hover img {
content: url("购物车2.png");
width: 50px;
height: 50px;
}
.box336:hover div {
color: orange;
}
.box337 {
color: gray;
}
.box41 {
width: 250px;
height: 200px;
background-color: black;
font-size: 10px;
margin-left: 100px;
float: left;
}
.box411 {
width: 80px;
height: 100px;
float: left;
position: relative;
top: 20px;
left: 20px;
}
.box42 {
width: 320px;
height: 200px;
margin-left: 20px;
float: left;
}
.box43 {
width: 320px;
height: 200px;
margin-left: 20px;
float: left;
}
.box44 {
width: 320px;
height: 200px;
margin-left: 20px;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box11" style="margin-left: 100px;">小米商城</div>
<div class="box11">MIUI</div>
<div class="box11">IoT</div>
<div class="box11">云服务</div>
<div class="box11">天星数科</div>
<div class="box11">有品</div>
<div class="box11">小爱开放平台</div>
<div class="box11">企业团购</div>
<div class="box11">资质证照</div>
<div class="box11">协议规则</div>
<div class="box11">下载app</div>
<div class="box11">智能生活</div>
<div class="box11">Select Location</div>
<div class="box11" style="margin-left: 100px;">登录</div>
<div class="box11">注册</div>
<div class="box11">消息通知</div>
<div class="box11" style="height: 40px;width: 150px;background-color: rgb(71, 70, 70);margin-top: 0;text-align: center;">
<img src="D:/大四上/实训/小米/购物车1.png" alt="" style="width: 20px;height: 20px;position: relative;top: 9px;">
<span style="position: relative;top: 10px;">购物车(0)</span>
</div>
</div>
<div class="box2">
<img src="D:/大四上/实训/小米/icon-小米归属.png" alt="" style="height: 60px;width: 60px;">
<span class="box21" style="margin-left: 200px;">Xiaomi手机</span>
<div class="box22">
<img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
</div>
<span class="box21">Redmi红米</span>
<div class="box22">
<img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
</div>
<span class="box21">电视</span>
<div class="box22">
<img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
</div>
<span class="box21">笔记本</span>
<div class="box22">
<img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
</div>
<span class="box21">平板</span>
<div class="box22">
<img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
</div>
<span class="box21">家电</span>
<div class="box22">
<img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
</div>
<span class="box21">路由器</span>
<div class="box22">
<img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
</div>
<span class="box21">服务</span>
<div class="box22">
<img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
</div>
<span class="box21">社区</span>
<div class="box22">
<img src="D:/大四上/实训/小米/Xiaomi Civi.webp" alt="" style="height: 50px;width: 50px;">
</div>
<input type="text" style="margin-left: 150px;height: 45px;">
<span class="box23"><img src="D:/大四上/实训/小米/搜索.png" alt="" style="height: 15px;width: 15px;position: relative;top: 9px">
</span>
</div>
<div class="box3">
<div class="box31">
<div class="box311" style="margin-top: 10px;">手机
<img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
</div>
<div class="box311">电视
<img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
</div>
<div class="box311">笔记本 平板
<img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
</div>
<div class="box311">家电
<img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
</div>
<div class="box311">出行 穿戴
<img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
</div>
<div class="box311">智能 路由器
<img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
</div>
<div class="box311">电源 配件
<img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
</div>
<div class="box311">健康 儿童
<img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
</div>
<div class="box311">耳机 音响
<img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
</div>
<div class="box311">生活 箱包
<img src="D:/大四上/实训/小米/右箭头.png" alt="" style="height: 25px;width: 25px;float: right;">
</div>
</div>
<div class="box32">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="D:/大四上/实训/小米/中间图.jpg" class="d-block w-100" alt="..." style="width: 1000px;height: 400px;">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="D:/大四上/实训/小米/中间图2.webp" class="d-block w-100" alt="..." style="width: 1000px;height: 400px;">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="D:/大四上/实训/小米/中间图3.webp" class="d-block w-100" alt="..." style="width: 1000px;height: 400px;">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="D:/大四上/实训/小米/中间图4.webp" class="d-block w-100" alt="..." style="width: 1000px;height: 400px;">
<div class="carousel-caption d-none d-md-block">
<h5>Fourth slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
<!-- <img src="D:/大四上/实训/小米/中间图.jpg" alt="" style="width: 1000px;height: 400px;"> -->
</div>
<div class="box33">
<div class="box331">
<div class="box332">
<img src="D:/大四上/实训/小米/手机APP.png" alt="" style="width: 50px;height: 50px;">
<div class="box337">手机APP</div>
</div>
<div class="box333">
<img src="D:/大四上/实训/小米/个人中心.png" alt="" style="width: 50px;height: 50px;">
<div class="box337">个人中心</div>
</div>
<div class="box334">
<img src="D:/大四上/实训/小米/售后服务.png" alt="" style="width: 50px;height: 50px;">
<div class="box337">售后服务</div>
</div>
<div class="box335">
<img src="D:/大四上/实训/小米/人工客服.png" alt="" style="width: 50px;height: 50px;">
<div class="box337">人工客服</div>
</div>
<div class="box336">
<img src="D:/大四上/实训/小米/购物车1.png" alt="" style="width: 50px;height: 50px;">
<div class="box337">购物车</div>
</div>
</div>
</div>
</div>
<div class="box4">
<div class="box41">
<div class="box411">
<img src="D:/大四上/实训/小米/保障服务.png" alt="" style="width: 30px;height: 30px;">
<div style="color: gray;">保障服务</div>
</div>
<div class="box411">
<img src="D:/大四上/实训/小米/企业团购.png" alt="" style="width: 30px;height: 30px;">
<div style="color: gray;">企业团购</div>
</div>
<div class="box411">
<img src="D:/大四上/实训/小米/F码通道.png" alt="" style="width: 30px;height: 30px;">
<div style="color: gray;">F码通道</div>
</div>
<div class="box411">
<img src="D:/大四上/实训/小米/米粉卡.png" alt="" style="width: 30px;height: 30px;">
<div style="color: gray;">米粉卡</div>
</div>
<div class="box411">
<img src="D:/大四上/实训/小米/以旧换新.png" alt="" style="width: 30px;height: 30px;">
<div style="color: gray;">以旧换新</div>
</div>
<div class="box411">
<img src="D:/大四上/实训/小米/话费充值.png" alt="" style="width: 30px;height: 30px;">
<div style="color: gray;">话费充值</div>
</div>
</div>
<div class="box42">
<img src="D:/大四上/实训/小米/下图1.jpg" alt="" style="width: 300px;height: 200px;">
</div>
<div class="box43">
<img src="D:/大四上/实训/小米/下图2.jpg" alt="" style="width: 300px;height: 200px;">
</div>
<div class="box44">
<img src="D:/大四上/实训/小米/下图3.jpeg" alt="" style="width: 300px;height: 200px;">
</div>
</div>
</body>
</html>
5、遇到的问题
1、鼠标悬停时不显示隐藏框。所以隐藏框需要和显示框相邻设置,用兄弟选择器选择设置。
2、设置轮播图后,隐藏框被覆盖。用z-index: 999;设置层级为999最高,这样就不会被轮播图遮挡,始终显示在最前方。
由于时间不够了,目前网页未实现的小米官网效果,今后有空慢慢添加。