css框架網頁設計教程

1、css框架網頁設計教程關于css框架網頁設計教程1、框架編寫CSS也是一樣，從最初只是定義文字顏色、內容排版，到現(xiàn) 在定義所有的表現(xiàn)。CSS框架也漸漸被重視了，因為大家都認識到: 從具象的表現(xiàn)中抽出抽象的模塊來重復使用，是減少用戶下載、方 便團隊及個人開發(fā)最重要的手段。2、css框架的開發(fā)順序a）格式化reset. CSS格式化css的真正好處是能夠快速啟動工作，你可以在新的 HTML文件里引入框架，不用再處理重置padding和margins,實現(xiàn) 統(tǒng)一的排版、瀏覽器下的相同表現(xiàn)。b）布局 layout, css定義頁而是二欄還是三欄，是全屏還是1024X768一個網站的設計可能有很多種布局

2、，但是大多數(shù)都是由幾個具有 復用性的布局組成，選擇性的引入所需要的布局，可以很快地應用 所期望的頁面布局。c）基木樣式 type, css定義body> hl-h6、a: link-a:active、p等的字體大小和顏色?；緲邮降腸ss引用,譬如將ul定義class為"ul-text” ,用 來展現(xiàn)相同的icon、行間距、鏈接色彩。還可以像這樣應用：class=” ul-textsqu肛e”，li前展現(xiàn)的是 方型的iconod）表格修飾table, css定義 table、tr> td> th、thead tfoot> tbody> caption 等

3、標 簽的表現(xiàn)。和基本樣式一樣，但是表格在現(xiàn)有網站的展現(xiàn)形式幾乎都是處理 數(shù)據，所以分開存放引用。譬如在table上應用table-style-1便 是黑色邊框的表格，table-style-2便是黃色邊框的表格。e) 表單修飾form, css定義 fieldset、label、button> input、select> textarea S 幾個標簽的表現(xiàn)。大多數(shù)網站的表單、按鈕、輸入框幾乎都是一樣的。之所以引入 這個CSS,是為了便于統(tǒng)一在各個瀏覽器中的展現(xiàn)。默認的按鈕、 輸入框等在各個瀏覽器下的展現(xiàn)區(qū)別很大，雖然在格式化的css中 己經初步的統(tǒng)一，但是輸入框的邊框，按鈕的樣式

4、都是需要在這個 css中定義的。無奈的是select無法做到統(tǒng)一，如果考慮到用js 實現(xiàn)的話，這個成本太大了點。f) 打印修飾print, css修飾打卬輸出的頁面。g) 包含其他css的CSSfrontpage, css list. css> detail. css> register. css 等等根據各種引用去引入相應的CSSo譬如list頁面中沒有需要表 格的修飾，那就不引入table. CSSo以節(jié)約代碼量。3、css框架文件夾的建立a) core主要的存放 reset. css、layout. css> type. css、print, cssb) bud模塊存放

5、 table. css> form, css、album, css 等 cssc)petal具體應用存放封裝過的 css。fro nt page. css> llist. css> det ail. css> register, css等csso這個文件夾存放的css都是被直接引用的。文件夾的命名，按個人喜好啦！4、css框架的優(yōu)點R提高開發(fā)效率。b）規(guī)范名稱定義，便于維護。c）規(guī)范項目開發(fā)流程d）css代碼更清晰、簡單。html代碼更合理。5、css框架的.弊端。R學習成木提高。你需要了解整個框架，需要閱讀框架的文檔。b）css框架對于一個小項目等頁面來說很臃腫?？蚣?/p>

6、中可能有大 部分你用不到的代碼。C）可能會無法幫助你的技術提高。太依賴框架，以至于很難排除 bugo包括框架中本身就帶的bug。d）選擇自己需要的框架與開發(fā)框架都很痛苦。寫到后面發(fā)現(xiàn)越來 越不靈活，越來越臃腫。殘念-6、開發(fā)及使用css框架中常遇到的問題。1、頁面外部引用樣式過多。譬如關于ul的margin定義，在格式化的css中會芮明為0,而 在基本樣式的css中又可能會聲明margin:opxlOpx;所以在Yslow中會出現(xiàn)多次定義。2、組件復用性的考量。譬如表單定義的CSS中定義了所有表單的修飾，而假定在注冊這 個頁而中只是需要這個css的百分之三十。那是否應切割出去那不 要的百分之七十？綜合以上的二個問題，個人認為解決的方式便是封裝，讓該有的 有，不該有的沒有。盡量減少http連接數(shù)和CSS的大小。但如果徹 底是這樣做的話，css的復用性又會變得很差，后期手工的封裝會 很痛苦。只能套用小馬的一句話“具體情況，具體分析”。人生真 是矛盾啊3、到底該不該支持em?可見如要支持em,最大的目的是為了在瀏覽器中可以根據用戶 的分辨率大小自由縮放，對于擁有超大顯示器的用戶與小顯示器的 用戶是非常有用的?？墒窃诓杉覀冇脩舻臑g覽器數(shù)據后，發(fā)現(xiàn)分 辨處于