响应式布局设计-Zerogrid

下面的这个响应式布局模板，利用了格栅布局的方式。把每一个都设置成inline-block，并且通过百分比设置宽度。默认分割了很多均分，大家可以改动设置

http://www.zerotheme.com/zerogrid-a-simple-grid-system-for-responsive-design

/*
Zerotheme.com | Free Html5 Responsive Templates
Zerogrid - A Single Grid System for Responsive Design
Author: Kimmy
Version : 2.1
Author URI: http//www.zerotheme.com/
*/
/* -------------------------------------------- */
/* ------------------Grid System--------------- */ 
.zerogrid{ width: 960px; position: relative; margin: 0 auto; padding: 0px;}
.zerogrid:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.zerogrid .row{}
.zerogrid .row:before,.row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.zerogrid .row:after{clear: both; }
.zerogrid .row{zoom: 1;}

.zerogrid .wrap-col{margin:10px;}

.zerogrid .col-1-2, .zerogrid .col-1-3, .zerogrid .col-2-3, .zerogrid .col-1-4, .zerogrid .col-2-4, .zerogrid .col-3-4, .zerogrid .col-1-5, .zerogrid .col-2-5, .zerogrid .col-3-5, .zerogrid .col-4-5, .zerogrid .col-1-6, .zerogrid .col-2-6, .zerogrid .col-3-6, .zerogrid .col-4-6, .zerogrid .col-5-6{float:left; display: inline-block;}

.zerogrid .col-full{width:100%;}

.zerogrid .col-1-2{width:50%;}

.zerogrid .col-1-3{width:33.33%;}
.zerogrid .col-2-3{width:66.66%;}

.zerogrid .col-1-4{width:25%;}
.zerogrid .col-2-4{width:50%;}
.zerogrid .col-3-4{width:75%;}

.zerogrid .col-1-5{width:20%;}
.zerogrid .col-2-5{width:40%;}
.zerogrid .col-3-5{width:60%;}
.zerogrid .col-4-5{width:80%;}

.zerogrid .col-1-6{width:16.66%;}
.zerogrid .col-2-6{width:33.33%;}
.zerogrid .col-3-6{width:50%;}
.zerogrid .col-4-6{width:66.66%;}
.zerogrid .col-5-6{width:83.33%;}

@media only screen and (min-width: 768px) and (max-width: 959px) {  //only限定屏幕
     .zerogrid{width:768px;}
}

@media only screen and (max-width: 767px) {
     .zerogrid{width:100%;}
}

@media only screen and (min-width: 620px) and (max-width: 767px) {
     .zerogrid{width:100%;}
}

@media only screen and (max-width: 619px) {
     .zerogrid, .zerogrid .col-1-2, .zerogrid .col-1-3, .zerogrid .col-2-3, .zerogrid .col-1-4, .zerogrid .col-2-4, .zerogrid .col-3-4, .zerogrid .col-1-5, .zerogrid .col-2-5, .zerogrid .col-3-5, .zerogrid .col-4-5, .zerogrid .col-1-6, .zerogrid .col-2-6, .zerogrid .col-3-6, .zerogrid .col-4-6, .zerogrid .col-5-6{width:100%;}
}

使用方法

     
     
     
     
     
     
     
       
     
     
     
     
      
     
     
      
       
     
     
          
     
     
     
     


     


          

               

                    

                         

                              

                                   

                                        

                                        

                                        

                                   
                              
                              

                                   

                                        
Main
                                        
About
                                        
Gallery
                                        
Services
                                        
Contacts
                                   
                                   

                                        

                                        
                                             
                                             Main
                                             About
                                             Gallery
                                             Services
                                             Contacts
                                        
                                   
                              
                              

                         
                         

                    
               
               

                    

                         

                              
                              Keep Your Perfect Look
                         
 
                         

                              

                                   

                                        

                                        

                                        

                                        

                                   
                              
                              

                                   
Hair
                                   
Nails
                                   
Makeup
                                   
Spa
                              
                         
                         

                              

                                   

                                        

                                             
About Us
                                             Beauty Center is one of free web templates created by TemplateMonster.com team.
 This website template is optimized for 1280x1024 screen resolution.
                                        
                                   
                                   

                                        

                                             
Our Gallery
                                             This Beauty Center Template goes with two packages: with PSD source files and without them. PSD files are available for the regis
tered members of Templates.com.
                                        
                                   
                                   

                                        

                                             
About Theme
                                             This website template has several pages: Main Page, About Us, Our Gallery, Our Services, Contact Us (please note that con tact us form 鈥?doesn鈥檛 work).
                                        
                                   
                                   
                              
                         
                       
                    
               
               
          
          

          

               

                         

                              

                                   

                                   
Welcome to Our Beauty Center!
                                   

                                        

                                             

                                        
                                        

                                             

                                                  
At vero eos et accusamus etiusto dignissimos
                                             Ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum fuga harum quidem rerum facilis.
                                             
                                        
                                   
                                   
Omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae itaque earum rerum hic tenetur.
                                   Read More
                                   
                              
                              

                                   

                                   

                                        
Beauty Tips
                                        

                                             
Praesentum voluptatum deleniti atque corrupti quos dolores.
                                             
Culpa officia deserunt mollitia animi id est laborum.
                                             
Voluptas assumenda est, omnis dolor repellendus.
                                             
Temporibus autem quibusdam officiis debitis aut rerum necessit.
                                        
                                   
                                   

                                        Read More
                                   
                                   
                              
                         
               
               

          
     
     

     

          

               

                    

                         

                              Copyright © 2014.Company name All rights reserved.网页模板
                         
                    
                    

                         

                              

                                   
Follow Us: