Common CSS Files

Reset.css (CSS to be introduced for almost every project)

@charset "Utf-8"; HTML{Background-color:#fff;Color:#000;font-size:12px}BODY,UL,OL,DL,DD,H1,H2,H3,H4,H5,H6,FIGURE,FORM,FIELDSET,LEGEND,INPUT,TEXTAREA,BUTTON,P,BLOCKQUOTE,TH,TD, PRE,XMP{margin:0;padding:0}Body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{Line-height:1.5;font-family:tahoma,arial, "Hiragino Sans GB", Simsun,sans-serif}H1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}H1,h2,h3,h4,h5,h6{font-family:tahoma,arial, "Hiragino Sans GB", "Microsoft Jas Black", Simsun,sans-serif}H1,h2,h3,h4,h5,h6,b,strong{Font-weight:Normal}Address,cite,dfn,em,i,optgroup,var{Font-style:Normal}Table{Border-collapse:collapse;border-spacing:0;text-align: Left}caption,th{text-align:Inherit}Ul,ol,menu{List-style:None}fieldset,img{Border:0}Img,object,input,textarea,button,select{vertical-align:Middle}Article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{Display:Block}Audio,canvas,video{Display:Inline-block;*display:inline;*zoom:1}Blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}textarea{Overflow:Auto;Resize:Vertical}Input,textarea,button,select,a{Outline:0 None;Border:None;}Button::-moz-focus-inner,input::-moz-focus-inner{padding:0;Border:0}Mark{Background-color:Transparent}A,ins,s,u,del{text-decoration:None}sup,sub{vertical-align:Baseline}HTML{Overflow-x:Hidden;Height:100%;font-size:50px;-webkit-tap-highlight-color:Transparent;}Body{font-family:Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, Sans-serif;Color:#333;font-size:. 28em;Line-height:1;-webkit-text-size-adjust:None;}HR{Height:. 02rem;margin:. 1rem 0;Border:Medium None;Border-top:. 02rem Solid #cacaca;}a{Color:#25a4bb;text-decoration:None;}

View CodeBORDER.CSS (Mobile 1-pixel problem resolution)

@charset "Utf-8";. Border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,. Border-topleft,.border-rightbottom,.border-topright,.border-bottomleft{position:relative;}. Border::before,.border-top::before,.border-right::before,.border-bottom::before,.border-left::before,. Border-topbottom::before,.border-topbottom::after,.border-rightleft::before,.border-rightleft::after,. Border-topleft::before,.border-topleft::after,.border-rightbottom::before,.border-rightbottom::after,. Border-topright::before,.border-topright::after,.border-bottomleft::before,.border-bottomleft::after{content:"\0020";Overflow:Hidden;position:Absolute;}/*Border * Because the border is obscured by the pseudo-element area in the parent * Therefore, if the child has interaction, it needs to set the sub-level * positioning and z-axis*/. Border::before{box-sizing:Border-box;Top:0; Left:0;Height:100%;width:100%;Border:1px solid #eaeaea;Transform-origin:0 0;}. Border-top::before,.border-bottom::before,.border-topbottom::before,.border-topbottom::after,. Border-topleft::before,.border-rightbottom::after,.border-topright::before,.border-bottomleft::before{ Left:0;width:100%;Height:1px;}. Border-right::before,.border-left::before,.border-rightleft::before,.border-rightleft::after,. Border-topleft::after,.border-rightbottom::before,.border-topright::after,.border-bottomleft::after{Top:0;width:1px;Height:100%;}. Border-top::before,.border-topbottom::before,.border-topleft::before,.border-topright::before{Border-top:1px solid #eaeaea;Transform-origin:0 0;}. Border-right::before,.border-rightbottom::before,.border-rightleft::before,.border-topright::after{Border-right:1px solid #eaeaea;Transform-origin:100% 0;}. Border-bottom::before,.border-topbottom::after,.border-rightbottom::after,.border-bottomleft::before{Border-bottom:1px solid #eaeaea;Transform-origin:0 100%;}. Border-left::before,.border-topleft::after,.border-rightleft::after,.border-bottomleft::after{Border-left:1px solid #eaeaea;Transform-origin:0 0;}. Border-top::before,.border-topbottom::before,.border-topleft::before,.border-topright::before{Top:0;}. Border-right::before,.border-rightleft::after,.border-rightbottom::before,.border-topright::after{ Right:0;}. Border-bottom::before,.border-topbottom::after,.border-rightbottom::after,.border-bottomleft::after{Bottom:0;}. Border-left::before,.border-rightleft::before,.border-topleft::after,.border-bottomleft::before{ Left:0;}@media (max--moz-device-pixel-ratio:1.49), (-webkit-max-device-pixel-ratio:1.49), (max-device-pixel-ratio: 1.49), (max-resolution:143dpi), (max-resolution:1.49dppx){/*default value, no reset required*/}@media (min--moz-device-pixel-ratio:1.5) and (max--moz-device-pixel-ratio:2.49), (- webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:2.49), (min-device-pixel-ratio:1.5) and ( max-device-pixel-ratio:2.49), (min-resolution:144dpi) and (max-resolution:239dpi), (MIN-RESOLUTION:1.5DPPX) and ( MAX-RESOLUTION:2.49DPPX){. Border:: before {width:200%;Height:200%;Transform:Scale (. 5); }. Border-top::before,. Border-bottom::before,. Border-topbottom::before,. Border-topbottom::after,. Bor Der-topleft::before,. Border-rightbottom::after,. Border-topright::before,. Border-bottomleft::before{Transform:ScaleY (. 5); }. Border-right::before,. Border-left::before,. Border-rightleft::before,. Border-rightleft::after,. Bor Der-topleft::after,. Border-rightbottom::before,. Border-topright::after,. Border-bottomleft::after{Transform:ScaleX (. 5); }} @media (min--moz-device-pixel-ratio:2.5), (-webkit-min-device-pixel-ratio:2.5), (min-device-pixel-ratio:2.5) , (MIN-RESOLUTION:240DPI), (min-resolution:2.5dppx){. Border:: before {width:300%;Height:300%;Transform:Scale (. 33333); }. Border-top::before,. Border-bottom::before,. Border-topbottom::before,. Border-topbottom::after,. Bor Der-topleft::before,. Border-rightbottom::after,. Border-topright::before,. Border-bottomleft::before{Transform:ScaleY (. 33333); }. Border-right::before,. Border-left::before,. Border-rightleft::before,. Border-rightleft::after,. Bor Der-topleft::after,. Border-rightbottom::before,. Border-topright::after,. Border-bottomleft::after{Transform:ScaleX (. 33333); }}

View Code

Common CSS Files