w3h5

各大网站CSS初始化代码集合

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 文件,可以大大提高工作效率,减少不必要的麻烦。

赞 (0)
分享到: +More |

评论 沙发

换个身份