h5-列表
<header>
<!-- a,div,header,span {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /*修改a、input和button点击时的蓝色外边框和灰色半透明背景*/
} -->
<div class="header">
<!-- .header {
height: 44px;
background: #ff8200;
position: relative;
z-index: 10;
} -->
<a class="new-a-back" href="index.html"> <span><img src="images/iconfont-fanhui.png"></span> </a> <!-- 返回回到首页 -->
<!-- .new-a-back { .new-a-back span {
height: 40px; background: url(../images/icon_fh.png) no-repeat 0px 0px/18px 18px;
position: absolute; display: block;
width: 45px; height: 35px;
} text-indent: 17px; .new-a-back span img {
width: 50px; width: 25px;
color: #FFF; }
font-size: 14px;
padding-top: 8px;
margin-left: -10px;
}
.header h2 { .header .header_right {
color: #fff; position: absolute; /*absolute相对于 static 定位以外的第一个父元素进行定位,fixed相对于浏览器窗口进行定位,relative相对于其正常位置进行定位 */
font-size: 16px; right: 10;
font-weight: normal; top: 10;
height: 44px; }
line-height: 44px;
text-align: center;
font-weight: bold;
}
-->
<h2>优惠爆料</h2>
<div class="header_right shaixuan"><img src="images/iconfont-shaixuan.png"></div>
</div>
</header>
<div class="search w">
<!-- .w { .search {
background-color: #FFFFFF; margin-top: 2%;
float: left; }
min-width: 320px;
width: 97%;
margin-top: 1%;
margin-right: 1.5%;
margin-bottom: 1%;
margin-left: 1.5%;
}
-->
<form action="" method="get">
<input name="" type="text" class="search_input" placeholder="请输入您想要查找的爆料">
<!-- .search_input {
width: 85%;
margin: 0px;
padding-top: 12px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 40px;
float: left;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
outline: none; /* 元素周围的一条轮廓线 */
font-family: Helvetica, "Microsoft YaHei", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
background-image: url(../images/iconfont-sousuo.png);
background-repeat: no-repeat;
background-position: 10px center; /*图片水平位置,垂直方向的位置 */
background-size: 20px; /* 图片大小 */
width: 80%;
} -->
<input name="" type="button" class="search_submit" value="搜索">
<!-- .search_submit {
float: left;
width: 20%;
height: 37px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
outline: none;
font-family: Helvetica, "Microsoft YaHei", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 37px;
color: #FFFFFF;
background-color: #009999;
} -->
</form>
</div>
<div class="baoliao w">
<div class="ui-tab">
<ul class="ui-tab-nav">
<li class="current"><a href="#">最新爆料</a></li>
<li><a href="#">优质爆料</a></li>
<li><a href="#" >热门排行</a></li>
<li><a href="#" >白菜汇</a></li>
</ul>
<div class="ui-tab-content">
<a href="baoliao_view.html">
<div class="baoliao_content">
<!-- .baoliao_content {
float: left;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #F2F2F2;
margin-top: 15px;
} -->
<div class="bl_img"><img src="http://baoliao.178hui.com/upload/2015/0710/12332059693.jpg" /></div>
<!-- .baoliao_content .bl_img { .baoliao_content .bl_img img {
float: left; width: 90px;
margin: 5px; }
width: 15%;
} -->
<div class="bl_right">
<!-- .baoliao_content .bl_right {
float: left;
margin-left: 10px;
width: 78%;
} -->
<div class="bl_title">韩国现代（HYUNDAI) BD-YS2003 多功能养生壶 煎药壶2.0L</div>
<!-- .baoliao_content .bl_title {
float: left;
font-size: 12px;
color: #666666;
line-height: normal;
width: 100%;
} -->
<div class="bl_note">手机端：99元包邮</div>
<!-- .baoliao_content .bl_note {
float: left;
font-size: 12px;
line-height: normal;
color: #FF3300;
margin-top: 5px;
width: 100%;
} -->
<div class="bl_tag">
<!-- .baoliao_content .bl_tag {
float: left;
font-size: 12px;
width: 100%;
line-height: 30px;
margin-top: 10px;
} -->
<div class="bl_price">￥99.00</div>
<!-- .baoliao_content .bl_right .bl_tag .bl_price {
float: left;
font-size: 12px;
color: #FF3300;
} -->
<div class="bl_oprice">￥138.00</div>
<!-- .baoliao_content .bl_right .bl_tag .bl_oprice {
font-size: 12px;
text-decoration: line-through;
float: left;
margin-left: 10px;
color: #999999;
} -->
<div class="bl_time">07-10 12:33</div>
<!-- .baoliao_content .bl_right .bl_tag .bl_time {
float: right;
font-size: 12px;
color: #666666;
margin-left: 10px;
} -->
<div class="bl_mall">京东商城</div>
<!-- .baoliao_content .bl_right .bl_tag .bl_mall {
float: right;
font-size: 12px;
color: #666666;
} -->
</div>
</div>
</div>
</a>
<a href="#">
<div class="baoliao_content">
<div class="bl_img"><img src="http://baoliao.178hui.com/upload/2015/0710/12332059693.jpg" /></div>
<div class="bl_right">
<div class="bl_title">韩国现代（HYUNDAI) BD-YS2003 多功能养生壶 煎药壶2.0L</div>
<div class="bl_note">手机端：99元包邮</div>
<div class="bl_tag">
<div class="bl_price">￥99.00</div>
<div class="bl_oprice">￥138.00</div>
<div class="bl_time">07-10 12:33</div>
<div class="bl_mall">京东商城</div>
</div>
</div>
</div>
</a>
<div class="bl_more"><a href="#">加载更多</a></div>
<!-- .bl_more { .bl_more a {
line-height: 40px; line-height: 40px;
text-align: center; height: 40px;
border-bottom-width: 1px; width: 100%;
border-bottom-style: solid; color: #666666;
border-bottom-color: #EEEEEE; text-decoration: none;
float: left; float: left;
width: 100%; font-size: 12px;
} }
<!--筛选-->
<div class="shaixuan_box">
<!-- .shaixuan_box {
position: absolute;
right: 0px;
top: 0px;
background-color:rgba(255,255,255,0.95);
height: 100%;
width: 100%;
z-index: 9999;
display: none;
margin-right: -100%;
overflow: auto;
min-height: 100%;
} -->
<div class="shaixuan_mall">
<!-- .shaixuan_mall {
padding: 10px;
} -->
<h1>商城筛选</h1>
<!--.shaixuan_mall h1 {
font-size: 16px;
font-weight: normal;
color: #00bb9c;
text-align: center;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #F2F2F2;
line-height: 40px;
width: 100%;
float: left;
margin: 0px;
padding: 0px;
background-color: #EEEEEE;
} -->
<div class="shaixun_item">
<!-- .shaixun_item {
float: left;
width: 100%;
padding-top: 30px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #F2F2F2;
} -->
<a href="#" class="current">全部商城</a>
<!-- .shaixun_item a { .shaixun_item a.current {
font-size: 14px; color: #ff8200;
color: #666666; font-weight: bold;
text-decoration: none; font-size: 14px;
text-align: center; }
display: block;
margin-bottom: 5%;
float: left;
width: 25%; <!-- width=25%要和float=left一起用才能使得每行4个 -->
}
<a href="#">京东商城</a>
<!-- .shaixun_item a:active,.shaixun_item a:hover {
color: #ff8200;
font-weight: bold;
font-size: 14px;
} -->
<a href="#">亚马逊</a>
<a href="#">苏宁易购</a>
<a href="#">一号店</a>
<a href="#">天猫商城</a>
<a href="#">易迅网</a>
<a href="#">健一网</a>
<a href="#">国美在线</a>
<a href="#">当当网</a>
<a href="#">亚马逊</a>
<a href="#">我买网</a>
<a href="#">优购商城</a>
<a href="#">新蛋</a>
<a href="#">顺丰优选</a>
<a href="#">京东商城wap端</a>
<a href="#">飞飞商城</a>
<a href="#">为为网</a>
<a href="#">淘宝网</a>
<a href="#">沱沱工社</a>
<a href="#">银泰网</a>
<a href="#">唯品会</a>
<a href="#">可得眼镜</a>
<a href="#">华强北商城</a>
<a href="#">天天网</a>
<a href="#">母婴之家</a>
<a href="#">聚美优品</a>
<a href="#">知我药妆</a>
<a href="#">1号药网</a>
<a href="#">酒仙网</a>
<a href="#">尚妆网</a>
</div>
<p><a href="#" class="shaixuan_colos">关闭</a></p>
<!-- .shaixuan_mall p { .shaixuan_colos {
line-height: 40px; color: #666666;
width: 100%; text-decoration: none;
text-align: center; display: block;
} background-color: #F6F6F6;
width: 100%;
text-align: center;
font-size: 14px;
float: left;
}
-->
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".shaixuan").click(function(event){
event.stopPropagation(); /* 停止事件的传播 */
$(".shaixuan_box").show();
$(".shaixuan_box").animate({'margin-right':'0%'});
$("body,html").css("overflow","hidden");
$(".shaixuan_box").css("overflow","auto");
$('body').bind("touchmove",function(e){
e.preventDefault();
});
});
$(".shaixuan_mall a").click(function(event){
$("body,html").css("overflow","auto");
$(".shaixuan_box").animate({right:'-100%'});
$(".shaixuan_box").hide(5);
$("body").unbind("touchmove");
});
});
</script>
