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>?
轉載于:https://www.cnblogs.com/yaowen/p/5523579.html
總結
- 上一篇： linux命令之seq
- 下一篇： Python黑魔法，一行实现并行化