Download as PDF, PPTX
Uploaded by洧杰 廖
如何逐步提升CSS的可利用性、模組化
本文件介绍了如何提升CSS的可用性和模块化，强调了养成良好的代码习惯和结构化命名的重要性。内容涵盖CSS基础知识、程序整理及使用Compass和Sass的技巧，并反映了高雄前端社群的交流活动。讲者希望通过分享经验避免同行走弯路，提升前端开发的效率和质量。
如何逐步提升CSS的可利用性、模組化
- 1.
- 2.
- 3.
- 4. 1. 各瀏覽器 CSSBUG 2. 元素排版對齊 3. know how (Z-index、menu) 4. 標準網頁排版流程 5. 支援的第三方程式 6. 提升排版效率、模組化 7. 與工程師合作的細節 8. 數百項族繁不及備載..
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. 1. 養成撰寫習慣 2. 如何有效整理程式碼 3.Compass+Sass 內容大綱
- 20.
- 21. 養成習慣 1. 檔案分類明確 2. 命名一致化 3.不要濫用CSS與DIV 4. 加強基礎觀念
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. .Box{..} .Box_title{..} .Box_content{..} <div class="box"> <div class="box_title"></div> <divclass="box_content"></div> </div> 濫用範例
- 34. .Box{..} .Box h1{..} .Box p{..} <divclass="box"> <h1></h1> <p></p> </div> 正確版本
- 35. 不要濫用CSS與DIV 1. 標題：H1、H2、H3 2. 段落：P 3.列表：ul 、ol、 li 4. 其他：img、a、DIV、span 關鍵字： HTML 語義化
- 36.
- 37. .header{ vertical-align: baseline; position:：relative; z-index： 99999; margin:0auto; float： left; height: auto; …30 line setting }
- 38. .button{ *overflow ：visible; display： visible; *display:inline; line-height: 20px; padding: 4px 12px; …20 line setting }
- 39.
- 40. 加強基礎觀念 1. Float排版需用clear清除浮動 2. Div為塊狀延伸結構 3.CSS繼承觀念 4. Position與Z-index圖層觀念 5. CSS縮寫觀念 6. Padding、margin一致性推擠
- 41.
- 43. 分析網頁元素 1. 評估重工作業流程 2. UI元素整理(表格、選單、按鈕) 3.jQuery熱門交互動畫
- 44.
- 45. 1. HTML、CSS、JS 2. 命名原則(img、class) 3.計算圖片寬高 尋找每次開發都會重複撰寫的相同內容
- 46.
- 47. 1. 表單按鈕 2. 多階層式選單 3.麵包屑、網站導覽 4. 可參考熱門前端框架(Bootstrap) 整理出常用的UI元素
- 50.
- 51. 1. 圖片輪播動畫 2. TAB效果 3.彈跳視窗 整理出常用的動畫效果
- 54.
- 55.
- 56.
- 57.
- 58.
- 59. .Box h1{..} .Box ul{..} .Box li {..} .Box li a {..} .Box li a i {..} .Box li a em {..} .Box span {..} .Box .box_inside {..} 寫CSS時狂複製貼上
- 60. CSS3瀏覽器前綴詞多到懶得打 -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius:8px; -webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px; box-shadow: #666 0px 2px 3px; background: #EEFF99; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33)); background: -webkit-linear-gradient(#EEFF99, #66EE33); background: -moz-linear-gradient(#EEFF99, #66EE33); background: -ms-linear-gradient(#EEFF99, #66EE33); background: -o-linear-gradient(#EEFF99, #66EE33); background: linear-gradient(#EEFF99, #66EE33);
- 61.
- 62.
- 63. 1. 寫CSS時狂複製貼上 2. CSS3瀏覽器前綴詞多到懶得打 3.動輒千萬行CSS，滾到想殺人 4. 每次都要計算圖片的高寬 遭遇瓶頸
- 65.
- 66.
- 67.
- 68. 1. 圓角：border-radius 2. 陰影：box-shadow 3. 背景漸層： linear-gradient 向下支援IE6
- 69.
- 70.
- 71.
- 72.
- 73. 議程詢問 1. 標準網頁設計(DIV+CSS) 2. Sublime-text-2 3.Sass+compass 4. Jquery 動畫教學
- 74.