<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/list.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>
<!-- ms模块 -->
<div class="miaosha">
<a href="">
<img src="upload/ms_03.png" alt="">
</a>
</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="w">
<div class="nav-list-left fl">
<ul>
<li><a href="">品优秒杀</a></li>
<li><a href="">即将售罄</a></li>
<li><a href="">超值低价</a></li>
</ul>
</div>
<div class="nav-list-right fl">
<ul>
<li><a href="">女装</a></li>
<li><a href="" class="style-red-new">女鞋</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="">更多分类 <i class="nav-list-icomoon"></i></a></li>
</ul>
</div>
</div>
</div>
<!--nav部分 end -->
<!-- 女鞋图片部分 start -->
<div class="nvxie">
<div class="w">
<img src="upload/nvxie_03.png" alt="">
</div>
</div>
<!-- 女鞋图片部分 end -->
<!-- 商品items部分 start-->
<div class="items ">
<div class="w">
<ul>
<li>
<div class="items-hd">
<div class="items-hd-img">
<a href="detail.html">
<img src="upload/iphone_03.png" alt="">
</a>
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li>
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li class="last4-li">
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li class="last4-li">
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li class="last4-li">
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
<li class="last4-li">
<div class="items-hd">
<div class="items-hd-img">
<img src="upload/iphone_03.png" alt="">
</div>
<p>Apple苹果iPhone 6s Plus（A1699）32G 金<br> 色 移动联通电信4G手机
</p>
<div class="span-two">
<span class="items-one-span"> <i>¥</i>6088</span>
<del class="items-two-span">￥6988</del>
<!-- 使用del标签包裹的东西会自动带上删除线 -->
</div>
<div class="jindutiao">
<span>已售87%</span>
<div class="jdt">
<span></span>
</div>
<span>剩余29件</span>
</div>
</div>
<div class="items-bd"><a href="">立即抢购</a></div>
</li>
</ul>
</div>
</div>
<!-- 商品items部分 end-->
<div class="page">
<div class="w">
<!-- 这里放span即可，不要放div，放div第一要浮动，第二page的text-algin失效，只能通过margin-left调整，很麻烦，放两个span直接居中还简单 -->
<span class="page-num">
<a href="#" class="page-num-prev"><< 上一页</a><!-- >效果比箭头好，空格只第一个生效 -->
<a href="#">1</a>
<a href="#" class="none-boder">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#" class="none-boder">...</a>
<a href="#" class="page-num-next">下一页 >></a>
</span>
<span class="page-skip">
共10页 到第<input type="text">页
<button>确定</button>
</span>
</div>
</div>
<!-- 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>
list.css：
.miaosha{
height: 33px;
width: 81px;
position: absolute;
left: 185px;
top: 40px;
border-left: 1px solid #ce3839;
padding-left: 14px;/*调整的是左边框与图片的距离，不是整体与左边图片的距离，应该是设置margin*/
/* margin-left: 14px; */
margin-left: 8px;/*调整整体与左边图片的距离*/
}
.nav{
line-height: 47px;
/*使里面内容垂直居中，f12检查得到高度47*/
}
.nav-list-left li{
float: left;
margin:0 30px;
font-size: 16px;
font-weight: 700;
}
.nav-list-left li a{
color: #000000;
}
.nav-list-right li a{
color: #747474;
}
.nav-list-right li{
float: left;
margin: 0 23px;
}
.nav-list-right li a{
font-size: 13px;
/*本来14，13效果更好*/
}
.nav-list-icomoon{
font-family: 'icomoon';
}
.nav-list-right li .style-red-new{
/*加权*/
color: #b1191a;
}
/* .items-hd{
} */
.items{
overflow: hidden;
/*1.通过overflow的方法清除浮动，可解决下方由于li把footer压塌掉（把下面挤乱了）的问题
为其父亲设置overflow：hidden，li的父亲没有高度，但里面有孩子，导致问题出现，加完overflow 经f12检查发现items拥有高度了，与li撑开的高度相同*/
/*2.或者为其li的父亲items加clearfix类，同样可以解决问题,同样是加上就具有高度了，这个clearfix类在base.css中已经定义好了，直接拿来用*/
/* .clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
不用记，这段代码来自base.css
} */
}
.items li{
/* width: 290px; */
width: 291px;/*将li盒子变成c3盒子了，不用单独计算边框，也不用考虑调整因边框的影响了*/
border: 1px solid #e12228;
float: left;
margin-right: 13px;
margin-top: 30px;
box-sizing: border-box;
/*发现下方的footer塌掉了*/
}
.items-hd p{
line-height: 22px;
padding-left: 10px;/*p没给宽度是字撑开的，随便给padding*/
margin-top: 20px;
}
.items-one-span{
font-size: 22px;
color:#e60012;
font-weight: 700;
}
.span-two{
padding-left: 12px;
}
.items-hd-img{
padding-top: 18px;
}
.items-one-span i{
font-size:14px;
}
.items-two-span{
font-size: 13px;
/*本应该为14px，13px效果好一点*/
font-weight: 600;
}
.jdt{
margin: 0 5px;
display: inline-block;
vertical-align: middle;
/*使得三个行内元素垂直居中，与行内块一起用的*/
width: 132px;
height: 11px;/*经测试这个高度，本来是13，但上下border，f12测试完11px符合要求*/
/*11符合要求，且不要给margin-top，但最后一行li出现问题，因此单独给最后4个修改jdt的高度*/
border-top: 1px solid #e12228;
border-right: 1px solid #e12228;
border-bottom: 1px solid #e12228;
border-radius: 22px;
overflow: hidden;/*删除圆圈以外的内部span的背景*/
}
/* .last4-li .jindutiao .jdt{
height: 11px;
为最后一个盒子的高度+1px，经f12测试后，得到最后4个改外部div（jdt）的高度
将li变成c3盒子，即可不用设置高度了，不用考虑下方边框对其影响，产生影响的部分不用单独调整高度
经测试发现li加完box-szing后 此段代码加不加效果相同，依然达成效果
} */
.jdt span{
display: block;
height: 13px;/*这里高度无所谓，大多少都行，能删去，主要看外面盒子的高度*/
width: 87%;
background-color:#ed282e;
}
.jindutiao{
/* margin-top: 2px; 不能给这个margin-top，发现外部jdt高度不符合效果，一直要改*/
padding-left: 10px;/*没给宽度随便给padding，是里面撑开的*/
}
.items-bd{
width: 290px;/*多出的左右边框，f12检查为li width：289*/
height: 52px;/*经测试下面少1px，51正好*/
line-height: 50px;
background-color:#b1191a;
/*其内部a垂直水平居中*/
text-align: center;
margin-top: 14px;
}
.items-bd a{
font-size: 20px;
color: #ffffff;
font-weight: normal;
}
.items ul{
width: 1230px;
overflow: hidden;
}
/* .items-hd-img img{
transform: all .4s;
}
实现不了，还是不会用，存在问题!!!!!!!!!!!!
.items-hd-img img:hover{
margin-top: 2px;
} */
.page{
/*不给宽度，撑开即可*/
text-align: center;
/*page本身是充满的，本身不需要居中对齐，只需让内容居中对齐即可，其内部行内元素均可居中对齐*/
margin: 40px 0;
}
.page-num a{
display: inline-block;/*行内块与块不同，行内块在此因page 的text-algin center 仍可以居中显示,设置block就会垂直显示多个*/
width: 36px;
height: 36px;
line-height: 36px;
border: 1px solid #ccc;
background-color: #f7f7f7;
}
.page-num .page-num-next,
.page-num .page-num-prev{
/*提权，否则加不上样式，因为上一个设置的是 类 a，*/
width: 83px;
}
.page-num .none-boder{
/*提权*/
border-color: transparent;
background-color: #fff;
}
.page-skip input{
outline-color: blue;
width: 46px;
height: 30px;
margin: 0 2px;
/*输入内容居中*/
text-align: center;
transition:all 0.5s;
/*过渡效果*/
}
/*交集选择器，为获取焦点后添加样式*/
.page-skip input:focus{
width: 88px;
border:1px solid skyblue;
/*好使，过渡效果生效*/
}
.page-skip button{
margin-left: 5px;
outline: none;
width: 54px;
height: 36px;
border: 1px solid #ccc;
background-color: #f7f7f7;
}
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
