css 架構彙總

1. 網頁佈局

http://www.zhangxinxu.com/wordpress/2010/01/%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E6%80%9D%E6%83%B3%E6%B5%85%E8%AE%AE-%E6%B7%98%E5%AE%9D%E6%96%B0%E7%89%88%E9%A6%96%E9%A1%B5%E4%B8%BA%E5%AE%9E%E4%BE%8B/

流動佈局:

寬屏的使用

使用壽命

模塊化與重用

固定佈局

佈局精良

開發成本

騰訊的馬化騰馬老闆將Google產品的特點總結爲:文字化界面,極致簡潔,排版清晰,重點突出。總結的很到位


整體佈局和自適應佈局的結合

外框固定寬度

內部寬度自適應,比如評論功能

一個實例:

http://www.zhangxinxu.com/study/taobao.html  taobao首頁自適應(重構頁面之響應式實現)





2. css代碼重構

http://www.zhangxinxu.com/wordpress/2010/08/css%E9%A1%B5%E9%9D%A2%E9%87%8D%E6%9E%84%E4%B9%8B%E2%80%9C%E9%97%A8%E6%B4%BE%E2%80%9D%E4%B9%8B%E5%88%86/

頁面重構權衡

兼容體驗派 vs 擴展性能派

字符,圖片模擬下拉框等等

比如處理按鈕樣式,用css處理,如果非要用圖片,定義三種極限寬度的按鈕.

流式佈局思想下,會把width和padding分開,多套一層div,border也是類似處理


3. css漸進增強

http://www.zhangxinxu.com/wordpress/2010/08/css%E9%A1%B5%E9%9D%A2%E9%87%8D%E6%9E%84%E4%B9%8B%E2%80%9C%E9%97%A8%E6%B4%BE%E2%80%9D%E4%B9%8B%E5%88%86/

一些高級瀏覽器的效果更好

文字陰影

盒陰影

gradient漸變

選擇器僞類



4. 其他文章

我是如何對網站CSS進行架構的

http://www.zhangxinxu.com/wordpress/2010/07/%E6%88%91%E6%98%AF%E5%A6%82%E4%BD%95%E5%AF%B9%E7%BD%91%E7%AB%99css%E8%BF%9B%E8%A1%8C%E6%9E%B6%E6%9E%84%E7%9A%84/

精簡高效的CSS命名準則/方法

http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5%91%BD%E5%90%8D%E5%87%86%E5%88%99%E6%96%B9%E6%B3%95/

CSS的樣式合併與模塊化

http://www.zhangxinxu.com/wordpress/2010/07/css%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%90%88%E5%B9%B6%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96/

去除冗餘 – 精簡您的CSS樣式代碼

http://www.zhangxinxu.com/wordpress/2010/02/%E5%8E%BB%E9%99%A4%E5%86%97%E4%BD%99-%E7%B2%BE%E7%AE%80%E6%82%A8%E7%9A%84css%E6%A0%B7%E5%BC%8F%E4%BB%A3%E7%A0%81/

CSS reset的重新審視 – 避免樣式重置

http://www.zhangxinxu.com/wordpress/2010/04/css-reset%E7%9A%84%E9%87%8D%E6%96%B0%E5%AE%A1%E8%A7%86-%E9%81%BF%E5%85%8D%E6%A0%B7%E5%BC%8F%E9%87%8D%E7%BD%AE/

CSS樣式分離之再分離

http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5%86%8D%E5%88%86%E7%A6%BB/






















發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章