<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="m.178hui.com" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="format-detection" content="telephone=no"> <title>一起惠返利网·触摸版</title> <link href="css/owl.carousel.css" rel="stylesheet"> <script src="js/owl.carousel.min.js"></script> <script src="js/jquery-1.8.3.min.js"></script> <script src="layer/layer.js"></script> <link href="css/public.css" rel="stylesheet" type="text/css" /> <link href="css/index.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function(){ $(".mall_list a").click(function(){ var index = layer.open({ type: 1, title: "haha", closeBtn: true, shadeClose: true, offset: '25%', content: "<div class='no_login_show'>"+ "<h1>亲!您还没登录一起惠哦!</h1><a href='login.html'>马上登录</a><a href='register.html'>"+ "免费注册</a><a href='#'>先购物,再返利</a><a href='javascript:layer.closeAll();'>取消</a></div>" }); }); $("#msg_bijia").click(function(){ layer.tips('请耐心等待一下,我们正在拼命开发中···','#msg_bijia'); }); }); </script> </head>
<body> <div class="mobile"> <!-- .mobile { background-color: #FFFFFF; min-width: 320px; } --> <!-- 最顶上的logo --> <div class="header"> <!-- .header .m_logo { .header .m_logo a { .header .m_logo img { .header .m_search { float: left; height: 45px; height: 35px; float: right; margin-left: 10px; float: left; margin-top: 5px; height: 25px; } } } width: 25px; margin-top: 10px; margin-right: 15px; } --> <div class="m_logo"><a href="#"><img src="images/m-index_02.png"></a></div> <!-- 一起返利网图片字 --> <div class="m_search"><a href="#"><img src="images/m-index_05.png" width="40"></a></div> <!-- 搜索的放大镜图片 --> </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
|
<!-- .w {
background-color: #FFFFFF;
float: left;
min-width: 320px;
width: 97%;
margin-top: 1%;
margin-right: 1.5%;
margin-bottom: 1%;
margin-left: 1.5%;
} -->
<
div
class="top w">
<!-- .top .m_banner {
padding: 5px;
} -->
<
div
class="m_banner" id="owl">
<
a
href="#" class="item"><
img
src="images/10250290397.png"></
a
>
<
a
href="http://www.178hui.com" class="item"><
img
src="images/10225357963.jpg"></
a
>
</
div
>
<
div
class="m_nav">
<!-- .top .m_nav { .top .m_nav img { .top .m_nav a { .top .m_nav a span {
margin-top: 10px; height: 44px; width: 24%; width: 100%;
float: left; } text-decoration: none; float: left; float为left并且宽度为100%就能够使得文字在图片正下方
width: 100%; height: 100px; line-height: 40px; 增加上面的行高
} text-align: center; font-size: 14px;
float: left; color: #666666;
margin-top: 10px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
} } -->
<
a
href="http://m.178hui.com/mall/index.html"><
img
src="images/m-index_10.png"><
span
>商城返利</
span
></
a
>
<
a
href="http://m.178hui.com/baoliao/index.html"><
img
src="images/m-index_12.png"><
span
>优惠爆料</
span
></
a
>
<
a
href="http://m.178hui.com/taobao/index.html"><
img
src="images/m-index_14.png"><
span
>淘宝返利</
span
></
a
>
<
a
href="http://m.178hui.com/article/index.html"><
img
src="images/m-index_16.png"><
span
>购物资讯</
span
></
a
>
<
a
href="javascript:void(0);" id="msg_bijia"><
img
src="images/m-index_22.png"><
span
>比价网</
span
></
a
>
<
a
href="http://m.178hui.com/qiandao/index.html"><
img
src="images/m-index_24.png"><
span
>有奖签到</
span
></
a
>
<
a
href="http://m.178hui.com/order/index.html"><
img
src="images/m-index_26.png"><
span
>订单管理</
span
></
a
>
<
a
href="http://m.178hui.com/user/index.html"><
img
src="images/m-index_27.png"><
span
>会员中心</
span
></
a
>
</
div
>
</
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
|
<
div
class="m_mall w">
<!-- .m_mall .mall_title { .m_mall .mall_title span {
line-height: 40px; div使用line-height可以在div高度不变的前提下使得文字垂直居中 float: left;
border-bottom-width: 1px; 增加底边线 margin-left: 10px;
border-bottom-style: solid; color: #00bb9c;
border-bottom-color: #F9F9F9; font-size: 16px;
width: 100%; }
height: 40px; 高度可以写死
}
.m_mall .mall_title em { .m_mall .mall_title a {
float: right; color: #666666;
margin-right: 10px; text-decoration: none;
font-size: 12px; }
font-style: normal;
color: #666666;
} -->
<
div
class="mall_title"><
span
>热门商城</
span
><
em
><
a
href="#">更多</
a
></
em
></
div
>
<
div
class="mall_list">
<!--
.m_mall .mall_list { .m_mall .mall_list .mall { .m_mall .mall_list .mall .mall_logo {
float: left; float: left; 不float=left则一个就整行显示 height: 50px;
width: 100%; width: 25%; overflow: hidden;
padding-top: 25px; text-align: center; }
} text-decoration: none;
margin-bottom: 25px;
display: block; a标签成为块状元素包含div
}
.m_mall .mall_list .mall .mall_logo img { .m_mall .mall_list .mall span { .m_mall .mall_list .mall span i {
width: 80px; 给图片设置宽高图片就自动缩放 text-decoration: none; color: #FF3300;
} color: #666666; font-size: 13px;
font-size: 12px; font-style: normal;
line-height: 30px; }
}
-->
<
a
href="#" class="mall"><
div
class="mall_logo"><
img
src="images/m-index_10.png" /></
div
><
span
>最高返 <
i
>2.8%</
i
></
span
></
a
>
<
a
href="#" class="mall"><
div
class="mall_logo"><
img
src="images/m-index_10.png" /></
div
><
span
>最高返 <
i
>2.8%</
i
></
span
></
a
>
<
a
href="#" class="mall"><
div
class="mall_logo"><
img
src="images/m-index_10.png" /></
div
><
span
>最高返 <
i
>2.8%</
i
></
span
></
a
>
<
a
href="#" class="mall"><
div
class="mall_logo"><
img
src="images/m-index_10.png" /></
div
><
span
>最高返 <
i
>2.8%</
i
></
span
></
a
>
<
a
href="#" class="mall"><
div
class="mall_logo"><
img
src="images/m-index_10.png" /></
div
><
span
>最高返 <
i
>2.8%</
i
></
span
></
a
>
<
a
href="#" class="mall"><
div
class="mall_logo"><
img
src="images/m-index_10.png" /></
div
><
span
>最高返 <
i
>2.8%</
i
></
span
></
a
>
<
a
href="#" class="mall"><
div
class="mall_logo"><
img
src="images/m-index_10.png" /></
div
><
span
>最高返 <
i
>2.8%</
i
></
span
></
a
>
<
a
href="#" class="mall"><
div
class="mall_logo"><
img
src="images/m-index_10.png" /></
div
><
span
>最高返 <
i
>2.8%</
i
></
span
></
a
>
</
div
>
</
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<
div
class="m_baoliao w">
<
div
class="baoliao_title"><
span
>最新爆料</
span
><
em
><
a
href="#"><
img
src="images/iconfont-shuaxin.png"></
a
></
em
></
div
>
<!-- .m_baoliao .baoliao_title { .m_baoliao .baoliao_title span { .m_baoliao .baoliao_title em {
line-height: 40px; 增加内边距不增加div的高度 float: left; float: right;
border-bottom-width: 1px; margin-left: 10px; margin-right: 10px;
border-bottom-style: solid; color: #00bb9c; font-size: 12px;
border-bottom-color: #F9F9F9; font-size: 16px; font-style: normal;
width: 100%; } color: #666666;
height: 40px; }
}
.m_baoliao .baoliao_title a { .m_baoliao .baoliao_title img {
color: #666666; width: 20px; 对图片进行缩放
text-decoration: none; margin-top: 10px;
} }
-->
<
div
class="baoliao_list">
<!-- .m_baoliao .baoliao_list {
float: left;
} -->
<
a
href="baoliao_view.html">
<
div
class="baoliao_content">
<!--
.baoliao_content { .baoliao_content .bl_img { .baoliao_content .bl_img img { .baoliao_content .bl_right {
float: left; 不float=left就会占据整行 float: left; width: 90px; float: left;
width: 100%; margin: 5px; } margin-left: 10px;
border-bottom-width: 1px; width: 15%; 对图片进行了缩放 width: 78%;
border-bottom-style: solid; } }
border-bottom-color: #F2F2F2;
margin-top: 15px;
}
.baoliao_content .bl_title { .baoliao_content .bl_note { .baoliao_content .bl_tag {
float: left; float: left; float: left;
font-size: 12px; font-size: 12px; font-size: 12px;
color: #666666; line-height: normal; width: 100%;
line-height: normal; color: #FF3300; line-height: 30px; 增加行高
width: 100%; margin-top: 5px; margin-top: 10px;
} width: 100%; }
}
.baoliao_content .bl_right .bl_tag .bl_price { .baoliao_content .bl_right .bl_tag .bl_oprice {
float: left; font-size: 12px;
font-size: 12px; text-decoration: line-through; 中划线
color: #FF3300; float: left; float=left就能够多个div一行显示而不是每一个div一行显示
} margin-left: 10px;
color: #999999;
}
.baoliao_content .bl_right .bl_tag .bl_mall { .baoliao_content .bl_right .bl_tag .bl_time {
float: right; float: right;
font-size: 12px; font-size: 12px;
color: #666666; color: #666666;
} margin-left: 10px;
}
-->
<
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
>
<
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
>
<
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韩国现代(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
>
<
a
href="#">
<
div
class="baoliao_content">
<
|