一:移动端公共样式
- /* 禁用iPhone中Safari的字号自动调整 */
- html {
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- /* 解决IOS默认滑动很卡的情况 */
- -webkit-overflow-scrolling : touch;
- }
- /* 禁止缩放表单 */
- input[type="submit"], input[type="reset"], input[type="button"], input {
- resize: none;
- border: none;
- }
- /* 取消链接高亮 */
- body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- }
- /* 设置HTML5元素为块 */
- article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
- display: block;
- }
- /* 图片自适应 */
- img {
- width: 100%;
- height: auto;
- width: auto\9; /* ie8 */
- display: block;
- -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/
- }
- /* 初始化 */
- body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button,
- form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup,
- menu, nav, section {
- margin: 0;
- padding: 0;
- }
- body {
- font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif;
- color: #fff;
- background-color: #F7F7F7;
- }
- em, i {
- font-style: normal;
- }
- ul,li{
- list-style-type: none;
- }
- strong {
- font-weight: normal;
- }
- table{
- border-collapse:collapse;
- border-spacing:0
- }
- textarea {
- resize:none; /*禁用了文本的拖拉,尤其在谷歌下*/
- }
- p {
- word-wrap:break-word; /* 不够的单词自动换行 而不会被截掉 */
- }
- .clearfix:after {
- content: "";
- display: block;
- visibility: hidden;
- height: 0;
- clear: both;
- }
- .clearfix {
- zoom: 1;
- }
- a {
- text-decoration: none;
- color: #fff;
- font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
- }
- a:hover {
- text-decoration: none;
- }
- ul, ol {
- list-style: none;
- }
- h1, h2, h3, h4, h5, h6 {
- font-size: 100%;
- font-family: 'Microsoft YaHei';
- }
- img {
- border: none;
- }
- input{
- font-family: 'Microsoft YaHei';
- }
- /*单行溢出*/
- .one-txt-cut{
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- /*多行溢出 手机端使用*/
- .txt-cut{
- overflow : hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- /* -webkit-line-clamp: 2; */
- -webkit-box-orient: vertical;
- }
- /* 移动端点击a链接出现蓝色背景问题解决 */
- a:link,a:active,a:visited,a:hover {
- background: none;
- -webkit-tap-highlight-color: rgba(0,0,0,0);
- -webkit-tap-highlight-color: transparent;
- }
- .overflow {overflow:hidden; }
- .w50{
- width: 50%;
- }
- .w25{
- width: 25%;
- }
- .w20{
- width: 20%;
- }
- .w33{
- width: 33.333333%;
- }
- .fl{
- float: left;
- }
- .fr{
- float: right;
- }
- .db{
- display: block !important;
- }
- .dn{
- display: none;
- }
- /* 附加 */
二:PC端公共样式
1.简单样式清除
- html {width: 100%;-webkit-text-size-adjust:none;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);height: 100%;}
- body {width: 100%;height: 100%;font-size: 16px; color: #fff;line-height: 24px;background: #fff;min-height: 100%;font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;}
- * {margin: 0;padding: 0;border: 0;}
- ul,ul li,ol,li {list-style: none outside none;}
- img {vertical-align: middle;border: none;width: 100%;}
- i {font: inherit;}
- input,select,option {vertical-align: middle;border-radius: 0px;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;}
- input[type="text"],input[type="button"],input[type="submit"],input[type="reset"] {-webkit-appearance: none;appearance: none;border-radius: 0;outline: none;}
- .fl {float: left;display: inline;}
- .fr {float: right;display: inline;}
- h1,h2,h3,h4,h5,h6,i,strong {font-weight: normal;}
- select::-ms-expand { display: none; }
- a {color: #fff;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
- a:hover {text-decoration: none;outline: none;}
- .clear {clear: both;}
- .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
- .clearfix {zoom: 1;display: block;_height: 1px;clear: both;}
- body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin: 0;padding: 0;
2.animate动画
内容有点多,一般很少用,有需要留言我私发
3.ie
- /*
- * <!--[if IE]>
- * <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
- * <![endif]--> */
4.transform和一些简单面包屑
一样 极少用,有需要我私发
三 移动端HTML
- <html>
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <!-- 关键字和描述 -->
- <meta name="keywords" content="互联网,IT开发,区块链">
- <meta name="description" content="网站是什么事没什么什么事没什么,其实没什么">
- <title>index</title>
- <meta name="viewport" content="initial-scale=1, maximum-scale=1">
- <!--收藏-->
- <!-- <link rel="shortcut icon" href="/favicon.ico"> -->
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <!--微信缓存-->
- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
- <meta http-equiv="Pragma" content="no-cache" />
- <meta http-equiv="Expires" content="0" />
- <!-- 图标LOGO -->
- <link rel="icon" href="images/logo.ico" type="image/x-icon"/>
- <span style="white-space:pre;"> </span>
- <link rel="stylesheet" href="css/comment.css"><span style="white-space:pre;"> </span>
- <!-- jS -->
- <script type="text/javascript" src="js/comment.js"></script>
- </head>
- <body>
- <span style="white-space:pre;"> </span>
- </body>
- </html>