CSS初始化可以简单快速的实现常用标签的属性设定,尽量减少各浏览器之间的兼容性问题。
今天整理一下各大网站的CSS初始化代码:
1、百度 CSS初始化 https://www.baidu.com
统一初始化
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0 } html { color: #000; overflow-y: scroll; overflow: -moz-scrollbars } body, button, input, select, textarea { font: 12px arial } h1, h2, h3, h4, h5, h6 { font-size: 100% } em { font-style: normal } small { font-size: 12px } ul, ol { list-style: none } a { text-decoration: none } a:hover { text-decoration: underline } legend { color: #000 } fieldset, img { border: 0 } button, input, select, textarea { font-size: 100% } table { border-collapse: collapse; border-spacing: 0 } img { -ms-interpolation-mode: bicubic } textarea { resize: vertical }
其他常用CSS样式
.left { float: left } .right { float: right } .overflow { overflow: hidden } .hide { display: none } .block { display: block } .inline { display: inline } .error { color: #F00; font-size: 12px } label, button { cursor: pointer } .clearfix:after { content: '/20'; display: block; height: 0; clear: both } .clearfix { zoom: 1 } .clear { clear: both; height: 0; line-height: 0; font-size: 0; visibility: hidden; overflow: hidden } .wordwrap { word-break: break-all; word-wrap: break-word } .s-yahei { font-family: arial, 'Microsoft Yahei', '微软雅黑' }
2、腾讯首页 CSS初始化 http://www.qq.com
统一初始化
body, dd, dl, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, ol, p, select, td, textarea, th, ul { margin: 0; padding: 0 } body { font: 12px SimSun, "Arial Narrow", HELVETICA; background: #fff; -webkit-text-size-adjust: 100% } a { color: #172c45; text-decoration: none } a:hover { color: #cd0200; text-decoration: underline } em { font-style: normal } li { list-style: none } img { border: 0; vertical-align: middle } table { border-collapse: collapse; border-spacing: 0 } p { word-wrap: break-word }
其他常用CSS样式
.ind { text-indent: 2em } .ind10 { text-indent: 10px } .noborder { border: 0 } .Q-red a, a.Q-red { color: #bd0a01 !important } .Q-black a, a.Q-black { color: #000 !important } .Q-bold { font-weight: 700 !important } .Q-pList ul:after, .Q-pList:after, .Q-tList ol:after, .Q-tList ul:after, .Q-tList:after, .Q-tpList ul:after, .Q-tpList:after, .Q-tpWrap:after, .bd:after, .cf:after, .ft:after, .hd:after, .layout:after { content: ""; display: table; clear: both } .Q-pList, .Q-pList ul, .Q-tList, .Q-tList ol, .Q-tList ul, .Q-tpList, .Q-tpList ul, .Q-tpWrap, .bd, .cf, .ft, .hd, .layout { *zoom: 1 } .chief, .fl, .layout .fl { float: left; display: inline } .extra, .fr, .layout .fr { float: right; display: inline } .fn { font-weight: 700 }
3、360官网 CSS初始化 https://www.360.cn
统一初始化
td, body, th, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { padding: 0 } 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 } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400 } ul, ol { list-style: none }
4、微博官网 CSS初始化 https://weibo.com
统一初始化
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; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } address, caption, cite, code, dfn, em, th, var, i { font-style: normal; font-weight: normal; } ol, ul { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
其他常用CSS样式
q:before, q:after { content: ''; } a:focus { outline-style: none; } abbr, acronym { border: 0; font-variant: normal; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; *font-size: 100%; } textarea { resize: none } input::-ms-clear { display: none; } body { font: 12px/1.3 Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; overflow-x: hidden; color: #333; -webkit-font-smoothing: antialiased; } ::selection { background: #eb7350; color: #fff; } :focus { outline-color: #eb7350; }
5、淘宝官网 CSS初始化 https://www.taobao.com
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0 } body, button, input, select, textarea { font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '/5b8b/4f53', sans-serif } h1, h2, h3, h4, h5, h6 { font-size: 100% } address, cite, dfn, em, var { font-style: normal } code, kbd, pre, samp { font-family: courier new, courier, monospace } small { font-size: 12px } ol, ul { list-style: none } a { text-decoration: none } a:hover { text-decoration: underline } sup { vertical-align: text-top } sub { vertical-align: text-bottom } legend { color: #000 } fieldset, img { border: 0 } button, input, select, textarea { font-size: 100% } table { border-collapse: collapse; border-spacing: 0 } button { border-radius: 0; }
6、京东官网 CSS初始化 https://www.jd.com
统一初始化
* { margin: 0; padding: 0 } em, i { font-style: normal } li { list-style: none } img { border: 0; vertical-align: middle } button { cursor: pointer } a { color: #666; text-decoration: none } a:hover { color: #e33333 } button, input { font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, //5B8B/4F53, sans-serif } body { -webkit-font-smoothing: antialiased; background-color: #fff; font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, //5B8B/4F53, sans-serif; color: #666 }
其他常用样式
.hide, .none { display: none } .clearfix:after { visibility: hidden; clear: both; display: block; content: "."; height: 0 } .clearfix { *zoom: 1 }
我们可以借鉴各大网站是初始化代码,写一个适合自己的 reset.css 文件,可以大大提高工作效率,减少不必要的麻烦。
未经允许不得转载:w3h5 » 各大网站CSS初始化代码集合
原创文章,作者:kepupublish,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/231195.html