|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<
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
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<
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
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<
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
>
|
|
1
2
3
4
5
6
7
8
9
10
|
<
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;
} }
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<!--筛选-->
<
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
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<
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
>
|
本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/5523579.html，如需转载请自行联系原作者
