`
king_tt
  • 浏览: 2083869 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

960网格系统(960 Grid System)终于推出24列的布局了

 
阅读更多
<!-- Google 728*90横幅广告开始-->

<script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 728x90, 大横幅正文上方 */ google_ad_slot = "4725362798"; google_ad_width = 728; google_ad_height = 90; // --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

<!-- Google 728*90横幅广告结束-->


960 Grid System是一个非常流行的CSS框架,它是国外最成熟的CSS框架之一,而且结构清晰,代码简洁,容易上手。


960的基本原理是网格技术,而且960是CSS 网格技术的最完美实现。 网格技术是最近两年才出现的一种网页布局方法,它的原理是将页面平均分割成N列,然后通过组合相应数量的列来完成对页面的布局。


以往的960框架只包含12列和16列的布局,其网格间距为20px,这样对于英文类网站就比较适合,但是对于中文网站(特别的目前要应付各级领导的网站),就不太适合,不符合中国人的审美,导致我在每次使用960系统时还要对其代码进行适当修改。


好在近期960 Grid System的创始人nathan smith已经针对这种情况做出了改进,增加了24列的布局模式,网格间距改为了10px。这样就大大提高了960系统的适用性和灵活性,也更符合中国人的审美了。


nathan smith是这样解释新的24列布局的:“For those more comfortable designing on a 24-column grid, an alternative version is also included. It consists of columns 30 pixels wide, with 10 pixel gutters, and a 5 pixel buffer on each side of the container. This keeps text from touching browser chrome — helpful for devices like the iPhone, where a lower-case "i" or "l" might be easily missed.”



<!-- Google 728*90横幅广告开始-->

<script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 728x90, 大横幅正文下方 */ google_ad_slot = "4725362798"; google_ad_width = 728; google_ad_height = 90; // --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

<!-- Google 728*90横幅广告结束-->


<!-- 新Google 468x15 横链接单元开始-->

<script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x15 横链接单元 */ google_ad_slot = "5785741422"; google_ad_width = 468; google_ad_height = 15; // --></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

<!-- 新Google 468x15 横链接单元结束-->


<!-- Google Reader shared发布代码开始 -->

<script src="http://www.google.com/reader/ui/publisher.js" type="text/javascript"></script><script src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&amp;callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC" type="text/javascript"></script>

<!-- Google Reader shared发布代码结束 -->
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics