首頁 web前端 css教學 CSS教學關於css框架網頁設計

CSS教學關於css框架網頁設計

Dec 15, 2016 pm 01:48 PM

個人總結了在開發css框架中的一點經驗,獻醜了。希望大家的討論能讓我們共同進步。 :)

  1、css框架 
  中國的互聯網行業已經發展了10年,瀏覽器也從最早流行的NS到現在的FF3.IE7等等……前端開發工程師的職位也誕生了。近幾年在web開發中,有個非常火紅的字——「框架」。 YUI、JQuery、Prototype這些javascript框架在開發網站時,確實成為前端開發工程師的手中利器。為什麼呢?因為框架是包含工具、函數庫、約定,以及嘗試從常用任務中抽像出可以重複使用的通用模組,讓設計師與程式設計師避免重複開發。通俗地講便是把大多數重複工作的時間給節約了。

  寫css也是一樣,從最初只是定義文字顏色、內容排版,到現在定義所有的表現。 css框架也漸漸被重視了,因為大家都體認到:從具象的表現中抽出抽象的模組來重複使用,是減少使用者下載、方便團隊及個人開發最重要的手段。

   2、css框架的開發順序 

  a) 格式化reset.css

  格式化css的真正好處是能夠快速啟動工作,你可以在新的HTML文件裡引入padding,不用再處理格式化css 和margins ,實現統一的排版、瀏覽器下的相同表現。

  b) 佈局layout.css

  定義頁是二欄還是三欄,是全屏還是1024×768…

  一個網站的設計可能有很多種具有復,但是大多數由幾個佈局用性的佈局組成,選擇性的引入所需的佈局,可以很快地應用所期望的頁面佈局。

  c) 基本樣式 type.css

  定義body、h1-h6、a:link-a:active、p等的字體大小和顏色。 

  基本樣式的css引用,譬如將ul定義class為“ul-text”,用來展現相同的icon、行間距、鏈結色彩。 
  還可以像這樣應用:class=”ul-text square”,li前展現的是方型的icon。

  d) 表格修飾 table.css

  定義table、tr、td、th、thead、tfoot、tbody、caption等標籤的表現。 

  和基本樣式一樣,但是表格在現有網站的展現形式幾乎都是處理數據,所以分開存放引用。譬如在table上應用table-style-1便是黑色邊框的表格,table-style-2便是黃色邊框的表格。

  e) 表單修飾 form.css

  定義fieldset、label、button、input 、select、textarea這幾個標籤的表現。 

  大多數網站的表單、按鈕、輸入框幾乎都是一樣的。之所以引入這個css,是為了方便統一在各個瀏覽器中的展現。預設的按鈕、輸入框等在各個瀏覽器下的展現區別很大,雖然在格式化的css中已經初步的統一,但是輸入框的邊框,按鈕的樣式都是需要在這個css中定義的。無奈的是select無法做到統一,如果考慮到用js實現的話,這個成本太大了點。

  f) 列印修飾 print.css

  修飾列印輸出的頁面。

  g) 包含其他css的css

  frontpage.css、list.css、detail.css、register.css等等

  根據各種引用去引入相應的css。如list頁中沒有需要表格的修飾,那就不引入table.css。以節約代碼量。

  3、css框架文件夾的建立 

  a) core 主要的 
  存放reset.css、layout.css、type.css、print.css

  b) bud 模塊 

  存放table.css、form.css、album .css等css

  c) petal 具體應用 

  存放封裝過的css。 frontpage.css、llist.css、detail.css、register.css等css。這個資料夾存放的css都是被直接引用的。

  文件夾的命名,按個人喜好啦! 我還希望用電子、質子等命名呢。嘿嘿!

  4、css框架的優點 

  a) 提高開發效率。 
  b) 規範名稱定義,方便維修。 
  c) 規範專案開發流程 
  d) css程式碼更清楚簡單。 html代碼更合理。

  5、css框架的弊端。 

  a) 學習成本提高。你需要了解整個框架,需要閱讀框架的文檔。 
  b) css框架對於一個小型專案等頁面來說很臃腫。框架中可能有大部分你用不到的程式碼。 
  c)可能會無法幫助你的技術提升。太依賴框架,以至於很難排除bug。包括框架中本身就帶的bug。 
  d) 選擇自己需要的框架與開發框架都很痛苦。寫到後面發現越來越不靈活,越來越臃腫。殘念 -_-

  6、開發及使用css框架中常遇到的問題。 
  1、頁外引用樣式過多。 
  譬如關於ul的margin定義,在格式化的css中會聲明為0,而在基本樣式的css中又可能會聲明margin:5px 10px; 
  所以在Yslow中會出現多次定義。

  2、組件復用性的考量。 
  譬如表單定義的css中定義了所有表單的修飾,而假定在註冊這個頁面中只是需要這個css的百分之三十。那是否要切割出去那不要的百分之七十?

  綜合以上的二個問題,個人認為解決的方式便是封裝,讓該有的有,不該有的沒有。盡量減少http連線數和css的大小。但如果徹底是這樣做的話,css的複用性又會變得很差,後期手工的封裝會很痛苦。只能套用小馬的一句話「具體情況,具體分析」。人生真是矛盾啊…

  3、到底該不該支持em? 
  可見如要支持em,最大的目的是為了在瀏覽器中可以根據用戶的分辨率大小自由縮放,對於擁有超大顯示器的用戶與小顯示器的使用者是非常有用的。但在採集我們用戶的瀏覽器資料後,發現分辨處於這二端的用戶非常少,可想而知,為這部分的用戶多花比正常開發一倍以上的時間顯然是件不划算的事情,所以當初在開發tbsp的時候,我們團隊就決定了不支持em。當然這是個建議,我們也希望能使用em帶給使用者最好的感受。

  以上六點就是我和整個淘寶UED團隊在日常開發中的思考與總結 ,可能您會提出一些不同的觀點,沒關係,給我們留留言,一起探討吧!

以上就是CSS教學關於css框架網頁設計的內容, 更多相關文章請關注PHP中文網(www.php.cn)!


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
首發649元 酷比魔術方塊小酷平板2 Lite來了:11吋護眼大螢幕+8000mAh大電量 首發649元 酷比魔術方塊小酷平板2 Lite來了:11吋護眼大螢幕+8000mAh大電量 Mar 05, 2024 pm 05:34 PM

3月4日消息,酷比魔方將於3月5日推出「小酷平板2Lite」平板電腦,首發價649元。據悉,新款平板搭載紫光展銳T606處理器,採用12nm工藝,由兩顆1.6GHz的ArmCortex-A75CPU和六顆ArmCortex-A55處理器組成。螢幕採用的是10.95吋IPS護眼屏,解析度為1280x800,亮度高至350尼特。影像方面,小酷平板2Lite後置1300萬像素主攝,前置500萬像素自拍鏡頭,另支援4G上網/通話、藍牙5.0、Wi-Fi5。此外,官方宣稱,這款平板電腦&l

首發899元 中興5G隨身Wi-Fi U50S開賣:最高網速500Mbps 首發899元 中興5G隨身Wi-Fi U50S開賣:最高網速500Mbps Apr 26, 2024 pm 03:46 PM

4月26日消息,中興5G隨身Wi-FiU50S目前已經正式開賣,首發899元。外觀設計上,中興U50S隨身Wi-Fi簡約時尚,易於手持和包裝。其尺寸為159/73/18mm,攜帶方便,讓您隨時隨地暢享5G高速網絡,實現暢行無阻的行動辦公與娛樂體驗。中興5G隨身Wi-FiU50S該設備支援先進的Wi-Fi6協議,峰值速率高達1800Mbps,依托驍龍X55高效能5G平台,為用戶提供極速的網路體驗。不僅支援5G雙模SA+NSA網路環境與Sub-6GHz頻段,實測網速更可達驚人的500Mbps,輕鬆滿

復古潮流! HMD與喜力聯合推出翻蓋手機:透明外殼設計 復古潮流! HMD與喜力聯合推出翻蓋手機:透明外殼設計 Apr 17, 2024 pm 06:50 PM

4月17日消息,HMD攜手知名啤酒品牌喜力以及創意公司Bodega,聯袂推出了一款獨特的翻蓋手機-無聊手機(TheBoringPhone)。這款手機不僅在設計上充滿新意,更在功能上返璞歸真,旨在引領人們回歸真實的人際交往,享受與朋友暢飲的純粹時光。無聊手機採用了獨特的透明翻蓋設計,展現出簡約而不失優雅的美感。其內部配備了2.8英寸QVGA顯示屏,外部則是一塊1.77英寸的顯示屏,為用戶提供了基本的視覺交互體驗。在攝影方面,雖然僅搭載了30萬畫素的鏡頭,但足以應付日常的簡

台電M50 Mini小平板來了:8.7吋IPS螢幕、5000mAh電池 台電M50 Mini小平板來了:8.7吋IPS螢幕、5000mAh電池 Apr 04, 2024 am 08:31 AM

4月3日消息,台電即將推出的M50Mini平板電腦是一款功能豐富、效能強大的裝置。這款8吋小平板新品搭載了8.7吋的IPS螢幕,為用戶提供了出色的視覺體驗。其金屬機身設計不僅美觀,也增強了設備的耐用性。在性能方面,M50Mini搭載了紫光展銳T606八核心處理器,擁有兩個A75核心和六個A55核心,確保了流暢且高效的運作體驗。同時,該平板還配備了6GB+128GB的儲存方案,並支援8GB記憶體擴展,滿足了用戶對於儲存和多任務處理的需求。在續航上,M50Mini配備了5000mAh的電池,支援Ty

vivo訊號最強手機! vivo X100s搭載寰宇訊號放大系統:21天線、360°環繞設計 vivo訊號最強手機! vivo X100s搭載寰宇訊號放大系統:21天線、360°環繞設計 Jun 03, 2024 pm 08:41 PM

5月13日消息,vivoX100s今晚正式發布,除了出色的影像,新機在訊號方面表現也十分強悍。根據vivo官方介紹,vivoX100s採用了創新的寰宇訊號放大系統,該系統配備了高達21根天線。這項設計基於直屏進行了重新優化,以平衡5G、4G、Wi-Fi、GPS以及NFC等眾多訊號需求。這使得vivoX100s成為了vivo有史以來訊號接收能力最強的手機。新款手機還採用了獨特的360°環繞設計,天線分佈在機身周圍。這項設計不僅增強了訊號的強度,還針對日常各種握持姿勢進行了優化,避免了因握持方式不當導

榮耀Magic V3首發AI離焦護眼技術:有效緩和近視發展 榮耀Magic V3首發AI離焦護眼技術:有效緩和近視發展 Jul 18, 2024 am 09:27 AM

7月12日消息,榮耀MagicV3系列今日正式發布,搭載全新榮耀視力舒緩綠洲護眼屏,在屏幕本身俱備高規格和高素質的同時,還開創性的引入AI主動式護眼技術。據悉,傳統的緩解近視的方式是“近視鏡”,近視眼鏡度數均勻分佈,保證了視線中心區域成像在視網膜之上,但周邊區域成像在視網膜後,視網膜感應到成像在後,促進眼軸向後生長,從而使度數加深。目前主要的緩解近視發展的方式之一是“離焦鏡”,其中心區域度數正常,週邊區域透過光學設計分區調整,從而使周邊區域成像落在視網膜前,

ppt結束頁如何設計才夠吸引人 ppt結束頁如何設計才夠吸引人 Mar 20, 2024 pm 12:30 PM

在工作中,ppt是職場人士常使用的辦公室軟體。一個完整的ppt必須有一個好的結束頁。不同的職業要求賦予不同的ppt製作特色。關於結束頁的製作,如何才能設計的比較吸引人呢?下邊我們一起看一看,如何設計ppt結束頁吧! ppt結束頁的設計可以在文字和動畫方面進行一些調整,根據需要選擇簡潔或炫目的風格。接下來,我們將重點放在如何透過創新的表達方式來打造出符合要求的ppt結束頁。那我們就開始今天的教學吧。 1.對於結束頁的製作上,使用圖片中的任何文字都可以,結束頁重要的是表示我的簡報結束了。 2、除了這些文字,

1399元起 榮耀X60i手機開售:視覺四等邊OLED直屏 1399元起 榮耀X60i手機開售:視覺四等邊OLED直屏 Jul 29, 2024 pm 08:25 PM

7月29日消息,榮耀X60i手機今日正式開售,先發1,399元。設計上,榮耀X60i手機採用居中挖孔直屏設計,四邊近乎無界的超窄邊框,大大拓寬了視野邊界。榮耀X60i參數顯示器:6.7吋高清顯示器電池:5000mAh大容量電池處理器:天璣6080處理器(台積電6nm,2x2.4G的A76+6×2G的A55)系統:MagicOS8.0系統其他功能: 5G訊號增強靈動膠囊螢幕下指紋雙MIC降噪知識問答攝影能力:後置雙攝系統:5000萬像素主攝200萬像素輔助鏡頭前置自拍鏡頭:800萬像素價格:8GB

See all articles