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