小米商城内容布局
关超2019-04-25 10:50:45218<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>微省钱商城</title>
<script src="js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="img/footlogo.png" />
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="menu">
<ul class="header_left">
<li><a href="#">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">IOT</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><a href="#">企业服务</a><span>|</span></li>
<li><a href="#">SelectRegion</a></li>
</ul>
<div class="header_right">
<ul>
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="shop/order.html">我的订单</a></li>
<li class="header_right_li"><a href="shop/cart.html"><i class="fa fa-shopping-cart" ></i> 购物车 ( 0 )</a>
<div>购物车中还没有商品，赶紧选购吧！</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 主体部分 -->
<div class="contents">
<div class="content">
<div class="contentMenu">
<div class="contentMenu_pic">
<img src="img/footlogo.png" style=" margin:5px 0px; margin-right:10px;"/>
<img src="img/logoAD.gif" />
</div>
<ul class="contentMenu_ul">
<li>小米手机
<div class="MI_phone">
<div class="MI_phoneDiv">
<div class="MI_phone1">
<div class="new">新品</div>
<div class="MI_phone_shop">
<img src="img/phone/phone1.png" /><br/>
<a href="#">小米2S</a><br />
<a href="#" style="color:#ff6700">3299元</a>
</div>
</div>
<span></span>
<div class="MI_phone1">
<div class="new">新品</div>
<div class="MI_phone_shop">
<img src="img/phone/phone1.png" /><br/>
<a href="#">小米2S</a><br />
<a href="#" style="color:#ff6700">3299元</a>
</div>
</div>
<span></span>
<div class="MI_phone1">
<div class="new">新品</div>
<div class="MI_phone_shop">
<img src="img/phone/phone1.png" /><br/>
<a href="#">小米2S</a><br />
<a href="#" style="color:#ff6700">3299元</a>
</div>
</div>
<span></span>
<div class="MI_phone1">
<div class="new">新品</div>
<div class="MI_phone_shop">
<img src="img/phone/phone1.png" /><br/>
<a href="#">小米2S</a><br />
<a href="#" style="color:#ff6700">3299元</a>
</div>
</div>
<span></span>
<div class="MI_phone1">
<div class="new">新品</div>
<div class="MI_phone_shop">
<img src="img/phone/phone1.png" /><br/>
<a href="#">小米2S</a><br />
<a href="#" style="color:#ff6700">3299元</a>
</div>
</div>
<span></span>
<div class="MI_phone1">
<div class="new">新品</div>
<div class="MI_phone_shop">
<img src="img/phone/phone1.png" /><br/>
<a href="#">小米2S</a><br />
<a href="#" style="color:#ff6700">3299元</a>
</div>
</div>
</div>
</div>
</li>
<li>MIUI</li>
<li>米家</li>
<li>米聊</li>
<li>多看</li>
<li>游戏</li>
<li>路由器</li>
<li>米粉卡</li>
<li>政企服务</li>
<li>小米天猫店</li>
</ul>
<div class="contentMenu_form">
<form>
<input type="text" name = "" />
<div class="contentMenu_form_a">
<a href="#" >电视新品</a>
<a href="#" >618预热</a>
</div>
<div class="button"><i class="fa fa-search"></i></div>
</form>
</div>
</div>
<div class="contentPic">
<div class="contentPic_l">
<ul class="content_pic_ul">
<li><a href="">手机 电话卡 </a><i class="fa fa-angle-right"></i>
<div class="contentPic_l_menu">
<div><img src="img/phone/phone1.png" /><a>红米6A</a></div>
<div><img src="img/phone/phone2.png" /><a>小米plus</a></div>
<div><img src="img/phone/phone3.png" /><a>移动4G</a></div> <div><img src="img/phone/phone1.png" /><a>红米6A</a></div>
<div><img src="img/phone/phone2.png" /><a>小米plus</a></div>
<div><img src="img/phone/phone3.png" /><a>移动4G</a></div>
<div><img src="img/phone/phone1.png" /><a>红米6A</a></div>
<div><img src="img/phone/phone2.png" /><a>小米plus</a></div>
<div><img src="img/phone/phone3.png" /><a>移动4G</a></div>
<div><img src="img/phone/phone1.png" /><a>红米6A</a></div>
<div><img src="img/phone/phone2.png" /><a>小米plus</a></div>
<div><img src="img/phone/phone3.png" /><a>移动4G</a></div>
</div>
</li>
<li><a href="">电视机 盒子</a><i class="fa fa-angle-right"></i></li>
<li><a href="">智能 家电 </a><i class="fa fa-angle-right"></i></li>
<li><a href="">健康 家居 </a><i class="fa fa-angle-right"></i></li>
<li><a href="">出行 儿童 </a><i class="fa fa-angle-right"></i></li>
<li><a href="">路由器 手机配件 </a><i class="fa fa-angle-right"></i></li>
<li><a href="">移动电源 插线板</a><i class="fa fa-angle-right"></i></li>
<li><a href="">耳机 音箱 </a><i class="fa fa-angle-right"></i>
<div class="contentPic_l_menu">
<div><img src="img/phone/phone1.png" /><a>红米6A</a></div>
<div><img src="img/phone/phone2.png" /><a>小米plus</a></div>
<div><img src="img/phone/phone3.png" /><a>移动4G</a></div> <div><img src="img/phone/phone1.png" /><a>红米6A</a></div>
<div><img src="img/phone/phone2.png" /><a>小米plus</a></div>
<div><img src="img/phone/phone3.png" /><a>移动4G</a></div>
<div><img src="img/phone/phone1.png" /><a>红米6A</a></div>
<div><img src="img/phone/phone2.png" /><a>小米plus</a></div>
<div><img src="img/phone/phone3.png" /><a>移动4G</a></div>
<div><img src="img/phone/phone1.png" /><a>红米6A</a></div>
<div><img src="img/phone/phone2.png" /><a>小米plus</a></div>
<div><img src="img/phone/phone3.png" /><a>移动4G</a></div>
</div>
</li>
<li><a href="">生活 米兔</a> <i class="fa fa-angle-right"></i></li>
</ul>
</div>
<div class="contentPic_r">
<div class="layui-carousel" id="test1" lay-filter="test1">
<div carousel-item="">
<div><img src="img/a.jpg"></div>
<div><img src="img/b.jpg"></div>
<div><img src="img/c.jpg"></div>
<div><img src="img/d.jpg"></div>
<div><img src="img/e.jpg"></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="contentPic_ul">
<div class="contentPic_ul_1">
<ul>
<li style=&