前端布局模板-白红宇

前端布局模板

阅读量：5237 次

发布时间：2019-06-14

本文共 1697 字，大约阅读时间需要 5 分钟。

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  2  3  4     
      5     
      6     
      
      7     基础网页模板 8     
      9     
     10     
     11     
     12 13 14 15 
     
      16     
      17     
      
       18         
       19         
       
20         
       21         
       
22     
      
23     
      24 25 26     
      27     
      
       28     29     
      
30     
      31 32     
      33     
      
       34 35     
      
36     
      37 38 
     
39 40 41 42