手機端代碼共用部分

來源:互聯網
上載者:User

標籤:

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

 

手機端代碼共用部分

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.