首页 > 其他 > 详细

960布局

时间:2015-07-19 23:07:03      阅读:279      评论:0      收藏:0      [点我收藏+]

之前学习了960布局 这个框架上手也蛮快的 在实际操作当中也很实用 在今天的网页制作当中就用了这个框架 横着 竖着 都可以用  960的grid 可以分为 12栏 16栏的 用.container_12 和 .container_16来区分 就是将960分成12块或者16块  不过16栏的不常用 会麻烦一些 所以老师建议 用好12栏的就可以了  充分最大化内容的显示区   用container_12 3 6 3 将网页平均分开的时候 两个图像之间会有一个空缺  这个空缺就是margin 在默认的情况下,每一列的左右都会留出10px的白,那么相邻的两列之间的margin就是20px 也可以很方便的去掉 左边或者右边的margin  用alpha是去除左边的margin,omega是去除右边的margin  为了清除它对身后的CSS设置影响,建议在每个横向DIV大块做完之后,都加上class="clear"进行收尾

 

 

案例:

 <div class="container">         <div class="row">           <div class="col-lg-12 header"></div>         </div>        <div class="row">            <div class="col-lg-3 left"></div>            <div class="col-lg-6 mid"></div>            <div class="col-lg-3 right"></div>        </div>        <div class="row">            <div class="col-lg-12 footer"></div>        </div>    </div>

960布局

原文:http://www.cnblogs.com/Anson-xuan/p/4659877.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!