abstract：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="shortcut icon" href="http://s01.mifile.cn/favicon.ico" type="image/x-icon">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>小米商城版块布局作业</title>
<style>
* {
padding: 0;
margin: 0
}
a {
color: #444;
text-decoration: none;
}
ul li {
list-style: none;
float: left;
}
.clear {
clear: both;
}
.l {
float: left;
}
.r {
float: right;
}
.c {
margin: 0 auto;
}
.w {
width: 1226px;
}
.mt {
margin-top: 25px;
margin-bottom: 25px;
}
.head {
width: 100%;
height: 35px;
line-height: 35px;
font-size: 12px;
background: #181818;
color: #b1b1b1;
}
.h_menu {
height: 35px;
}
.m_left ul li:hover {
color: #fff;
cursor: pointer;
}
.h_menu ul li {
float: left;
margin: 0 20px;
}
.h_menu ul li i {
margin-right: 5px;
font-size: 16px;
}
.m_right ul li:hover {
color: #fff;
}
.m_right ul li:last-child:hover {
color: #f67000;
}
.menu {
line-height: 100px;
position: relative;
}
.menu img {
margin: 20px 0;
}
.menu .logo {
float: left;
}
.menu .text {
margin: 20px 100px auto;
}
/*
.menu .text a:hover {} */
.menu .text a {
float: left;
line-height: 100px;
margin: 0 20px;
}
.menu .sql {
width: 200px;
height: 50px;
line-height: 50px;
margin-top: 20px;
float: left;
border: 1px solid #ccc;
position: absolute;
right: 50px;
}
.menu .sql a {
font-size: 10px;
height: 20px;
line-height: 20px;
background: #ccc;
position: relative;
left: 100px;
margin-right: 10px;
}
.menu .sql a:hover {
cursor: pointer;
color: #fff;
height: 20px;
background: #f67000;
transition: all .5s ease-in-out
}
.menu .sqbt {
position: absolute;
display: block;
right: 0;
top: 20px;
float: right;
line-height: 50px;
width: 50px;
text-align: center;
font-size: 20px;
height: 50px;
border: 1px solid #ccc;
border-left: 0px;
}
.menu .sqbt i {
width: 50px;
height: 50px;
}
.menu .sqbt i:hover {
cursor: pointer;
color: #fff;
background: #f67000;
position: absolute;
top: 0;
left: 0;
line-height: 50px;
text-align: center;
margin: 0 auto;
transition: all .5s ease-in-out;
}
.mbox {
position: absolute;
top: 9vw;
width: 100%;
height: 250px;
border: 1px solid #ccc;
background: #fff;
display: none;
box-shadow: 1px 0 12px #ccc;
}
/* .menu .text a:hover .mbox {
display: block;
} */
.mbox .inbox {
margin: 0 auto;
background: #ccc;
left: 0;
}
.text ul li {
margin: 0 20px;
}
.text ul li:hover .mbox {
color: #f67000;
display: block;
position: absolute;
left: 0px;
top: 100px;
}
.mbox .inbox .one {
left: 0;
}
.mbox .inbox .one .new {
display: inline-block;
text-align: center;
position: absolute;
border: 1px solid #ff6700;
width: 84px;
left: 58px;
height: 25px;
line-height: 20px;
font-size: 12px;
background: #f67000;
color: #fff;
}
.mbox .inbox .one .new span {
position: absolute;
top: 0;
}
.mbox ul li {
float: left;
position: relative;
}
.mbox ul li span.title {
margin: 0 auto;
font-size: 14px;
position: relative;
left: 40%;
top: -75px;
/* text-align: center; */
text-align: center;
color: #444;
}
.price {
color: #f67000;
position: absolute;
top: 138px;
left: 36%;
font-size: 12px;
}
.mbox img {
margin: 40px 20px;
width: 160px;
height: 110px;
}
.p1 {
width: 1226px;
/* height: 614px; */
background: url('http://i1.mifile.cn/a4/xmad_15484281983949_byTuq.jpg') no-repeat;
border: 1px solid #fff;
background-size: contain;
}
.p1 .l1 {
width: 235px;
height: 460px;
background: rgba(0,0,0,0.6);
z-index:9;
}
.p1 .l1 ul li{
display: block;
width:200px;
margin:10px 20px;
padding: 3px;
color:#eee;
font-size: 12px;
}
.p1 .l1 ul li:hover .submenu{
display: block;
}
.p1 .l1 ul li i{
float: right;
}
.submenu{
width:1000px;
color:#444;
background: #fff;
position: absolute;
right:80px;
top:155px;
display: none;
}
.submenu img{
margin:10px 80px;
}
.l2{
color:red;
float:right;
position: absolute;
top:200px;
right:100px;
z-index: 8;
}
.l2 img{
height: 460px;
}
.p2 {
width: 1226px;
background: #fff;
/* border:1px solid #ccc; */
}
.p2 .l1 {
width: 235px;
height: 170px;
background: #5f5750;
margin-right: 0;
}
.p2 .l1 ul {
height: 170px;
}
.p2 .l1 ul li {
color: #ccc;
margin: 2px;
width: 74px;
height: 81px;
text-align: center;
line-height: 80px;
border: 1px solid #6b625a;
padding: 0 3px;
float: left;
}
.p2 .r1 img {
width: 318px;
height: 170px;
margin: 0 5px;
float: left;
}
.p2 .r1 {
height: 170px;
float: right;
}
.ad {
text-align: center;
}
.ad img {
height: 120px;
background: url("http://i1.mifile.cn/a4/xmad_1550742636095_lXaZu.jpg") no-repeat;
}
.p3 {
text-align: left;
padding: 8px;
height: 614px;
}
.p3 .t {
font-size: 18px;
float: left;
}
.rt {
float: right;
}
.rt a {
margin: 0 15px;
}
.p3 .title {
line-height: 28px;
height: 28px;
margin-bottom: 20px;
}
.p3 .rt i {
margin-left: 8px;
}
.rt a:hover {
text-decoration: none;
color: #f67000;
transition: all .5s ease-in-out;
}
.p5 .rt i {
text-align: center;
line-height: 24px;
width: 56px;
height: 24px;
margin: 0 -2px;
border: 1px solid #ccc;
}
i .fa-2 {
border-right: 0px;
}
.p5 .rt a {
width: 50px;
height: 24px;
margin: 0px;
}
.p3 .left {
width: 235px;
float: left;
}
.p3 .left img {
height: 614px;
}
.p3 .right .up ul li {
width: 235px;
height: 300px;
float: left;
background: #eee;
margin: 4px;
}
.p3 .right .down ul li {
width: 235px;
height: 300px;
float: left;
margin: 4px;
background: #eee;
}
.p4box {
height: 614px;
}
.p4 img {
height: 300px;
float: left;
margin: 0 10px;
}
.p4box .left img {
width: 235px;
height: 300px;
}
.mbt {
margin-bottom: 20px;
}
.right ul li {
margin-top: 10px;
float: left;
}
.p4box ul li {
width: 235px;
height: 300px;
float: left;
margin: 4px;
background: #eee;
}
.up ul li {
width: 235px;
height: 300px;
float: left;
text-align: center;
border: 0px solid blue;
}
.up ul li img {
margin: 0;
}
.right ul li img {
margin: 0;
}
.p5 .rec ul li {
width: 235px;
height: 300px;
float: left;
background: #ccc;
margin: 05px;
}
.hot ul li {
width: 296px;
height: 415px;
float: left;
background: #ccc;
margin: 0 5px;
}
.hot img {
height: 220px;
}
.video ul li {
width: 296px;
height: 285px;
float: left;
margin: 0 5px;
background: #eee;
}
.video img {
height: 180px;
}
.footer {
height: 275px;
background: #fff;
}
.footer .top {
line-height: 40px;
}
.footer .top ul li {
margin: 10px;
padding: 10px 52px;
text-align: center;
border-left: 1px solid #e0e0e0;
float: left;
line-height: 15px;
}
.botmenu {
height: 192px;
border-top: 1px solid #ccc;
}
.botmenu dl {
float: left;
margin: 0 40px;
}
.botmenu dl dt {
margin: 20px 0;
}
a:hover .mbox {
display: block;
color: #f67000;
text-decoration: none;
}
.contact {
float: right;
width: 304px;
height: 112px;
border-left: 1px solid #e0e0e0;
text-align: center;
}
.ct {
margin-top: 20px;
}
.ct a {
color: #f67000;
}
.contact a:hover {
color: #fff;
background: #f67000;
transition: all .5s ease-in-out;
}
.top i {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="head">
<div class="h_menu w c">
<div class="m_left l">
<ul>
<li>小米商城</li>
<li>MIUI</li>
<li>loT</li>
<li>云服务</li>
<li>金融</li>
<li>有品</li>
</ul>
</div>
<div class="m_right r">
<ul>
<li>登录</li>
<li>注册</li>
<li>消息通知</li>
<li class='cart'><i class="fa fa-shopping-cart"></i>购物车(0)</li>
</ul>
</div>
</div>
</div>
<div class="w c menu">
<div class="logo">
<img src="http://s01.mifile.cn/i/logo.png" alt="">
</div>
<div class="text">
<ul>
<li>小米手机
<div class="mbox">
<div class="inbox ">
<ul>
<li>
<div class="one">
<span class="new">新品</span>
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/mi9-320.png" alt=""><br>
<span class="title">小米9</span>
<span class="price">2999元起</span>
</div>
</li>
<li>
<div class="one">
<span class="new">新品</span>
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/mi9se-320.png" alt=""><br>
<span class="title">小米9 SE</span>
<span class="price">2999元起</span>
</div>
</li>
<li>
<div class="one">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/mix3-320.png" alt=""><br>
<span class="title">小米Mix3</span>
<span class="price">2999元起</span>
</div>
</li>
<li>
<div class="one">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/qingchun-320.png" alt=""><br>
<span class="title">小米8青春版</span>
<span class="price">2999元起</span>
</div>
</li>
<li>
<div class="one">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/pc-320-220-mi8.png"
alt=""><br>
<span class="title">小米8</span>
<span class="price">2999元起</span>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>红米
<div class="mbox">
<div class="inbox ">
<ul>
<li>
<div class="one">
<span class="new">新品</span>
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/note7320-220.png" alt=""><br>
<span class="title">红米Note7</span>
</div>
</li>
<li>
<div class="one">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/6pro320-220.png" alt=""><br>
<span class="title">红米6 Pro</span>
</div>
</li>
<li>
<div class="one">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/666320.png" alt=""><br>
<span class="title">红米6</span>
</div>
</li>
<li>
<div class="one">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/6A320.png" alt=""><br>
<span class="title">红米6A</span>
</div>
</li>
<li>
<div class="one">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/note5-320-220.png" alt=""><br>
<span class="title">红米Note 5</span>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>电视
<div class="mbox">
<div class="inbox ">
<ul>
<li>
<div class="one">
<span class="new">新品</span>
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/4s75.png" alt=""><br>
<span class="title">小米电视4S 75英寸</span>
</div>
</li>
<li>
<div class="one">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/32.png" alt=""><br>
<span class="title">小米9 SE</span>
</div>
</li>
<li>
<div class="one">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/4a43.png" alt=""><br>
<span class="title">小米Mix3</span>
</div>
</li>
<li>
<div class="one">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/50.png" alt=""><br>
<span class="title">小米8青春版</span>
</div>
</li>
<li>
<div class="one">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/4A-55.jpg" alt=""><br>
<span class="title">小米8</span>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>笔记本</li>
<li>家电</li>
<li>新品</li>
<li>路由器</li>
<li>智能硬件</li>
<li>服务</li>
<li>社区</li>
</ul>
</div>
<div class="sql">
<a>小米9 </a>
<a>小米9 SE</a>
</div>
<div class="sqbt">
<i class="fa fa-search"></i>
</div>
</div>
<div class="clear"></div>
<div class="p1 c">
<div class="l1">
<ul>
<li>手机 电话卡<i class="fa fa-chevron-right"></i>
<div class="submenu">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/mi9-80.png?width=80&height=80" alt="">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/m8se-80.png?width=80&height=80" alt="">
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/note780-80.png?width=80&height=80" alt="">
<img src="http://i1.mifile.cn/f/i/15/goods/sidebar/compare.jpg?width=80&height=80" alt=""><br>
<img src="http://i1.mifile.cn/f/i/g/2015/cn-index/mi9se-80.png?width=80&height=80" alt="">
<img src="" alt="">
</div>
</li><br>
<li>电视 盒子<i class="fa fa-chevron-right"></i></li><br>
<li>笔记本 平板<i class="fa fa-chevron-right"></i></li><br>
<li>家电 插线板<i class="fa fa-chevron-right"></i></li><br>
<li>出行 穿戴<i class="fa fa-chevron-right"></i></li><br>
<li>智能 路由器<i class="fa fa-chevron-right"></i></li><br>
<li>电源 配件<i class="fa fa-chevron-right"></i></li><br>
<li>健康 儿童<i class="fa fa-chevron-right"></i></li><br>
<li>耳机 音箱<i class="fa fa-chevron-right"></i></li><br>
<li>生活 箱包<i class="fa fa-chevron-right"></i></li><br>
</ul>
</div>
<div class="l2"></div>
</div>
<div class="clear"></div>
<div class="p2 mt c">
<div class="l1 l">
<ul>
<li style="border-left:0px;border-top:0;border-bottom:0;">1</li>
<li style="border-left:1px;border-top:0;border-bottom:0;">2</li>
<li style="border-left:0px;border-right:0px;border-top:0;border-bottom:0;">3</li>
<li style="border-left:0px;border-bottom:0;">4</li>
<li style="border-left:0px;border-bottom:0;">5</li>
<li style="border-left:0px;border-bottom:0;border-right:0px;">6</li>
</ul>
</div>
<div class="r1">
<img src="http://i1.mifile.cn/a4/xmad_1550713536261_EJOpq.jpg" alt="">
<img src="http://i1.mifile.cn/a4/xmad_15410029988871_TdzPQ.jpg" alt="">
<img src="http://i1.mifile.cn/a4/xmad_15410599445473_Ivjsb.jpg" alt="">
</div>
</div>
<div class="clear"></div>
<div class="ad mt c">
<img src="http://i1.mifile.cn/a4/xmad_1550742636095_lXaZu.jpg" alt=""></div>
<div class="clear"></div>
<div class="p3 w c">
<div class="title">
<span class="t">手机</span>
<span class="rt"><a href="">查看全部<i class="fa fa-chevron-circle-right"></i></a></span>
</div>
<div class="left">
<img src="http://i1.mifile.cn/a4/xmad_1544580545953_UvEXK.jpg" alt="">
</div>
<div class="right">
<div class="up">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="down">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="ad mt c">
<img src="http://i1.mifile.cn/a4/xmad_15508280422168_bhqAl.jpg" alt="">
</div>
<div class="clear"></div>
<div class="p4 w mt c">
<div class="title">
<span class="t">家电</span>
<span class="rt">
<a href="" style="color:#f67000;border-bottom: 2px solid #f67000;">热门</a>
<a href="">电视影音</a>
<a href="">电脑</a>
<a href="">家居</a>
</span>
</div>
<div class="clear"></div>
<div class="p4box">
<div class="up">
<ul>
<li>
<img src="http://i1.mifile.cn/a4/xmad_15232433421155_vCzhJ.jpg" alt="">
</li>
<li>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="right">
<ul>
<li>
<img src="http://i1.mifile.cn/a4/xmad_15123939053142_dFlAw.jpg">
</li>
<li></li>
<li></li>
<li></li>
<li style="width:234px;height:145px;"></li>
<li style="width:234px;height:145px;"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="ad mt c">
<img src="http://i1.mifile.cn/a4/xmad_15484017634687_Vxaol.jpg" alt="">
</div>
<div class="clear"></div>
<div class="p4 w mt c">
<div class="title">
<span class="t">智能</span>
<span class="rt">
<a href="" style="color:#f67000;border-bottom: 2px solid #f67000;">热门</a>
<a href="">出行</a>
<a href="">健康</a>
<a href="">酷玩</a>
<a href="">路由器</a>
</span>
</div>
<div class="clear"></div>
<div class="p4box w">
<div class="up">
<ul>
<li>
<img src="http://i1.mifile.cn/a4/xmad_15266395374048_JnZQo.jpg" alt="">
</li>
<li>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="right">
<ul>
<li>
<img src="http://i1.mifile.cn/a4/xmad_15501975795809_qmOCe.jpg">
</li>
<li></li>
<li></li>
<li></li>
<li style="width:234px;height:145px;"></li>
<li style="width:234px;height:145px;"></li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div class="ad mt c">
<img src="http://i1.mifile.cn/a4/xmad_15439756480639_IhxpV.jpg" alt="">
</div>
<div class="clear"></div>
<div class="p5 mt c w">
<div class="title"><span>为你推荐</span>
<span class="rt">
<a href=""> <i class="fa fa-chevron-left fa-2;"></i></a>
<a href=""> <i class="fa fa-chevron-right"></i></a>
</span>
</div>
<div class="rec">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="p6 mt c w">
<div class="title"><span>热评产品</span>
</div>
<div class="hot">
<ul>
<li><img src="http://i1.mifile.cn/a4/xmad_15094337975564_BSRIq.jpg" alt=""></li>
<li><img src="http://i1.mifile.cn/a4/54e35fdd-bc68-4a89-bad7-c9c3bb2fc6fe" alt=""></li>
<li><img src="http://i1.mifile.cn/a4/032d0ff1-f77f-4830-a469-f3564d55e0c5" alt=""></li>
<li><img src="http://i1.mifile.cn/a4/97d80b35-152e-4934-af34-402251458e16" alt=""></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="p7 mt c w">
<div class="title"><span>视频</span>
</div>
<div class="video">
<ul>
<li><img src="http://i1.mifile.cn/a4/xmad_15318974928021_cthgC.jpg" alt=""></li>
<li><img src="http://i1.mifile.cn/a4/xmad_15278351912522_frJQc.jpg" alt=""></li>
<li><img src="http://i1.mifile.cn/a4/xmad_15278359339164_dDTJC.jpg" alt=""></li>
<li><img src="http://i1.mifile.cn/a4/xmad_15278358912266_LDHfI.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="clear "></div>
<div class="footer mt c">
<div class="top mt c w">
<ul>
<li style="border:none;">
<i class="fa fa-cog"></i>预约维修
</li>
<li><i class="fa fa-recycle"></i>7天无理由退货</li>
<li><i class="fa fa-cubes"></i>15天免费换货</li>
<li><i class="fa fa-gift"></i>满150元包邮</li>
<li><i class="fa fa-map-marker "></i>520余家售后网点</li>
</ul>
</div>
<div class="clear"></div>
<div class="botmenu w mt c">
<dl>
<dt>帮助中心</dt>
<dd><a href="">帐户管理</a></dd>
<dd><a href="">购物指南</a></dd>
<dd><a href="">订单操作</a></dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd><a href="">售后政策</a></dd>
<dd><a href="">自助服务</a></dd>
<dd><a href="">相关下载</a></dd>
</dl>
<dl>
<dt>线下门店</dt>
<dd><a href="">小米之家</a></dd>
<dd><a href="">服务网点</a></dd>
<dd><a href="">授权体验店</a></dd>
</dl>
<dl>
<dt>关于小米</dt>
<dd><a href="">了解小米</a></dd>
<dd><a href="">加入小米</a></dd>
<dd><a href="">投资者关系</a></dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd><a href="">新浪微博</a></dd>
<dd><a href="">官方微信</a></dd>
<dd><a href="">联系我们</a></dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd><a href="">F码通道</a></dd>
<dd><a href="">礼物码</a></dd>
<dd><a href="">防伪查询</a></dd>
</dl>
<div class="contact mt">
<span style="color:#f67000;font-size:20px;font-weight:600;">400-100-5678</span> <br>
<span style="font-size:12px;margin-bottom:-5px;">周一至周日 8:00-18:00 <br>
（仅收市话费）</span><br>
<div class="ct">
<a href="" style="border:1px solid #f67000;padding:5px;margin-top:30px;"><i
class="fa fa-commenting-o"></i>联系客服</a>
</div>
</div>
</div>
</div>
</body>
</html>
Correcting teacher：灭绝师太Correction time：2019-03-08 09:28:50
Teacher's summary：完成的很好,相同的布局做一个就可以多次利用!
