今天整理一下各大网站的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 文件,可以大大提高工作效率,减少不必要的麻烦。