手机端代码共用部分

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);
}

 

posted on 2016-08-07 19:04  jasonduanmu  阅读(378)  评论(0)  编辑  收藏  举报

导航