關於960框架小談

2022-07-27 02:09:08 字數 2008 閱讀 6448

css框架是一種你能夠使用在你的

web專案中概念上的結構,是別人已經寫完的,而且很完善的

css定義集合。

css框架一般是

css檔案的集合,包括基本風格的字型排版,表單樣式,**布局等等

————簡單的來說就是站在巨人的肩膀上面,利用別人寫好的東西,不用自己在麻煩一次

瀏覽器不相容的問題-----

這一直是乙個心痛的問題

因為在不同的瀏覽器中所得到的網頁顯示效果是不同的,這就給網頁設計限制了很大的發展空間,雖然有很笨拙的方法去避免這種無法相容的尷尬

男一號——960grid

聰明的網頁設計者發現,其實無論在哪乙個瀏覽器裡,也無論是否寬屏電腦,整個網頁只要讓它佔據正中的位置不就行了嗎

聰明的前輩就發現只要是960px

就行了,讓整個網頁顯示在正中間,不會跑偏。所以,在

html+css

中遇到的棘手的瀏覽器不相容的問題在

960的嚴格限制下就好多了。

由於電腦顯示器有方屏、寬屏,寬屏又分16:9

和16:10

960px

的寬度是

very good

!無論什麼屏,那種解析度都通吃。

現在有人專門開發了一組**架構css

規則,只要遵守這些簡單的規則(其實就是

class

類),你就能快速設計出

960px

寬度的網頁結構來。

這,就是960grid

。官網:

如何使用960grid

框架?(1

)在html

檔案中引入相關的外部

css檔案:

主要有是那個960.css

為主要排版樣

還有兩個css

檔案:reset.css

和text.css

,它們的主要作用是為了消除瀏覽器間顯示差異準備的,前者消除了

html

標籤在各瀏覽器間的差異,而後者則主要針對的是字型。

(2)定義乙個

div大容器,放下整個頁面:

grid其實就是乙個容器,在這個容器裡,已經給分好了「塊,所以這個容器就給平均分成了塊,有12和

16兩種,我們用

.container_12 

和 .container_16

來區分簡而言之就是將這960

分成12

或者16

塊,到底是用

12列的還是

16列的這就要你來規定了

div class="container_12">

——12

塊-------這一塊使用了乙個

12列的

grid

劃線後數字就是該div

所佔的列數。當然為了布局方便,我們一定會加入更多的

class或id

的,最後如下:

案例2:將網頁均勻的分開

第一塊第二塊

第三塊css

.first

.second

.three

我們可以很明確的看到,兩個之間有空缺,這是為什麼呢?

因為平分了12

列,每兩列之間都會有乙個留白,就是所謂的

margin

,在預設的情況下,每一列的左右都會留出

10px

的白,那麼相鄰的兩列之間的

margin

就是20px

alpha和

omega

alpha是去除左邊的

margin

,omega

是去除右邊的

margin

然後要是兩邊都想去除呢?

第一塊第二塊

第三塊那如果我不想在同一行完成呢

嘗試一下——

為了清除它對身後的css

設定影響,建議在每個橫向

div大塊做完之後,都加上

class="clear"

進行收尾。

第一塊第二塊

第三塊注意了:

——還記得這個玩意嗎

談前端框架

宣告式渲染語法 資料屬性 元件系統 前端路由 狀態管理概念 核心屬性 前端構建 構建的意義 用的的工具 概念 是乙個流行的專案構建工具 打包工具 提供了友好的模組化支援,處理js 壓縮混淆及js相容性問題 作用 對 進行打包,對高階js語法進行降級,讓瀏覽器可以直接執行 基本使用 配置打包入口與出口...

小談《金鎖記》

2005 1 18 金鎖記 是張愛玲1943年的作品。同年間的其他作品包括 傾城之戀 第一爐香 第二爐香 茉莉香片 等。張愛玲本人比較喜歡 傾城之戀 而許多讀者,包括 我在內比較傾向於中篇 金鎖記 張愛玲的大部分作品,讀者讀下來的感覺是蒼涼 凝重。我讀 金鎖記 這篇,更感受到 了命運的無奈。篇中幾位...

Oracle分頁小談

今天做專案時要實現分頁功能,以前只在mysql上弄過,oracle倒沒試過,但知道有這樣乙個rownum這個東西。但這個東西也不是那麼容易用的,還是有蠻多地方要注意的。它不是物理上存在的一列,而是oracle自己在結果集中進行新增的。首先我們來看一下我們的表結構先 我們新建乙個表 也就乙個欄位id而...