小米商城的大框架布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米商城-小米9-小米MIX 3</title>
<link rel = "icon" type="image/x-icon" href ="./favicon.ico">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<script type="text/javascript" src="static/js/jquery.js"></script>
<style>
*{margin: 0;padding:0;}
ul{list-style: none;}
a{text-decoration: none;}
/*头部样式*/
.head{width: 100%;height: 40px;background:#333;}
.menu{width: 1226px;background: red;height: 40px;margin: 0 auto;}
/*内容样式*/
.contents{width: 1226px;margin: 0 auto;}
/*内容区上面部分*/
.contents_top{width: 1226px;background-color: #fff;}
.contents_nav{width: 1226px;height: 100px;background-color: #fff;}
.contents_banner_img{width: 1226px;height: 644px;margin-bottom: 27px;}
.contents_banner{width: 1226px;height: 460px;background-color: #F0F4FF;}
.contents_img{width: 1240px;height: 170px;margin-top: 17px;}
.contents_img_l{width: 234px;height:170px;background: #333;float: left;}
.contents_img img{float: left;margin-left: 14.7px;}
/*内容区下面部分*/
.contents_bottom{width: 1226px;height: 6774px;background-color: #F5F5F5;margin-top: 20px;}
h2{display: block;width: 1226px;height: 57.6px;font-size: 22px;font-weight:200;line-height:58px;color: #333;}
.contents_phone{width: 1240px;height: 628px;margin-bottom: 20px;}
.contents_phone_l{height: 614px;width: 234px;background: #fff;float: left;background: url('../images/midAD4.jpg') no-repeat;background-size: 234px 614px ; }
.contents_phone_r{height: 614px;width: 992px;background: red;float: left;}
.contents_appliances{width: 1226px;height: 628px;margin-bottom: 20px;}
.contents_appliances_l{height: 614px;width: 234px;background: #fff;float: left;}
.contents_appliances_r{height: 614px;width: 992px;background: red;float: left;}
.contents_Intelligence{width: 1226px;height: 628px;margin-bottom: 20px;}
.contents_Intelligence_l{height: 614px;width: 234px;background: #fff;float: left;}
.contents_Intelligence_r{height: 614px;width: 992px;background: red;float: left;}
.contents_collocation{width: 1226px;height: 628px;margin-bottom: 20px;}
.contents_collocation_l{height: 614px;width: 234px;background: #fff;float: left;}
.contents_collocation_r{height: 614px;width: 992px;background: red;float: left;}
.contents_parts{width: 1226px;height: 628px;margin-bottom: 20px;}
.contents_parts_l{height: 614px;width: 234px;background: #fff;float: left;}
.contents_parts_r{height: 614px;width: 992px;background: red;float: left;}
.contents_periphery{width: 1226px;height: 628px;margin-bottom: 20px;}
.contents_periphery_l{height: 614px;width: 234px;background: #fff;float: left;}
.contents_periphery_r{height: 614px;width: 992px;background: red;float: left;}
.contents_Recommend{width: 1240px;height: 314px;background: red;margin-bottom: 20px;}
.contents_product{width: 1240px;height: 415px;background: red;margin-bottom: 20px;}
.contents_content{width: 1240px;height: 420px;background: red;margin-bottom: 20px;}
.contents_video{width: 1240px;height: 285px;background: red;margin-bottom: 20px;}
/*底部样式*/
.footer{width: 1226px;height:500px;margin: 0 auto;}
.footer_service{width: 1226px;height:80px;background: #fff;position: relative;}
.footer_service ul{width: 1226px;height:25px;line-height: 80px;position: absolute;top: 50%;margin-top: -12.5px;}
.footer_service li{width: 243.74px;height:25px;float: left;line-height: 25px;text-align: center;font-size: 16px;border-right: 1px solid #ccc;}
.footer_service a{height:17.6px;display:inline-block;line-height: 17.6px;color: #333;}
.footer_service a:hover{color: #ff6700;}
.footer_links-clearfix{width: 1226px;height:192px;padding: 40px 0;}
dl{width: 160px;height: 112px;float: left;}
dt{font-size: 14px;margin: -1px 0 26px;line-height: 1.25;color: #424242;}
dd{margin:10px 0 10px 0;color: #757575;font-size: 12px;}
.col-contact{width:252px;height:112px;float: left;text-align: center;color: #757575;font-size: 12px;}
.col-contact_p1{margin: 0 0 5px 0;font-size: 22px;line-height: 1;color: #ff6700;}
.col-contact_p2{margin: 0 0 16px 0;font-size: 12px;}
.col-contact a{background: #fff;color: #ff6700;border: 1px solid #ff6700;width: 120px;height: 30px;margin:0 auto;display:block;}
.footer_site-info{width: 1267.2px;height:229.8px;font-size: 12px;}
.footer_site-info_logo{width: 57px;height: 57px;float: left;background: url(../images/footlogo.png);}
.footer_site-info_p1{width: 1159px;height: 18.4px;line-height: 18px;}
.footer_site-info_p1 a{color:#757575;border-right: 1px solid #ccc;margin-left: 5px;margin-right: 5px;}
.footer_site-info_p2{color: #b0b0b0;}
.footer_site-info_p2 a{margin-top:5px;color: #b0b0b0;}
.footer_site-info p{float: left;margin-left: 10px;}
.footer_site-info img{width: 85px;height: 28px;}
</style>
</head>
<body>
<div>
<div></div>
</div>
<div>
<div>
<div></div>
<div>
<div></div>
<div>
<div></div>
<div><img src="static/images/midAD1.jpg"></div>
<div><img src="static/images/midAD2.jpg"></div>
<div><img src="static/images/midAD3.jpg"></div>
</div>
</div>
<div style="clear:both;"></div>
<div><img src="static/images/longAD1.jpg" width="1226px height:120px" style="margin-bottom: 37px;"></div>
</div>
<div>
<h2>手机</h2>
<div>
<div></div>
<div></div>
</div>
<div>
<img src="static/images/longAD2.jpg" width="1226px" height="120px">
</div>
<div style="clear: both;"></div>
<h2>家电</h2>
<div>
<div></div>
<div></div>
</div>
<div>
<img src="static/images/longAD3.jpg" width="1226px" height="120px">
</div>
<h2>智能</h2>
<div>
<div></div>
<div></div>
</div>
<div>
<img src="static/images/longAD4.jpg" width="1226px" height="120px">
</div>
<h2>搭配</h2>
<div>
<div ></div>
<div ></div>
</div>
<div>
<img src="static/images/longAD5.jpg" width="1226px" height="120px">
</div>
<h2>配件</h2>
<div >
<div ></div>
<div ></div>
</div>
<div>
<img src="static/images/longAD6.png" width="1226px" height="120px">
</div>
<h2>周边</h2>
<div >
<div ></div>
<div ></div>
</div>
<div>
<img src="static/images/longAD7.jpg" width="1226px" height="120px">
</div>
<h2>为您推荐</h2>
<div>
</div>
<h2>热评产品</h2>
<div>
</div>
<h2>内容</h2>
<div>
</div>
<h2>视屏</h2>
<div>
</div>
</div>
</div>
<div>
<div>
<ul>
<li><a href="">预约维修服务</a></li>
<li><a href="" style="color: #ff6700;">7天无理由退货</a></li>
<li><a href="">15天免费换货</a></li>
<li><a href="">满150元包邮</a></li>
<li><a href="">520余家售后网点</a></li>
</ul>
</div>
<hr>
<div>
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
<dl>
<dt>线下门店</dt>
<dd>小米之家</dd>
<dd>服务网点</dd>
<dd>授权体验店</dd>
</dl>
<dl>
<dt>关于小米</dt>
<dd>了解小米</dd>
<dd>加入小米</dd>
<dd>投资者关系</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
<dl style="border-right:1px solid #ccc;">
<dt>特色服务</dt>
<dd>f码通道</dd>
<dd>礼物码</dd>
<dd>防伪查询</dd>
</dl>
<div>
<p>400-100-5678</p>
<p>周一至周日 8:00-18:00(仅收市话费)</p>
<a href="">联系客服</a>
</div>
</div>
<div>
<div>
</div>
<p>
<a href="">小米商城</a>
<a href="">MIUI</a>
<a href="">米家</a>
<a href="">米聊</a>
<a href="">多看</a>
<a href="">游戏</a>
<a href="">路由器</a>
<a href="">米粉卡</a>
<a href="">政企服务</a>
<a href="">小米天猫店</a>
<a href="">隐私政策</a>
<a href="">商城用户协议</a>
<a href="">账号协议</a>
<a href="">问题反馈</a>
<a href="">廉正举报</a>
<a href="">诚信合规</a>
<a href="">Setlect Region</a>
</p>
<p>
<a href="">mi.com</a>
<a href="">京ICP证110507号</a>
<a href="">京ICP备10046444号</a>
<a href="">京公网安备11010802020134号</a>
<a href="">京网文[2017]1530-131号</a><br>
<a href="">（京）网械平台备字（2018）第00005号</a>
<a href="">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a>
<a href="">营业执照</a>
<a href="">医疗器械公告</a><br>
<a href="">增值电信业务许可证</a>
<a href=""> 网络食品经营备案（京）【2018】WLSPJYBAHF-12</a>
<a href="">食品经营许可证 </a><br>
违法和不良信息举报电话:<a href="">185-0130-1238</a>
<a href="">知识产权侵权投诉</a>
本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</p>
<div style="clear: both;"></div>
<div>
<img src="static/images/footericon1.png" style="margin-left: 65px;">
<img src="static/images/footericon2.png">
<img src="static/images/footericon3.png">
<img src="static/images/footericon4.png">
<img src="static/images/footericon5.png">
</div>
</div>
</div>
</body>
</html>由于不能上传文件,就将css部分直接加到html页面上,到这里小米商城前端的大体框架已经成功