小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
您的位置:首页 > 前端开发 > Htm l+ Css > html4 + hss2

网页html、css初始化代码

分类: html4 + hss2154个赞

HTML

<!doctype html>
<html xml:lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>标题</title>
<base target="_blank" />
<meta name="description" content="描述" />
<meta name="keywords" content="关键词" />
<meta name="searchtitle" content="www.bbsxiaomi.com"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
<meta name="author" content="小米技术社区"/>
<meta name="copyright" content="小米技术社区"/>
<script type="text/javascript" src="a.js"></script>
<meta name="applicable-device"content="pc,mobile">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

</body>
</html>


CSS


/*
color:red !important;/* Firefox、IE7支持
_color:red;  IE6支持
*color:red;  IE6、IE7支持
*+color:red; IE7支持/
color:red\9; IE6、IE7、IE8支持
color:red\0; IE8支持
@media screen and(-webkit-min-device-pixel-ratio:0){} chrome
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#99000000', EndColorStr='#99000000');
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/templets/ftwcm/images/bg_index.body1.png');_background:none;
background:linear-gradient(#e99c40,#d35224);-webkit-background:linear-gradient(#e99c40,#d35224);
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight*0.3));
-moz-appearance:none;
-webkit-appearance:none;
appearance:none;
select::-ms-expand{display:none;}
input::-moz-placeholder{opacity:1;}
input::-webkit-placeholder{opacity:1;}
input::-ms-placeholder{opacity:1;}
textarea::-moz-placeholder{opacity:1;}
textarea::-webkit-placeholder{opacity:1;}
textarea::-ms-placeholder{opacity:1;}
::-webkit-input-placeholder{color:inherit;}
.gray{-webkit-filter: grayscale(100%);filter:grayscale(100%);filter:gray;}
@media screen and (min-width:540px){
body{width:540px;}
header{width:540px;}
}
@media screen and (max-width:320px){
body{width:320px;}
header{width:320px;}
}
@-webkit-keyframes a1{}

-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;

white-space:nowrap;不换行
*/

/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form,fieldset, legend, img{ margin: 0; padding: 0; }
fieldset, img, input, button { border: none; padding: 0; margin: 0; outline-style: none; }
ul, ol { list-style: none; }
em,i {font-style: normal}
input{ padding-top: 0; padding-bottom: 0; font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; }
button{cursor: pointer}
input,textarea {font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;;border: none;outline: none;background: none;}
select,input { vertical-align: middle; }
select,input, textarea { font-size: 12px; margin: 0; }
textarea { resize: none; }
/*防止拖动*/
img { border: 0; vertical-align: middle; }
/*  去掉图片低测默认的3像素空白缝隙*/
table { border-collapse: collapse; }
body { font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; color: #666; background: #fff; -webkit-font-smoothing: antialiased;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; /*IE/7/6*/}
a { color: #666; text-decoration: none; }
a:hover { color: #C81623; }
h1, h2, h3, h4, h5, h6 { text-decoration: none; font-weight: normal; font-size: 100%; }
s, i, em { font-style: normal; text-decoration: none; }
.col-red { color: #C81623 !important; }
/*公共类*/
.w {width: 1210px; margin: 0 auto; } /*版心 提取 */
.fl { float: left}
.fr { float: right}
.al { text-align: left}
.ac { text-align: center}
.ar { text-align: right}
.hide { display: none}


CSS响应式-小米官网


@charset "UTF-8";

/**
 * @authors bbsxiaomi.com (mzze@163.com)
 */
html {
    height: 100%;
    overflow-y: scroll;
    font-size: 62.5%;
    -ms-text-size-adjust: 62.5%;
    -webkit-text-size-adjust: 62.5%;
    box-sizing: border-box
}

body {
    min-height: 100%;
    _height: 100%;
    font-family: "Microsoft yahei","微软雅黑", arial, "\5b8b\4f53";
    color: #333;
    background-color: #fff;
    line-height: 1.5
}

*,*::before,*::after {
  box-sizing: inherit;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
video,
legend,
p,
blockquote,
table,
th,
tr,
td,
figure,
fieldset,
img,
input,
button,
textarea {
    margin: 0;
    padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
    display: block
}

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden] {
    display: none
}

abbr[title] {
    border-bottom: 1px dotted
}

blockquote {
    margin: 1em 40px
}

dfn {
    font-style: italic
}

q {
    quotes: none
}

q:before,
q:after {
    content: '';
    content: none
}

mark {
    background: #ff0;
    color: #000
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

code,
kbd,
pre,
samp {
    font-size: 1em
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0;
    white-space: normal;
    *margin-left: -7px
}

svg:not(:root) {
    overflow: hidden;
    _zoom: 1
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

ol,
ul,
li {
    list-style: none;
}

b,
strong {
    font-weight: bold
}

i,
em,
address,
cite,
code,
th {
    font-style: normal;
    font-weight: normal;
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

button,
input,
textarea,
select {
    font-size: 100%;
    border: none;
    outline: none;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle;
    background: none;
}

button,
input {
    line-height: normal
}

button,
select {
    text-transform: none
}

input,
select {
    vertical-align: middle;
}

textarea {
    overflow: auto;
    vertical-align: top
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em;
    vertical-align: text-top;
}

sub {
    bottom: -0.25em;
    vertical-align: text-bottom;
}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none
}

img {
    border: 0 none;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
    *overflow: visible;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
}

button[disabled],
input[disabled] {
    cursor: default
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    *height: 13px;
    *width: 13px
}

input[type="radio"] {
    -webkit-border-radius: 100%;
    -webkit-appearance: radio;
}

input[type="checkbox"] {
    -webkit-appearance: checkbox;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

th {
    font-weight: normal;
}

em,
cite,
address,
i {
    font-weight: normal;
    font-style: normal;
}

a {
    color: #757575;
    text-decoration: none;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

a:hover {
    color: #ff6700;
    text-decoration: none
}

a:link {
    -webkit-tap-highlight-color: transparent;
}

:focus {
    outline: none;
}

a:active,
a:hover {
    outline: 0
}

/* 常见 */
.w {
    width: 1200px;
    margin: 0 auto
}

.clearfix:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/*IE/7/6*/
.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both
}

.pa {
    position: absolute;
}

.pr {
    position: relative;
}

h1 {
    font-size: 3em;
    margin: 0.67em 0
}

h2 {
    font-size: 2.3em;
    margin: 0.83em 0
}

h3 {
    font-size: 1.8em;
    margin: 1em 0
}

h4 {
    font-size: 1.5em;
    margin: 1.33em 0
}

h5 {
    font-size: 1.3em;
    margin: 1.67em 0
}

h6 {
    font-size: 1.1em;
    margin: 2.33em 0
}

相关解释:

border:0、border:none、border:0 none三者之间的区别


注意:

选择器 * 无法覆盖到伪元素,所以需要给 :before 和 :after 分别设置。

如:box-sizing: border-box属性

box-sizing: border-box 添加padding 或者border 不影响元素的width 或者height 。

box-sizing: inherit 使元素尊重其父元素box-sizing 规则。


小米技术社区

本站内容均为小米原创,转载请注明出处:小米技术社区>> 网页html、css初始化代码