h5-弹出层layer，提示，顶部横条，
<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>
<!-- .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>
<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>
<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">
<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>
<div class="bl_more"><a href="#">加载更多</a></div>
<!-- .m_baoliao .bl_more { .m_baoliao .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>
<div class="m_user w">
<!-- .m_user { .m_user a {
line-height: 40px; float: left;
} width: 33%;
text-decoration: none;
color: #666666;
font-size: 12px;
text-align: center;
} -->
<!-- <a href="user.html">忆乡人***</a>
<a href="#">退出</a> -->
<a href="login.html">登录</a>
<a href="register.html">注册</a>
<a href="javascript:void(0);" class="backtop">返回顶部</a>
</div>
<div class="footer w">
<!-- .footer a { .footer .ico_img { .footer .ico_img img { .footer a span {
float: left; 否则整行显示 margin-top: 15px; width: 30px; 图片缩放 font-size: 12px;
width: 33%; } } color: #666666;
height: 80px; line-height: 30px;
text-align: center; 否则里面的div和span居左显示 }
text-decoration: none;
}
-->
<a href="#"><div class="ico_img"><img src="images/178hui-app.png"></div><span style="color:#00bb9c">客户端</span></a>
<a href="index.html"><div class="ico_img"><img src="images/178hui-shouji.png"></div><span style="color:#eb4f38">触摸版</span></a>
<a href="#"><div class="ico_img"><img src="images/178hui-diannao.png"></div><span>电脑版</span></a>
</div>
<div class="copyright">Copyright © 2012-2015 一起惠返利网 m.178hui.com 版权所有</div>
<!-- .copyright { .copyright a {
line-height: 40px; text-decoration: none;
font-size: 12px; color: #999999;
color: #999999;
text-align: center;
float: left;
width: 100%;
}
-->
</div>
<div class="gotop backtop" style="display:none;"></div>
<!-- .gotop {
background-image: url(../images/iconfont-fanhuidingbu.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 40px; 图片的大小
height: 40px;
width: 40px;
position: fixed; 固定定位就可以一直在屏幕的一个位置不滑动
right: 10px;
bottom: 50px;
z-index: 9999;
cursor: pointer;
} -->
</body>
</html>
<script type="text/javascript">
//返回顶部
$(document).ready(function(){
$(window).scroll(function () {
var scrollHeight = $(document).height();
var scrollTop = $(window).scrollTop();
var $windowHeight = $(window).innerHeight();
scrollTop > 75 ? $(".gotop").fadeIn(200).css("display","block") : $(".gotop").fadeOut(200).css({"background-image":"url(images/iconfont-fanhuidingbu.png)"});
});
$('.backtop').click(function (e) {
$(".gotop").css({"background-image":"url(images/iconfont-fanhuidingbu_up.png)"});
e.preventDefault();
$('html,body').animate({ scrollTop:0});
});
});
</script>