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/