前端布局模板

1、公共默认样式（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","宋体",Arial, Helvetica, sans-serif;}
 6 /* \5FAE\8F6F\96C5\9ED1 微软雅黑 转换Unicode编码表网址 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;}
10 
11 a{color:#000000;text-decoration:none; } 
12 a:hover{color:#F00;text-decoration:none;}
13 
14 .fl{float:left;} 
15 .fr{float:right;}
16 /*清除浮动代码*/ 
17 .clear:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
18 .clear{zoom:1} /*原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 */
19 
20 .mt10{margin-top:10px}
21 .mb10{margin-bottom:10px}
22 .pt10{padding-top:10px;} 
23 .pb10{padding-bottom:10px;}
24 
25 .head,.main,.foot{ margin:0 auto; width:1000px; overflow:hidden}

　　1.1清除浮动（核心代码） CSS清除浮动大全共8种方法：http://www.jb51.net/css/173023.html

.clear:after{
  content:"";
  display:block;
  clear:both;      
}
.clear{
  zoom:1;  
}

 2、html模板

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6     <meta name="renderer" content="webkit"> <!--若页面需默认用极速内核，增加此标签-->
 7     <title>基础网页模板</title>
 8     <meta name="Keywords" content="" />
 9     <meta name="description" content="" />
10     <meta name="author" content="">
11     <link type="text/css" rel="stylesheet" href=""/>
12 </head>
13 
14 <body>
15 <div class="warp">
16     <!--头部-->
17     <div class="head">
18         <!--logo-->
19         <div class="header"></div>
20         <!--主导航-->
21         <div class="nav"></div>
22     </div>
23     <!--/头部-->
24 
25 
26     <!--主体-->
27     <div class="main">
28     
29     </div>
30     <!--/主体-->
31 
32     <!--底部-->
33     <div class="foot">
34 
35     </div>
36     <!--/底部-->
37 
38 </div>
39 
40 <script type="text/javascript" language="javascript" src=""></script>
41 </body>
42 </html>

 

posted @ 2015-08-02 08:56  绝版幸福  阅读(1623)  评论(0)  编辑  收藏  举报