一個網(wǎng)站進入到前端設(shè)計階段，第一步肯定是為全站搭建一個統(tǒng)一的，基礎(chǔ)的HTML模型，在這里推薦一下我剛學(xué)習(xí)的960框架。
960是一個CSS框架，你肯定在想，這個世界肯定是瘋了，連CSS都有框架了嗎，沒錯，有，而且不止一個，960CSS是一個輕量級的布局框架，此外還有很多，諸如ElementsCSS ,Blueprint等等，對其他CSS框架感興趣的朋友請看這篇文章。
首先了解一下在軟件開發(fā)領(lǐng)域，什么叫框架。在代碼界，框架的定義是：一種能夠為你的項目的整體或局部功能提供統(tǒng)一代碼組織的結(jié)構(gòu)，并且這種結(jié)構(gòu)是符合大眾標準的，能夠提高開發(fā)效率，提高產(chǎn)品質(zhì)量，方便項目移植的。
960CSS正是這樣一種輕巧的組織結(jié)構(gòu)，這套框架將頁面定義成一個960像素寬度的一個容器，將容器分成12或者16列，每列的寬度由框架計算，用戶只需關(guān)心自己頁面上每個子容器的大概占比即可。960是一個優(yōu)美的定義，無論是twitter還是facebook，不管是個人博客還是企業(yè)展示型網(wǎng)站，它們的前端設(shè)計都是使用的960網(wǎng)格模型，也就是頁面容器的寬度都是960像素。經(jīng)過實驗，960像素的寬度也確實是比較適合現(xiàn)代屏幕閱讀的。到官網(wǎng)上將ZIP下載回來便可以直接使用，壓縮包里有幾個CSS文件就是這個框架的核心了。

首先在HTML里引入960.css（如果你將你的頁面定義成12列，你也可以只引入960_12_col.css）然后就開始編寫基礎(chǔ)的HTML的布局結(jié)構(gòu)了。
<div class="container_12"><h2>12 Column Grid</h2><div class="grid_12"><p>一整排空間，比較適合做導(dǎo)航條</p></div><div class="clear"></div><div class="grid_1"><p>側(cè)邊欄</p></div><div class="grid_11"><p>主容器</p></div></div>
根據(jù)960CSS的規(guī)范，上面這段HTML將頁面定義成12列，首先出現(xiàn)了一行12列滿空間的DIV，然后在下面出現(xiàn)了一個1列的DIV，與其并排布置了一個11列的DIV。從代碼規(guī)范來看，整個容器是一個以container_12命名的DIV，在這個容器里，以grid_1到grid_12定義了一系列CSS類，用戶只需要估算好自己每個容器所占比例就好。按照這種方式布局的網(wǎng)站，組織結(jié)構(gòu)清晰，布局優(yōu)美規(guī)范，正統(tǒng)嚴謹，保證了頁面上下每個子容器的邊框能夠?qū)R，不錯位。
有朋友會說，如果這樣定義HTML會顯得毫無條理，以前每個DIV的class都有明確的含義，比如nav或者footer之類的字眼，現(xiàn)在用container和grid來為class命名會導(dǎo)致代碼無意義。其實我們更應(yīng)該學(xué)會利用CSS的多屬性來寫HTML，W3C允許也提倡我們?yōu)闃撕灦x多個class類，最主要的好處就是能夠降低代碼重復(fù)率，提高瀏覽器解析效率，在960CSS的基礎(chǔ)上，我們完全可以為不同的子容器繼續(xù)定義更加個性化的CSS樣式，并為其命名，不過要注意的是，自定義的容器樣式不要出現(xiàn)有關(guān)寬度和邊距的定義，以免破換960框架為我們設(shè)計好的頁面布局。

轉(zhuǎn)載于:https://www.cnblogs.com/newflypig/archive/2012/03/04/2861980.html

總結(jié)

以上是生活随笔為你收集整理的网站前端设计，从960框架开始的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。