目录
1、思维导图:
2、小米商城代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>18160029 高汉斌</title>
<link rel="stylesheet" href="./小米商城.css">
<link rel="stylesheet" href="./小米商城-1.css">
<link rel="stylesheet" href="./小米商城-2.css">
<link rel="stylesheet" href="./小米商城-3.css">
<!-- <link rel="stylesheet" href="./function setBodyWidth(){.js"> -->
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a.bianshe:hover {
color: white;
}
.yingchang {
height: 0px;
border: 0px;
left: 1227px;
z-index: 1;
transition: height 1s;
}
.box3:hover>.yingchang {
height: 100px;
width: 314px;
background: url(./图片/下滑背景1.png);
border: 2px solid rgb(175, 171, 171);
box-shadow: 2px 4px 2px rgb(175, 171, 171);
border-right: none;
border-bottom: none;
border-top: none;
box-sizing: border-box;
position: absolute;
}
.box3:hover {
background-color: white;
}
.box3 a:hover {
color: red;
}
</style>
</head>
<link rel="stylesheet" href="./font_oro37pfqcc8/iconfont.css">
<link rel="stylesheet" href="./font_kzitzkkettp/iconfont.css">
<link rel="stylesheet" href="./font_u4ny5vtrn9/iconfont.css">
<link rel="stylesheet" href="./font_5pumfd163y7/iconfont.css">
<link rel="stylesheet" href="./font_4sc33nvgibq/iconfont.css">
<link rel="stylesheet" href="./font_deg77knisik/iconfont.css">
<link rel="stylesheet" href="./font_5iquhd98uri/iconfont.css">
<link rel="stylesheet" href="./font_pl3gxq7wxqo/iconfont.css">
<link rel="stylesheet" href="./font_n51uti5s5dg/iconfont.css">
<link rel="stylesheet" href="./font_rip1mb7rkxa/iconfont.css">
<link rel="stylesheet" href="./top-bar.css">
<body>
<div class="bar-right">
<ul>
<li>
<a href="#">
<div class="bar-link"><img src="./小图标/手机app.png" alt="" class="bar-image"><a href="#" class="bar-text">手机APP</a></div>
</a>
</li>
<li>
<a href="#">
<div class="bar-link"><img src="./小图标/个人中心.png" alt="" class="bar-image"><a href="#" class="bar-text">个人中心</a></div>
</a>
</li>
<li>
<a href="#">
<div class="bar-link"><img src="./小图标/手机app.png" alt="" class="bar-image"><a href="#" class="bar-text">联系客服</a></div>
</a>
</li>
<li>
<a href="#">
<div class="bar-link"><img src="./小图标/购物车.png" alt="" class="bar-image"><a href="#" class="bar-text">购物车</a></div>
</a>
</li>
<li>
<div class="little-box-none"></div>
</li>
<li>
<a href="#">
<div class="bar-link"><img src="./小图标/售后服务.png" alt="" class="bar-image"><a href="#" class="bar-text">售后服务</a></div>
</a>
</li>
</ul>
</div>
<div class="box">
<div class="box1">
<a href="" class="bianshe">小米商城</a>
<span style="color: rgb(102, 94, 87);">|</span>
<a href="" class="bianshe">MIUI</a>
<span style="color: rgb(102, 94, 87);">|</span>
<a href="" class="bianshe">IoT</a>
<span style="color: rgb(102, 94, 87);">|</span>
<a href="" class="bianshe">云服务</a>
<span style="color: rgb(102, 94, 87);">|</span>
<a href="" class="bianshe">天星数科</a>
<span style="color: rgb(102, 94, 87);">|</span>
<a href="" class="bianshe">有品</a>
<span style="color: rgb(102, 94, 87);">|</span>
<a href="" class="bianshe">小爱开放平台</a>
<span style="color: rgb(102, 94, 87);">|</span>
<a href="" class="bianshe">企业团购</a>
<span style="color: rgb(102, 94, 87);">|</span>
<a href="" class="bianshe">资质证照</a>
<span style="color: rgb(102, 94, 87);">|</span>
<a href="" class="bianshe">协议规则</a>
<span style="color: rgb(102, 94, 87);">|</span>
<a href="" class="code">下载App
<div class="a">
<div class="b" >
</div>
</div>
</a>
</div>
<div class="gekai"></div>
<div class="box2">
<a href="" class="bianshe">登录</a>
<span style="color: rgb(102, 94, 87);">|</span>
<a href="" class="bianshe">注册</a>
<span style="color: rgb(102, 94, 87);">|</span>
<a href="" class="bianshe">消息通知</a>
</div>
<div class="box3">
<a href="" class="iconfont" style="font-size: 11pt;">󰁵购物车(0)</a>
<div class="yingchang">
</div>
</div>
<div style="background: rgb(51, 51, 51);height: 40px;width: 300px;top: -0px;left: 955px; position: absolute;">
<a href="" style="line-height: 40px;">
| 智能生活 | Select Location
</a>
</div>
</div>
<div id="header">
<span class="iconfont" style="font-size: 40pt;color: rgb(250, 93, 45);
line-height: 100px;
float: left;
margin-left: 320px;"></span>
<div style="width: 170px;background:white;height: 100px;float: left;"></div>
<ul class="topnav clearfix">
<li><a href="">Xiaomi手机</a>
<div class="ferst" style="text-indent: 20em;">
</div>
</li>
<li><a href="">Redmi 红米</a>
<div class="f_1" style="text-indent: 20em;">
</div>
</li>
<li><a href="">电视</a>
<div class="f_2" style="text-indent: 20em;">
</div>
</li>
<li><a href="">笔记本</a>
<div class="f_3" style="text-indent: 20em;">
</div>
</li>
<li><a href="">平板</a>
<div class="f_4" style="text-indent: 20em;">
</div>
</li>
<li><a href="">家电</a>
<div class="f_5" style="text-indent: 20em;">
</div>
</li>
<li><a href="">路由器</a>
<div class="f_6" style="text-indent: 20em;">
</div>
</li>
<li><a href="">服务</a></li>
<li><a href="">社区</a></li>
<div id="serth">
<form class="s_form" action="#">
<input class="s_put" type="text" placeholder="手机"><button class="s_buton iconfont">
</button>
<div class="s_put1">
<ul>
<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>
<li><a href="">手机</a></li>
</ul>
</div>
</form>
</div>
</div>
</ul>
</div>
<div style="height: 2px;"></div>
<div>
<div id="banner">
<ul id="b_nav">
<li><a href=""><span>手机</span><span class="iconfont" style="float: right;margin-right: 20px;"></span></a>
<div class="b_n_hide">
<img src="./图片/1.png" alt="">
</div>
</li>
<li><a href=""><span>电视</span><span class="iconfont" style="float: right;margin-right: 20px;"></span></a>
<div class="b_n_hide_1">
<img src="./图片/2.png" alt="">
</div>
</li>
<li><a href=""><span>笔记本 平板</span><span class="iconfont" style="float: right;margin-right: 20px;"></span></a>
<div class="b_n_hide_2">
<img src="./图片/3.png" alt="">
</div>
</li>
<li><a href=""><span>家电</span><span class="iconfont" style="float: right;margin-right: 20px;"></span></a>
<div class="b_n_hide_3">
<img src="./图片/4.png" alt="">
</div>
</li>
<li><a href=""><span>出行 穿戴</span><span class="iconfont" style="float: right;margin-right: 20px;"></span></a>
<div class="b_n_hide_4">
<img src="./图片/5.png" alt="">
</div>
</li>
<li><a href=""><span>智能 路由器</span><span class="iconfont" style="float: right;margin-right: 20px;"></span></a>
<div class="b_n_hide_5">
<img src="./图片/6.png" alt="">
</div>
</li>
<li><a href=""><span>电源 配件</span><span class="iconfont" style="float: right;margin-right: 20px;"></span></a>
<div class="b_n_hide_6">
<img src="./图片/7.png" alt="">
</div>
</li>
<li><a href=""><span>健康 儿童</span><span class="iconfont" style="float: right;margin-right: 20px;"></span></a>
<div class="b_n_hide_7">
<img src="./图片/8.png" alt="">
</div>
</li>
<li><a href=""><span>耳机 音箱</span><span class="iconfont" style="float: right;margin-right: 20px;"></span></a>
<div class="b_n_hide_8">
<img src="./图片/9.png" alt="">
</div>
</li>
<li><a href=""><span>生活 箱包</span><span class="iconfont" style="float: right;margin-right: 20px;"></span></a>
<div class="b_n_hide_9">
<img src="./图片/10.png" alt="">
</div>
</li>
</ul>
<div class="prev"></div>
<div class="next"></div>
<div id="DD">
<ol>
<li style="list-style: circle ;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
</div>
<div id="img_j">
<div id="i_ferst">
<div class="i_ferst1" style="text-align: center;">
<div style="height: 20px;"></div>
<a href="" style="display: block;height: 79;width: 79;font-size: 18pt;" class="iconfont"><p style="font-size: 10pt;">保障服务</p></a>
</div>
<div class="i_ferst2" style="text-align: center;">
<div style="height: 20px;"></div>
<a href="" style="display: block;height: 79;width: 79;font-size: 18pt;" class="iconfont"><p style="font-size: 10pt;">企业团购</p></a>
</div>
<div class="i_ferst3" style="text-align: center;">
<div style="height: 20px;"></div>
<a href="" style="display: block;height: 79;width: 79;font-size: 18pt;" class="iconfont">󰀽<p style="font-size: 10pt;">F码通道</p></a>
</div>
<div class="i_ferst4" style="text-align: center;">
<div style="height: 20px;"></div>
<a href="" style="display: block;height: 79;width: 79;font-size: 18pt;" class="iconfont"><p style="font-size: 10pt;">米粉卡</p></a>
</div>
<div class="i_ferst5" style="text-align: center;">
<div style="height: 20px;"></div>
<a href="" style="display: block;height: 79;width: 79;font-size: 20pt;" class="iconfont"><p style="font-size: 10pt;">以旧换新</p></a>
</div>
<div class="i_ferst6" style="text-align: center;">
<div style="height: 20px;"></div>
<a href="" style="display: block;height: 79;width: 79;font-size: 20pt;" class="iconfont"><p style="font-size: 10pt;">话费充值</p></a>
</div>
</div>
<div id="print">
<a href="">
<img src="./图片/最下面1.png" alt="">
</a>
</div>
<div id="print1">
<a href="">
<img src="./图片/最下面2.png" alt="">
</a>
</div>
<div id="print2">
<a href="">
<img src="./图片/最下面3.png" alt="">
</a>
</div>
</div>
</body>
<div style="width: 1500px;height: 315px;background-color: rgb(250, 250, 250);position: relative;top: 10px;">
<img src="./图片/125.png" alt="" style="width:1226px;height: 120px absolute;left: -50px;top: -5px;position: relative;left: 150px;">
</div>
</html>
3、百度网盘
链接:https://pan.baidu.com/s/1t5CeLTO-UP6brlnUL8HllQ
留给自己的!