BS項目中的CSS架構(gòu)_僅加載自己需要的CSS
先說下這套架構(gòu)的優(yōu)點:
1.可以方便的把繁重的CSS編寫工作分配出去,而不會相互造成影響。
2.結(jié)構(gòu)清晰,利于維護(hù)和修改。
3.每一張網(wǎng)頁都僅加載自己需要的CSS。
總結(jié)下來就是:提高開發(fā)效率,提高維護(hù)效率,提高網(wǎng)頁加載效率。
下面我解釋一下上面這張CSS結(jié)構(gòu)圖:
圖中間的5個黑色的圖示表示網(wǎng)頁,其中上面單獨的一張是母版頁,下面四張是子頁。使用VS的人都知道母版頁的作用,相當(dāng)于asp中的include,把共通的部分作成母版,單獨的部分作成子頁,提高開發(fā)效率。
圖上方綠色框內(nèi)的是全局CSS部分,它們存放在styles文件夾中,由母版調(diào)用并作用到所有子頁。
圖上方藍(lán)色虛線框是單一CSS部分,其中每一張子頁都有對應(yīng)的文件夾用來存放自己獨有的CSS文件。它們存放在styles/x文件夾中。 由各自對應(yīng)的C#文件控制:打開不同的子頁時,母版加載當(dāng)前頁的CSS。
圖左下角的紅色框是主題部分,用來存放全局的樣式和圖片。作用和綠色框一樣,只不過它是由子頁加載的,并不是母版統(tǒng)一加載的。 這部分和綠色框合并也無大礙。
接下來我介紹一下那么多CSS文件都有什么用?
—Adm/styles
——Basic.css 全局基礎(chǔ)樣式
——Layout.css 全局布局樣式 (尺寸,定位等)
——General.css 全局美觀樣式 (顏色,圖片等)
—Adm/styles/GroupManager 文件夾(例子)
——Group_Layout.css group頁特有的布局樣式
——Group_General.css group頁特有的美觀樣式
調(diào)用這么多CSS會帶來較多的服務(wù)器請求,下面附上解決辦法。
相關(guān)文章
html小技巧之td,div標(biāo)簽里內(nèi)容不換行
這篇文章主要介紹了td,div標(biāo)簽里內(nèi)容不換行的方法,需要的朋友可以參考下2014-05-05
提高網(wǎng)頁的效率 Use YSlow to know why your web Slow
內(nèi)容再豐富的網(wǎng)站,如果慢到無法訪問也是毫無意義的; SEO做的再好的網(wǎng)站,如果搜索蜘蛛抓不到也是白搭(頁面效率和搜索蜘蛛之間的關(guān)系,需要進(jìn)一步的確認(rèn),此為和上篇保持統(tǒng)一); UE設(shè)計的再人性化的網(wǎng)站,如果用戶連看都看不到也是空談。2008-09-09
Zen Coding 快速編寫HTML/CSS代碼的實現(xiàn)
在本文中我們將展示一種新的使用仿CSS選擇器的語法來快速開發(fā)HTML和CSS的方法。它由Sergey Chikuyonok開發(fā)。2011-01-01
不用javascript實現(xiàn)帶序號的表格隔行換色的效果
這篇文章使用css實現(xiàn)隔行換色的方法,需要的朋友可以參考一下2007-11-11



