1. Public default Style (GLOABL)
1 @charset "Utf-8";2 /*gloabl*/ 3 body, Div,iframe, UL, OL, DL, DT, DD, Li, DL,4 H1, H2, H3, H4, Table,th, TD, Input, button, Select,textarea{margin:0;padding:0;5 Font-style:Normal;Font:12px/1.5 "\5fae\8f6f\96c5\9ed1", "Song Body", Arial, Helvetica, Sans-serif;}6 /*\5fae\8f6f\96c5\9ed1 Microsoft Black conversion unicode encoding table URL http://tool.lu/fontfamily/*/ 7 OL, UL, Li{List-style:None;}8 img{Border:0;vertical-align:Middle;}9 Body{Color:#000000;background:#FFF;text-align:Center;}Ten One a{Color:#000000;text-decoration:None; } A a:hover{Color:#F00;text-decoration:None;} - - . FL{float: Left;} the . Fr{float: Right;} - /*Clear Floating Code*/ - . Clear:after{Display:Block;Clear:both;content:"";Visibility:Hidden;Height:0} - . Clear{Zoom:1}/*principle: IE8 above and non-IE browser support: After, principle and method 2 somewhat similar, zoom (ie turn to have attribute) can solve ie6,ie7 floating problem*/ + - . Mt10{Margin-top:10px} + . MB10{Margin-bottom:10px} A . Pt10{Padding-top:10px;} at . PB10{Padding-bottom:10px;} - - . Head,.main,.foot{margin:0 Auto;width:1000px;Overflow:Hidden}
1.1 Clear Floating (core code) CSS Clear floating Daquan total 8 ways: http://www.jb51.net/css/173023.html
. Clear:after { content:""; Display:block; Clear:both; } . Clear { zoom:1; }
2. HTML templates
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1">6 <Metaname= "Renderer"content= "WebKit"> <!--if the page needs to use the fast kernel by default, add this label -7 <title>Basic page templates</title>8 <Metaname= "Keywords"content="" />9 <Metaname= "description"content="" />Ten <Metaname= "Author"content=""> One <Linktype= "Text/css"rel= "stylesheet"href=""/> A </Head> - - <Body> the <Divclass= "Warp"> - <!--Head - - <Divclass= "Head"> - <!--logo - + <Divclass= "header"></Div> - <!--Main navigation - + <Divclass= "NAV"></Div> A </Div> at <!--/Head - - - - <!--Main body - - <Divclass= "Main"> - in </Div> - <!--/Body - to + <!--Bottom - - <Divclass= "Foot"> the * </Div> $ <!--/Bottom -Panax Notoginseng - </Div> the + <Scripttype= "Text/javascript"language= "JavaScript"src=""></Script> A </Body> the </HTML>
Front-end layout templates