abstract：没有按照老师视频中的来写。自己仿照现在小米商城首页做的。首页html：<!doctype html> <html> <head> <meta charset="UTF-8"> <title>小米首页<
没有按照老师视频中的来写。
自己仿照现在小米商城首页做的。
首页html：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>小米首页</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- 命名规则：
主体内容部分div从上往下依次为con01,con02... ...
如有上下两行，上行为top，简写为t;下行为bottom，简写为b。
一行如有5个图，从左往右依次为1-5。
-->
<!-- 其中，家电，智能，搭配，配件，周边 这几个布局都一样，由于是首次仿站，所以都没有省略，用来练手。 -->
</head>
<body>
<script type="text/javascript">
$(function(){
$('#rr').mouseover(function(){
$(this).css({'background':'#fff','color':'#ff6700'})//购物车框鼠标移上背景变白色，自体颜色变桔红
})
$('#rr').mouseleave(function(){
$(this).css({'background':'#424242','color':'#ccc'})//购物车框鼠标移出背景变原来灰色，文字变原灰色
})
$('.down').hide()//下载app的下拉框默认隐藏
$('#ll').mouseover(function(){
$('.down').show()//鼠标移上下载app按钮，下拉框显示
})
$('#ll').mouseleave(function(){
$('.down').hide()//鼠标移开下载app按钮，下拉框隐藏
})
$('#rr').mouseover(function(){
$('this').css('background','#fff')//鼠标移上购物车按钮，背景变白色
})
$('#rr').mouseleave(function(){
$('this').css('background','#424242')//鼠标移开购物车按钮，背景变原来灰色
})
$('.gwc').hide()//购物车下拉框默认隐藏
$('#rr').mouseover(function(){
$('.gwc').slideDown(350)//鼠标移上购物车按钮，下拉框动态打开
})
$('#rr').mouseleave(function(){
$('.gwc').slideUp(350)//鼠标移开购物车按钮，下拉框动态折叠
})
// 关于鼠标移上变色，有的用jquery做的，有的用css做的
})
</script>
<!-- 头部 -->
<div class="header">
<div class="topMenu">
<ul>
<li>小米商城</li>
<li>MIUI</li>
<li>loT</li>
<li>云服务</li>
<li>金融</li>
<li>有品</li>
<li>小爱开放平台</li>
<li>政企服务</li>
<li>资质证照</li>
<li>协议规则</li>
<li id="ll">下载app
<div class="down">
<a href="#"><img src="static/images/D.png"></a>
</div>
</li>
<li>Select Region</li>
<li style="margin-left:250px;">登陆</li>
<li>注册</li>
<li>消息通知</li>
<li id="rr" style="float:right;margin-right:1px;"><i class="fa fa-shopping-cart"></i>购物车（0）
<div class="gwc">
</div>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<!-- 主体 -->
<div class="content">
<!-- logo行 -->
<div class="logotop">
<!-- logo图标 -->
<div class="logo-top"></div>
<!-- logo后10个链接 -->
<div class="logo-menu">
<ul id="logo-menu10">
<li id="uui">小米手机</li>
<li>红米</li>
<li>电视</li>
<li>笔记本</li>
<li>家电</li>
<li>新品</li>
<li>路由器</li>
<li>智能硬件</li>
<li>服务</li>
<li>社区</li>
</ul>
</div>
<!-- logo后搜索框 -->
<div class="logo-so">
<div class="logo-so-l">
<input type="text" value="小米8">
</div>
<div class="logo-so-r">
<button>搜索</button>
</div>
</div>
</div>
<div class="clear"></div>
<!-- 轮换图 -->
<div class="con01">
<!-- 左边菜单 -->
<div class="con01-l"></div>
<!-- 右边轮换图 -->
<div class="con01-r"></div>
</div>
<div class="clear"></div><!-- 清除浮动 -->
<!-- 小米闪购上部四块 -->
<div class="con02">
<!-- 左边第一块六个按钮 -->
<div class="con02-1"></div>
<!-- 右边三块都一样 -->
<div class="con02-2" style="background:url(static/images/con022.jpg);margin-right:13.5px;"></div>
<div class="con02-2" style="background:url(static/images/con023.jpg);margin-right:13.5px;"></div>
<div class="con02-2" style="background:url(static/images/con024.jpg);"></div>
</div>
<div class="clear"></div>
<h3>小米闪购</h3><br>
<!-- 小米闪购 -->
<div class="con03">
<!-- 左侧倒计时 -->
<div class="con03-1"></div>
<!-- 右侧四个图片 -->
<div class="con03-2" style="margin-right:13.5px;"></div>
<div class="con03-2" style="margin-right:13.5px;"></div>
<div class="con03-2" style="margin-right:13.5px;"></div>
<div class="con03-2"></div>
</div>
<div class="clear"></div>
<!-- 小米闪购下方图片 -->
<div class="con04" style="background:url(static/images/con04.jpg);"></div>
<h3 style="float:left;">手机</h3><h4 style="float:right;margin-right:65px;">查看全部</h4>
<div class="clear"></div>
<br>
<!-- 手机 -->
<div class="con05">
<!-- 手机部分左侧竖图 -->
<div class="con05-l"></div>
<!-- 手机部分右侧上部四图 -->
<div class="con05-r-t">
<div class="con05-r-t-1"></div>
<div class="con05-r-t-1" style="margin-left:13.5px;"></div>
<div class="con05-r-t-1" style="margin-left:13.5px;"></div>
<div class="con05-r-t-1" style="margin-left:13.5px;"></div>
</div>
<!-- 手机部分右侧下部四图 -->
<div class="con05-r-b">
<div class="con05-r-b-1"></div>
<div class="con05-r-b-1" style="margin-left:13.5px;"></div>
<div class="con05-r-b-1" style="margin-left:13.5px;"></div>
<div class="con05-r-b-1" style="margin-left:13.5px;"></div>
</div>
</div>
<div class="clear"></div>
<!-- 手机部分下方图片 -->
<div class="con06" style="background:url(static/images/con06.jpg);"></div>
<!-- 家电 -->
<h3 style="float:left;">家电</h3><h4 style="float:right;margin-right:65px;">热门 电视影音 电脑 家居</h4>
<div class="clear"></div>
<!-- 家电部分 -->
<div class="con07">
<!-- 家电部分上部5图 -->
<div class="con07-t">
<div class="con07-t-1"></div>
<div class="con07-t-1" style="margin-left:13.5px"></div>
<div class="con07-t-1" style="margin-left:13.5px"></div>
<div class="con07-t-1" style="margin-left:14px"></div>
<div class="con07-t-1" style="margin-left:14px"></div>
</div>
<!-- 家电部分下部5图 -->
<div class="con07-b">
<div class="con07-b-1"></div>
<div class="con07-b-1" style="margin-left:13.5px"></div>
<div class="con07-b-1" style="margin-left:13.5px"></div>
<div class="con07-b-1" style="margin-left:13.5px"></div>
<!-- 家电部分下部分最右两小图 -->
<div class="con07-b-2" style="margin-left:13.5px">
<div class="con07-b-2-t"></div>
<div class="con07-b-2-b"></div>
</div>
</div>
</div>
<!-- 家电部分下部图片 -->
<div class="con08" style="background:url(static/images/con08.jpg);"></div>
<!-- 智能 -->
<h3 style="float:left;">智能</h3><h4 style="float:right;margin-right:65px;">热门 出行 健康 酷玩 路由器</h4>
<div class="clear"></div>
<!-- 智能部分 -->
<div class="con09">
<!-- 智能部分上部5图 -->
<div class="con09-t">
<div class="con09-t-1"></div>
<div class="con09-t-1" style="margin-left:13.5px"></div>
<div class="con09-t-1" style="margin-left:13.5px"></div>
<div class="con09-t-1" style="margin-left:14px"></div>
<div class="con09-t-1" style="margin-left:14px"></div>
</div>
<!-- 智能部分下部5图 -->
<div class="con09-b">
<div class="con09-b-1"></div>
<div class="con09-b-1" style="margin-left:13.5px"></div>
<div class="con09-b-1" style="margin-left:13.5px"></div>
<div class="con09-b-1" style="margin-left:13.5px"></div>
<!-- 智能部分下部分最右两小图 -->
<div class="con09-b-2" style="margin-left:13.5px">
<div class="con09-b-2-t"></div>
<div class="con09-b-2-b"></div>
</div>
</div>
</div>
<!-- 智能部分下部图片 -->
<div class="con10" style="background:url(static/images/con10.jpg);"></div>
<!-- 搭配 -->
<h3 style="float:left;">搭配</h3><h4 style="float:right;margin-right:65px;">热门 耳机音响 电源 电池存储卡</h4>
<div class="clear"></div>
<!-- 搭配部分 -->
<div class="con11">
<!-- 搭配部分上部5图 -->
<div class="con11-t">
<div class="con11-t-1"></div>
<div class="con11-t-1" style="margin-left:13.5px"></div>
<div class="con11-t-1" style="margin-left:13.5px"></div>
<div class="con11-t-1" style="margin-left:14px"></div>
<div class="con11-t-1" style="margin-left:14px"></div>
</div>
<!-- 搭配部分下部5图 -->
<div class="con11-b">
<div class="con11-b-1"></div>
<div class="con11-b-1" style="margin-left:13.5px"></div>
<div class="con11-b-1" style="margin-left:13.5px"></div>
<div class="con11-b-1" style="margin-left:13.5px"></div>
<!-- 搭配部分下部分最右两小图 -->
<div class="con11-b-2" style="margin-left:13.5px">
<div class="con11-b-2-t"></div>
<div class="con11-b-2-b"></div>
</div>
</div>
</div>
<!-- 搭配部分下部图片 -->
<div class="con12" style="background:url(static/images/con12.jpg);"></div>
<!-- 配件 -->
<h3 style="float:left;">配件</h3><h4 style="float:right;margin-right:65px;">热门 保护套 贴膜 其他配件</h4>
<div class="clear"></div>
<!-- 配件部分 -->
<div class="con13">
<!-- 配件部分上部5图 -->
<div class="con13-t">
<div class="con13-t-1"></div>
<div class="con13-t-1" style="margin-left:13.5px"></div>
<div class="con13-t-1" style="margin-left:13.5px"></div>
<div class="con13-t-1" style="margin-left:14px"></div>
<div class="con13-t-1" style="margin-left:14px"></div>
</div>
<!-- 配件部分下部5图 -->
<div class="con13-b">
<div class="con13-b-1"></div>
<div class="con13-b-1" style="margin-left:13.5px"></div>
<div class="con13-b-1" style="margin-left:13.5px"></div>
<div class="con13-b-1" style="margin-left:13.5px"></div>
<!-- 配件部分下部分最右两小图 -->
<div class="con13-b-2" style="margin-left:13.5px">
<div class="con13-b-2-t"></div>
<div class="con13-b-2-b"></div>
</div>
</div>
</div>
<!-- 配件部分下部图片 -->
<div class="con14" style="background:url(static/images/con14.jpg);"></div>
<!-- 周边 -->
<h3 style="float:left;">周边</h3><h4 style="float:right;margin-right:65px;">热门 出行 居家 生活周边 箱包</h4>
<div class="clear"></div>
<!-- 周边部分 -->
<div class="con15">
<!-- 周边部分上部5图 -->
<div class="con15-t">
<div class="con15-t-1"></div>
<div class="con15-t-1" style="margin-left:13.5px"></div>
<div class="con15-t-1" style="margin-left:13.5px"></div>
<div class="con15-t-1" style="margin-left:14px"></div>
<div class="con15-t-1" style="margin-left:14px"></div>
</div>
<!-- 周边部分下部5图 -->
<div class="con15-b">
<div class="con15-b-1"></div>
<div class="con15-b-1" style="margin-left:13.5px"></div>
<div class="con15-b-1" style="margin-left:13.5px"></div>
<div class="con15-b-1" style="margin-left:13.5px"></div>
<!-- 周边部分下部分最右两小图 -->
<div class="con15-b-2" style="margin-left:13.5px">
<div class="con15-b-2-t"></div>
<div class="con15-b-2-b"></div>
</div>
</div>
</div>
<!-- 周边部分下部图片 -->
<div class="con16" style="background:url(static/images/con16.jpg);"></div>
<h3>为你推荐</h3><br>
<!-- 为你推荐部分 -->
<div class="con17">
<div class="con17-1"></div>
<div class="con17-1" style="margin-left:13.5px"></div>
<div class="con17-1" style="margin-left:13.5px"></div>
<div class="con17-1" style="margin-left:13.5px"></div>
<div class="con17-1" style="margin-left:13.5px"></div>
</div>
<h3>热评产品</h3><br>
<!-- 热评产品部分 -->
<div class="con18">
<!-- 热评产品上部图片 -->
<div class="con18-t">
<div class="con18-t-1"></div>
<div class="con18-t-1" style="margin-left:11px"></div>
<div class="con18-t-1" style="margin-left:11px"></div>
<div class="con18-t-1" style="margin-left:11px"></div>
</div>
<!-- 热评产品下部文字 -->
<div class="con18-b">
<div class="con18-b-1"></div>
<div class="con18-b-1" style="margin-left:11px"></div>
<div class="con18-b-1" style="margin-left:11px"></div>
<div class="con18-b-1" style="margin-left:11px"></div>
</div>
</div>
<div class="clear"></div>
<h3>内容</h3><br>
<!-- 内容部分 -->
<div class="con19">
<!-- 内容部分4个div -->
<div class="con19-1"></div>
<div class="con19-1" style="margin-left:11px"></div>
<div class="con19-1" style="margin-left:11px"></div>
<div class="con19-1" style="margin-left:11px"></div>
</div>
<h3 style="float:left;">视频</h3><h4 style="float:right;margin-right:65px;">查看全部</h4><br>
<!-- 视频部分 -->
<div class="con20">
<!-- 视频上部视频 -->
<div class="con20-t">
<div class="con20-t-1"></div>
<div class="con20-t-1" style="margin-left:11px"></div>
<div class="con20-t-1" style="margin-left:11px"></div>
<div class="con20-t-1" style="margin-left:11px"></div>
</div>
<!-- 视频下部文字 -->
<div class="con20-b">
<div class="con20-b-1"></div>
<div class="con20-b-1" style="margin-left:11px"></div>
<div class="con20-b-1" style="margin-left:11px"></div>
<div class="con20-b-1" style="margin-left:11px"></div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<!-- 底部第一排5个链接 -->
<div class="foot1">
<dl>
<dt id="foot1-1"><i class="fa fa-wrench"></i>预约维修服务</dt>
<dt id="foot1-1">7天无理由退货</dt>
<dt id="foot1-1">15天免费换货</dt>
<dt id="foot1-1"><i class="fa fa-gift"></i>满150元包邮</dt>
<dt>520余家售后网店</dt>
</dl>
</div>
<!-- 底部第二排链接以及右侧客服电话部分 -->
<div class="foot2">
<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="tel">
<div id="tel">400-100-5678</div>
<div id="dat">周一至周日 8:00-18:00</div>
<div id="fei">(仅收市话费)</div>
<button id="but">联系客服</button>
</div>
</div>
<!-- logo图表及右侧小字,下面资质部分 -->
<div class="foot3">
<div class="logobot"></div>
<div class="links">
<div class="links-1">
<p><a href="">小米商城</a><span id="shu">|</span><a href="">MIUI</a><span id="shu">|</span><a href="">米家</a><span id="shu">|</span><a href="">米聊</a><span id="shu">|</span><a href="">多看</a><span id="shu">|</span><a href="">游戏</a><span id="shu">|</span><a href="">路由器</a><span id="shu">|</span><a href="">米粉卡</a><span id="shu">|</span><a href="">政企服务</a><span id="shu">|</span><a href="">小米天猫店</a><span id="shu">|</span><a href="">隐私政策</a><span id="shu">|</span><a href="">商城用户协议</a><span id="shu">|</span><a href="">账号协议</a><span id="shu">|</span><a href="">问题反馈</a><span id="shu">|</span><a href="">廉正举报</a><span id="shu">|</span><a href="">诚信合规</a><span id="shu">|</span><a href="">Select Region</a>
</p>
</div>
<div class="links-2">
© <a href="">mi.com</a> 京ICP证110507号 <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> 网络食品经营备案（京）【2018】WLSPJYBAHF-12 <a href="">食品经营许可证</a><br>
违法和不良信息举报电话：185-0130-1238 <a href="">知识产权侵权投诉 </a> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</div>
<div class="links-3">
<a href=""><img src="static/images/truste1.png"></a>
<a href=""><img src="static/images/truste2.png"></a>
<a href=""><img src="static/images/truste3.png"></a>
<a href=""><img src="static/images/truste4.png"></a>
<a href=""><img src="static/images/truste5.png"></a>
</div>
</div>
</div>
<!-- 最下一行字 -->
<div class="foot4">
<img src="static/images/text.png">
</div>
</div>
</body>
</html>css代码：
*{padding:0px;margin:0px;}
.clear{clear:both;}
a{text-decoration:none;}
h3{margin-left:65px;}
/*头部*/
.header{background:#333;width:100%;height:40px;margin:0px auto;}
.topMenu{width:1226px;height:40px;line-height:40px;margin:0px auto;}
.topMenu i{font-size:16px;margin-right:5px;}
/*顶部左侧链接*/
.topMenu-l{float:left;}
/*顶部右侧链接*/
.topMenu-r{margin-left:300px;}
ul{list-style:none;}
li{float:left;margin-right:16px;font-size:12px;color:#ccc;}
.topMenu li:hover{color:#fff;}
#rr{display:inline-block;width:120px;height:40px;background:#424242;text-align:center;line-height:40px;}
.down{width:123px;height:150px;background:url(../static/images/D.png) no-repeat;z-index:5;position:absolute;left:575px;box-shadow:2px 2px 2px #ccc;}
.gwc{width:315px;height:100px;background:#fff;box-shadow:2px 2px 2px #ccc;position:absolute;left:974px;top:40px;}
/*logo行*/
.logotop{width:1226px;height:56px;margin:23px auto;}
.logo-top{width:56px;height:56px;background:url(../static/images/logo.png) no-repeat;float:left;}
.logo-menu{width:600px;height:56px;float:left;margin-left:178px;}
.logo-menu li{font-size:15px;color:#5b5b5b;font-weight:bold;line-height:56px;margin-left:2px;}
.logo-menu li:hover{color:#ff6700;}
#uui:hover{color:#ff6700;}
.logo-so{width:300px;height:56px;float:left;margin-left:90px;border:1px solid #e0e0e0;}
.logo-so-l{float:left;right:-1px;border-right:1px solid #e0e0e0;}
.logo-so-l input{width:242px;height:54px;border:none;}
.logo-so-r{float:right;}
.logo-so-r button{width:56px;height:56px;background:#fff;border:none;}
.logo-so-r button:hover{background:#ff6700;}
/*以下是主体内容*/
/*轮换图部分*/
.con01{height:460px;width:1226px;margin:15px auto;}
/*左边菜单*/
.con01-l{width:234px;height:460px;background:#000;float:left;}
/*右边轮换图*/
.con01-r{width:992px;height:460px;background:url(../static/images/lht1.jpg) no-repeat;float:left;}
/*小米闪购上部四块*/
.con02{width:1226px;height:172px;margin:15px auto;}
/*左边第一块六个按钮*/
.con02-1{width:234px;height:172px;float:left;background:#333;margin-right:13.5px;}
/*右边三块都一样*/
.con02-2{width:317px;height:172px;float:left;}
/*小米闪购 */
.con03{width:1226px;height:340px;margin:13px auto;}
/*左侧倒计时*/
.con03-1{width:234px;height:340px;float:left;background:#ccc;margin-right:13.5px;}
/*右侧四个图片*/
.con03-2{width:234px;height:340px;float:left;background:#fafafa;}
/*小米闪购下方图片*/
.con04{width:1226px;height:120px;margin:13.5px auto;}
/*手机*/
.con05{width:1226px;height:614px;margin:13.5px auto;}
/*手机部分左侧竖图*/
.con05-l{width:234px;height:614px;background:url(../static/images/con05.jpg);float:left;}
/*手机部分右侧上部四图*/
.con05-r-t{width:978px;height:300px;float:left;margin-left:13px;}
.con05-r-t-1{width:234px;height:300px;background:pink;float:left;}
/*手机部分右侧下部四图*/
.con05-r-b{width:978px;height:300px;margin-left:13.5px;margin-top:13px;float:left;}
.con05-r-b-1{width:234px;height:300px;background:pink;float:left;}
/*手机部分下方图片*/
.con06{width:1226px;height:120px;margin:13.5px auto;}
/*家电部分*/
.con07{width:1226px;height:614px;margin:13.5px auto;}
/*家电部分上部5图*/
.con07-t{width:1226px;height:300px;}
.con07-t-1{width:234px;height:300px;background:#ccc;float:left;}
/*家电部分下部5图*/
.con07-b{width:1226px;height:300px;margin-top:13.5px;}
.con07-b-1{width:234px;height:300px;background:#ccc;float:left;}
/*家电部分下部分最右两小图*/
.con07-b-2{width:234px;height:300px;float:left;}
.con07-b-2-t,.con07-b-2-b{background:#ccc;width:234px;height:143px;}
.con07-b-2-b{margin-top:13.5px;}
/*家电部分下部图片*/
.con08{width:1226px;height:120px;margin:13.5px auto;}
/*智能部分*/
.con09{width:1226px;height:614px;margin:13.5px auto;}
/*智能部分上部5图*/
.con09-t{width:1226px;height:300px;}
.con09-t-1{width:234px;height:300px;background:#ccc;float:left;}
/*智能部分下部5图*/
.con09-b{width:1226px;height:300px;margin-top:13.5px;}
.con09-b-1{width:234px;height:300px;background:#ccc;float:left;}
/*智能部分下部分最右两小图*/
.con09-b-2{width:234px;height:300px;float:left;}
.con09-b-2-t,.con09-b-2-b{background:#ccc;width:234px;height:143px;}
.con09-b-2-b{margin-top:13.5px;}
/*智能部分下部图片*/
.con10{width:1226px;height:120px;margin:13.5px auto;}
/*搭配部分*/
.con11{width:1226px;height:614px;margin:13.5px auto;}
/*搭配部分上部5图*/
.con11-t{width:1226px;height:300px;}
.con11-t-1{width:234px;height:300px;background:#ccc;float:left;}
/*搭配部分下部5图*/
.con11-b{width:1226px;height:300px;margin-top:13.5px;}
.con11-b-1{width:234px;height:300px;background:#ccc;float:left;}
/*搭配部分下部分最右两小图*/
.con11-b-2{width:234px;height:300px;float:left;}
.con11-b-2-t,.con11-b-2-b{background:#ccc;width:234px;height:143px;}
.con11-b-2-b{margin-top:13.5px;}
/*搭配部分下部图片*/
.con12{width:1226px;height:120px;margin:13.5px auto;}
/*配件部分*/
.con13{width:1226px;height:614px;margin:13.5px auto;}
/*配件部分上部5图*/
.con13-t{width:1226px;height:300px;}
.con13-t-1{width:234px;height:300px;background:#ccc;float:left;}
/*配件部分下部5图*/
.con13-b{width:1226px;height:300px;margin-top:13.5px;}
.con13-b-1{width:234px;height:300px;background:#ccc;float:left;}
/*配件部分下部分最右两小图*/
.con13-b-2{width:234px;height:300px;float:left;}
.con13-b-2-t,.con13-b-2-b{background:#ccc;width:234px;height:143px;}
.con13-b-2-b{margin-top:13.5px;}
/*配件部分下部图片*/
.con14{width:1226px;height:120px;margin:13.5px auto;}
/*周边部分*/
.con15{width:1226px;height:614px;margin:13.5px auto;}
/*周边部分上部5图*/
.con15-t{width:1226px;height:300px;}
.con15-t-1{width:234px;height:300px;background:#ccc;float:left;}
/*周边部分下部5图*/
.con15-b{width:1226px;height:300px;margin-top:13.5px;}
.con15-b-1{width:234px;height:300px;background:#ccc;float:left;}
/*周边部分下部分最右两小图*/
.con15-b-2{width:234px;height:300px;float:left;}
.con15-b-2-t,.con15-b-2-b{background:#ccc;width:234px;height:143px;}
.con15-b-2-b{margin-top:13.5px;}
/*周边部分下部图片*/
.con16{width:1226px;height:120px;margin:13.5px auto;}
/*为你推荐部分*/
.con17{width:1226px;height:300px;margin:13.5px auto;}
/*为你推荐5图*/
.con17-1{width:234px;height:300px;background:#ccc;float:left;}
/*热评产品部分*/
.con18{width:1226px;height:416px;margin:13.5px auto;}
/*热评产品上部图片*/
.con18-t{width:1226px;height:220px;}
.con18-t-1{width:298px;height:220px;float:left;background:pink;}
/*热评产品下部文字*/
.con18-b{width:1226px;height:220px;}
.con18-b-1{width:298px;height:220px;float:left;background:blue;}
/*内容部分*/
.con19{width:1226px;height:420px;margin:13px auto;}
/*内容部分4个div*/
.con19-1{width:298px;height:420px;background:yellow;float:left;}
/*视频部分*/
.con20{width:1226px;height:286px;margin:13.5px auto;}
/*视频上部视频*/
.con20-t{width:1226px;height:180px;}
.con20-t-1{width:298px;height:180px;float:left;background:blue;}
/*视频下部文字*/
.con20-b{width:1226px;height:106px;}
.con20-b-1{width:298px;height:106px;float:left;background:yellow;}
/*底部*/
.footer{width:1226px;margin:30px auto;}
/*底部第一排5个链接*/
.foot1{width:1226px;height:80px;border-bottom:1px solid #e0e0e0;}
.foot1 dt{font-size:15px;color:#626262;float:left;width:240px;height:20px;text-align:center;margin-top:30px;}
#foot1-1{border-right:1px solid #e0e0e0;}
/*底部第二排链接以及右侧客服电话部分*/
.foot2{width:1226px;height:192px;}
.foot2 dl{float:left;width:160px;height:192px;display:inline-block;}
.foot2 dt{font-size:13px;color:#626262;margin:30px auto;text-align:left;}
.foot2 dd{font-size:12px;color:#8a8a8a;margin-bottom:10px;cursor:pointer;}
dd a{text-decoration:none;color:#8a8a8a;}
dd a:hover{color:#ff6700;}
/*.foot2 dd:hover{color:#ff934b}*/
.tel{width:263px;height:115px;margin-top:30px;float:right;border-left:1px solid #e0e0e0;text-align:center;}
#tel{font-size:25px;color:#ff6700;margin-bottom:6px;}
#dat,#fei{font-size:12px;}
#but{width:118px;height:32px;margin-top:12px;color:#ff6700;background:#fff;border:1px solid #ff6700;}
#but:hover{background:#f25807;color:#fff;}
/*logo图表及右侧小字,下面资质部分*/
.foot3{width:980px;height:126px;}
.logobot{width:56px;height:126px;background:url(../static/images/logo.png) no-repeat;float:left;margin-right:6px;}
.links{width:920px;height:126px;}
.links-1 a{font-size:12px;color:#8a8a8a;}
.links-1 a:hover{color:#ff6700;}
#shu{color:#8a8a8a;margin:0px 2px;}
.links-2{font-size:12px;color:#c7c7c7;}
.links-2 a{color:#c7c7c7;}
.links-2 a:hover{color:#ff6700;}
/*最下一行字*/
.foot4{width:1226px;height:40px;}
.foot4 img{margin-left:488px;}效果图：
Correcting teacher：灭绝师太Correction time：2019-01-28 09:19:21
Teacher's summary：完成的非常好！布局思路清晰，可以把知识点学以致用继续保持……
