初始化css样式

1 html,body,div,ul,li,ol,a,input,textarea,p,dl,dt,dd{margin:0;padding:0;}
2 ul li{list-style: none;}
3 a{text-decoration: none;cursor: pointer;}
4 html{height: 100%;}
5 body{height: 100%;background: #f5f5f5;position: relative;font-family: ‘微软雅黑‘;max-width: 640px;margin:auto;}
6 a,input,img,textarea,span,div{outline: 0;-webkit-tap-highlight-color:rgba(255,0,0,0);}
  1 html {
  2     font-family:"宋体", "Times New Roman", Times, serif;
  3     /*谷歌浏览器字体最小字体12px*/
  4     -webkit-text-size-adjust: 100%;/*100%/none 关闭字体大小自动调整功能*/
  5     /*a标签及拥有 :active伪类的元素有默认的高亮框*/
  6     -webkit-tap-hightlight-color: transparent;
  7     /*禁止文本被选中*/
  8
  9 }
 10 body{
 11     overflow-x:hidden;
 12     /*开启moblie网页快速滚动和回弹的效果*/
 13     -webkit-overflow-scrolling: touch;
 14     font-size: 12px;
 15     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 16     -webkit-text-size-adjust: 100%; //关闭自动调整字体
 17     overflow-scrolling: touch;
 18     -webkit-tap-highlight-color:rgba(0,0,0,0);
 19 }
 20 *{
 21     margin: 0;
 22     padding: 0;
 23     -webkit-box-sizing: border-box;
 24     box-sizing: border-box;
 25     font-style: normal;
 26 }
 27 a{
 28      border:none;
 29      -webkit-tap-highlight-color: rgba(0,0,0,0);
 30      -webkit-tap-highlight-color:transparent;
 31      outline:none;
 32      color: #333;
 33     -webkit-tap-highlight-color: #fff;
 34      text-decoration: none;
 35  }
 36 a:hover,
 37 a:focus{
 38     text-decoration:none;
 39     outline:none;
 40 }
 41 a.line,.topLine{
 42     position:relative;
 43 }
 44 a.line:after,.topLine:after{
 45     content:"";
 46     position:absolute;
 47     right:0;
 48     top:0;
 49 }
 50 a.line:after{
 51     height:100%;
 52     width:1px;
 53     -webkit-transform:scaleX(0.5);
 54     transform:scaleX(0.5);
 55     border-right:1px solid #ccc;
 56 }
 57 .topLine:after{
 58     height:1px;
 59     width:100%;
 60     -webkit-transform:scaleY(0.5);
 61     transform:scaleY(0.5);
 62     border-top:1px solid #ccc;
 63 }
 64 img{
 65     border: 0;
 66     display: inline-block;
 67     width:100%;
 68     height:100%;
 69     vertical-align: middle;
 70 }
 71 input{
 72     outline: none;
 73     border: none;
 74     /*-webkit-appearance: none;*/
 75 }
 76 .fl{
 77     float:left;
 78 }
 79 .fr{
 80     float:right;
 81 }
 82 .clearfix:after{
 83     content:"";
 84     display:block;
 85     width:100%;
 86     height:0;
 87     clear:both;
 88 }
 89 li,ol{
 90     list-style:none;
 91 }
 92
 93 .vertical-view{
 94     display:-webkit-box;
 95     display:-webkit-flex;
 96     display:flex;
 97     -webkit-box-orient:vertical;
 98     -webkit-box-direction:normal;
 99     -webkit-flex-direction:column;
100     flex-direction:column;
101 }
102 .horizontal-view{
103     display:-webkit-box;
104     display:-webkit-flex;
105     display:flex;
106     -webkit-box-orient:horizontal;
107     -webkit-box-direction:normal;
108     -webkit-flex-direction:row ;
109     flex-direction:row;
110 }
111 .inline-block{
112     display:block;
113 }
 1 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
 2         <meta content="yes" name="apple-mobile-web-app-capable">
 3         <meta content="black" name="apple-mobile-web-app-status-bar-style">
 4         <!--屏蔽标签拨号/email/address链接-->
 5         <meta name="format-detection" content="telephone=no" />
 6         <meta name="format-detection" content="email=no" />
 7         <meta name="format-detection" content="adress=no" />
 8         <!--不启用缓存-->
 9         <meta http-equiv="Pragma" content="no-cache" />
10         <meta http-equiv="Cache-Control" content="no-cache" />
11         <meta http-equiv="Expires" content="0" />
时间: 2024-10-02 01:40:04

初始化css样式的相关文章

为什么要初始化css样式

1.浏览器差异 不同浏览器对有些标签的默认值是不同的,如果没对css初始化会出现浏览器之间的页面显示差异 2.提高编码质量 如果不初始化,整个页面做完会很糟糕,重复的css样式很多 最简单的初始化方法是:(不建议) 1 * {padding: 0; margin: 0;} 淘宝样式 样式初始化 1 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend

Web前端面试指导(十六):为什么要初始化CSS样式?

题目点评 这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式.这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了 初始化样式的原因 因为浏览器的兼容的问题,不同浏览器有些标签的默认值是不同的,如果没有CSS初始化往往会出现浏览器之间的页面显示差异.

标准初始化css样式表

body { font-size:12px; line-height:1.3; font-family:'微软雅黑', Tahoma,Helvetica,Arial,'宋体', sans-serif;} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padd

css样式初始化代码总结

编写css样式之前需要初始化css样式,总结如下: /* CSS Document */ html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,field

初始化CSS

为什么要初始化CSS? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 最简单的初始化方法就是: * {padding: 0; margin: 0;} .有很多人也是这样写的.这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标

cssText设置css样式

js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js   如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div的css样式,很一般的做法是: var obj = document.getElementByIdx_x_x('no');obj.style.width = '400px';obj.style.height = '300px'; 如果要设置一堆又一堆的css样式呢,太麻烦了把.一般情况下都会结合cs

js 设置多条css样式

如果在一个网页中给id="mydiv"的元素添加css样式,先获取该节点:var obj = document.getElementById("mydiv");给节点添加css:如果需要添加的css不多的话,可以obj.style.width = "300px";如果需要添加多条css语句的话,这样会有多条,如:obj.style.width="300px";obj.style.height="300px"

CSS样式表初始化代码

CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 最简单的初始化方法就是: * {padding: 0; margin: 0;} .有很多人也是这样写的.这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签

web前端入门到实战:css样式初始化

为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候出现的样式不兼容问题,都可以通过css初始化代码来解决. 1.最耗资源的,最简单的 * { padding: 0; margin: 0; border: 0; } 2.选择性初始化举例(综合) body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button form,fieldset,input,textarea,p