小米商城仿制底部手写

原创 2018-12-08 23:59:23 6
摘要:<!DOCTYPE html> <html> <head> <title>小米商城仿制</title> <meta charset="utf-8"> <link rel="shortcut icon" type="i
<!DOCTYPE html>
<html>
<head>
	<title>小米商城仿制</title>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png">
	<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="static/css/style.css">

</head>
<body>
	<!--头部-->
	<div class="header">

		<div class="menu"></div>

</div>


	<!--中间主体部分-->
	<div class="contents">
		<div class="content">
			<div class="contentMenu">中间导航</div>
			<div class="contentPic">
				<div class="contentPic_l"></div>
				<div class="contentPic_r"></div>
			</div>
			<div class="clear"></div>
			<div class="contentPic_ul">
				<div class="contentPic_ul_1"> </div>
				<div class="contentPic_ul_0" style="background: url(static/images/midAD1.jpg); margin-right: 13px;"></div>
				<div class="contentPic_ul_0" style="background: url(static/images/midAD2.jpg); margin-right: 13px;"></div>
				<div class="contentPic_ul_0" style="background: url(static/images/midAD3.jpg);"></div>
			</div>
			<div class="clear"></div>
<!-- 小米闪购 -->
			<div class="contentShop">
				<h1>小米闪购</h1>
				<div class="contentShop_1" style="margin-right: 12.7px; border-top: 1px solid red;"></div>
				<div class="contentShop_1" style="margin-right: 12.7px; border-top: 1px solid #FFAC13;"></div>
				<div class="contentShop_1" style="margin-right: 12.7px; border-top: 1px solid #83C44E;"></div>
				<div class="contentShop_1" style="margin-right: 12.7px; border-top: 1px solid #2196F3;"></div>
				<div class="contentShop_1" style="border-top: 1px solid #E53935;"></div>				
			</div>
			<div class="clear"></div>
			

			<div class="contentImg" style="background: url(static/images/longAD1.jpg);"></div>
			<div class="contentUL">手机</div>
			<div  class="contentPhone">
				<div class="contentPhone_left" style="margin-right: 12px;"></div>
				<div class="contentPhone_right">
					<div  style="margin-right: 12px;"></div>
					<div  style="margin-right: 12px;"></div>
					<div style="margin-right: 12px;"></div>
					<div></div>
					<div style="margin-right: 12px; margin-top: 12.5px;"></div>
					<div style="margin-right: 12px; margin-top: 12.5px;"></div>
					<div style="margin-right: 12px; margin-top: 12.5px;"></div>
					<div style=" margin-top: 12.5px;"></div>
				</div>

			</div>
			<div class="clear"></div>

			<div class="contentImg" style="background: url(static/images/longAD2.jpg);"></div>
			<div class="contentUL">智能</div>
			<div  class="contentPhone">
				<div class="contentPhone_znleft" style="margin-right: 12px;"><img src="https://i1.mifile.cn/a4/xmad_15266395374048_JnZQo.jpg"></div>
				<div class="contentPhone_znright" style="margin-right: 12px;"></div>
				<div class="contentPhone_znright" style="margin-right: 12px;"></div>
				<div class="contentPhone_znright" style="margin-right: 12px;"></div>				
				<div class="contentPhone_znright" style=""></div>
				<div class="contentPhone_znleft" style="margin-right: 12px;margin-top: 12.5px;"><img src="https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg"></div>
				<div class="contentPhone_znright" style="margin-right: 12px;margin-top: 12.5px;"></div>
				<div class="contentPhone_znright" style="margin-right: 12px;margin-top: 12.5px;"></div>
				<div class="contentPhone_znright" style="margin-right: 12px;margin-top: 12.5px;"></div>
				<div class="contentPhone_znright" style="margin-top: 12.5px;"></div>
			</div>
			<div class="clear"></div>

			<div class="contentImg" style="background: url(static/images/longAD3.jpg);"></div>
			<div class="contentUL">家电</div>
			<div  class="contentPhone">
				<div class="contentPhone_znleft" style="margin-right: 12px;"><img src="https://i1.mifile.cn/a4/xmad_15232433421155_vCzhJ.jpg"></div>
				<div class="contentPhone_znright" style="margin-right: 12px;"></div>
				<div class="contentPhone_znright" style="margin-right: 12px;"></div>
				<div class="contentPhone_znright" style="margin-right: 12px;"></div>				
				<div class="contentPhone_znright" style=""></div>
				<div class="contentPhone_znleft" style="margin-right: 12px;margin-top: 12.5px;"><img src="https://i1.mifile.cn/a4/xmad_15123939053142_dFlAw.jpg"></div>
				<div class="contentPhone_znright" style="margin-right: 12px;margin-top: 12.5px;"></div>
				<div class="contentPhone_znright" style="margin-right: 12px;margin-top: 12.5px;"></div>
				<div class="contentPhone_znright" style="margin-right: 12px;margin-top: 12.5px;"></div>
				<div class="contentPhone_znright" style="margin-top: 12.5px;">
					<div class="contentPhone_znr01"></div>
					<div class="contentPhone_znr02" style=" "></div>
				</div>
			</div>
			<div class="clear"></div>
			<div class="contentImg" style="background: url(static/images/longAD4.jpg);"></div>

			<div></div>
		</div>
	</div>

	<!--底部-->
	<div class="footer">
		<div class="footer01">
		<ul>
        <li><a rel="nofollow" href="#" target="_blank"><span class="fa fa-wrench"></span>预约维修服务</a><span class="footer01_line"></span></li>
        <li><a rel="nofollow" href="#" target="_blank"><span class="fa fa-rotate-right"></span>7天无理由退货</a><span class="footer01_line"></span></li>
        <li><a rel="nofollow" href="#" target="_blank"><span class="fa fa-refresh"></span>15天免费换货</a><span class="footer01_line"></span></li>
        <li><a rel="nofollow" href="#" target="_blank"><span class="fa fa-gift"></span>满150元包邮</a><span class="footer01_line"></span></li>
        <li><a rel="nofollow" href="#" target="_blank"><span class="fa fa-map-marker"></span>520余家售后网点</a></li>
       </ul>
		</div>
		<div class="footer_line"></div>
         <div class="clear"></div>
		<div class="footer02">
			<div class="footer02_1">
			<ul>
				<li>
				<span>帮助中心</span><ul class="ul01">
				<li><a rel="nofollow" href="#" target="_blank">账户管理</a></li>
				<li><a rel="nofollow" href="#" target="_blank">购物指南</a></li>
				<li><a rel="nofollow" href="#" target="_blank">订单操作</a></li></ul></li>
			<li>
				<span>帮助中心</span><ul class="ul01">
				<li><a rel="nofollow" href="#" target="_blank">账户管理</a></li>
				<li><a rel="nofollow" href="#" target="_blank">购物指南</a></li>
				<li><a rel="nofollow" href="#" target="_blank">订单操作</a></li></ul></li>
				<li>
				<span>帮助中心</span><ul class="ul01">
				<li><a rel="nofollow" href="#" target="_blank">账户管理</a></li>
				<li><a rel="nofollow" href="#" target="_blank">购物指南</a></li>
				<li><a rel="nofollow" href="#" target="_blank">订单操作</a></li></ul></li>
				<li>
				<span>帮助中心</span><ul class="ul01">
				<li><a rel="nofollow" href="#" target="_blank">账户管理</a></li>
				<li><a rel="nofollow" href="#" target="_blank">购物指南</a></li>
				<li><a rel="nofollow" href="#" target="_blank">订单操作</a></li></ul></li>
				<li>
				<span>帮助中心</span><ul class="ul01">
				<li><a rel="nofollow" href="#" target="_blank">账户管理</a></li>
				<li><a rel="nofollow" href="#" target="_blank">购物指南</a></li>
				<li><a rel="nofollow" href="#" target="_blank">订单操作</a></li></ul></li>
				<li>
				<span>帮助中心</span><ul class="ul01">
				<li><a rel="nofollow" href="#" target="_blank">账户管理</a></li>
				<li><a rel="nofollow" href="#" target="_blank">购物指南</a></li>
				<li><a rel="nofollow" href="#" target="_blank">订单操作</a></li></ul></li>		

			</ul>
		</div>
		<div class="footer02_2"></div>
		<div class="footer02_3">
			<p class="phone">000-520-1314</p>
            <p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p>
            <button><span class="fa fa-commenting "></span> 联系客服</button>
		</div>
		</div>
<div class="clear"></div>
<div class="footers03">
		<div class="footer03">
			<div class="footer03_1">
				<img src="https://s01.mifile.cn//i/logo.png">
			</div>
			<div class="footer03_2">
				<div class="footer03_2_1">
					 
	<a rel="nofollow" href="#" target="_blank">小米商城</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">MIUI</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">米家</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">米聊</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">多看</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">游戏</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">路由器</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">米粉卡</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">政企服务</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">小米天猫店</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">隐私政策</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">问题反馈</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">廉正举报</a><span >|</span>
	<a rel="nofollow" href="#" target="_blank">诚信合规</a><span >|</span>
	<a rel="nofollow" href="#" data-toggle="modal">Select Region</a>

				</div>
				<div class="footer03_2_2">
					    <p>
<a href="#" target="_blank" title="mi.com">mi.com</a> 京ICP证110507号 
<a href="#" target="_blank" rel="nofollow">京ICP备10046444号</a> 
<a rel="nofollow" href="#" target="_blank">京公网安备11010802020134号 </a>
<a href="#" target="_blank">京网文[2017]1530-131号</a> <br>
<a href="#" target="_blank">(京)网械平台备字(2018)第00005号</a> 
<a href="#" target="_blank">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a> 
<a href="#" target="_blank">营业执照</a>
<a href="#" target="_blank">医疗器械公告</a>
<br>违法和不良信息举报电话:185-0130-1238,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</p>

				</div>
			</div>
			<div class="footer03_3">
				 <a  rel="nofollow" href="#" target="_blank"><img  rel="nofollow" src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="TRUSTe Privacy Certification" /></a>
                    <a  rel="nofollow" href="#" target="_blank"><img  rel="nofollow" src="https://s01.mifile.cn/i/v-logo-2.png" alt="诚信网站" /></a>
                    <a  rel="nofollow" href="#" target="_blank"><img  rel="nofollow" src="https://s01.mifile.cn/i/v-logo-1.png" alt="可信网站" /></a>
                    <a  rel="nofollow" href="#" target="_blank"><img  rel="nofollow" src="https://s01.mifile.cn/i/v-logo-3.png" alt="网上交易保障中心" /></a>
                    <a  rel="nofollow" href="#" target="_blank"><img  rel="nofollow" src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="诚信经营 放心消费" /></a>

			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="bottomtext">
		探索黑科技,为小米而生!!!

	</div>

	</div>


</body>
</html>

css

*{margin: 0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none;color: #ccc;cursor: pointer;}
.clear{clear: both;}

/*头部*/
.header{width: 100%;height: 40px;background: #333;}
.menu{background: #ccc;width: 1226px;height: 40px;margin: 0px auto;}

/*主体部分*/
.content{/*background: #ccc;*/width: 1226px;margin: 0px auto;}
.contentMenu{background: #ccc;height: 90px;margin: 10px auto;}
.contentPic{margin: 10px auto;}
.contentPic_l{width: 246px;height: 480px;background: #ccc; float: left;}
.contentPic_r{width: 980px;height: 480px;background: blue; float: left;}
.contentPic_ul{margin: 10px auto;}
.contentPic_ul_1{width: 235px;background: #5f5750;height: 170px;margin-right: 13px;float: left;}
.contentPic_ul_0{ width: 317px;height: 170px;float: left; }
/*小米闪购*/
.contentShop{margin: 10px auto;}
.contentShop_1{width: 235px;height:340px;background: #ccc;float: left;}
.contentImg{background: #ccc;height: 100px;margin: 10px auto;}
.contentUL{background: #ccc;height: 80px;margin: 10px auto;}
.contentPhone{margin: 10px auto;}
.contentPhone_left{height: 614px;width: 234px; background: url(../images/buy/手机AD111.jpg); float: left;}
.contentPhone_right{height: 614px;width: 980px;float: left;}
.contentPhone_right div{height: 300px;width: 235px;background: #ccc;float: left;}
/*智能*/
.contentPhone_znleft{width: 234px;height: 300px;float: left;}
.contentPhone_znleft img{width: 234px;height: 300px;}
.contentPhone_znright{width: 236px;height: 300px;background: #888;float: left;}
.contentPhone_znr01{height: 145px;width: 236px; background: red;}
.contentPhone_znr02{height: 145px;width: 236px; background: red;margin-top: 10px;}
/*网页底部*/
.footer{width: 100%;margin: 10px auto;}
.footer_line{width: 1226px;margin: 10px auto;border-bottom: 1px solid #e0e0e0;}

.footer01{width: 1226px;height: 50px;line-height: 50px; margin: 0px auto; text-align: center;color: #616161;}
.footer01 ul{ }
.footer01 li{list-style: none;float: left;margin-left: 50px;height: 50px; }
.footer01 li a{color: #616161;}
.footer01 li:hover a{color: red;}
.fa{margin-right: 4px;}
.footer01_line{font-size: 20px;color:#616161;border-left: 1px solid #e0e0e0;margin:0px 36px;}

.footer02{width: 1226px;margin: 10px auto;}
.footer02_1{width: 970px;height: 170px;  float: left; margin-top: 20px;}
.footer02_1{}
.footer02_1 li{list-style: none;width: 150px;height: 170px;margin-right: 10px;float: left;}
.footer02_1 li span{color:#424242; font-size: 14px;}
.ul01{margin-top: 20px;}
.ul01 li{list-style: none;width: 150px;height: 25px;line-height: 25px;}
.ul01 li a{font-size: 12px; color: #757575;}
.ul01 li:hover a{color: red;}

.footer02_2{width: 2px;height: 170px;border-left: 1px solid #e0e0e0; float: left;}
.footer02_3{width: 250px;height: 170px;float: left;margin-left: 2px; text-align: center;}
.phone{font-size: 18px;color: red;margin-top: 20px;}
.time{font-size: 12px;color: #000;margin-top: 5px;line-height: 20px;}
.footer02_3 button {width: 118px;height: 28px;font-size: 12px;line-height:28px;border: 1px solid #ff6700;color:#ff6700;background: #fff;margin-top: 20px;text-align: center; }
.footer02_3 button:hover{background:#ff6700;color: #fff; }

.footers03{width: 100%;background: #FAFAFA;}
.footer03{width: 1226px;margin: 10px auto;}
.footer03_1{float: left;width: 60px;margin-right: 10px;}
.footer03_1 img{margin-top: 20px;}
.footer03_2{float: left;width: 900px; margin-top: 20px;}
.footer03_2_1{width: 900px;height: 30px;}
.footer03_2_1 a{font-size: 12px;color: #757575;}
.footer03_2_1 a:hover{color: red;}
.footer03_2_1 span{color: #ccc; margin:0px 2px;}

.footer03_2_2{width: 900px;height: 50px;}
.footer03_2_2 p{font-size: 12px;color: #C1C0B0;}
.footer03_2_2 a{font-size: 12px;color: #C1C0B0;}
.footer03_3{float: left;width: 200px;height: 100px;margin-top:20px; margin-left: 20px;}
.footer03_3 img{width: 85px; height: 23px; margin: 5px;}

.bottomtext{width: 1226px;height: 50px;line-height: 50px; margin: 10px auto;text-align: center; font-size: 20px;font-family: "楷体"; color: #BABABA;}


批改老师:韦小宝批改时间:2018-12-09 09:07:38
老师总结:作业不需要提交两篇的!课后自己多练习就可以了!并不需要重复提交的!

发布手记

热门词条