abstract:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
<!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">
<title>小米商城首页</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
list-style: none;
text-decoration: none;
}
a{
color: #ccc;
cursor: pointer;
}
.clear{
clear:both;
}
.header{
width: 100%;
height: 40px;
background: black;
}
.header_menu{
width: 1226px;
height: 40px;
/* background: pink; */
margin:0 auto;
color:white;
}
.content-menu-right ul li{
float: left;
list-style: none;
font-size: 10px;
line-height: 40px;
}
.content-menu-left{
float:right;
font-size: 12px;
}
.content-menu-left ul li{
float:left;
list-style: none;
height: 40px;
line-height: 40px;
right:0px;
}
span{
}
.content-top{
width: 1226px;
height: 66px;
line-height: 66px;
margin: 10px auto;
float:left;
}
.content_menu_ul{
}
.content_menu_ul li{
list-style:none;
float: left;
margin-right:10px;
}
.content_form{
width: 1226px;
height: 460px;
background: pink;
}
.content_form_menu{
width: 246px;
height: 460px;;
background: #ccc;
}
.content-picshop{
width: 1226px;
height: 170px;
background:yellow;
}
.content-picshop_1{
width: 235px;height: 170px;background: lightblue;margin-right:14px;float: left
}
.content-picshop_2,.content-picshop_3,.content-picshop_4{
height: 170px;width: 310px;background: red;float: left;margin-right: 14px;
}
.content-pixsg{
width: 1226px;height: 420px;background: #ccc;
}
.content-pixsg_1,.content-pixsg_2,.content-pixsg_3,.content-pixsg_4,.content-pixsg_5{
width: 235px;height:340px;background: lightblue;margin-right: 10px;float: left;
}
.content-bottom{
width: 100%;
height: 100px;
background: #ccc;
}
.content-bottom1{
margin:0 auto;
width: 1226px;
height: 76px;
background: pink;
}
.foot-top_li_1{
}
</style>
</head>
<body>
<div>
<!-- 头部 -->
<div class="header">
<div class="header_menu">
<div class="content-menu-right">
<ul>
<li><a href="#">小米商城<span>|</span></a></li>
<li><a href="#">MIUI<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="#">SelctRegion</a></li>
</ul>
</div>
<div class="content-menu-left">
<ul>
<li><a href="#">登陆<span>|</span></a></li>
<li><a href="#">注册<span>|</span></a></li>
<li><a href="#">我的订单<span>|</span></a></li>
<li><a href="#">购物车</a></li>
</ul>
</div>
</div>
</div>
内容页
<div class="content-top">
<div class="content">
<div class="content_menu">
<div class="content_menu_pic" style="float: left">
<img src="static/img/footlogo.png" alt="">
<img src="static/img/logoAD.gif" alt="">
</div>
<div class="content_menu_ul">
<ul>
<li>小米手机</li>
<li>红米</li>
<li>电视</li>
<li>笔记本</li>
<li>盒子</li>
<li>新品</li>
<li>路由器</li>
<li>智能硬件</li>
<li>服务</li>
<li>社区</li>
</ul>
</div>
<div class="clear"></div>
<div class="content_form" >
<div class="content_form_menu" ></div>
<div class="content_form_pic">
</div>
</div>
<div class="clear"></div>
<div class="content-picshop">
<div class="content-picshop_1"></div>
<div class="content-picshop_2"></div>
<div class="content-picshop_3"></div>
<div class="content-picshop_4"></div>
</div>
<div class="clear"></div>
<div class="content-pixsg">
<h2>小米闪购</h2>
<div class="content-pixsg_1"></div>
<div class="content-pixsg_2"></div>
<div class="content-pixsg_3"></div>
<div class="content-pixsg_4"></div>
<div class="content-pixsg_5"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Correcting teacher:天蓬老师Correction time:2019-08-29 15:33:47
Teacher's summary:代码应该放在代码块中提交, 下次留意 一下