960 CSS框架解析及重构 | Tips | 前端观察

前端观察 • 10年前扫码分享

您的位置：首页 > Tips > 960 CSS框架解析及重构

960 CSS框架解析及重构
神飞发表于 12. Nov, 2008, 分类: Tips , 3 条评论 »
标签：960 & css grid & css网格 & Tips & 网格

960 css system
960CSS框架是一个非常流行的CSS框架，它是国外最成熟的CSS框架之一，而且结构清晰，代码简洁，容易上手。
960的基本原理是网格技术，而且960是CSS 网格技术的最完美实现。
网格技术是最近两年才出现的一种网页布局方法，它的原理是将页面平均分割成N列，然后通过组合相应数量的列来完成对页面的布局。
关于网格技术的更多信息，请查看我之前写的《美丽网格》。
960的方法是，将页面平均分成12列或16列，然后列与列之间是完全独立的，每一列的margin和padding都是相同的，这样，每列之间就不会出现那些常见的bug。
BluePrint和YUI也有网格技术，但是它们的列与列之间的空白，是通过单边的margin来实现的，这样就需要在第一列或最后一列添加额外的样式。
然而，我之前也有一个关于网格框架的想法，后来发现与960差不多，而且在某些方面，它的实现比我的设想要好些。但是它也有点儿方法我觉得不是太好，重用度不够，比如，对于每列的公用样式，它是通过“.grid_1,.grid_2,.grid_3, …… .grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}”这样的写法来实现的，我认为不如将这个公用的样式独立出来，写成另外的一个样式，而每列的class，只负责控制列的宽度就行了，这样比较灵活而且更简单，更易于理解和使用。
于是我将部分代码重写了一下，发布在这里了。这个页面提供了下载链接，如果有人觉得好用，可以下载下来用。
最大的改变就是添加了个公用类column。
另外，值得一提的是，960的样式里面提供了两种清除浮动的方法，一个是.clear类，一个是著名的.clearfix，我联系了下作者，他的解释是，自己比较喜欢用clear的方法，但是同时提供两种方法供大家选择。
来源：http:http://www.qianduan.nethttp://www.qianduan.netwww.isparkle.cnhttp://www.qianduan.net?p=325

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯ISUX团队 Follow me on twitter @qianduan。
如果你喜欢本文，欢迎订阅本站以获得本站最新内容。
您或许也会喜欢：
Emastic CSS框架发布beta3版本
15个非常有用的CSS网格布局生成器
CSS框架:The Golden Grid
在 Mozilla UI 中书写高效率 CSS
960CSS框架基本原理
HTML5 中 div section article 的区别
Firefox Bug: inlinehttp://www.qianduan.netinline-block的间隙
万能清除浮动样式
国外知名CSS画廊大全
用Javascript修正12个常见的浏览器问题

3 个评论

nguest 发表于Jan 6, 2010 at 11:54
。。。不会用
回复

Damon 发表于Dec 25, 2013 at 16:29
“于是我将部分代码重写了一下，发布在这里了”
“发布在这里”，链接打不开
回复

神飞发表于Dec 25, 2013 at 16:33
链接更新了
回复

发表评论

昵称 (必填)
EMail (必填) (不会被泄露)
个人网站
<http://www.qianduan.nettextarea> <http://www.qianduan.netdiv> <div > <input name="submit" type="submit" tabindex="8" value="提交" http://www.qianduan.net>取消回复<http://www.qianduan.neta> <input type='hidden' name='comment_post_ID' value='517' http://www.qianduan.net> <input type='hidden' name='comment_parent' value='0' http://www.qianduan.net> <http://www.qianduan.netdiv> <p style="display: none;"><input type="hidden" name="akismet_comment_nonce" value="c4e6acba4b" http://www.qianduan.net><http://www.qianduan.netp> <http://www.qianduan.netform> <http://www.qianduan.netdiv> <http://www.qianduan.netdiv> <http://www.qianduan.netdiv></div> <section class="am-panel am-panel-default"> <header class="am-panel-hd"> <h3 class="am-panel-title">随意打赏</h3> </header> <div class="am-panel-bd"> <center><div id="cyReward" role="cylabs" data-use="reward"></div> </center> </div> </section> </article> <div class="am_news_list_all_center" > <ul class="am-list" > <li class="am-g am-list-item-desced am_list_li" data-am-collapse="{parent: '#accordion', target: '#do-not-say-1'}"> <center> 评论 </center> </li> </ul> <div id="do-not-say-1" class="am-panel-collapse am-collapse" > <ul class="am-list"> <li class="am-g am-list-item-desced am_list_li">  <div id="uyan_frame"></div> </li> </ul> </div> </div> <footer class="am_footer"> <div class="yindao"> <p>高效读科技，用关键词过滤资讯，等你加入</p> <a href="http://www.kejilie.com/unread.html" target="_blank" id="yindaolink" rel="nofollow"> 马上加入 </a> </div> <div class="yindao-hr"></div> <div class="am_footer_con" > <div class="am_footer_don"> <dt><img src="/img/logom.png" alt="科技猎"></dt> <dd>专注科技资讯挖掘，通过关键词过滤科技资讯，提高阅读效率10倍以上。网站定位极少数高效能人士，精准快速定位资讯，大大提高阅读效率。 </div> </div> <div class="so-footerlink"> <p> <a href="http://www.kejilie.com/about.html" title="科技猎" rel="nofollow" >关于我们</a> <a href="http://www.kejilie.com/contact.html" title="联系我们" rel="nofollow">联系我们</a> <a href="http://www.kejilie.com/joinus.html" title="加入我们" rel="nofollow">加入我们</a> <a href="http://www.kejilie.com/links.html" title="友情链接" rel="nofollow">友情链接</a>  <a href="http://www.kejilie.com/longword.html" title="最新TAG" rel="nofollow" >最新TAG</a> </p> </div> <div class="am_info_line"> CopyRight©2012-2019 科技猎 keji<span>L</span>ie.com 京公网安备 11010602030041号 <a href="https://beian.miit.gov.cn" target=_blank>京ICP备09085575号-7</a></div> </footer> <a target="_blank" onclick="_czc.push(['_trackEvent','用户调查','右下角']);" href="http://cn.mikecrm.com/amttlxP" style="position:fixed;z-index:999;right:15px;bottom: 70px;display: inline-block;width: 20px;border-radius: 5px;color:white;font-size:14px;line-height:17px;background: #2476CE;box-shadow: 0 0 5px #666;word-wrap: break-word;padding: 10px 1px;border: 2px solid white;">提交建议</a> <div data-am-widget="gotop" class="am-gotop am-gotop-fixed am-active"> <a href="#top" title="回到顶部" class="am-icon-btn am-icon-arrow-up" rel="nofollow"></a> </div>  <div id="so-share" onmouseout='sharehidden()' onmouseover='stopTime();' style="display: none;position: absolute;top: 50%;left: 50%;" class="share-popover"> <span class="arrow"></span> <div class="share"> <a href="#" onclick="share(this)" title="分享到新浪微博" data-share="weibo" class="share-btn s-weibo"></a> <a href="#" onclick="share(this)" title="分享到腾讯微博" data-share="tencent" class="share-btn s-tcweibo"></a> <a href="#" onclick="share(this)" title="分享到QQ空间" data-share="qzone" class="share-btn s-qzone"></a> <a href="#" onclick="share(this)" title="分享到人人网" data-share="renren" class="share-btn s-renren"></a> </div> </div>  <div id="shoucangtishi" class="am-badge am-badge-warning am-text-lg am-round" style="display: none;position:absolute;z-index:100;top:50%;left:50%;"> </div>  <div class="am-modal am-modal-alert" tabindex="-1" id="weixinbox"> <div class="am-modal-dialog"> <div class="am-modal-hd">微信扫一扫，分享给好友吧。</div> <div class="am-modal-bd" id="weixinpic" > </div> <div class="am-modal-footer"> <span class="am-modal-btn">关闭</span> </div> </div> </div>  <script src="http://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script type="text/javascript">var jQuery=$;</script>  <script src="http://cdn.bootcss.com/amazeui/2.7.0/js/amazeui.min.js"></script> <script type="text/javascript" src="/js/prompt.js?v=1.1"></script> <script type="text/javascript" src="/js/app.js?v=1.7"></script> <script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?123b569b6ae27e29fadbfdb2c1f43901"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script> <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260590285'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/q_stat.php%3Fid%3D1260590285' type='text/javascript'%3E%3C/script%3E"));</script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script> (function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?4054411330fc00b0202d43f36579d12c":"https://jspassport.ssl.qhimg.com/11.0.1.js?4054411330fc00b0202d43f36579d12c"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script>  <script> $('#yindaolink').click(function(){ zhuge.track("底部引导猎物"); }); </script> <script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cytgHGfGU"></script>  <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=1836051"></script> <script type="text/javascript"> function Fpop(a){ } function Fhidden(){} zhuge.track("非第一次访问内容页"); $('#zhuge_guangaoyindao').click(function(){ zhuge.track("广告引导"); }); $('.zhuge_yanshenyuedu').click(function(){ zhuge.track("延伸阅读"); }); </script> </body> </html>