品优购综合案例——首页（html+CSS综合运用）自学系列
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 顶部快捷导航 start -->
<div class="shortcut">
<div class="w">
<div class="short-l fl">
<ul>
<li><a href="#">品优购欢迎您！</a></li>
<li>
<a href="#">请登录 </a>
<a href="" class="style-red">免费注册</a>
</li>
</ul>
</div>
<div class="short-r fr">
<ul>
<!-- 由于li内字数不一样，不要给宽度 -->
<li>
<a href="">我的订单</a>
<span class="sx">|</span>
</li>
<li class="spacer">
<a href="">我的品优购</a>
<i class="icomoon1"></i>
<span class="sx">|</span>
</li>
<li>
<a href="">品优购会员</a>
<span class="sx">|</span>
</li>
<li>
<a href="">企业采购</a>
<span class="sx">|</span>
</li>
<li class="spacer">
<a href="">关注品优购</a>
<i class="icomoon1"></i>
<span class="sx">|</span>
</li>
<li class="spacer">
<a href="">客户服务</a>
<i class="icomoon1"></i>
<span class="sx">|</span>
</li>
<li class="spacer">
<a href="">网站导航</a>
<i class="icomoon1"></i>
</li>
</ul>
</div>
</div>
</div>
<!-- 顶部快捷导航 end -->
<!-- header部分 start -->
<div class="headerwai">
<div class="w">
<div class="header">
<!-- logo模块 -->
<div class="logo">
<!-- 对logo进行优化 -->
<h1> <a href="index.html" title="品优购"><!-- 背景图片在这里 -->品优购</a></h1>
</div>
<!-- search模块 -->
<div class="search">
<input class="fl" type="text" value="请搜索.....">
<!-- input与btn1间的缝隙只能通过浮动的方式解决 -->
<button class="btn1 fl">搜索</button>
</div>
<div class="hotwrods">
<ul>
<li>
<a href="#" class="style-red">优惠购首发</a>
</li>
<li>
<a href="#">亿元优惠</a>
</li>
<li>
<a href="#">9.9元团购</a>
</li>
<li>
<a href="#">美满99减30</a>
</li>
<li>
<a href="#">办公用品</a>
</li>
<li>
<a href="#">电脑</a>
</li>
<li>
<a href="#">通信</a>
</li>
</ul>
</div>
<div class="shopcar">
<i class="shop-icon1 style-red"></i>
<span>我的购物车</span>
<i class="shop-icon2"></i>
<div class="count">888888</div>
</div>
</div>
</div>
</div>
<!-- header部分 end -->
<!--nav部分 start -->
<div class="nav">
<div class="dropdown w">
<div class="nav-left fl">
<div class="nav-left-hd">
全部商品分类
</div>
<div class="nav-left-bd" >
<ul>
<li>
<a href="">家用电器</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">手机、数码、通信</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">电脑、办公</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">家居、家具、家装、厨具</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">男装、女装、童装、内衣</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">个户化妆、清洁用品、宠物</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">鞋靴、箱包、珠宝、奢侈品</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">运动户外、钟表</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">汽车、汽车用品</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">母婴、玩具乐器</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">食品、酒类、生鲜、特产</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">医药保健</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">图书、音像、电子书</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">彩票、旅行、充值、票务</a>
<i class="nav-left-li-icon1"></i>
</li>
<li>
<a href="">理财、众筹、白条、保险</a>
<i class="nav-left-li-icon1"></i>
</li>
</ul>
</div>
</div>
<div class="nav-right fl" >
<ul class="nav-ul">
<li><a href="#">服装城</a></li>
<li><a href="#">美妆馆 </a></li>
<li><a href="#">传智超市</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">有趣</a></li>
</ul>
</div>
</div>
</div>
<!--nav部分 end -->
<!-- main部分 start -->
<div class="mainwai">
<div class="w">
<div class="main ">
<!-- 通过再添加一个类解决内部padding与宽度问题 -->
<div class="foucs">
<ul>
<li>
<a href="">
<img src="img/foucs_03.png" alt="">
<span class="foucs-span span1"></span>
<span class="foucs-span span2"></span>
<ul class="foucs-ul">
<!-- 结构里面不要在li中放a -->
<li class="foucs-li-frist"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</a>
</li>
</ul>
</div>
<div class="newflash">
<div class="newflash-top">
<div class="newflash-top1">
<h4>品优购快报</h4>
<span>更多</span>
<i class="newflash-icomoon"></i>
</div>
<div class="newflash-bottom1">
<ul>
<li>【特惠】 备战开学季 全民半价购数码</li>
<li>【公告】 品优稳居家电网购流程份额</li>
<li>【特惠】 百元中秋全品类礼券限量领</li>
<li>【公告】 上百元优生鲜 享阳澄湖大闸蟹</li>
<li>【特惠】 每日享折扣品优品质游</li>
</ul>
</div>
</div>
<div class="newflash-bottom2">
<ul> <!-- 注意这里的所有框都能点，意味着a与li一样大 -->
<li>
<a href="">
<span class="bottom2-icon bottom2-icon1"></span>
<span class="bottom-2-wz">话费</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon2"></span>
<span class="bottom-2-wz">机票</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon3"></span>
<span class="bottom-2-wz">电影票</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon4"></span>
<span class="bottom-2-wz">游戏</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon5"></span>
<span class="bottom-2-wz">彩票</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon6"></span>
<span class="bottom-2-wz">加油卡</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon7"></span>
<span class="bottom-2-wz">酒店</span>
</a>
</li>
<li>
<a href="">
<span class="bottom2-icon bottom2-icon8"></span>
<span class="bottom-2-wz">火车票</span>
</a>
</li>
<li class="bottom-replace-height">
<a href="">
<span class="bottom2-icon bottom2-icon9"></span>
<span class="bottom-2-wz">众筹</span>
</a>
</li>
<li class="bottom-replace-height">
<a href="">
<span class="bottom2-icon bottom2-icon10"></span>
<span class="bottom-2-wz">理财</span>
</a>
</li>
<li class="bottom-replace-height">
<a href="">
<span class="bottom2-icon bottom2-icon11"></span>
<span class="bottom-2-wz">礼品卡</span>
</a>
</li>
<li class="bottom-replace-height">
<a href="">
<span class="bottom2-icon bottom2-icon12"></span>
<span class="bottom-2-wz">白条</span>
</a>
</li>
</ul>
</div>
<div class="newflash-zp">
<img src="img/main-bottom_03.png" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- main部分 end -->
<!-- recommend（推荐）部分 start -->
<div class="recommendwai">
<div class="w">
<div class="recommend">
<div class="recommend-hd fl">
<img src="img/clock.png" alt="">
<h4>今日推荐</h4>
</div>
<div class="recommend-bd fl">
<ul>
<li>
<a href="">
<img src="upload/recoomend1.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/recoomend2.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/recoomend3.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/recoomend4.png" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- recommend（推荐）部分 end -->
<!-- 猜你喜欢部分 start-->
<div class="like-wai">
<div class="w">
<div class="like">
<div class="like-hd">
<h4 class="fl">猜你喜欢部分</h4>
<div class="like-hd-right fr">
<span>
<a href="">换一批</a>
</span>
<i class="like-hd-icon1"></i>
</div>
</div>
<div class="like-bd">
<div class="ul-top">
<ul>
<li><img src="upload/1bao.png" alt=""></li>
<li><img src="upload/2guo.png" alt=""></li>
<li><img src="upload/3suo.png" alt=""></li>
<li><img src="upload/4deng.png" alt=""></li>
<li><img src="upload/5shouji.png" alt=""></li>
<li><img src="upload/6lu.png" alt=""></li>
</ul>
</div>
<div class="ul-bottom">
<ul>
<li>
<p class="ul-bottom-p">阳光美包新款单肩包女<br>
包时尚子母包四件套女</p>
<span>¥116.00</span>
</li>
<li>
<p class="ul-bottom-p">爱仕达 30CM炒锅不粘<br>
锅NWG8330E电磁炉炒</p>
<span>¥99.00</span>
</li>
<li>
<p class="ul-bottom-p">捷波朗<br>
（jabra）BOOSI劲步</p>
<span>¥245.00</span>
</li>
<li>
<p class="ul-bottom-p">欧普<br>
JYLZ08面板灯平板灯铝</p>
<span>¥238.00</span>
</li>
<li>
<p class="ul-bottom-p">三星<br>
（G5500）移动联</p>
<span>¥649.00</span>
</li>
<li class="li-last">
<p class="ul-bottom-p">韩国所望<br>
紧致湿润精华露400ml</p>
<span>¥649.00</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 猜你喜欢部分 end-->
<!-- 有趣区部分 start -->
<div class="youquwai">
<div class="w">
<div class="youqu">
<div class="like-hd">
<h4 class="fl">传智播客·有趣区</h4>
</div>
<div class="youqu-bd">
<div class="youqu-bd1 fl">
<img src="upload/interest01.png" alt="">
</div>
<div class="youqu-bd2 fl">
<div class="youqu-bd2-hd-top">
<a href="">
好东西
</a>
</div>
<div class="youqu-bd2-hd-bottom">
<img src="upload/interest02.png" alt="">
</div>
<div class="youqu-bd2-bd">
<img src="upload/interest03.png" alt="">
</div>
</div>
<div class="youqu-bd3 fl">
<div class="youqu-bd3-hd-top">
<a href="">
品牌街
</a>
</div>
<div class="youqu-bd3-hd-bottom">
<img src="upload/interest04.png" alt="">
</div>
<div class="youqu-bd3-bd">
<div class="bd3-left fl">
<img src="upload/interest05.png" alt="">
</div>
<div class="bd3-right fl">
<img src="upload/interest06.png" alt="">
</div>
</div>
</div>
<div class="youqu-bd4 fl">
<ul>
<li class="ds">
<a href="">
<img src="upload/brand01.png" alt="">
</a>
</li>
<li class="ss">
<a href="">
<img src="upload/brand02.png" alt="">
</a>
</li>
<li class="ds">
<a href="">
<img src="upload/brand03.png" alt="">
</a>
</li>
<li class="ss">
<a href="">
<img src="upload/brand13.png" alt="">
</a>
</li >
<li class="ds">
<a href="">
<img src="upload/brand04.png" alt="">
</a>
</li>
<li class="ss">
<a href="">
<img src="upload/brand05.png" alt="">
</a>
</li>
<li class="ds">
<a href="">
<img src="upload/brand06.png" alt="">
</a>
</li>
<li class="ss">
<a href="">
<img src="upload/brand07.png" alt="">
</a>
</li>
<li class="ds">
<a href="">
<img src="upload/brand08.png" alt="">
</a>
</li>
<li class="ss">
<a href="">
<img src="upload/brand09.png" alt="">
</a>
</li>
<li class="ds">
<a href="">
<img src="upload/brand10.png" alt="">
</a>
</li>
<li class="ss">
<a href="">
<img src="upload/brand11.png" alt="">
</a>
</li>
<li class="ds bd4-last2">
<a href="">
<img src="upload/brand12.png" alt="">
</a>
</li>
<li class="ss bd4-last1">
<a href="">
<img src="upload/brand13.png" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 有趣区部分 start -->
<!-- floor（楼梯）部分 start -->
<div class="floorwai">
<div class="w">
<div class="floor">
<div class="like-hd floor-top-hd">
<h4 class="fl">家用电器</h4>
<div class="like-hd-right floor-top-hd-right fr">
<ul>
<li >
<a href="" class="red-style-a">热门</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="">空气/净水</a>
<span>|</span>
</li>
<li>
<a href="">新奇特</a>
<span>|</span>
</li>
<li>
<a href="">高端电器</a>
</li>
</ul>
</div>
</div>
<div class="floor-top-bd">
<div class="floor-top-bd1">
<div class="floor-top-bd1-hd">
<ul>
<li>节能补贴</li>
<li>4K电视</li>
<li>空气净化器</li>
<li>IH电饭煲</li>
<li>滚筒洗衣机</li>
<li>电热水器</li>
</ul>
</div>
<div class="floor-top-bd1-bd">
<img src="upload/floor-1-1.png" alt="">
</div>
</div>
<div class="floor-top-bd2 ">
<img src="upload/floor-1-b01.png" alt="">
</div>
<div class="floor-top-bd3 ">
<ul>
<li class="bd3-frist">
<img src="upload/floor-1-2.png" alt="">
</li>
<li class="bd3-second">
<img src="upload/floor-1-3.png" alt="">
</li>
</ul>
</div>
<div class="floor-top-bd4 ">
<ul>
<li>
<img src="upload/floor-1-4.png" alt="">
</li>
</ul>
</div>
<div class="floor-top-bd5 ">
<ul>
<li class="bd5-frist">
<img src="upload/floor-1-5.png" alt="">
</li>
<li class="bd5-second">
<img src="upload/floor-1-6.png" alt="">
</li>
</ul>
</div>
</div>
<div class="floor-copyright">
<ul>
<li>
<a href="">
<img src="upload/brand_03.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_05.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_07.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_09.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_11.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_13.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_15.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_17.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/brand_19.png" alt="">
</a>
</li>
<li class="copyright-last">
<a href="">
<img src="upload/brand_21.png" alt="">
</a>
</li>
</ul>
</div>
<div class="like-hd floor-top-hd floor-hd3">
<h4 class="fl">手机通讯</h4>
<div class="like-hd-right floor-top-hd-right fr">
<ul>
<li>
<a href="" class="red-style-a">热门</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="">手机卡</a>
<span>|</span>
</li>
<li>
<a href="">店铺精选</a>
<span>|</span>
</li>
<li>
<a href="">手机配件</a>
</li>
</ul>
</div>
</div>
<div class="floor-top-bd">
<div class="floor-top-bd1">
<div class="floor-top-bd1-hd">
<ul>
<li>手机通讯</li>
<li>依旧换新</li>
<li>双卡双待</li>
<li>自营配件</li>
<li>金属机身</li>
<li>高清屏</li>
</ul>
</div>
<div class="floor-top-bd1-bd">
<img src="upload/sjtx_12.png" alt="">
</div>
</div>
<div class="floor-top-bd2 ">
<img src="upload/sjtx_03.png" alt="">
</div>
<div class="floor-top-bd3 ">
<ul>
<li class="bd3-frist">
<img src="upload/sjtx_05.png" alt="">
</li>
<li class="bd3-second">
<img src="upload/sjtx_15.png" alt="">
</li>
</ul>
</div>
<div class="floor-top-bd4 ">
<ul>
<li>
<img src="upload/sjtx_07.png" alt="">
</li>
</ul>
</div>
<div class="floor-top-bd5 ">
<ul>
<li class="bd5-frist">
<img src="upload/sjtx_09.png" alt="">
</li>
<li class="bd5-second">
<img src="upload/sjtx_16.png" alt="">
</li>
</ul>
</div>
</div>
<div class="floor-copyright">
<ul>
<li>
<a href="">
<img src="upload/copyrightONE_06.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_03.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_09.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_11.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_14.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_16.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_21.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_18.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightONE_24.png" alt="">
</a>
</li>
<li class="copyright-last">
<a href="">
<img src="upload/copyrightONE_26.png" alt="">
</a>
</li>
</ul>
</div>
<div class="like-hd floor-top-hd floor-hd3">
<h4 class="fl">电脑办公</h4>
<div class="like-hd-right floor-top-hd-right fr">
<ul>
<li>
<a href="" class="red-style-a">热门</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="">DIY硬件</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>
</li>
</ul>
</div>
</div>
<div class="floor-top-bd">
<div class="floor-top-bd1">
<div class="floor-top-bd1-hd">
<ul>
<li>SSD硬盘</li>
<li>显示器</li>
<li>机械键盘</li>
<li>台式机</li>
<li>组装机身</li>
<li>配件专区</li>
</ul>
</div>
<div class="floor-top-bd1-bd">
<img src="upload/dn_11.png" alt="">
</div>
</div>
<div class="floor-top-bd2 ">
<img src="upload/dn_03.png" alt="">
</div>
<div class="floor-top-bd3 ">
<ul>
<li class="bd3-frist">
<img src="upload/dn_04.png" alt="">
</li>
<li class="bd3-second">
<img src="upload/dn_15.png" alt="">
</li>
</ul>
</div>
<div class="floor-top-bd4 ">
<ul>
<li>
<img src="upload/dn_06.png" alt="">
</li>
</ul>
</div>
<div class="floor-top-bd5 ">
<ul>
<li class="bd5-frist">
<img src="upload/dn_08.png" alt="">
</li>
<li class="bd5-second">
<img src="upload/dn_16.png" alt="">
</li>
</ul>
</div>
</div>
<div class="floor-copyright">
<ul>
<li>
<a href="">
<img src="upload/copyrightSECOND_03.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_05.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_08.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_11.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_21.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_14.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_24.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_16.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/copyrightSECOND_27.png" alt="">
</a>
</li>
<li class="copyright-last">
<a href="">
<img src="upload/copyrightSECOND_18.png" alt="">
</a>
</li>
</ul>
</div>
<div class="like-hd floor-top-hd floor-hd3 floor-end-hd">
<h4 class="fl">热门疯抢</h4>
</div>
<div class="floor-top-end">
<div class="floor-top-end-bd1 fl">
<img src="upload/last_03.png" alt="">
<p class="ul-bottom-p">暴风魔镜 小D 虚拟现实智能VR眼镜3</p>
<span>¥116.00</span>
</div>
<div class="floor-top-end-bd2 fl">
<ul>
<li class="pjf-height">
<ol class="max-ol-style">
<li class="zp-comoon"><img src="upload/last_11.png" alt=""></li>
<li class="max-ol-style-one">
<p class="ul-bottom-p">羽博 7800毫安 Z <br>
3 移动电源/充电</p>
<span>¥139.00</span></li>
</ol>
</li>
<li class="pjf-height">
<ol class="max-ol-style">
<li class="zp-comoon"><img src="upload/last_17.png" alt=""></li>
<li class="max-ol-style-second">
<p class="ul-bottom-p">暴风魔镜 小D 虚拟现实智能VR眼镜3</p>
<span>¥128.00</span></li>
</ol>
</li>
</ul>
</div>
<div class="floor-top-end-bd2 fl">
<ul>
<li class="pjf-height">
<ol class="max-ol-style">
<li class="zp-comoon"><img src="upload/last_08.png" alt=""></li>
<li class="max-ol-style-one">
<p class="ul-bottom-p">羽博 7800毫安 Z <br>
3 移动电源/充电</p>
<span>¥139.00</span></li>
</ol>
</li>
<li class="pjf-height">
<ol class="max-ol-style">
<li class="zp-comoon"><img src="upload/last_17.png" alt=""></li>
<li class="max-ol-style-second">
<p class="ul-bottom-p">暴风魔镜 小D 虚拟现实智能VR眼镜3</p>
<span>¥128.00</span></li>
</ol>
</li>
</ul>
</div>
<div class="floor-top-end-bd2 fl">
<ul>
<li class="pjf-height">
<ol class="max-ol-style">
<li class="zp-comoon"><img src="upload/last_17.png" alt=""></li>
<li class="max-ol-style-one">
<p class="ul-bottom-p">羽博 7800毫安 Z <br>
3 移动电源/充电</p>
<span>¥139.00</span></li>
</ol>
</li>
<li class="pjf-height">
<ol class="max-ol-style">
<li class="zp-comoon"><img src="upload/last_19.png" alt=""></li>
<li class="max-ol-style-second">
<p class="ul-bottom-p">暴风魔镜 小D 虚拟现实智能VR眼镜3</p>
<span>¥128.00</span></li>
</ol>
</li>
</ul>
</div>
<div class="floor-top-bd5 fl">
<ul>
<li>
<img src="upload/last_05.png" alt="">
</li>
<li>
<img src="upload/last_15.png" alt="">
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- floor（楼梯）部分 end -->
<!-- footer部分 start -->
<div class="last-bottom">
<div class="footer-restart" id="footer-restart">
<div class="w">
<div class="footer-top">
<ul>
<li class="footer-top-li1">
<div class="img-left img-left-icon1 fl"></div>
<div class="text-right fl">
<h4>正品保障</h4>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<div class="img-left img-left-icon2 fl"></div>
<div class="text-right fl">
<h4>极速物流</h4>
<p>急速物流，极速送达</p>
</div>
</li>
<li>
<div class="img-left img-left-icon3 fl"></div>
<div class="text-right fl">
<h4>无忧售后</h4>
<p>7天无理由退还</p>
</div>
</li>
<li>
<div class="img-left img-left-icon4 fl"></div>
<div class="text-right fl">
<h4>特色服务</h4>
<p>私人定制家电套餐</p>
</div>
</li>
<li>
<div class="img-left img-left-icon5 fl"></div>
<div class="text-right fl">
<h4>帮助中心</h4>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="footer-middle">
<ul class="max-ul">
<li class="max-li">
<h4>购物指南</h4>
<ul class="footer-middle-ul">
<li>购物流程</li>
<li>会员介绍</li>
<li>生活旅行/团购</li>
<li>常见问题</li>
<li>大家电</li>
<li>联系客服</li>
</ul>
</li>
<li class="max-li">
<h4>配送方式</h4>
<ul class="footer-middle-ul">
<li>上门自提</li>
<li>211限时达</li>
<li>配送服务查询</li>
<li>配送费收取标准</li>
<li>海外配送</li>
</ul>
</li>
<li class="max-li">
<h4>支付方式</h4>
<ul class="footer-middle-ul">
<li>货到付款</li>
<li>在线支付</li>
<li>分期付款</li>
<li>常见问题</li>
<li>邮局汇款</li>
<li>公司转账</li>
</ul>
</li>
<li class="max-li">
<h4>售后服务</h4>
<ul class="footer-middle-ul">
<li>售后政策</li>
<li>价格保护</li>
<li>退款说明</li>
<li>常见问题</li>
<li>返修/退换货</li>
<li>取消订单</li>
</ul>
</li>
<li class="max-li">
<h4>特色服务</h4>
<ul class="footer-middle-ul">
<li>夺宝岛</li>
<li>DIY装机</li>
<li>延保服务</li>
<li>品优购E卡</li>
<li>品优购通信</li>
</ul>
</li>
<li class="max-li max-li-last">
<h4>帮助中心</h4>
<div class="ewm"></div>
<p>品优购客户端</p>
</li>
</ul>
</div>
<div class="footer-end">
<!-- 不要想多了，这个版权部分就是两个p -->
<p class="end-p1">关于我们 <span class="sx2">|</span> 联系我们 <span class="sx2">|</span> 联系客服 <span class="sx2">|</span> 商家入驻 <span class="sx2">|</span> 营销中心 <span class="sx2">|</span> 手机品优购 <span class="sx2">|</span> 友情链接 <span class="sx2">|</span> 销售联盟 <span class="sx2">|</span> 品优购社区 <span class="sx2">|</span> 品优购公益 <span class="sx2">|</span> English Site <span class="sx2">|</span> Contact U</p>
<p class="end-p2">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702
</p>
</div>
</div>
</div>
</div>
<!-- footer部分 end -->
</body>
</html>
公共样式:
/* 此样式用于设置网页公共样式 */
@font-face{
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('../fonts/icomoon.woff?7kkyc2') format('woff'),
url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-size: normal;
font-style: normal;
}
/* 版心*/
.w{
width: 1200px;
margin: 0 auto;
}
.fl{
float: left;
}
.fr{
float: right;
}
.style-red{
color: #c81623;
}
.sx{
margin: 0 12px;
}
.shortcut{
height: 31px;
line-height: 31px;
/*直接给大的div然后继承给子元素，不要忘了最大盒子给高,使得文字垂直居中*/
background-color: #f1f1f1;
}
.short-l li{
float: left;
/* line-height: 31px; */
}
.short-r li{
float: left;
/* line-height: 31px; */
}
.icomoon1{
font-family: 'icomoon';
font-size: 15px;
}
.spacer{
/*设置字体图标的部分掉下来了，不是垂直居中，调整其line-height调整至合适高度*/
line-height: 27px;
}
/* header部分 */
.header{
position: relative;
height: 105px;
/* background-color: pink; */
}
.logo a{
/* 图片是放在a里显示的，通过点击logo能返回首页 */
position: absolute;
top: 25px;
width: 178px;
height: 54px;
background-color: peru;
background: url(../img/01-电商-主页-gai_03.png);
text-indent: -9999px;
/*为网页在搜索引擎中提权，将文字移出*/
}
.header{
overflow: hidden;
}
.search{
position: absolute;
top:25px;
left: 345px;
width: 546px;
/*加上左右4px边框，宽度不够了btn被挤下去了,546宽度刚刚好够*/
height: 34px;
/* background-color: skyblue; */
outline: none;
/*取消轮廓线*/
}
.search input{
width: 446px;/*由于这里有宽度设置了padding，因此要减去，没有宽度随便加*/
height: 34px;
border: 2px solid #b1191a;
padding-left: 10px;
color:#666666;
}
.btn1{
width: 82px;
height: 38px;
border: none;
background-color:#b1191a;
margin-left: 0px;
padding-left:0px;
color: #fff;
}
.hotwrods{
position: absolute;
width: 476px;
height: 15px;
left: 352px;
top: 68px;
/* margin-top: 7px; 都是用top就行了，不用给margintop*/
}
.hotwrods ul{
height: 15px;
}
.hotwrods li{
float: left;
margin: 0 11px;
}
.shopcar{
position: absolute;
top: 25px;
left: 1003px;
width: 138px;
height: 34px;
border: 1px solid #dfdfdf;
font-size: 12px;
text-align: center;
line-height: 34px;
background-color: #f7f7f7;
}
.shop-icon1{
font-family: 'icomoon';
font-size: 12px;
}
.shop-icon2{
/*位置歪了，单独设置line-height--->无效*/
padding-top:2px;
padding-left: 3px;
font-family: 'icomoon';
font-size: 12px;
}
.count{
position: absolute;
/* right: 19px; */
left: 98px;
/*字体撑开应该是向右边撑开，不是向左边，因此不能用right，只能用left*/
/*没有宽度字在里面有点挤，从内部用padding挤开*/
padding: 2px 5px 0 5px;
top: -6px;/*一定不要给宽度，让字数撑开即可，件数不确定*/
/*出现问题，字与偏移量不在同一高度，调整字位置通过font-height*/
line-height: 14px;
height: 14px;
color: #fefefe;
background-color: #e60012;
border-radius: 25px 25px 25px 0;
}
/* nav部分 */
.nav{
/*上一个部分的空白部分也算上高度了，这个不用margin-top了*/
height: 45px;
/* background-color: skyblue; */
border-bottom: 2px solid #b1191a;
}
.dropdown {
height: 45px;
}
.nav-left-hd{
width: 210px;
height: 47px;/*同样道理，这里的盒子如果45px，与边框肯定有缝隙，因为大盒子有上下边框1px，就算内部高度与外部一样，也差这2px高度*/
color: #fff;
font-size: 16px;
line-height: 45px;
text-align: center;
background-color: #b1191a;
}
.nav-left{
width:210px;/*因此，此处设置不设置效果相同*/
/*到此，left的孩子中两个兄弟元素应该如果不设置宽度，则默认为父元素宽，同时，如果一个孩子把设置了宽度，把盒子撑开了，
那么父元素left的宽度就是撑开的宽度，则另一个兄弟元素就算不设置宽度也是默认撑开后父元素盒子的宽度*/
}
.nav-left-bd{
height: 455px;
background-color:#c81623;
/*用padding，同样用计算，将464-9：455，456效果好一点，用456px*/
/*同时，使用了padding的盒子本身往里面挤，因此right：0此时的位置是缩完padding后的位置，因此浮动rght：0后还有一段距离*/
}
.nav-left-bd li:hover {
background-color: #fff;
}
.nav-left-bd li:hover a{
/*鼠标经过li 里面的 a变色，涉及到不同元素时分开写。*/
color:#c81623;
}
.nav-left-bd ul li{
line-height: 30.9999px;
position: relative;
padding: 0 9px 0 9px;/*这里的padding不要给大盒子，虽然有效果，但是设置hover时就不好设置了，左右均有缝隙，因此给每个li设置padding*/
}
.nav-left-bd ul li i {
position: absolute;
font-size:16px;
right: 0px;
padding-right:10px;
/*这里的right：0是根据*/
}
.nav-left-bd ul li a{
color: #fff;
font-size: 13px;
/*应该是14，13效果更好*/
}
.nav-left-li-icon1{
font-family: 'icomoon';
color: #fff;
}
.nav-right {
height: 47px;
}
.nav-ul li a{
color: #333333;
}
.nav-ul li{
font-size: 16px;
float: left;
text-align: center;
line-height:47px; /*文字居中了*/
margin: 0 24px;
}
.nav-ul{
/*经测量，就第一个左边的margin值少是44，其余左右均为50，因此可以左右25，单独给ul设置padding，由于ul没设置宽度可以随便给达到效果*/
padding-left: 17px;
}
/* footer部分 */
.footer{
width: 100% ;
background-color:#f5f5f5;
/*给总的设置，相当于继承于其中三个子元素均有背景background-color:#f5f5f5;就相当于分开设置background-color:#f5f5f5;*/
}
.footer-top{
height: 103px;
/* background-color: #f5f5f5; */
}
.footer-middle{
height: 186px;
/* background-color: #f5f5f5; */
}
.footer-end{
height: 92px;
/* background-color: #f5f5f5; */
}
.img-left{
width: 51px;
height: 51px;
background:url(../img/icons.png) ;
margin-right:8px;
}
.img-left-icon1{
background-position: -253px -2px;
}
.img-left-icon2{
background-position: -255px -54px;
}
.img-left-icon3{
background-position: -255px -105px;
}
.img-left-icon4{
background-position: -257px -156px;
}
.img-left-icon5{
background-position: -256px -209px; /*图片本身缺一块*/
}
.footer-top{
border-bottom: 2px #ededed dashed;
}
.footer-top ul{
height:104px;/*减去1px底边*/
width: 1240px;
}
.footer-top li{
height: 51px;/*本应105，减去上下27px*/
padding: 27px 40px;
/*没给宽度的li可以随便给左右padding，不用计算*/
float: left;
}
.footer-top ul .footer-top-li1{
padding-left: 36px;
/*单独给第一个左边设置距离，权重比上面的li高即可覆盖掉*/
}
.footer-top li h4{
font-size: 14px;
margin-top: 3px;
}
.footer-top li h4,
.footer-top li p{
color: black;
}
.footer-middle h4{
font-size: 16px;
color: #333333;
}
.footer-middle-ul li{
color:#333333;
}
.max-li{
float: left;
height: 164px;
padding-top: 21px;
padding-left: 60px;
padding-right: 57px;
}
.max-ul{
height: 185px;
}
.max-li h4{
margin-bottom: 4px;
/*原本15px，效果不好，调整至4px*/
}
.max-li-last{
/*没有给宽度，随便给padding*/
height: 109px;
padding: 20px 57px 16px;
}
.max-li-last h4{
text-align: center;/*这里可以文字居中，也可以margin-left：14px，均可实现效果*/
margin-bottom: 4px;
}
.max-li-last p{
margin-top: 7px;
text-align: center;
font-size: 12px;
color:#333333;
}
.ewm{
width: 97px;
height: 95px;
background-color: pink;
background: url(../upload/erweima_03.png);
}
.footer-middle{
border-bottom: 2px #ededed dashed;
}
/* .end-ul{
margin:0 0 0 30px;
padding-top: 28px;
找到问题所在，再此设置ul的margin-top导致下部此盒子间隙向下过大，不设置上即可
以前是
<ul class="end-ul">
<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="">手机品优购</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="">English Site</a>
<span>|</span>
</li>
<li>
<a href="">Contact U</a>
</li>
</ul>
}
*/
.footer-end p{
/*两个p的距离左右距离都是居中对齐自动auto实现的*/
text-align: center;
}
.end-p1{
margin: 19px 0 12px 0;
}
.end-p2{
line-height: 19px;
/* 控制p2第一行文字与换行文字间的行距 */
}
.sx2{
/*在第一个p中放入多个span，也可适用于可以用icomoon图的时候设置左右间隔*/
margin: 0 13px;/*13px 效果比 14px好*/
}
/*至此，已实现公共部分——————顶部和底部——————，common文件撰写完毕*/
index样式：
.main{
width: 980px;
height: 445px;
/* background-color: pink; */
margin-left: 220px;
margin-top: 10px;
/*达到效果。在外部居中，内部设置margin达到效果，这个方法简单！*/
}
.foucs{
float: left;
margin-right: 10px;
}
.foucs {
height: 445px;
}
.foucs img{
height: 445px;
}
.foucs ul li a{
display: block;
/*por 与 block 不冲突，在此不设置block变为快仍然不能设置宽高，即设置poa可以不设置block，就可以设置狂傲，但设置por还要设置block，否则设置不了宽高*/
height: 445px;
position: relative
/* position: absolute; */
}
.foucs .foucs-span{
position: absolute;
width: 34px;
height: 50px;
line-height: 50px;
background-color: #585757;
opacity:.4;
/*opacity可用来设置本元素背景透明程度，0-1，越小越透明*/
top: 222.5px;
/*上下找中间，先找图片的一半，再找span自己的一半*/
transform: translateY(-50%);
}
.foucs .span1{
left:10px;
font-family: 'icomoon';
font-size: 30px;
font-weight: 400;
color: #fff;
}
.foucs .span2{
right:10px;
font-family: 'icomoon';
font-size: 30px;
font-weight: 400;
color: #fff;
}
.foucs ul li a .foucs-ul{
position: absolute;
width: 120px; /*这个宽度过小会导致即使浮动了li也会掉下去,调整至加margin也够的宽度，这个宽度随便给，反正浮动不影响别的，不需要与其他的进行布局*/
height: 19px;/*height:15px+4px上下高度边框*/
top: 412px;
left: 55px;
}
.foucs ul li a .foucs-ul li{
float: left;
height:11px;
width: 11px;
/*要出现小圆圈，宽高要一样， border-radius: 100%/50%,均可实现效果，宽高不一样就偏了*/
border: 2px solid #ccc;
margin-right: 5px;
border-radius: 100%;
/* background-color: skyblue; 不给背景颜色即为空心的园*/
}
.foucs-li-frist{
background-color: #fff;
/*可以调整第一个li的背景透明度*/
opacity:1;
}
/*出现问题，一直有10px的上部缝隙，没对齐----->未解决,现在均按445对齐*/
.newflash{
width: 248px;
height: 443px;
float: left;
}
.newflash-top{
position: relative;
font-size: 16px;
color: #7d7d7d;
height: 425px;
}
.newflash-top1 h4{
padding: 10px 0 6px 14px;
color:#333333;
/*往内挤的padding*/
}
.newflash-top1 span ,
.newflash-top1 i{
position: absolute;
right: 0px;
top: 9px;
}
.newflash-top1 span{
right: 30px;
color:#666666;
}
.newflash-top1 i{
right: 16px;
}
/* .newflash-top1 i{
} */
.newflash-icomoon{
font-family: 'icomoon';
}
/* .main-max{
width: 1200px;
w默认1200 这里设置了padding，必须改，w一改都改，所以要添加新类覆盖
margin-left: 220px;
padding-top: 10px;
height: 445px;
既然给了padding，缝隙就继续通过padding挤吧
} */
.newflash-top{
height: 162px;
}
.newflash-top1{
border-bottom: 1px #e8e8e7 dashed ;
}
.newflash-bottom1{
/*bottom无宽，随便给左右padding*/
height: 110px;
/*高度的padding-top减去10之后120,仍有缝隙，110合适*/
padding-left: 10px;
padding-top: 10px;
}
.newflash-bottom1 li{
height: 22px;
/*这里给每个li高度，line-height也行，从第一个头量到第二个头上方*/
font-size: 12px;
color:#666666;
}
.newflash{
border: 1px solid #e4e4e4;
/* 减去对应的高度宽度2px */
}
.newflash-bottom2{
height: 207px;/*减去上下边距*/
overflow: hidden;
}
.newflash-bottom2 ul{
width: 252px;
/*252正好，内部248px，加上3px，251px，252px生效（最小）*/
}
.newflash-bottom2 li{
float: left;
width: 62px;
height: 70px;
/*本来分配正好，加了边框空间不够了，即为ul设置大（合适）宽度 ，然后为 ul的父元素设置overflow：hidden*/
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
}
.newflash-bottom2 li a{
display:block;
height: 100%;
width: 100%;
}
.bottom2-icon{
margin:12px 20px 8px 20px;
}
.bottom2-icon{
display:block;
width: 24px;
height: 24px;
background: url(../img/icons.png) no-repeat ;
/* background-size: 24px 24px; 不写这句，写了没效果 */
}
.bottom2-icon1{
background-position: -17px -16px;
}
.bottom2-icon2{
background-position: -78px -16px;
width: 26px;
}
.bottom2-icon3{
background-position: -141px -16px;
}
.bottom2-icon4{
background-position: -206px -16px;
width: 26px;
}
.bottom2-icon5{
background-position: -17px -88px;
height: 23px;
}
.bottom2-icon6{
background-position: -78px -88px;
height: 23px;
}
.bottom2-icon7{
background-position: -141px -88px;
height: 23px;
}
.bottom2-icon8{
background-position: -206px -88px;
height: 23px;
}
.bottom2-icon9{
background-position: -17px -159px;
height: 27px;
width: 24px;
margin-bottom: 3px;
margin-top: 8px;
}
.bottom2-icon10{
background-position: -78px -159px;
width: 26px;
height: 27px;
margin-bottom: 3px;
margin-top: 8px;
}
.bottom2-icon11{
background-position: -141px -159px;
height: 18px;
margin-bottom: 10px;
margin-top: 10px;
}
.bottom2-icon12{
background-position: -206px -159px;
height: 27px;
margin-bottom: 3px;
margin-top: 8px;
}
.bottom-2-wz{
display: block;
/*变为块元素即生效*/
text-align: center;
/* margin-bottom: 5px; *//*margin-bottom往外挤，要里面挤*/
/* padding-bottom: 7px; 不生效*/
}
.newflash-bottom2{
border-top: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
}
.bottom-2-wz {
font-size: 13px;
/*应该是12，13效果更好*/
}
.newflash-zp{
height: 73px;
border: none;
}
.newflash-zp img{
height: 100%;
width: 100%;
}
/*交集选择器，同时满足多个条件 单独调整最后4个li高度，为下面让出图片的间隔*/
.newflash-bottom2 ul .bottom-replace-height{
height: 61px;
}
/*recommend模块*/
.recommend{
margin-top: 10px;
height: 163px;
}
.recommend-hd{
width: 200px;
/*本206，为好设置右边设置200*/
height: 100%;
background-color: #5c5251;
/* line-height: 163px; 不能为整体设置，则字就被挤下去了*/
text-align: center;
}
.recommend-hd img{
margin: 30px 0px 10px 0px;
}
.recommend-hd h4{
color: #fff;
font-size: 18px;
font-weight: normal;/*字号变大会变粗，取消变粗的效果，字号仍然18px*/
}
.recommend-bd{
/* padding-left:5px; */
width: 1000px;/*设置1000发现超过了1200px,996px刚刚好,减去padding-left5：px，想整体往右边靠一点，就要扩大最大盒子recommend-hd的宽度，经测试效果并不好看，因此不加padding了*/
/*又因下方整体与此对齐为1200版心，修改为1000，不要996，多出来一点没事*/
height: 100%;
background-color:#ebebeb;
/*做完这出现问题，下面的二维码消失了，在common.css中重新调整路径解决问题*/
}
.recommend-bd li{
width: 248px;
height: 145px;
float: left;
margin-top: 13px;
border-right: 1px solid #dddddd;
}
.like-hd{
height: 28px;
margin-bottom: 10px;
}
.like-hd h4{
font-size: 16px;
}
.like-hd-icon1{
font-family: 'icomoon';
}
.like-hd-right{
font-size: 13px;
margin-right: 21px;
}
.like{
margin-top: 28px;
/*like为最大的喜欢总盒子，没有给他设置宽高，但是不设置宽度，自动继承父亲，因此不用考虑清除浮动的问题*/
}
.like-bd{
/* 一开始bd没有给高度，但是宽度已经是1200了，一级一级继承父亲的宽度（w继承给like，like给下面的两个孩子hd，bd） */
height: 230px;
background-color:#fff;
border: 1px solid #ededed;
}
.ul-top li {
margin-top: 19px;
float: left;
/* width: 200px; */
height: 130px;
/*不给宽度，里面图片的高度不一样,背景颜色和图片颜色一样，看不出来了，让图片撑开即可*/
}
.ul-top{
height: 153px;/*130+23*/
}
.ul-bottom ,
.ul-top{
width: 1200px;
/*检查发现是1198，左右边框各占住了1px*/
}
.ul-bottom{
/* padding-top: 15px; */
height: 77px;
}
.ul-bottom li {
/*此时f12发现这里的ul跑like最上面去了-->检查发现未对第一个div（.ul-top）设置高度，设置完后解决问题*/
width: 200px;/*同样的问题，不够了但是必须挤，扩大ul，overflowhidden*/
height: 70px;
float: left;
/*ul-bottom：bd230-23mrtop-130height=77px*/
/* text-align: center; 效果不一样，浮动做出来好看*/
line-height: 20px;
border-right: 1px solid #ededed;
/* margin-top: 15px;用margin发现整个盒子被挤下去了，用padding减去高度*/
/*margin-top:2px;不能过高，经测试还是margin，不能过大！*/
/*或者干脆就别纠结，把ul-top的margin-top减少，图片向上一点，下面字不用动，这此就采用的这种方法，有更好的方法请教教我大佬们！！！*/
position: relative;
}
.ul-bottom ul{
width: 1206px;
overflow: hidden;
/* 解决问题,加完右边框后宽度不够 */
}
.ul-bottom li span{
display: block;
position: absolute;
left: 39px;
top: 48px;
font-size: 18px;
color: #df3033;
}
.ul-bottom-p{
position: absolute;
left:35px;
}
.ul-bottom ul .li-last{
border: none;
}
.youqu{
margin-top: 28px;
overflow: hidden;
/*为了下方的齐整，为防止不齐的部分，达到效果*/
}
.youqu-bd{
height: 405px;
border: 1px solid #ededed;
}
/*bd1被图片撑开高度了，不用给高度*/
.youqu-bd2,
.youqu-bd3,
.youqu-bd4{
height: 405px;
}
.youqu-bd2-hd-top {
position: relative;
height: 39px;
color: #333333;
line-height: 39px;
/*不用给宽度，让下面的兄弟元素中的图片把整体盒子撑开就可，然后继承给没有宽度的第一个儿子*/
}
.youqu-bd2-hd-top a{
position: absolute;
text-align: center;
/*将a转换为块元素，在调整偏移量将a调整到合适位置，在a中将文字居中，而不是整个大top盒子居中*/
left: 18px;
width: 194px;
height: 39px;
font-size: 14px;
font-weight: 800;/*为字体加粗，与效果图相似*/
border-bottom: 2px dashed #ededed;
/*为了这个边框，改了结构多加了a，开了定位，调整了字位置，调整宽度，因为底部边框不是全部的*/
}
.youqu-bd3-hd-top{
position: relative;
height: 39px;
background-color: #f7f7f7;
}
.youqu-bd3-hd-top a{
position: absolute;
text-align: center;
/*将a转换为块元素，在调整偏移量将a调整到合适位置，在a中将文字居中，而不是整个大top盒子居中*/
left: 20px;
width: 370px;/*这个宽度看的是底部边框的长度*/
height: 39px;
font-size: 14px;
font-weight: 800;/*为字体加粗，与效果图相似*/
border-bottom: 2px dashed #ededed;
line-height: 39px;
/*为了这个边框，改了结构多加了a，开了定位，调整了字位置，调整宽度，因为底部边框不是全部的*/
}
/* .youqu-bd4 ul{
width: 300px;
} */
/* .youqu-bd4 ul{
overflow: hidden;
} */
.youqu-bd4 li{
float: left;
width: 50%;
width: 77px;
height: 46px;
/* margin-top:21px; 发现效果不同，border-right的线是连起来的，因此要给li设置高度，不要给margin，否则线连接不起来*/
margin-left:3px;/*3是极限，再大宽度不够了*/
padding-top: 11px;/*发现只要加margin线就li的border-right连不起来，但设置padding是挤盒子内部，线不会断，因此结合padding-top调整li上方空白缝隙*/
/*与此同时高度超了，因此对li高度进行调整，发现height：46px，padding：11px效果非常好*/
/* 出现问题，第八个li不显示，隔开了，其他正常显示，重新写写一遍ul里的li即可 */
/*f12检查有颜色，但是不显示-------------> 为什么??*/
}
/* .youqu-bd4 a{
display: block;
width: 76px;
height: 57px;
} */
.youqu-bd4 {
width: 162px;
height: 385px;
overflow: hidden;
/*这里大盒子往内部挤10px，挤出第一行li上方的缝隙，同时最下方的缝隙也有了，因此不需要调整了，达到效果*/
padding-top: 10px;
/*下面里面padding结合高度，因为下方要齐，所以给大盒子overflow:hidden，切去超出部分*/
}
/*
youqu-bd4 li:nth-child(2n+1){
border-bottom: 1px dashed #ededed;
border-right: 1px dashed #ededed;
不起效果
}
*/
.ds{
border-bottom: 1px dashed #ededed;
border-right: 1px dashed #ededed ;
/*多种方法，发现bottom有，右侧的right不显示，f12检查发现已经添加上了*/
/*经过测试终于发现是图片img太大了，白色背景挡住了右侧right线，因此调整发现所有图片77*35基本适合全部img*/
}
.youqu-bd4 li img{
width: 77px;
height: 35px;
}
.ss{
border-bottom: 1px dashed #ededed;
}
.bd4-last2{
border-bottom: none;
}
.bd4-last1{
border-bottom: none;
}
.floor-top-hd{
color:#c81623;
}
.floor-top-hd-right li{
float: left;
}
.floor-top-hd-right a{
font-size: 12px;
line-height: 28px;
}
.floor-top-hd-right li span{
margin: 0 14px;
}
.floor {
margin-top: 30px;
/*同样由于文字将盒子撑开了，且宽度由w继承， 因此可以设置margin-top*/
}
.floor-top-bd1{
height: 360px;
background-color: #f9f9f9;
width: 209px;
}
.floor-top-bd1-hd li {
float: left;
width: 87px;
height: 32px;
line-height: 32px;
text-align: center;
color:#666666;
font-size: 12px;
margin-left: 12px;
margin-top: 10px;
border-bottom: 1px solid #ededed;
}
.floor-top-bd3{
width: 220px;
background-color: pink;
}
.floor-top-bd1,
.floor-top-bd2,
.floor-top-bd3,
.floor-top-bd4,
.floor-top-bd5{
float: left;
}
.floor-top-bd{
/*发现问题，由于上方的.floor-top-bd没有高度，下面公共样式底部塌掉了，因此要给大盒子bd设置高度（可以不给floor，bd和hd能撑开floor盒子）*/
height: 360px;
border-top: 2px solid #c81623;
}
.floor-top-bd3{
border-bottom: 1px solid #ededed;
}
.bd3-frist{
border-bottom: 1px solid #ededed;
}
/* .floor-top-bd3 img{
height: 180px;
} */
.bd3-second img{
width: 219px;
height: 179px;
}
.floor-top-bd5{
border-bottom: 1px solid #ededed;
border-right: 1px solid #ededed;
}
.bd5-frist{
border-bottom: 1px solid #ededed;
}
/* .footer-top ul{
overflow: hidden;
}
*/
.floor-top-bd{
width: 1201px;/*由于li掉下去了，宽度不够，延长宽度*/
}
.floor-top-bd4 li{
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
}
.footer-top ul {
overflow: hidden;
/*解决问题*/
}
/* .floor-top-bd4 li{
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
这么写盒子会被挤下来,解决方法（高度塌陷，ul在上面，f12检查原来是li掉下来了），由于li掉下来了，因此为ul设置overflow：hidden解决问题
} */
.floor-top-bd4 {
border-bottom:1px solid #ededed;
}
.floor-top-bd3 img{
height: 180px;
}
.floor-top-bd4 img{
height: 359px;
}
.bd5-second img{
height: 178px;
}
.bd3-second img{
height: 178px;
/*第三个部分的第二张图覆盖上方默认180px
.floor-top-bd3 img{
height: 180px;
}*/
}
.floor-copyright li {
float: left;
width: 109px;
height: 40px;
margin-top: 13px;
margin-left: 10px;
border-right: 2px dashed #ededed;
}
/*经过f12测试，综合调整出适合的margin即width值*/
.floor-copyright{
margin-top: 20px;
height: 65px;
background-color: #f7f7f7;
}
.floor-copyright ul {
width: 1260px; /*宽度不够，延长ul，切掉突出部分*/
overflow: hidden;
}
.floor-copyright .copyright-last {
border: none;
/*提权，把最后一个右边框去掉*/
}
.floor-hd3{
margin-top:28px;
}
.floor-end-hd{
color:#333333;
}
.floor-top-end{
height: 280px;
}
.floor-top-end-bd1 span{
display: block;
position: absolute;
left: 30px;
top: 223px;
font-size: 18px;
color: #df3033;
}
.floor-top-end-bd1{
width: 240px;
position: relative;
}
.ul-bottom-p{
position: absolute;
left:29px;
}
.pjf-height{
width: 220px;
height: 140px;
}
.floor-top-end{
height: 280px;
}
.floor-top-end-bd1 {
height: 280px;
}
.floor-top-end-bd2 {
width: 220px;
}
.max-ol-style{
height: 140px;
position: relative;
}
.max-ol-style-second p,
.max-ol-style-second span{
position: absolute;
left: 0px;
top: 0px;
}
.max-ol-style-second p{
top: 18px;
left: 115px;
}
.max-ol-style-second span{
top: 55px;
left: 114px;
font-size: 18px;
color: #df3033;
}
.max-ol-style-one p,
.max-ol-style-one span{
position: absolute;
left: 0px;
top: 0px;
}
.max-ol-style-one p{
top: 19px;
left: 115px;
}
.max-ol-style-one span{
top: 55px;
left: 114px;
font-size: 18px;
color: #df3033;
}
.zp-comoon{
margin-left: 10px;
margin-top: 18px;/*margin只能调上左*/
padding-bottom:10px;
}
.max-ol-style-second{
height: 140px;
}
.floor-top-end-bd1 {
border-right: 1px solid #ededed;
}
.max-ol-style{
border-right: 1px solid #ededed;
border-bottom: 1px solid #ededed;
overflow: hidden;
/*max-ol-style 整个ol被待下去了，加overflowhidden解决问题，疑似高度塌陷*/
}
.floor-top-end{
border: 1px solid #ededed;
border-right: none;/*截的图片带着1px边框，不给了*/
width: 1200px;/*由于加了边框，宽度不够掉下来，尝试1200即可实现效果*/
margin-bottom: 37px;/*使得本模块与footer之间存在一定缝隙*/
}
/*首页效果大致均完成，但是出现最后一个问题，footer盒子的宽度变成和w一样大了，不是和body一样大了！，未解决！！！！*/
/*已解决，要想外面的盒子继承body的宽度，就代表着每个部分必须都套一个外部的壳子，从第一个开始，只要顺序中少一个
其下一个模块及其以后模块就没有body的宽度继承!！！，所以仅需把所有的模块的最外部都套一个空壳子（从上自下）即可解决问题*/
.footer-restart{
background-color:#f5f5f5;
}
.red-style-a{
color: #c81623;
}
标签：color,top,height,html,li,品优购,margin,CSS,left 来源： https://blog.csdn.net/weixin_46972646/article/details/111415313