如果您喜歡這些文章，歡迎點(diǎn)擊此處訂閱本Blog

亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

使用960網(wǎng)格系統(tǒng)(960 Grid System)設(shè)計(jì)網(wǎng)頁(yè)

系統(tǒng) 2157 0
<!-- Feedsky FEED發(fā)布代碼開(kāi)始 --> 如果您喜歡這些文章，歡迎點(diǎn)擊此處訂閱本Blog <!-- FEED自動(dòng)發(fā)現(xiàn)標(biāo)記開(kāi)始 --> <link title="RSS 2.0" type="application/rss+xml" rel="alternate"> <!-- FEED自動(dòng)發(fā)現(xiàn)標(biāo)記結(jié)束 --> Blog 訂閱

<!--Google 468*60橫幅廣告開(kāi)始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "image"; //2007-07-26: CSDN google_ad_channel = "6063905817"; google_color_border = "6699CC"; google_color_bg = "E6E6E6"; google_color_link = "FFFFFF"; google_color_text = "333333"; google_color_url = "AECCEB"; google_ui_features = "rc:6"; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--Google 468*60橫幅廣告結(jié)束-->

CSS框架已經(jīng)出現(xiàn)很長(zhǎng)時(shí)間了，關(guān)于這些框架的用處也被我們討論了很多遍了。有人說(shuō)，CSS框架不夠先進(jìn)，還有人說(shuō)這些框架大大的節(jié)省了他們的開(kāi)發(fā)時(shí)間。在此，我們將不再討論這個(gè)問(wèn)題。

前段時(shí)間，我了解到了CSS框架。經(jīng)過(guò)對(duì)Malo、BluePrint和960做了實(shí)驗(yàn)對(duì)比后，我得出一個(gè)結(jié)論：我最喜歡960CSS框架。

本教程將解釋這個(gè)框架的基本原理，這樣你就可以用960來(lái)快速進(jìn)入開(kāi)發(fā)。（注：960網(wǎng)格系統(tǒng)官方網(wǎng)站 點(diǎn)擊進(jìn)入 ）

基本原理

你必須知道一些基本原理來(lái)“ 學(xué)習(xí)這個(gè)框架是如何工作的 ”。你可以通過(guò)實(shí)驗(yàn)（或者是用firebug）來(lái)學(xué)習(xí)它，不過(guò)我也將會(huì)在這里為你介紹它。讓我們開(kāi)始吧。

不要編輯960.css文件

首先是一個(gè)小提示：不要編輯960.css文件，否則，將來(lái)你將不能更新這個(gè)框架。因?yàn)楸M管我們需要布局我們的HTML，我們將創(chuàng)建一個(gè)獨(dú)立的CSS文件。

加載網(wǎng)格

因?yàn)槲覀兛梢允褂靡粋€(gè)外部文件的CSS代碼，我們必須在我們的HTML網(wǎng)站中加載它們，我們可以通過(guò)以下代碼來(lái)實(shí)現(xiàn)：

  1. < link rel =”stylesheet” type =”text/css” media =”all” href =”path/to/960/reset.css” />

  3. < link rel =”stylesheet” type =”text/css” media =”all” href =”path/to/960/960.css” />

  5. < link rel =”stylesheet” type =”text/css” media =”all” href =”path/to/960/text.css” />

這些做好了之后，我們必須添加我們自己的CSS文件。例如，你可以叫這個(gè)文件為 style.css 或 site.css 或者其它任何名字。用下面代碼引用這個(gè)文件：
  1. < link rel =”stylesheet” type =”text/css” media =”all” href =”path/to/style.css” />

容器

在960框架中，你可以選擇名為 .container_12 和 .container_16 的兩個(gè)容器class。他們都是960px的寬度（這就是為什么叫960），它們的不同是分的列數(shù)不同。 .container_12 被分割為12列， .container_16 被分割為16列。這些960px寬的容器是水平居中的。

網(wǎng)格/列

有很多列寬可供選擇，而且在這兩個(gè)容器里，這些寬度也不相同。你可以通過(guò)打開(kāi) 960.css 文件來(lái)查看這些寬度。但是這對(duì)于設(shè)計(jì)一個(gè)網(wǎng)站來(lái)說(shuō)是不必要的。有一個(gè)小技巧可以讓這個(gè)框架更加易用。

比如，你想要在你的容器里建兩列（叫sidebar/content）。你可以這樣做：

  1. < div class = "container_12" >
  2. < div class = "grid_4" > sidebar </ div >
  3. < div class = "grid_8" > maincontent </ div >
  4. </ div >

可以看到，你的第一列（grid_ 4 ）的數(shù)字加上第二列（grid_ 8 ）的數(shù)字正好是 12 。也就是說(shuō)，你不必知道每一列的寬度，你可以選擇列寬通過(guò)一些簡(jiǎn)單的數(shù)學(xué)計(jì)算。

如果我們要建一個(gè)4列的布局，代碼可以是這樣的：

  1. < div class = "container_12" >
  2. < div class = "grid_2" > sidebar </ div >
  3. < div class = "grid_6" > maincontent </ div >
  4. < div class = "grid_2" > photo’s </ div >
  5. < div class = "grid_2" > advertisement </ div >
  6. </ div >

正如你所看到的那樣，這個(gè)系統(tǒng)依然很完美。但是如果你想使用嵌套的列的話，你會(huì)發(fā)現(xiàn)它是有問(wèn)題的。比如，如果后面三列都屬于content列：

  1. < div class = "container_12" >
  2. < div class = "grid_2" > sidebar </ div >
  3. < div class = "grid_10" >
  4. < div class = "grid_6" > maincontent </ div >
  5. < div class = "grid_2" > photo’s </ div >
  6. < div class = "grid_2" > advertisement </ div >
  7. </ div >
  8. </ div >

你會(huì)發(fā)現(xiàn)這錯(cuò)位了，不過(guò)不用著急，這正是我們下一節(jié)要說(shuō)的。

間距

默認(rèn)情況下，每列之間都有間距。每一個(gè)grid_（這里代表數(shù)字）class左右都有10個(gè)像素的間距。也就是說(shuō)，兩列之間，總共有20px的間距。

20px間距對(duì)創(chuàng)建一個(gè)有足夠?qū)挼目瞻组g距的布局來(lái)說(shuō)是很棒的，它可以讓一切看起來(lái)很自然。這也是我喜歡使用960的原因之一。

在上面的例子中，我們遇到了個(gè)問(wèn)題，現(xiàn)在我們就來(lái)解決它。

問(wèn)題是，每一列都有左右邊距。而嵌套的三列中，第一列和最后一列是不需要邊距的，解決方法是：

  1. < div class = "container_12" >
  2. < div class = "grid_2" > sidebar </ div >
  3. < div class = "grid_10" >
  4. < div class = "grid_6alpha" > maincontent </ div >
  5. < div class = "grid_2" > photo’s </ div >
  6. < div class = "grid_2omega" > advertisement </ div >
  7. </ div >
  8. </ div >

我們可以簡(jiǎn)單的添加” alpha “樣式來(lái)去掉左邊的間距，添加“ omega ”樣式來(lái)去除右邊的間距。這樣我們剛剛創(chuàng)建的這個(gè)例子在任何瀏覽器里面就很完美了（當(dāng)然包括IE6）。

樣式

好了，你現(xiàn)在已經(jīng)完全了解如果用960框架來(lái)創(chuàng)建一個(gè)網(wǎng)格布局的基本原理了。當(dāng)然，我們也可以添加一些樣式到我們的布局中。

  1. < div class = "container_12" >
  2. < div id = "sidebar" class = "grid_2" > sidebar </ div >
  3. < div id = "content" class = "grid_10" >
  4. < div id = "main_content" class = "grid_6alpha" > maincontent </ div >
  5. < div id = "photo" class = "grid_2" > photo’s </ div >
  6. < div id = "advertise" class = "grid_2omega" > advertisement </ div >
  7. </ div >
  8. </ div >

因?yàn)镃SS使用特性來(lái)確定哪一個(gè)樣式聲明具有高于其它樣式的優(yōu)先級(jí)。” id “比 class 更重要。

用這種方法，我們可以在自己的文件中重寫(xiě)那些被class設(shè)定的規(guī)則（比如寬度，padding，邊框等）。


補(bǔ)充

以下是我做的一個(gè)簡(jiǎn)單的測(cè)試頁(yè)面，代碼如下：

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. < html xmlns = "http://www.w3.org/1999/xhtml" >
  3. < head >
  4. < meta http-equiv = "Content-Type" content = "text/html;charset=gb2312" />
  5. < title > TESTPage </ title >
  6. < link href = "css/960.css" rel = "stylesheet" type = "text/css" />
  7. < link href = "css/reset.css" rel = "stylesheet" type = "text/css" />
  8. < link href = "css/text.css" rel = "stylesheet" type = "text/css" />
  9. </ head >
  11. < body >
  12. < div class = "container_16" >
  13. < div class = "grid_8" style = "background-color:#FF0000" >
  14. < div class = "grid_6omega" style = "background-color:#0000FF" > 0 </ div >
  15. < div class = "grid_2omega" style = "background-color:#FF00FF" > 00 </ div >
  16. </ div >
  17. < div class = "grid_4" style = "background-color:#00FF00" > a </ div >
  18. < div class = "grid_2" style = "background-color:#666666" > b </ div >
  19. < div class = "grid_2" style = "background-color:#666666" > c </ div >
  20. </ div >
  21. </ body >
  22. </ html >

以下是960官方的實(shí)例文檔，可以看看它的網(wǎng)格是如何寫(xiě)的：

  1. <!--2009-From-http://travisisaacs.com/-->
  2. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. < html xmlns = "http://www.w3.org/1999/xhtml" dir = "ltr" lang = "en-US" >
  4. < head profile = "http://gmpg.org/xfn/11" >
  5. < meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" />
  6. < title > TravisIsaacs|MyLifeInPixels </ title >
  7. < meta name = "keywords" content = "photoshop,wordpress,userexperience,ux,uxd,ixd,interactiondesigner,interactiondesign,keynote,powerpoint,xhtml,css,webdesign,mac,timemachine,superduper,backup,aperture,canon,40d,viewzi,viewmix,views,lensrentals,lensrentals.com,infinitescrolling,cameralensrentaldallas" />
  8. < link rel = "stylesheet" href = "http://css.travisisaacs.com/2009/style.css" media = "all" />
  9. <!--[ifIE] >
  10. < link rel = "stylesheet" href = "http://css.travisisaacs.com/2009/ie.css" media = "all" />
  11. <![endif]-- >
  12. < link rel = "alternate" type = "application/rss+xml" title = "TravisIsaacs|MyLifeInPixelsRSSFeed" href = "http://travisisaacs.com/feed/" />
  13. < link rel = "pingback" href = "http://travisisaacs.com/xmlrpc.php" />
  14. < link rel = "shortcuticon" href = "http://travisisaacs.com/favicon.ico" />
  15. </ head >
  16. < body id = "TheIsaacsFamilyChristmasCard" >
  17. < div id = "header" >
  18. < div class = "container_12" >
  19. < a href = "http://travisisaacs.com" id = "return-home" title = "Gobacktothehomepage" > Thework < span class = "amp" > & </ span > thoughtsof < strong > TravisB.Isaacs </ strong > </ a >
  20. < ul id = "navigation" >
  21. < li id = "tab-work" > < a href = "http://travisisaacs.com/work/" > Work </ a > </ li >
  22. < li id = "tab-blog" > < a href = "http://travisisaacs.com/thoughts/" > Thoughts </ a > </ li >
  23. < li id = "tab-photography" > < a href = "http://travisisaacs.com/photography/" > Photography </ a > </ li >
  24. < li id = "tab-about" > < a href = "http://travisisaacs.com/about/" > About </ a > </ li >
  25. < li id = "tab-contact" > < a href = "http://travisisaacs.com/contact/" > Contact </ a > </ li >
  26. < li id = "tab-search" > < script type = "text/javascript" language = "Javascript" src = "http://vfp.viewzi.com/includes/879F-4A21-011D.js" > </ script > </ li >
  27. </ ul >
  29. </ div >
  30. </ div >
  31. < div class = "ie-center" > <!--closedinfooter-->
  32. < div class = "container_12" >
  34. < div id = "super" >
  35. < h1 > Hello.I'm < a href = "http://travisisaacs.com/about/" > TravisIsaacs </ a > ,andIdesigngreatuserexperiences. </ h1 >
  36. </ div >
  37. < div id = "content" >
  38. < div id = "recent-post" class = "grid_8alpha" >
  39. < div class = "post" >
  40. < h2 >
  41. < a href = "http://travisisaacs.com/2008/12/13/the-isaacs-family-christmas-card/" rel = "bookmark" title = "PermanentLinktoTheIsaacsFamilyChristmasCard" >
  42. TheIsaacsFamilyChristmasCard </ a >
  43. </ h2 >
  44. < div class = "post-date" >
  45. Dec13th//
  46. < span class = "comment-count" >
  47. 11comments </ span >
  48. </ div >
  49. < p > WhenplanningourfamilyChristmascardthisyear,mywifeandIdiscusstheoptionofhiringaprofessionalphotographertotakephotosofourdaughter.However,wethoughtitwouldbemuchmorefunandrewardingtodoitourselves. </ p >
  50. < a href = "http://travisisaacs.com/2008/12/13/the-isaacs-family-christmas-card/" rel = "bookmark" title = "PermanentLinktoTheIsaacsFamilyChristmasCard" > < strong > Keepreading? </ strong > </ a >
  51. </ div > <!--/post-->
  53. </ div > <!--/recent-post-->
  54. < div id = "recent-work" class = "grid_4omega" >
  55. < div class = "m_group" id = "hello" >
  56. < p > I'mTravisIsaacs,adesignerwhodabblesincode,informationarchitecture,andinteractiondesign. < a href = "http://travisisaacs.com/about/" > Moreaboutme </ a > </ p >
  57. </ div >
  58. < a href = "http://travisisaacs.com/feed/" id = "subscribe" > Subscribe </ a >
  59. </ div >
  60. < div class = "clear" > </ div >
  61. < h2 > FeaturedWork </ h2 >
  62. < a href = "http://travisisaacs.com/work/projects/tattoo-information-form/" id = "featured-work-img" title = "Viewthisproject" >
  63. < img src = "http://img.travisisaacs.com/2009/featured-work-large.jpg" alt = "featuredwork:tattoinformationsheet" />
  64. </ a >
  65. < div class = "clear" > </ div >
  66. </ div > <!--/content-->
  68. < div class = "clear" > </ div >
  70. </ div > <!--/container12-->
  71. < div class = "clear" > </ div >
  72. < div class = "clear" > </ div >
  73. < div id = "footer" class = "container_12" >
  74. < ul >
  75. < li > < a href = "http://travisisaacs.com" > Home </ a > </ li >
  76. < li > < a href = "http://travisisaacs.com/work/" > Work </ a > </ li >
  77. < li > < a href = "http://travisisaacs.com/thoughts/" > Thoughts </ a > </ li >
  78. < li > < a href = "http://travisisaacs.com/photography/" > Photography </ a > </ li >
  79. < li > < a href = "http://travisisaacs.com/about/" > About </ a > </ li >
  80. < li > < a href = "http://travisisaacs.com/contact/" > Contact </ a > </ li >
  81. </ ul >
  83. < div class = "copyright" > ?2008TravisIsaacs.AllRightsReserved. </ div >
  84. </ div >
  85. </ div > <!---/ie-center-->
  86. < script type = "text/javascript" >
  87. var gaJsHost =(("https:"==document.location.protocol)?"https://ssl.":"http://www.");
  88. document.write(unescape("%3Cscript src = '"+gaJsHost+"google-analytics.com/ga.js' type = 'text/javascript' %3E%3C/script%3E"));
  89. </ script >
  90. < script type = "text/javascript" >
  91. try{
  92. var pageTracker = _gat ._getTracker("UA-703764-4");
  93. pageTracker._trackPageview();
  94. }catch(err){} </ script >
  95. <!--WoopraCodeStart-->
  96. < script type = "text/javascript" >
  97. var _wh =(( document.location.protocol =='https:')?"https://sec1.woopra.com":"http://static.woopra.com");
  98. document.write(unescape("%3Cscript src = '"+_wh+"/js/woopra.js' type = 'text/javascript' %3E%3C/script%3E"));
  99. </ script >
  100. <!--WoopraCodeEnd-->
  101. </ body >
  102. </ html >



<!--新Google 468*60橫幅廣告開(kāi)始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x60, 創(chuàng)建于 08-8-6 */ google_ad_slot = "7368701459"; google_ad_width = 468; google_ad_height = 60; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468*60橫幅廣告結(jié)束-->

<!--新Google 468x15 橫鏈接單元開(kāi)始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x15 橫鏈接單元 */ google_ad_slot = "5785741422"; google_ad_width = 468; google_ad_height = 15; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468x15 橫鏈接單元結(jié)束-->

<!-- Google Reader shared發(fā)布代碼開(kāi)始 --><script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script><script type="text/javascript" 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"></script><!-- Google Reader shared發(fā)布代碼結(jié)束 -->

使用960網(wǎng)格系統(tǒng)(960 Grid System)設(shè)計(jì)網(wǎng)頁(yè)


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】元

您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧，站長(zhǎng)會(huì)非常 感謝您的哦！！！

發(fā)表我的評(píng)論
最新評(píng)論 總共0條評(píng)論
主站蜘蛛池模板： 伊人亚洲综合网 | julia中文字幕在线 | 天天爱夜夜爱 | 国产精品九九免费视频 | 成人毛片18岁女人毛片免费看 | 久久红综合久久亚洲网色 | 欧美性色欧美a在线观看 | 视频一区在线免费观看 | 天天操天天射天天舔 | 欧美日本一级在线播放 | 精品一区二区三区免费视频 | 中文字幕一区二区三区视频在线 | 免费观看欧美一级高清 | 俄罗斯午夜影院 | 久久国产乱子伦精品免 | 欧美伊香蕉久久综合类网站 | 久久一区视频 | 牛牛影视在线入口 | 国产在线看片护士免费视频 | 91精品国产综合久久久久 | 欧美性白人顶级hd | 久久久综合视频 | 日本一级大黄毛片一级 | 久热久草 | 亚洲人xx视频 | 亚洲国产影院 | 精品九九久久国内精品 | 嫩草影院麻豆久久视频 | 精品精品国产欧美在线观看 | 天天靠天天擦天天摸 | 亚洲在线免费视频 | 精品欧美一区二区三区 | 亚洲国产精品久久久久666 | 国产成人亚洲毛片 | 久久精品天天中文字幕人 | 欧美一区二区三区国产精品 | 欧美日韩中文字幕在线观看 | 欧美一级性视频 | 国产成人做受免费视频 | 国产欧美在线观看不卡 | 看一级特黄a大片日本片黑人 |