2. 程式人生 > >使用960網格系統(960 Grid System)設計網頁

使用960網格系統(960 Grid System)設計網頁

阿新 • • 發佈：2019-02-14
如果您喜歡這些文章，歡迎點選此處訂閱本Blog Blog 訂閱

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

    CSS框架已經出現很長時間了，關於這些框架的用處也被我們討論了很多遍了。有人說，CSS框架不夠先進，還有人說這些框架大大的節省了他們的開發時間。在此，我們將不再討論這個問題。

    前段時間，我瞭解到了CSS框架。經過對Malo、BluePrint和960做了實驗對比後，我得出一個結論：我最喜歡960CSS框架。

    本教程將解釋這個框架的基本原理，這樣你就可以用960來快速進入開發。（注：960網格系統官方網站

點選進入）

基本原理

    你必須知道一些基本原理來“學習這個框架是如何工作的”。你可以通過實驗（或者是用firebug）來學習它，不過我也將會在這裡為你介紹它。讓我們開始吧。

不要編輯960.css檔案

    首先是一個小提示：不要編輯960.css檔案，否則，將來你將不能更新這個框架。因為儘管我們需要佈局我們的HTML，我們將建立一個獨立的CSS檔案。

載入網格

    因為我們可以使用一個外部檔案的CSS程式碼，我們必須在我們的HTML網站中載入它們，我們可以通過以下程式碼來實現：

  1. <linkrel=”stylesheet” type=”text/css” media=”all” href
    =”path/to/960/reset.css” />
  2. <linkrel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/960.css” />
  3. <linkrel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css” />
    這些做好了之後，我們必須新增我們自己的CSS檔案。例如，你可以叫這個檔案為style.css或site.css或者其它任何名字。用下面程式碼引用這個檔案：
  1. <linkrel=”stylesheet” type=”text/css” 
    media=”all” href=”path/to/style.css” />

容器

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

網格/列

    有很多列寬可供選擇，而且在這兩個容器裡，這些寬度也不相同。你可以通過開啟960.css檔案來檢視這些寬度。但是這對於設計一個網站來說是不必要的。有一個小技巧可以讓這個框架更加易用。

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

  1. <divclass="container_12">
  2. <divclass="grid_4">sidebar</div>
  3. <divclass="grid_8">main content</div>
  4. </div>

    可以看到，你的第一列（grid_4）的數字加上第二列（grid_8）的數字正好是12。也就是說，你不必知道每一列的寬度，你可以選擇列寬通過一些簡單的數學計算。

    如果我們要建一個4列的佈局，程式碼可以是這樣的：

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

    正如你所看到的那樣，這個系統依然很完美。但是如果你想使用巢狀的列的話，你會發現它是有問題的。比如，如果後面三列都屬於content列：

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

你會發現這錯位了，不過不用著急，這正是我們下一節要說的。

間距

    預設情況下，每列之間都有間距。每一個grid_（這裡代表數字）class左右都有10個畫素的間距。也就是說，兩列之間，總共有20px的間距。

    20px間距對建立一個有足夠寬的空白間距的佈局來說是很棒的，它可以讓一切看起來很自然。這也是我喜歡使用960的原因之一。

    在上面的例子中，我們遇到了個問題，現在我們就來解決它。

    問題是，每一列都有左右邊距。而巢狀的三列中，第一列和最後一列是不需要邊距的，解決方法是：

  1. <divclass="container_12">
  2. <divclass="grid_2">sidebar</div>
  3. <divclass="grid_10">
  4. <divclass="grid_6 alpha">main content</div>
  5. <divclass="grid_2">photo’s</div>
  6. <divclass="grid_2 omega">advertisement</div>
  7. </div>
  8. </div>

    我們可以簡單的新增”alpha“樣式來去掉左邊的間距，新增“omega”樣式來去除右邊的間距。這樣我們剛剛建立的這個例子在任何瀏覽器裡面就很完美了（當然包括IE6）。

樣式

    好了，你現在已經完全瞭解如果用960框架來建立一個網格佈局的基本原理了。當然，我們也可以新增一些樣式到我們的佈局中。

  1. <divclass="container_12">
  2. <divid="sidebar"class="grid_2">sidebar</div>
  3. <divid="content"class="grid_10">
  4. <divid="main_content"class="grid_6 alpha">main content</div>
  5. <divid="photo"class="grid_2">photo’s</div>
  6. <divid="advertise"class="grid_2 omega">advertisement</div>
  7. </div>
  8. </div>

    因為CSS使用特性來確定哪一個樣式宣告具有高於其它樣式的優先順序。”id“比class更重要。

    用這種方法，我們可以在自己的檔案中重寫那些被class設定的規則（比如寬度，padding，邊框等）。

補充

    以下是我做的一個簡單的測試頁面，程式碼如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/>
  5. <title>TEST Page</title>
  6. <linkhref="css/960.css"rel="stylesheet"type="text/css"/>
  7. <linkhref="css/reset.css"rel="stylesheet"type="text/css"/>
  8. <linkhref="css/text.css"rel="stylesheet"type="text/css"/>
  9. </head>
  10. <body>
  11. <divclass="container_16">
  12. <divclass="grid_8"style="background-color:#FF0000">
  13. <divclass="grid_6 omega"style="background-color:#0000FF">0</div>
  14. <divclass="grid_2 omega"style="background-color:#FF00FF">00</div>
  15. </div>
  16. <divclass="grid_4"style="background-color:#00FF00">a</div>
  17. <divclass="grid_2"style="background-color:#666666">b</div>
  18. <divclass="grid_2"style="background-color:#666666">c</div>
  19. </div>
  20. </body>
  21. </html>

    以下是960官方的例項文件，可以看看它的網格是如何寫的：

  1. <!--2009-From-http://travisisaacs.com/-->
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <htmlxmlns="http://www.w3.org/1999/xhtml"dir="ltr"lang="en-US">
  4. <headprofile="http://gmpg.org/xfn/11">
  5. <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
  6. <title> Travis Isaacs | My Life In Pixels</title>
  7. <metaname="keywords"content="photoshop, wordpress, user experience, ux, uxd, ixd, interaction designer, interaction design, keynote, powerpoint, xhtml, css, web design, mac, time machine, super duper, backup, aperture, canon, 40d, viewzi, viewmix, views, lens rentals, lensrentals.com, infinite scrolling, camera lens rental dallas"/>
  8. <linkrel="stylesheet"href="http://css.travisisaacs.com/2009/style.css"media="all"/>
  9.     <!--[if IE]>
  10. <linkrel="stylesheet"href="http://css.travisisaacs.com/2009/ie.css"media="all"/>
  11.     <![endif]-->
  12. <linkrel="alternate"type="application/rss+xml"title="Travis Isaacs | My Life In Pixels RSS Feed"href="http://travisisaacs.com/feed/"/>
  13. <linkrel="pingback"href="http://travisisaacs.com/xmlrpc.php"/>
  14. <linkrel="shortcut icon"href="http://travisisaacs.com/favicon.ico"/>
  15. </head>
  16. <bodyid="The Isaacs Family Christmas Card">
  17. <divid="header">
  18. <divclass="container_12">
  19. <ahref="http://travisisaacs.com"id="return-home"title="Go back to the home page">The work <spanclass="amp">&</span> thoughts of <strong>Travis B. Isaacs</strong></a>
  20. <ulid="navigation">
  21. <liid="tab-work"><ahref="http://travisisaacs.com/work/">Work</a></li>
  22. <liid="tab-blog"><ahref="http://travisisaacs.com/thoughts/">Thoughts</a></li>
  23. <liid="tab-photography"><ahref="http://travisisaacs.com/photography/">Photography</a></li>
  24. <liid="tab-about"><ahref="http://travisisaacs.com/about/">About</a></li>
  25. <liid="tab-contact"><ahref="http://travisisaacs.com/contact/">Contact</a></li>
  26. <liid="tab-search"><scripttype="text/javascript"language="Javascript"src="http://vfp.viewzi.com/includes/879F-4A21-011D.js"></script></li>
  27. </ul>
  28. </div>
  29. </div>
  30. <divclass="ie-center"><!--closed in footer-->
  31. <divclass="container_12">
  32. <divid="super">
  33. <h1>Hello. I'm <ahref="http://travisisaacs.com/about/">Travis Isaacs</a>, and I design great user experiences. </h1>
  34. </div>
  35. <divid="content">
  36. <divid="recent-post"class="grid_8 alpha">
  37. <divclass="post">
  38. <h2>
  39. <ahref="http://travisisaacs.com/2008/12/13/the-isaacs-family-christmas-card/"rel="bookmark"title="Permanent Link to The Isaacs Family Christmas Card">
  40.                         The Isaacs Family Christmas Card                    </a>
  41. </h2>
  42. <divclass="post-date">
  43.                     Dec 13th // 
  44. <spanclass="comment-count">
  45.                         11 comments                 </span>
  46. </div>
  47. <p>When planning our family Christmas card this year, my wife and I discuss the option of hiring a professional photographer to take photos of our daughter. However, we thought it would be much more fun and rewarding to do it ourselves.</p>
  48. <ahref="http://travisisaacs.com/2008/12/13/the-isaacs-family-christmas-card/"rel="bookmark"title="Permanent Link to The Isaacs Family Christmas Card"><strong>Keep reading »</strong></a>
  49. </div><!--/post-->
  50. </div><!--/recent-post-->
  51. <divid="recent-work"class="grid_4 omega">
  52. <divclass="m_group"id="hello">
  53. <p>I'm Travis Isaacs, a designer who dabbles in code, information architecture, and interaction design. <ahref="http://travisisaacs.com/about/">More about me</a></p>
  54. </div>
  55. <ahref="http://travisisaacs.com/feed/"id="subscribe">Subscribe</a>
  56. </div>
  57. <divclass="clear"></div>
  58. <h2>Featured Work</h2>
  59. <ahref="http://travisisaacs.com/work/projects/tattoo-information-form/"id="featured-work-img"title="View this project">
  60. <imgsrc="http://img.travisisaacs.com/2009/featured-work-large.jpg"alt="featured work: tatto information sheet"/>
  61. </a>
  62. <divclass="clear"></div>
  63. </div><!--/content-->
  64. <divclass="clear"></div>
  65. </div><!--/container12-->
  66. <divclass="clear"></div>
  67. <divclass="clear"></div>
  68. <divid="footer"class="container_12">
  69. <ul>
  70. <li><ahref="http://travisisaacs.com">Home</a></li>
  71. <li><ahref="http://travisisaacs.com/work/">Work</a></li>
  72. <li><ahref="http://travisisaacs.com/thoughts/">Thoughts</a></li>
  73. <li><ahref="http://travisisaacs.com/photography/">Photography</a></li>
  74. <li><ahref="http://travisisaacs.com/about/">About</a></li>
  75. <li><ahref="http://travisisaacs.com/contact/">Contact</a></li>
  76. </ul>
  77. <divclass="copyright">©2008 Travis Isaacs. All Rights Reserved. </div>
  78. </div>
  79. </div><!---/ie-center-->
  80. <scripttype="text/javascript">
  81. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  82. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js'type='text/javascript'%3E%3C/script%3E"));
  83. </script>
  84. <scripttype="text/javascript">
  85. try {
  86. var pageTracker = _gat._getTracker("UA-703764-4");
  87. pageTracker._trackPageview();
  88. } catch(err) {}</script>
  89. <!-- Woopra Code Start -->
  90. <scripttype="text/javascript">
  91. var _wh = ((document.location.protocol=='https:') ? "https://sec1.woopra.com" : "http://static.woopra.com");
  92. document.write(unescape("%3Cscript src='" + _wh + "/js/woopra.js'type='text/javascript'%3E%3C/script%3E"));
  93. </script>
  94. <!-- Woopra Code End -->
  95. </body>
  96. </html>



<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<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&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>

相關推薦

使用960網格系統(960 Grid System)設計網頁

如果您喜歡這些文章，歡迎點選此處訂閱本Blog <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </scri

Bootstrap 網格系統（Grid System）

<div class="container"> <div class="row" > <div class="col-xs-6 col-sm-3" style="background-color:

960 Grid System 基本原理及使用方法

  由於一些讀者對於960 Grid System CSS Framework的原理和使用方法比較感興趣，暴風彬彬今天將和大家一同分享這篇關於960 grid CSS Framework的基本原理和簡單的使用方法。 關於CSS框架其實一直是一個比較熱門且很有爭議的話題，的確，國內的一些前端er們越來越

[LeetCode] Design In-Memory File System 設計內存文件系統

format directory ring orm turn original all lee example Design an in-memory file system to simulate the following functions: ls: Give

[LeetCode] Design Log Storage System 設計日誌存儲系統

main order format range store rom ont mat mos You are given several logs that each log contains a unique id and timestamp. Timestamp i

Silverlight & Blend動畫設計系列十：Silverlight中的坐標系統（Coordinate System）與向量（Vector）運動

過度 highlight 圖片 nbsp mgr ack jpg .com bsp 原文:Silverlight & Blend動畫設計系列十：Silverlight中的坐標系統（Coordinate System）與向量（Vector）運動　　如果我們習慣於數學坐

[LeetCode] Design Log Storage System 設計日誌儲存系統

You are given several logs that each log contains a unique id and timestamp. Timestamp is a string that has the following format: Year:Month:Day:Hour:Min

[LeetCode] Design In-Memory File System 設計記憶體檔案系統

Design an in-memory file system to simulate the following functions: ls: Given a path in string format. If it is a file path, return a list that only co

[LeetCode] Design Search Autocomplete System 設計搜尋自動補全系統

Design a search autocomplete system for a search engine. Users may input a sentence (at least one word and end with a special character '#'). For each ch

grid網格系統布局

方法 項目 3.3 分配 例子 data 內聯 排列 隱式 grid布局： 基於網格的2維布局方法1：display: grid | inline-grid | subgrid作用：啟用網格grid容器 grid：定義一個塊級的網格容器 inline-grid：定義

如何在APP設計中運用網格系統？

快捷 互聯網 多少 基本 兩個 電商 首頁設計 是否 sha 如何在APP設計中運用網格系統？ --安陽師範學院互聯網+應用技術學院UI設計方向講師 黃艷芳第1步：定義最小單元格最小單元格的數值，大多數APP會選擇4-10這個範圍內一個偶數。那麽選用哪個值最為合適呢？這需

VB.NET版機房收費系統—數據庫設計

階段 數據類型 多人 不能 can log lai tex asi 之前第一遍機房收費的時候，用的數據庫是別人的。認知也僅僅能建立在別人的基礎上，等自考中《數據庫系統原理》這本書學完了之後，再去看曾經的數據庫，發現數據庫真的還須要進一步的優化。以下是我設計數據庫的

客戶管理系統之模塊設計(八)

說了 sender windows .net children comm eve exceptio client 2，加入信息投訴和改動投訴信息模塊 關於投訴信息的加入模塊和改動模塊均使用的是一個窗口，其其差別是依據向窗口中所傳遞的參數

關於寫畢業設計網頁代碼寫後感

時間比較 們的 發現 文字 調試工具 分配任務 style 得到 註意 哎，心累！ 開始 本次本著自己養活自己的原則，接了三個學姐的畢業設計，都是是把她們的設計圖編寫成網頁。實際都是一些布局規整，頁面簡介的網頁。雖然一份網頁有15頁，但其實以正常速度大約兩天就可以

設計網頁錄入信息與自己定義server數據接收

dex 網絡 小結 win tar enter doctype iss flash 需求：設計一個註冊網頁用於錄入username和登錄password。並將數據傳入server並顯示出來。 1、前言：網頁提交的 get 和 post 兩種方式。 　　（1）對於get提

bootstrap- 網格系統

code ots document 外邊距 alt fse har 沒有 max 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

PHP 執行系統外部命令 system() exec() passthru()

dsl 時有 輸出 處理 介紹 要花 區別 safe function PHP中調用外部命令，可以用如下三種方法來實現： 方法一：用PHP提供的專門函數（四個）： PHP提供4個專門的執行外部命令的函數：exec(), system(), passthru

OA系統權限管理設計方案

itl group 權限列表 con 簡化 項目代碼 -s 當前 rtm (轉)OA系統權限管理設計方案 OA系統權限管理設計方案 不同職責的人員，對於系統操作的權限應該是不同的。優秀的業務系統，這是最基本的功能。 可以對“組&rd

皇家果園農場種植模式系統源碼開發設計

皇家果園開發 皇家果園理財系統開發定制、(楊小姐：136-027*??9-9492 可微可電)皇家果園農場理財遊戲模式開發、皇家果園理財遊戲平臺開發、皇家果園APP軟件開發、皇家果園種植遊戲系統開發 農場軟件系統，是“互聯網+零售+金融”的一個體現，在農場軟件既可以購得物廉價美、新鮮的水果

高性能並發系統架構應該如何設計？關鍵是什麽？

不同 數據庫服務 blog gzip壓縮網頁 狀態 引用 .net 做成 emca 1) 優化前端網頁 充分利用CDN，使JS、圖片等靜態資源的請求能夠就近訪問（順便說一下，如果12306訂票插件能從google提供的http://cdnjs.com中引用JS，而不去