效果图
代码
HTML5部分：
<body>
<!-- 头部 -->
<div class="header">
<div class="wrap">
<ul class="header-left">
<li><a href="#">小米网</a><span>|</span></li>
<li><a href="#">MIUI</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 class="ewm">
<a href="#">下载APP</a>
<span>|</span>
<div class="ewm_tp">
<a href="">
<img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="">
<p>小米商城APP</p>
</a>
</div>
<div class="triangle"></div>
</li>
<li><a href="#">问题反馈</a><span>|</span></li>
<li><a href="#">Select Region</a><span>|</span></li>
</ul>
<ul class="header-right">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a><span>|</span></li>
<li class="cart"><a href="#">✉购物车(0)</a>
<div class="gwc">购物车中没有商品，赶紧选购吧!</div>
</li>
</ul>
</div>
</div>
<!-- 身体 -->
<div class="box">
<div class="box_main">
<a href="#" class="logo"><img src="https://c1.mifile.cn/f/i/17/appdownload/apdownload-logo.png" alt=""></a>
<div class="box_content">
<h1>
小米商城
<br />
享受科技带来的美好生活
</h1>
</div>
<div class="box_footer">
<div class="box_footer_left">
<a href="#">Android版本下载</a>
<a href="#">App Store下载</a>
</div>
<div class="box_footer_right">
<img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="">
</div>
</div>
</div>
</div>
<!-- 脚部 -->
<div class="footer">
<div class="footer_main">
<div class="footer_main_left">
<img src="https://c1.mifile.cn/f/i/17/appdownload/apdownload-logo.png" alt="">
</div>
<div class="footer_main_right">
<p>
<a href="#">小米商城</a><span>|</span>
<a href="#">MIUI</a><span>|</span>
<a href="#">米家</a><span>|</span>
<a href="#">米聊</a><span>|</span>
<a href="#">多看</a><span>|</span>
<a href="#">游戏</a><span>|</span>
<a href="#">路由器</a><span>|</span>
<a href="#">米粉卡</a><span>|</span>
<a href="#">政企服务</a><span>|</span>
<a href="#">小米天猫店</a><span>|</span>
<a href="#">小米集团隐私政策</a><span>|</span>
<a href="#">小米商城隐私政策</a><span>|</span>
<a href="#">小米商城用户协议</a><span>|</span>
<a href="#">问题反馈</a>
</p>
<p>
© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号
<br>
（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京) -非经营性-2014-0090 营业执照 医疗器械质量公告
<br>
增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证
<br>
违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</p>
<p class="footer_footer">
<img src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="">
<img src="https://s01.mifile.cn/i/v-logo-2.png" alt="">
<img src="https://s01.mifile.cn/i/v-logo-1.png" alt="">
<img src="https://s01.mifile.cn/i/v-logo-3.png" alt="">
<img src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
<img id="lastimg"
src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f5452fb259cb6c351c77ad363518be14.png"
alt="">
</p>
<p class="footer_footer2">
让全球每个人都能享受科技带来的美好生活
</p>
</div>
</div>
</div>
</body>
CSS3部分：
<title>小米商城</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 头部开始 */
/* 从这开始 */
.header {
width: 100%;
background-color: #333;
height: 40px;
line-height: 40px;
font-size: 14px;
}
.wrap {
width: 1226px;
margin: 0 auto;
}
.wrap ul li {
list-style: none;
}
.wrap ul li a {
text-decoration: none;
color: #b0b0b0;
}
.wrap ul li a:hover {
color: #fff;
}
.wrap span {
margin: 0 10px;
}
.header-left li {
float: left;
}
/* 给父类设置向右浮动，子类向左浮动就可以更换元素顺序 */
.header-right {
float: right;
}
.header-right li {
float: left;
}
/* 到这结束，是header的ul li的设计 */
/* 购物车样式开始 */
.cart {
display: inline-block;
height: 40px;
width: 120px;
background-color: #424242;
text-align: center;
line-height: 40px;
position: relative;
}
.cart:hover {
background-color: #fff;
}
.cart:hover a {
color: #f44336 !important;
}
/* 购物车样式结束 */
/* 购物车详细模块开始 （先给它高度设为0，鼠标经过时再给高度，transition是过渡效果）*/
.gwc {
width: 316px;
height: 0;
top: 40px;
right: 0;
position: absolute;
line-height: 100px;
text-align: center;
transition: all .6s;
background-color: #fff;
/* 元素超出给定的宽高时，overflow:hidden可以隐藏超出的部分 */
overflow: hidden;
color: #999;
/* box-shadow:向右 向下 模糊值 颜色 */
box-shadow: 2px 3px 6px #888;
}
.cart:hover .gwc {
height: 100px;
}
/* 购物车详细模块结束 */
/* 下载APP模块开始 */
.ewm {
position: relative;
padding-left: 10px;
}
.ewm:hover>a {
color: #fff !important;
}
.ewm a {
margin-top: 10px;
text-align: center;
}
.ewm_tp {
position: absolute;
width: 124px;
height: 0;
background-color: #fff;
top: 40px;
/* 牛啊，这里高度为0，发生BFC,图片和文字脱离了ewm_tp盒子，盒子隐藏了，图片和文字还在原地 */
/* 解决方法有给父类设置高度，position不为absoult,还有overflow:hidden */
overflow: hidden;
box-shadow: 2px 4px 6px #888;
left: 50%;
margin-left: -62px;
transition: all .6s;
}
.ewm_tp img {
width: 100px;
margin-top: 10px;
margin-left: 13px;
}
.ewm:hover>.ewm_tp {
height: 140px;
}
.ewm_tp a p {
margin-top: -20px;
color: black;
}
/* 下载APP模块结束 */
/* 上三角形开始 */
.triangle {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
position: absolute;
bottom: 0;
left: 35px;
display: none;
}
.ewm:hover .triangle {
display: block;
}
/* 上三角形结束 */
/* 头部结束 */
/* 中间部分开始 */
.box {
width: 100%;
background: url(https://c1.mifile.cn/f/i/17/appdownload/apdownload-bg.jpg) no-repeat center 0;
height: 1188px;
}
.box_main {
width: 1226px;
height: 1188px;
margin: 0 auto;
position: relative;
}
.box_main .logo {
width: 47px;
height: 47px;
position: absolute;
top: 38px;
left: 0px;
}
.box_content {
width: 1226px;
position: absolute;
right: 0;
top: 315px;
text-align: center;
font-size: 22px;
color: #fff;
line-height: 60px;
letter-spacing: 3px;
font-family: 'F78cea';
}
.box_footer {
width: 320px;
height: 124px;
position: absolute;
top: 500px;
left: 40%;
}
.box_footer_left a {
display: block;
float: left;
width: 190px;
height: 52px;
background-color: #fff;
margin: 10px auto;
text-align: center;
text-decoration: none;
line-height: 52px;
font-size: 14px;
border-radius: 3px;
color: #a7c9df;
}
.box_footer_right img {
display: block;
float: right;
width: 114px;
height: 114px;
margin-top: -58px;
}
/* 中间部分结束 */
/* 底部开始 */
.footer {
width: 100%;
height: 280px;
background-color: #fafafa;
}
.footer_main {
width: 1226px;
height: 162px;
margin: 0 auto;
padding: 30px 0;
}
.footer_main_left img {
width: 57px;
height: 57px;
display: block;
float: left;
}
.footer_main_right {
margin-left: 70px;
}
.footer_main_right a {
text-decoration: none;
font-size: 12px;
}
.footer_main_right span {
margin: 0 3px;
}
.footer_main_right:nth-child(2) {
font-size: 12px;
color: #757575;
}
.footer_footer img:nth-child(1) {
height: 28px;
width: auto;
}
.footer_footer {
height: 28px;
margin: 4px 0 15px;
}
.footer_footer2 {
font-size: 21px;
color: #b0b0b0;
text-align: center;
padding-top: 40px;
}
/* 底部结束 */
</style>
JavaScript部分（写在html下面）：
<!-- 每隔一秒切换图片 -->
<script>
var lastimg = document.querySelector('#lastimg');
let i = 0;
var timer = setInterval(function () {
if (i == 0) {
lastimg.src = 'https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f5452fb259cb6c351c77ad363518be14.png';
i = 1;
} else {
lastimg.src = 'https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f1ee261b96ae71e845efba398efeca02.png';
i = 0;
}
}, 1000);
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
