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

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

标签云
小米社区发展史jsjQuery帝国CMS插件css3评论帝国标签sitemapnode.js公司服务器animation动画属性SEO技巧360域名百度编辑器tags工作闭包帝国插件sublimeanimationHtml+Css
精品推荐
本栏目近期文章
您的位置：首页 > 前端开发 > Htm l+ Css > html4 + hss2

网页html、css初始化代码

分类: html4 + hss2196个赞

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.bbsmi.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 bbsmi.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
}


250112更新：

:root {
    --primary-color: #06c; /* 主题色 */
    --secondary-color: #f90; /* 次要色 */
    --font-size: 14px;
    --spacing: 20px; /* 间距 */
    --line-height: 1.6;
    --border-radius: 5px;
}

/* 重置样式 */
html, body, div, a, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, input, select, fieldset, legend, img, video, header, footer, nav, article, section, aside, table, thead, tr, td, figure {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

fieldset, img, input, button {
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}

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

s, em, i {
    font-style: normal;
    text-decoration: none;
}

input {
    padding-top: 0;
    padding-bottom: 0;
}

button {
    cursor: pointer;
}

input, textarea {
    font-family: "PingFang SC", "Source Han Sans CN", Microsoft YaHei, Heiti SC, "\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;
    max-width: 100%;
    position: relative;
    object-fit: cover;
}

/* 图片占位 */
img:after {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../img/img-no.jpg) no-repeat center/cover;
    z-index: 1;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    border-radius: var(--border-radius);
    -webkit-box-shadow: inset 0 0 60px rgba(0, 0, 0, .3);
    background-color: #f1f3f5;
}

/* 去掉图片默认的3像素空白缝隙 */
table {
    border-collapse: collapse;
}

body {
    font: 1.6rem/1.6 "PingFang SC", "Source Han Sans CN", Microsoft YaHei, Heiti SC, "\5B8B\4F53", sans-serif;
    color: #2e2e2e;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    max-width: 1920px;
    min-width: 320px;
    margin: 0 auto;
    text-align: justify;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, .15);
}

/* 清除浮动 */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /* IE/7/6 */
}

/* 链接样式 */
a {
    color: #2e2e2e;
    text-decoration: none;
    transition: color .5s ease-out;
}

a:hover {
    color: #FF9900;
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}

h1, .h1 {
    font-size: 4.8rem;
    font-weight: bold;
}

h2, .h2 {
    font-size: 3.6rem;
    font-weight: bold;
}

h3, .h3 {
    font-size: 2.4rem;
}

h4, .h4 {
    font-size: 2.0rem;
}

h5, .h5 {
    font-size: 1.8rem;
}

h6, .h6 {
    font-size: 1.4rem;
}

/* 文字样式 */
s, i, em {
    font-style: normal;
    text-decoration: none;
}

.col-red {
    color: #C81623 !important;
}

/* 公共样式 */
html {
    font-size: 62.5%;
}

.w {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.oh {
    overflow: hidden;
}

.al {
    text-align: left;
}

.ac {
    text-align: center;
}

.ar {
    text-align: right;
}

.dn,
.hide {
    display: none !important;
}

.df {
    display: flex;
}

.pr {
    position: relative;
}

.pa {
    position: absolute;
}

/* 内外边距 */
.p20 {
    padding: 2rem 0;
}

.p40 {
    padding: 4rem 0;
}

.p60 {
    padding: 6rem 0;
}

.p80 {
    padding: 8rem 0;
}

.p100 {
    padding: 10rem 0;
}

.pt40 {
    padding-top: 4rem;
}

.pt60 {
    padding-top: 6rem;
}

.pt80 {
    padding-top: 8rem;
}

.pb20 {
    padding-bottom: 2rem;
}

.pb40 {
    padding-bottom: 4rem;
}

.pb60 {
    padding-bottom: 6rem;
}

.pb80 {
    padding-bottom: 8rem;
}

.pb100 {
    padding-bottom: 10rem;
}

/* 上下外边距 */
.mt20 {
    margin-top: 2rem;
}

.mt40 {
    margin-top: 4rem;
}

.mt50 {
    margin-top: 5rem;
}

.mt60 {
    margin-top: 6rem;
}

.mt70 {
    margin-top: 7rem;
}

.mt120 {
    margin-top: 12rem;
}

.mb20 {
    margin-bottom: 2rem;
}

.mb60 {
    margin-bottom: 6rem;
}

.mb100 {
    margin-bottom: 10rem;
}

.mtpub {
    margin-top: 138px;
    padding-top: 6rem;
    margin-bottom: 8rem;
}

/* 字体大小 */
.f16 {
    font-size: 1.6rem;
}

.f18 {
    font-size: 1.8rem;
}

.f20 {
    font-size: 2rem;
}

.f22 {
    font-size: 2.2rem;
}

.f24 {
    font-size: 2.4rem;
}

.f32 {
    font-size: 3.2rem;
}


相关解释：

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初始化代码

标签： 百度编辑器 sublime animation node.js SEO技巧 Html+Css jQuery 小米社区发展史 帝国插件 帝国CMS插件
这篇文章不错，赞哦(196)

猜你喜欢

Copyrights(c) www.bbsmi.com All rights reserved

不受天磨非好汉，不遭人妒是庸才。—— 小米

关于我们   使用帮助   商务合作   网站地图  

京ICP备11004826号-7 百度统计