標籤:
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);}
手機端代碼共用部分