Common CSS Code Snippets

1. Standard HTML page template

<!DOCTYPE HTML><HTMLLang= "ZH-CN">  <Head>    <MetaCharSet= "Utf-8">    <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge">    <Metaname= "Viewport"content= "Width=device-width, initial-scale=1">    <title>Title</title>    <!--Introducing CSS -    <Linkhref= "Xxx.css"rel= "stylesheet">    <!--Introducing JavaScript -    <Scriptsrc= "Xxx.js"></Script>  </Head>  <Body>    <H1>Hello, world!</H1>  </Body></HTML>

2. CSS Reset

To enhance the consistency of cross-browser performance, we used the NORMALIZE.CSS, a CSS reset style library maintained by Nicolas Gallagher and Jonathan Neal.

/*====== Reset! normalize.css v3.0.1 | MIT License | Git.io/normalize ======*/*{-webkit-box-sizing:Border-box;-moz-box-sizing:Border-box;box-sizing:Border-box;}*:before,*:after{-webkit-box-sizing:Border-box;-moz-box-sizing:Border-box;box-sizing:Border-box;}HTML{font-family:Sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}Body{Background-color:#fff;margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{Display:Block}Audio,canvas,progress,video{Display:Inline-block;vertical-align:Baseline}Audio:not ([controls]){Display:None;Height:0}[Hidden],template{Display:None}a{background:Transparent}A:active,a:hover{Outline:0}Abbr[title]{Border-bottom:1px dotted;}B,strong{Font-weight:Bold}DFN{Font-style:Italic}H1{font-size:2em;margin:0.67em 0}Mark{background:#ff0;Color:#000}Small{font-size:80%}Sub,sup{font-size:75%;Line-height:0;position:relative;vertical-align:Baseline}sup{Top:-0.5em}Sub{Bottom:-0.25em}img{Border:0;-ms-interpolation-mode:bicubic;}svg:not (: root){Overflow:Hidden} Figure{margin:1em 40px}HR{-moz-box-sizing:Content-box;box-sizing:Content-box;Height:0}Pre{Overflow:Auto}Code,kbd,pre,samp{font-family:Monospace,monospace;font-size:1em}Button,input,optgroup,select,textarea{Color:Inherit;Font:Inherit;margin:0}Button{Overflow:Visible}Button,select{Text-transform:None}button,html input[type= "button"],input[type= "reset"],input[type= "submit"]{-webkit-appearance:Button;cursor:Pointer}button[disabled],html input[disabled]{cursor:default}Button::-moz-focus-inner,input::-moz-focus-inner{Border:0;padding:0}input{Line-height:Normal}input[type= "checkbox"],input[type= "Radio"]{box-sizing:Border-box;padding:0}input[type= "number"]::-webkit-inner-spin-button,input[type= "number"]::-webkit-outer-spin-button{Height:Auto}input[type= "Search"]{-webkit-appearance:TextField;-moz-box-sizing:Content-box;-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}fieldset{Border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{Border:0;padding:0}textarea{Overflow:Auto}Optgroup{Font-weight:Bold}Table{Border-collapse:collapse;border-spacing:0}td,th{padding:0}

3. CSS Clearfix

{ content:"."; Display:block; height:0; Visibility:hidden;}  {clear:both;}  {*zoom:1;}

4. Media Objects

CSS Code

/*Clear Floating*/. Media:before,.media:after{content:".";Display:Block;Height:0;Visibility:Hidden;}. Media:after{Clear:both;}. Media{*zoom:1;}. MEDIA-BD{Overflow:Hidden;#zoom:1;}. MEDIA-HD{margin:0 0 10px;}. Media. Float-left{Display:Block;Margin-right:20px;}. Media. Float-left img{Display:Block;}. Media. Float-right{Margin-right:0;Margin-left:20px;}

HTML code (supports nesting,. Float-left adaptive)

<Divclass= "Media">     <ahref="#"class= "Float-left"><imgsrc= "Https://0.s3.envato.com/files/98745353/sixbros-80-80.png" /></a>     <Divclass= "MEDIA-BD">          <h4class= "MEDIA-HD">The first of the Confucian school</h4>           <P>"Learning and" is "the Analects of Confucius" the first article of the name. In the Analects of Confucius, each article is generally based on the first two or three words of the chapter as the title of the article. "Learning and" a chapter includes 16 chapters, the content involves many aspects. One of the focus is "my day provinces";"conservation and love, so that the people to";"ritual use, and for you" as well as benevolence, filial piety, faith and other moral categories.</P>     </Div></Div>

5. Cross-browser transparency

. Transparent{Filter:Alpha (OPACITY=50);/*Internet Explorer*/-khtml-opacity:0.5;/*khtml, Old Safari*/-moz-opacity:0.5;/*Mozilla, Netscape*/Opacity:0.5;/*FX, Safari, opera*/}

Common CSS Code Snippets