CSS 課程推薦 - 網頁 UI 切版實作課程
CSS 語法 - div 網頁設計切版實作課程

CSS div 網頁設計課程大綱

【教學主題一】CSS語法結構&基本指令

• 內部CSS & 外部CSS
• 標籤選取器
• 擬態選取器
• 文字編排樣式
• 邊框樣式
• CSS 的繼承屬性
• 適量使用<div> 的觀念

• W3C 標準的 HTML
• ID選取器 & CLASS選取器
• 後代選取器
• 背景樣式的進階設定
• 超連結 CSS 樣式的進階設定
• 用 CSS 設計網頁 UI 選單
• <div> 網頁切版規劃分析

【教學主題二】圖形化區塊的應用

• 行內元素 & 區塊元素
• display:block; 應用技巧
• 如何正確適當使用 HTML 標籤語意
• HTML SEO 搜尋引擎排名優化、網頁優化
• position 座標定位技巧
• 各種 CSS 滑鼠變換選單的效果
• <ul> <li> 條列表樣式進階應用

• CSS & HTML 最佳初始化設定
• 影像取代的技巧
• margin & padding
• float 浮動定位排版技巧
• 各式 CSS 按鈕選單 UI 的設計
• 伸縮式 CSS 按鈕選單 UI 的設計
• 如何簡化 CSS 語法

【教學主題三】CSS定位&排版

• 如何規劃網頁版型 <div> 區塊
• CSS SEO 搜尋引擎優化網頁排名
• <div> & <span> 整合應用
• float & padding 排版活用技巧
• <div>網頁編排入門
• <div>兩欄式、三欄式版面定位技巧

• CSS 排版的網頁優化
• position 座標相對定位 & 絕對定位
• 如何活用 clear 指令
• <div>活頁式版面定位技巧
• margin 和 padding 留白定位

【教學主題四】CSS UI 排版實例應用

• 各種 CSS 選取器實做應用
• 橫向伸縮式~圖形化<div>區塊
• 伸縮式~兩欄式、三欄式版面設計
• 條列表樣式進階排版應用
• float 排版相關問題

• 圖形化<div>區塊
• 垂直伸縮式~圖形化<div>區塊
• 固定式~兩欄式、三欄式<div>版型設計
• clear fix 破解技巧
• display:inline-block 應用技巧

【教學主題五】 CSS 網頁設計其他技巧

• IE 相容性設計
• CSS 權重計算
• 頁首頁尾固定式<div>版面設計
• CSS 語法優化與最佳化
• 常用的 CSS Hack 破解語法

• 如何精準調整文字的位置
• 定位選單的效果
• CSS Reset
• CSS Sprite
• CSS3 新語法應用