整理了二個基本的css庫(高手請繞道)
前一陣公司唯一的前端開發人員走掉了,短期內也沒人頂上來,所以切頁面/js這種活兒只能我們自個兒攬過來了,花了大半天搗鼓了下css,整理了二個基本的css庫,方便以後切頁面,貼在這裡備份
說明:
p.css —即public.css,用來定義一些常見的公用樣式
l.css —即layout.css,用來定義柵格系統的常用佈局(不清楚柵格系統的統子們,先到這裡掃掃盲http://www.cnblogs.com/yjmyzz/archive/2009/08/20/1550653.html-學習網頁柵格系統的幾篇好文)
壓縮包目錄結構如下:
D:.
│ ifrm.html
│ layout.htm
│ pub.htm
│
└─c
│ l.css
│ p.css
│
└─package
l.css
p.css
p.css很簡單,不多說了,down回去自己看
pub.htm是針對p.css的測試頁面
l.css即佈局樣式,命名規則解釋如下:
.g-c2-s5-sm —g表示這是按柵格劃分的(預設是24*40,即40px為一格,960的頁面分為24格),c2表示column為2(即二欄main,sub),s5表示sub欄為5格(即5*40=200px,再考慮到10px的間隔,最終寬度為190px),sm表示佈局順序(即sub-main,sub欄在左,main欄在右)
.g-c2-s5-ms —其它同上,最後的sm表示main-sub,即main在左,sub欄在右
.g-c3-s5e6-sme —c3表示三欄佈局(main,sub,extra),s5–即sub佔5格,e6–即extra佔6格,sme即sub-main-sub,代表sub在左,main在中間,extra在右邊
其它類推…
特點:
1.符合所謂的”漸進增強”語義,即在html原始碼上,始終是main,sub,extra的順序,保證搜尋引擎分析時,main(主要內容-正文區)總是最先被讀到,其它是sub(子欄目,通常是側邊欄),最後是extra(附加欄,相對最不重要,通常是側邊廣告位之類)
2.在html原始碼不做太大改動的情況下,如果要改動佈局結構,只要把最外面的class名修改即可,如g-c2-s5-sm的佈局,想交換main,sub的位置,只要把class=”g-c2-s5-sm”換成class=”g-c2-s5-ms”即可
layout.htm為l.css的測試(基本上在IE6,IE7,IE8,FF3.5,Opera10,Safari,Chorme2上都是相容的,而且也沒用到任何hack),最後package目錄下為l.css與p.css的壓縮版本
原始檔下載:http://files.cnblogs.com/yjmyzz/csslib_v0.1.rar
歡迎大家補充完善,如有更新,請記得通知我(mail:yjmyzz#126.com,msn:yjmyzy#hotmail.com)
相關文章
- 【爬蟲】第二章-基本請求庫爬蟲
- 一個資料庫連線問題!請教高手資料庫
- 一道JAVA 考試題 請高手指點Java
- 請教高手一個問題!
- 請教各位高手一個問題
- 問一個有關JBPM連MySQL資料庫的問題,高手請進MySql資料庫
- NIO Socket的2個問題?請高手幫忙!
- 請教高手
- 高手請進
- 請問高手
- 這個mysql資料庫是不是崩潰了啊?請高手指點。MySql資料庫
- 高手請幫忙看看小弟寫的這個web service:Web
- 請教高手一個系統設計的問題
- 一個郵件的JAVABEAN問題,請高手幫忙JavaBean
- 整理了單位的linux下的資料庫,完成了3項基本任務Linux資料庫
- 請高手幫忙!
- 請高手指點
- 各位高手,請教
- 二分法(整數型別)的基本框架型別框架
- 問一個小的運算問題,請高手指教!
- 迷惑的地方!請高手指導
- CSS 文字環繞圖片CSS
- 使整個頁面變灰的css程式碼CSS
- 有個問題不太瞭解,向高手請教
- 請熟悉混沌原理和c高手幫個忙 (轉)
- 長整數的基本操作
- 高手們請進哈
- 急!!請高手幫忙
- jbuilder高手請幫忙UI
- 求教,請高手指點!
- 請各位高手幫忙!
- 請高手幫忙分析一個JSP小程式的問題JS
- 提一個巨難的問題,請高手們來討論..
- 圍繞著記憶體資料庫的 4 個流言記憶體資料庫
- 請收下這72個炫酷的CSS技巧CSS
- Android資料庫高手祕籍(2):建立表和LitePal的基本用法Android資料庫
- CSS文字環繞圖片效果CSS
- CSS 邊框動態環繞CSS