您的位置：首页 > Web前端 > CSS

CSS框架 960 grid system最新优化版使用指南

2012-03-06 13:54 225 查看
ss布局看起来简单，但是要做到多浏览器兼容实在不容易，这里推荐960 grid system框架，不过官方版太大了而且文件过多，青竹博客再次进行优化并且进行了文件合并。主要来说主要是第一部分重置html标签，其次是引入框架， 最后是兼容性代码，使用过程中css框架代码部分不要动哦，保存成任何文件即可，使用过程用link导入即可。grid.css代码：
/*reset css*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{margin:0;padding:0;border:0;}
body{font-size:63%;font-family:Verdana,sans-serif}
article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {display:block;}
img {color: transparent;vertical-align: middle;-ms-interpolation-mode: bicubic;}
ol,ul {list-style: none;}
li {display: list-item;}
table {border-collapse: collapse;border-spacing: 0;}
th,td,caption {font-weight: normal;vertical-align: top;text-align: left;}
hr {border: 0 #ccc solid;border-top-width: 1px;clear: both;height: 0;}
h1 {font-size: 2.5em;}
h2 {font-size: 2.3em;}
h3 {font-size: 2.1em;}
h4 {font-size: 1.9em;}
h5 {font-size: 1.7em;}
h6 {font-size: 1.5em;}
/*grid*/
.container{width:950px;margin:0 auto}
.showgrid {background:url(24.gif);}
.column,div.grid_1,div.grid_2,div.grid_3,div.grid_4,div.grid_5,div.grid_6,div.grid_7,div.grid_8,div.grid_9,div.grid_10,div.grid_11,div.grid_12,div.grid_13,div.grid_14,div.grid_15,div.grid_16,div.grid_17,div.grid_18,div.grid_19,div.grid_20,div.grid_21,div.grid_22,div.grid_23,div.grid_24{float:left; margin-right:10px}
.grid_1{width:30px}
.grid_2{width:70px}
.grid_3{width:110px}
.grid_4{width:150px}
.grid_5{width:190px}
.grid_6{width:230px}
.grid_7{width:270px}
.grid_8{width:310px}
.grid_9{width:350px}
.grid_10{width:390px}
.grid_11{width:430px}
.grid_12{width:470px}
.grid_13{width:510px}
.grid_14{width:550px}
.grid_15{width:590px}
.grid_16{width:630px}
.grid_17{width:670px}
.grid_18{width:710px}
.grid_19{width:750px}
.grid_20{width:790px}
.grid_21{width:830px}
.grid_22{width:870px}
.grid_23{width:910px}
.grid_24{width:950px;margin:0}
.last{margin-right:0}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.border {border:1px solid #c0c0c0;}
.border-1 {border-top:1px solid #c0c0c0;}
.border-2 {border-right:1px solid #c0c0c0;}
.border-3 {border-bottom:1px solid #c0c0c0;}
.border-4 {border-left:1px solid #c0c0c0;}
/*for ie*/
* html .column, * html div.grid_1, * html div.grid_2, * html div.grid_3, * html div.grid_4, * html div.grid_5, * html div.grid_6, * html div.grid_7, * html div.grid_8, * html div.grid_9, * html div.grid_10, * html div.grid_11, * html div.grid_12, * html div.grid_13, * html div.grid_14, * html div.grid_15, * html div.grid_16, * html div.grid_17, * html div.grid_18, * html div.grid_19, * html div.grid_20, * html div.grid_21, * html div.grid_22, * html div.grid_23, * html div.grid_24 { overflow-x:hidden; }
使用方法：采用html5
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>css框架演示</title>
<link rel='stylesheet' href='grid.css'>
<style>
#main{font-size:1.2em;line-height:1.8em}
#mainleft{margin:5px 0 0 0}
#mianright{margin:5px 0 0 10px}
<style>
</head>
<body>
<div class='container' id='main'>
<div class='grid_24' id='top'>1行布局</div>
<div class='clear'></div>
<div class='grid_18' id='mianleft'>左布局</div>
<div class='grid_6 last' id='mainright'>右布局 last右漂移</div>
<div class='clear'></div>
</div>
</body>
</html>
说明：此处使用都是类布局，container是全部布局类，这里gird_n，n是用来布局，1行就是24，两行就是两个数字组合如18+6、 10+14，每次完成后都使用层 clear清除类，使用就是这么简单，主要都是布局，具体原理到960 grid system官方查看。(来源 青竹博客原创)

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航