HTML5页面CSS Reset

作者: 前端  发布:2019-11-29

.clearfix:after {
clear: both;
}

textarea { max-width: 100%; }
textarea[rows] { height: auto; }
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder,textarea::-moz-placeholder { color: #999; }
input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #999; }
input::placeholder,textarea::placeholder { color: #999; }
input:disabled, input[readonly],
textarea:disabled,
textarea[readonly] {
background-color: #e6e6e6;
cursor: not-allowed; }
[type='submit'],
[type='button'] {
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none; }
input[type='search'] { box-sizing: border-box; }
[type='file'],
[type='checkbox'],
[type='radio'] {
margin: 0 0 1rem; }
[type='checkbox'] + label,
[type='radio'] + label {
display: inline-block;
margin-left: 0.5rem;
margin-right: 1rem;
margin-bottom: 0;
vertical-align: baseline; }
[type='checkbox'] + label[for],
[type='radio'] + label[for] {
cursor: pointer; }
label > [type='checkbox'],label > [type='radio'] { margin-right: 0.5rem; }
[type='file'] { width: 100%; }
label {
display: block;
margin: 0;
font-size: 0.875rem;
font-weight: normal;
line-height: 1.8;
color: #0a0a0a;
}
legend {
margin-bottom: 0.5rem;
max-width: 100%;
}
.fieldset {
border: 1px solid #cacaca;
padding: 1.25rem;
margin: 1.125rem 0; }
.fieldset legend {
background: #fefefe;
padding: 0 0.1875rem;
margin: 0;
margin-left: -0.1875rem;
}
select {
height: 2.4375rem;
padding: 0.5rem;
border: 1px solid #cacaca;
margin: 0 0 1rem;
font-size: 1rem;
font-family: inherit;
line-height: normal;
color: #0a0a0a;
background-color: #fefefe;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("");
background-size: 9px 6px;
background-position: right -1rem center;
background-origin: content-box;
background-repeat: no-repeat;
padding-right: 1.5rem;
}
.button {
display: inline-block;
text-align: center;
line-height: 1;
cursor: pointer;
-webkit-appearance: none;
transition: background-color 0.25s ease-out, color 0.25s ease-out;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 0;
padding: 0.85em 1em;
margin: 0 0 1rem 0;
font-size: 0.9rem;
background-color: #2ba6cb;
color: #fefefe; }
[data-whatinput='mouse'] .button {
outline: 0;
}
.button:hover,
.button:focus {
background-color: #258dad;
color: #fefefe;
}

body {
margin: 0;
line-height: 1.5;
color: #333333;
background-color: white;
height: 100%;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
body,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, code, form, fieldset, legend, input, textarea,
p, blockquote, th, td, hr, button,
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
margin: 0;
padding: 0;
border: 0;
}
a {
background: transparent;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
color:orange;
}s
a:active {
outline: 0;color:crimson;
}
.bui-icon, address, cite, dfn, em, i, var {
font-style: normal;
}
/* 按钮文本不可选 */
button {user-select: none;}
img {vertical-align: middle;}
/* 加载不出来的图片不要显示灰色边框 */
img:not([src]),img[src=""] {opacity: 0;}
ul, ol {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
input, select, button, textarea {font-size: 100%; font: inherit;}
html, body {height: 100%; overflow-x: hidden;}

 

@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}

}
h4,.h4{
font-family: "neuzeitgro-reg-webfont", Verdana, Arial, sans-serif;

/*------------------*/
/*reset*/
/*------------------*/
* {box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0);}
html {
font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

header:before,header:after{
content: " ";
display: table;
}
header:after{
visibility: hidden;
clear: both;
content: ".";
height: 0;
display: block;
}
footer:before,footer:after{
content: " ";
display: table;
}
footer:after{
visibility: hidden;
clear: both;
content: ".";
height: 0;
display: block;
}
.fil-container>.fil-row>.fil-col{
/*margin-bottom: 30px;*/
}
.fil-container>.fil-row>.fil-col:last-child{
margin-bottom: 0;
}
.fil-sm-hide{
display: none;
visibility: hidden;
}
.fil-sm-show{
display: block;
visibility: visible;
}
@media screen, projection{
.fil-container>.fil-row>.fil-col{
/* margin-bottom: 30px;*/
}
.fil-container>.fil-row>.fil-col:last-child{
margin-bottom: 0;
}
.fil-sm-hide{
display: none;
visibility: hidden;
}
.fil-sm-show{
display: block;
visibility: visible;
}
.fil-both-padding{
padding-left: 10px;
padding-left: 10px;
}
}
@media only screen and (min-width: 40em){
.fil-container>.fil-row>.fil-col{
margin-bottom: 0;
}
.fil-sm-hide{
display: block;
visibility: visible;
}
.fil-sm-show{
display: none;
visibility: hidden;
}
.fil-both-padding{
padding-left: 15px;
padding-left: 15px;
}
}

/*清除浮动*/
clearfix {
*zoom: 1;
}

.bg-blue{
background-color: #006193;
}
.section-space {
margin-bottom:60px;
}

.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}

.row:after {
visibility: hidden;
clear: both;
content: " ";
height: 0;
display: block;
}
.first-section{
width: 100%;
margin: 0 auto;
padding-top: 15px;
}
.common-section{
padding-top: 15px;
padding-bottom: 15px;
}

}
@media only screen and (min-width: 40em){
.common-section{
padding-top: 15px;
padding-bottom: 15px;
}
.first-section{
max-width: 840px;
margin: 0 auto;
}
}
@media only screen and (min-width: 64em){
.common-section{
padding-top: 15px;
padding-bottom: 15px;
}
}
@media only screen and (min-width: 81.25em){
html {
font-family: "neuzeitgro-reg-webfont", Verdana, Arial, sans-serif;
font-size: 18px;
}
body {
font-size: 1rem;
line-height: 1.5;
}
h1,
.h1{
font-size: 2.6111rem;
}
h2,
.h2{
font-size: 2.0555rem;
}
h3,
.h3{
font-size: 1.611rem;
}
h4,
.h4{
font-size: 1.2777rem;
}
.title{
font-size: 2.6111rem;
}
.subtitle{
font-size: 2.0555rem;
}
.post-head{
font-size: 1.611rem;
}
.sub-head{
font-size: 1.2777rem;
}
.caption{
font-size: 0.777rem;
}
p.caption{
font-size: 0.777rem;
}
.common-section{
padding-top: 15px;
padding-bottom: 15px;
}

}
h1,.h1,.title{ font-size: 2.6111rem; }
h2,.h2,.subtitle{ font-size: 2.0555rem; }
h3,.h3,.post-head{ font-size: 1.6111rem; }
h4,.h4,.sub-head{ font-size: 1.2777rem; }
h5,.h5{ font-size: 1.0625rem; }
h6,.h6{ font-size: 1rem; }
.caption{ font-size: 0.777rem; color: #666;}
p.caption{ font-size: 0.777rem; color: #666;}
.caption.time{ font-size: 0.777rem; color: #666; }
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
color: #666;
}
fieldset,
input,
button,
label,
legend,
textarea,
optgroup,
select,
option,
a.btn{
font-family: "neuzeitgro-reg-webfont", Verdana, Arial, sans-serif;
font-size: 1rem;
/*line-height: 1.5;*/
}
.body-text{ color: #666; font-size: 1rem; /*line-height: 1.5;*/ }
small {
font-size: 80%;
}
.small, small {
font-size: 80%;
font-weight: 400;
}
hr{ background-color: #dadada; }
p {
font-size: inherit;
/*line-height: 1.6;*/
margin-bottom: 1rem;
text-rendering: optimizeLegibility;
}
h1,.h1,.title{line-height: 1.11; }
h2,.h2,.subtitle{line-height: 1.27; }
h3,.h3,.post-head{line-height: 1.33; }
h4,.h4,.sub-head{line-height: 1.33; }
p,.body-text,li{line-height: 1.33; }
p.caption,.caption{line-height: 1.43; }
small,.small{line-height: 1.43; }
a{ color: #006193; text-decoration: none; background-color: transparent; }
abbr[title] { border-bottom: 1px dotted; }
a {
color: #006193;
text-decoration: none;
line-height: inherit;
cursor: pointer; }
a.body-text-link{ color: #006193; text-decoration: none; }
.body-text-link{ color: #006193; }
a:active,
a:hover {
color: #006193;
text-decoration: underline;
outline:0
}
a:hover,a:focus { color: #006193; text-decoration: underline; }
a:focus {
/* outline:thin dotted;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px*/
}
.clear{ clear: both; height: 0; }
.float-left{ float: left; }
.float-right{ float: right; }
.odd{ background-color: #fff; }
.even{ background-color: #f7f7f7; }
.bg-white {position: relative; z-index: 0; background: #fff; background: #fff !important; }
.bg-gray {position: relative; z-index: 0; background: #f7f7f7; background: #f7f7f7 !important; }
.border-bottom-gray{ border-bottom: 1px solid #dadada; }
.box-shadow{ box-shadow: 0px 4px 6px #ddd; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.block-center{display: block;text-align: center;}
.width-full { width: 100% !important; }
.fil-border{ border:1px solid #dadada; }

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'],
textarea {
display: inline-block;
box-sizing: border-box;
font-family: inherit;
font-size: 1rem;
color: #333;
border-radius: 0;
transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
-webkit-appearance: none;
-moz-appearance: none; }
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus,
textarea:focus {
outline: none;
/* box-shadow: 0 0 5px #ddd;*/
transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}

html,body { height: 100%; }
body{ min-width: 320px;}
body { margin: 0; }
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td { margin: 0; padding: 0; }
ul{
list-style-type: disc;
margin-left: 1.25rem;
}
ol {
margin-left: 1.25rem;
}
ul,li{ list-style: none; margin: 0; padding: 0; }
ul,ol,dl { line-height: 1.6; margin-bottom: 1rem; list-style-position: outside; }
li { font-size: inherit; }
ul { list-style-type: disc; margin-left: 1.25rem; }
ol { margin-left: 1.25rem; }
ul ul, ol ul, ul ol, ol ol {
/*margin-left: 1.25rem;*/
margin-bottom: 0; }
dl { margin-bottom: 1rem; }
dl dt { margin-bottom: 0.3rem; font-weight: bold;}
img { max-width: 100%; height: auto; }
img { display: inline-block; vertical-align: middle; }
hr {
height: 0;
border-right: 0;
border-top: 0;
border-bottom: 1px solid #ccc;
border-left: 0;
margin: 15px auto;
clear: both;
box-sizing: content-box;
}
@media screen, projection{
abbr, article, body, caption, dd, div, dl, dt, em, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, img, label, legend, li, nav, ol, p, section, span, sup, table, tbody, td, tfoot, th, thead, tr, ul, video {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0;
}
html {
box-sizing: border-box;
}
hr {
height: 1px;
border: 0;
background-color: #dadada;
}
ul{
list-style-type: disc;
margin-left: 1.25rem;
}
ul li{
list-style-type: none;
}
ul li.disc{
list-style-type: disc;
}
ul.disc li{
list-style-type: disc;
}
ul li.square{
list-style-type: square;
}
ul.square li{
list-style-type: square;
}
ol {
margin-left: 1.25rem;
list-style-type: decimal;
}
ol li{
list-style-type: decimal;
}
a {
color: #006193;
text-decoration: none;
line-height: 1.5;
}
}
html {
font-family: "neuzeitgro-reg-webfont", Verdana, Arial, sans-serif;
font-size: 17px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-family: "neuzeitgro-reg-webfont", Verdana, Arial, sans-serif;
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
color: #666;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6{
font-weight: normal;
font-style: normal;
color: #333;
/*line-height: 1.4;*/
text-rendering: optimizeLegibility;
margin-top: 0;
margin-bottom: 0.5rem;
}
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4{
display: block;
}
h1,
h2,
h3,
.h1,
.h2,
.h3
{
font-family: "neuzeitgro-lig-webfont", Verdana, Arial, sans-serif;

@media screen, projection{
html {
font-family: "neuzeitgro-reg-webfont", Verdana, Arial, sans-serif;
font-size: 17px;
}
body {
font-size: 1rem;
line-height: 1.5;
}
h1,
.h1{
font-size: 2.6471rem;
}
h2,
.h2{
font-size: 2.059rem;
}
h3,
.h3{
font-size: 1.588rem;
}
h4,
.h4{
font-size: 1.235rem;
}
.title{
font-size: 2.6471rem;
}
.subtitle{
font-size: 2.059rem;
}
.post-head{
font-size: 1.588rem;
}
.sub-head{
font-size: 1.235rem;
}
.caption{
font-size: 0.824rem;
color: #666;
}
p.caption{
font-size: 0.824rem;
color: #666;
}
.caption.time{
font-size: 0.824rem;
color: #666;
}

.is-visible { display: block !important; }
.is-hidden { display: none !important; }
.show-for-print { display: none !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.float-center {
display: block;
margin-left: auto;
margin-right: auto;
}
.subheader {
margin-top: 0.2rem;
margin-bottom: 0.5rem;
font-weight: normal;
line-height: 1.4;
color: #8a8a8a; }
.lead {
font-size: 125%;
line-height: 1.6;
}
.stat {
font-size: 2.5rem;
line-height: 1;
}
p + .stat { margin-top: -1rem; }
.no-bullet {
margin-left: 0;
list-style: none; }

html{
min-width: 320px;
}
body{
min-width: 320px;
overflow-x:hidden
}
@media print {
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
}
.show-for-print { display: block !important; }
.hide-for-print { display: none !important; }
table.show-for-print { display: table !important; }
thead.show-for-print { display: table-header-group !important; }
tbody.show-for-print { display: table-row-group !important; }
tr.show-for-print { display: table-row !important; }
td.show-for-print { display: table-cell !important; }
th.show-for-print { display: table-cell !important; }
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
.ir a:after, a[href^='javascript:']:after, a[href^='#']:after { content: ''; }
abbr[title]:after { content: " (" attr(title) ")"; }
pre, blockquote { border: 1px solid #8a8a8a; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}

}

/*add css*/
.fil-full-row{
width: 100%;
background-color: rgba(204,51,51,0.2);
}
.fil-full-row:before,
.fil-full-row:after{
content: " ";
display: table;
}
.fil-full-row:after {
visibility: hidden;
clear: both;
}
.fil-full-row.bg-pink{
background-color: rgba(204,51,51,0.2);
}
.fil-full-row.bg-gray{
background-color:#f7f8f9;
}
.fil-full-row.bg-white{
background-color:#fff;
}

本文由9159.com发布于前端,转载请注明出处:HTML5页面CSS Reset

关键词:

上一篇:《菜鸟教程》
下一篇:没有了