前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >各大网站CSS初始化代码集合

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

作者头像
德顺
发布2019-11-13 17:11:34
2K0
发布2019-11-13 17:11:34
举报
文章被收录于专栏:前端资源前端资源
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 文件,可以大大提高工作效率,减少不必要的麻烦。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-04-17),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档