CSS教學關於css框架網頁設計
個人總結了在開發css框架中的一點經驗,獻醜了。希望大家的討論能讓我們共同進步。 :)
1、css框架
中國的互聯網行業已經發展了10年,瀏覽器也從最早流行的NS到現在的FF3.IE7等等……前端開發工程師的職位也誕生了。近幾年在web開發中,有個非常火紅的字——「框架」。 YUI、JQuery、Prototype這些javascript框架在開發網站時,確實成為前端開發工程師的手中利器。為什麼呢?因為框架是包含工具、函數庫、約定,以及嘗試從常用任務中抽像出可以重複使用的通用模組,讓設計師與程式設計師避免重複開發。通俗地講便是把大多數重複工作的時間給節約了。
寫css也是一樣,從最初只是定義文字顏色、內容排版,到現在定義所有的表現。 css框架也漸漸被重視了,因為大家都體認到:從具象的表現中抽出抽象的模組來重複使用,是減少使用者下載、方便團隊及個人開發最重要的手段。
2、css框架的開發順序 a) 格式化reset.css
b) 佈局layout.css
基本樣式的css引用,譬如將ul定義class為“ul-text”,用來展現相同的icon、行間距、鏈結色彩。
還可以像這樣應用:class=”ul-text square”,li前展現的是方型的icon。
和基本樣式一樣,但是表格在現有網站的展現形式幾乎都是處理數據,所以分開存放引用。譬如在table上應用table-style-1便是黑色邊框的表格,table-style-2便是黃色邊框的表格。
大多數網站的表單、按鈕、輸入框幾乎都是一樣的。之所以引入這個css,是為了方便統一在各個瀏覽器中的展現。預設的按鈕、輸入框等在各個瀏覽器下的展現區別很大,雖然在格式化的css中已經初步的統一,但是輸入框的邊框,按鈕的樣式都是需要在這個css中定義的。無奈的是select無法做到統一,如果考慮到用js實現的話,這個成本太大了點。
g) 包含其他css的css
a) core 主要的
存放reset.css、layout.css、type.css、print.css
存放table.css、form.css、album .css等css
存放封裝過的css。 frontpage.css、llist.css、detail.css、register.css等css。這個資料夾存放的css都是被直接引用的。
a) 提高開發效率。
b) 規範名稱定義,方便維修。
c) 規範專案開發流程
d) css程式碼更清楚簡單。 html代碼更合理。
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)!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

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

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,輕鬆滿

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

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

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

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

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

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
