HTML代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="author" content="vscss.com">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no"> <!--网页的到期时间。一旦网页过期，必须到服务器上重新传输-->
<meta http-equiv="Cache-Control" content="no-cache"> <!--请求或响应消息不能缓存-->
<meta http-equiv="Pragma" content="no-cache">
<!--ps:以上3句清除浏览器中的缓存，它和其它几句合起来用，就可以使你再次进入曾经访问过的页面时，ie浏览器必须从服务端下载最新的内容，达到刷新的效果。-->
<meta name="description" content="">
<meta name="Keywords" content="">
<title></title>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
</head>
<body class="mbody">
<script type="text/javascript" src="js/jquery.min.js"></script>
</body>
</html>
公共css部分：
@charset "utf-8";
/*公共样式*/
* {
tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: rgba(0,0,0,0); /*用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色*/
-ms-tap-highlight-color: rgba(0,0,0,0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; /*苹果移动设备上会识别，用于保证文字大小*/
text-size-adjust: 100%; /*text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能.*/
}
body {
-webkit-text-size-adjust: 100%;
background: #f2f2f2;
min-width: 320px;
margin: 0 auto;
height: 100%;
width: 100%;
overflow-x: hidden;
-webkit-overflow-scrolling: touch; /*允许独立的快速滚动和触摸回弹*/
font-family: PingFangSC-Regular,Helvetica,"Droid Sans",Arial,sans-serif;
font-size: 14px;
line-height: 1;
}
a, div, header, span {
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
clear: both;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%; /*给h系列显试指定font-size:100%;它就会继承body设定的字体大小*/
font-weight: normal;
}
ul,ol {
list-style: outside none none;
}
img {
vertical-align: middle;
font-size: 0;
border: none;
-ms-interpolation-mode: bicubic; /*解决图片缩放失真问题*/
}
a {
text-decoration: none;
color: #333;
}
a, input, textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0); /*用户点击链接，覆盖显示的高亮颜色*/
outline: 0; /*去外边框*/
}
input, select, button {
font-size: 100%;
vertical-align: middle;
outline: 0;
}
.mbody {
max-width: 640px;
}
.none {
display:none;
}
.f_l {
float:left;
}
.f_r {
float:right;
}
.clearfix:after {
content:".";
height:0;
clear:both;
display:block;
visibility:hidden;
}
.ellipsis{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.btn {
padding: 8px 15px;
background-color: #de3333;
color: #fff;
text-align: center;
border-radius: 4px;
}
.btn_block{
background-color: #de3333;
height: 45px;
line-height: 45px;
color: #fff;
font-size: 15px;
text-align: center;
-webkit-border-radius:4px;
margin:15px 20px;
display: block;
cursor: pointer;
}
.dir_arrow{
display: inline-block;
width: 8px;
height: 8px;
border:1px solid #666;
border-top:0;
border-right: 0;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
}
.dir_arrow_top{
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
}
.dir_arrow_bottom{
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
}
时间： 2024-10-16 11:55:11