1. 程式人生 > >【BS學習】精通CSS.DIV網頁樣式與佈局總結

【BS學習】精通CSS.DIV網頁樣式與佈局總結

第一課初探CSS

1.1 CSS的概念

CSS:層疊樣式表,用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。

標記的概念

HTML的缺陷

CSS的引入

1.2使用CSS控制頁面

1.2.1行內樣式

1.2.2內嵌式

1.2.3連結式

1.2.4匯入樣式

第二課 CSS基本語法

2.1 CSS選擇器

2.1.1標記選擇器

2.1.2 類別選擇器

2.1.3 ID選擇器

2.2選擇器宣告

2.2.1 集體宣告

2.2.2 選擇器的巢狀

2.3 CSS的繼承

2.3.1 父子關係

2.3.2 CSS繼承的運用

第三課 CSS文字效果

3.1 CSS文字樣式

3.1.1 文字

3.1.2 文字大小

3.1.3 文字顏色

3.1.4 文字粗細

3.1.5 斜體

3.1.6 下劃線、頂劃線、刪除線

3.1.7 英文字母大小寫

3.2文字例項:模擬Google公司logo

3.3 CSS段落文字

3.3.1 段落水平對齊方式

3.3.2 段落垂直對齊方式

3.3.3 行間距、字間距

3.3.4 首字放大

3.4 段落例項:百度搜索

第四課 CSS圖片

4.1 圖片樣式

4.1.1 圖片邊框

4.1.2 圖片縮放

4.2  圖片對齊

4.2.1 橫向對齊

4.2.2 縱向對齊

4.3 圖文混排

4.3.1 文字環繞

4.3.2 設定圖片與文字的間距

4.4圖文例項:八仙過海

第五課 CSS頁面背景

5.1 背景顏色

5.1.1 頁面背景色

5.1.2 用背景色給頁面分塊

5.2 背景圖片

5.2.1 頁面的背景圖

5.2.2 背景圖片的重複

5.2.3 背景圖片的位置

5.2.4 固定背景圖片

5.3 古詞《念奴嬌*赤壁懷古》

第六課 CSS設定表格和表單樣式

6.1控制表格

6.1.1 表格中的標記

6.1.2 表格的顏色

6.1.3 表格的邊框

6.2表格例項一:隔行變色

6.3 CSS與表單

6.3.1 表單中的元素

6.3.2 像文字一樣的按鈕

6.4 直接屬入的Excel表格

第七課頁面和瀏覽器元素

7.1豐富的超連結特效

7.1.1 動態超連結

7.1.2 按鈕式超連結

7.1.3 浮雕式超連結

7.2 滑鼠特效

7.2.1 CSS控制滑鼠箭頭

7.3 頁面滾動條

第八課 CSS製作使用選單

8.1 專案列表

8.1.1

列表的符號

8.1.2 圖片符號

8.2 無需表格的選單

8.3 選單的橫豎轉換

8.4 流行的Tab選單

第九課 CSS濾鏡的使用

9.1 濾鏡概述

9.2 ~9.7濾鏡例項

9.2 Aloha通道

9.3 Blur模糊

9.4 透明色

9.5 Flip翻轉

9.6 遮罩

9.7 波浪

第十課理解CSSDIV定位

10.1 divspan標記

10.1.1 概述

10.1.2 divspan的區別

10.2 盒子模型

10.2.1 盒子模型的概念

10.2.2 border

10.2.3 padding

10.2.4 margin

10.3 元素的定位

10.3.1 float定位

10.3.2 position

10.4 給圖片簽名

第十一課 CSS排版觀念

11.1 CSS排版觀念

11.1.1 將頁面用div分塊

11.1.2 設計各塊的位置

11.1.3 CSS定位

11.2 固定寬度且居中的版式

11.2.1 方法一

11.2.2 方法二

11.3 排版例項:電子相簿

第十二課網頁變幻

12.1 框架搭建

12.2 例項一:藍色經典

12.3 例項二:清明上河圖

12.4 例項三:交河故城

12.5 自動選擇CSS樣式

第十三課 CSSJavaScript

13.1 JavaScript概述

13.1.1 JavaScript簡介

13.1.2 資料型別和變數

string字串、數值、BooleanundefinednullObject

13.1.3 表示式及運算子

13.2 JavaScript語法基礎

13.3 例項一:輸入時高亮的Excel表格

13.4 例項二:由遠到近的文字

13.5 例項三:圖片淡入淡出

第十四課 CSSXML綜合運用

14.1 XML基礎

14.1.1 XML基本語法

14.2 XML連結CSS檔案

14.3 XML文字陰影效果

14.4 XML古詩字畫

第十五課 CSSAJAX綜合運用

15.1 Ajax概述

15.1.1 什麼是Ajax

Google map

Gmail

15.1.2 Ajax關鍵元素

JavaScriptcssDOMXMLHttpRequest

15.1.3 CSS重要地位

Google moon

原始碼展示

15.2 Ajax入門

15.3 能夠自由拖動佈局區域的網頁

第十六課我的部落格

16.1 分析架構

16.1.1 設計分析

16.1.2 排版構架

16.2 模組拆分

16.2.1 導航與banner

16.2.2 左側列表

16.2.3 內部內容

16.2.4 footer腳註

16.3 整體調整

第十七課小型工作室

17.1 分析構架

17.1.1 設計分析

17.1.2 首頁排版

17.1.3 內容頁構架

17.2  模組劃分

17.2.1 搭建首頁

17.2.2 首頁圖片

17.2.3 內容頁面

17.2.4 footer腳註

17.3 整體調整

第十八課公司網站

18.1 分析構架

18.1.1 設計分析

18.1.2 排版構架

18.2 模組拆分

18.2.1 logo與頂端連結

18.2.2 左側導航與搜尋

18.2.3 主體內容

18.2.4 內容banner

18.2.5 新聞快遞

18.2.6 公司諮詢

18.2.7 英文刊物

18.3 整體調整

第十九課網上購物

19.1 分析構架

19.1.1 設計分析

19.1.2 排版構架

19.2 模組分析

19.2.1 banner圖片

19.2.2 導航選單

19.2.3 鮮花導購

19.2.4 主體內容

19.3 整體調整

第二十課旅遊觀光

20.1 分析構架

20.1.1 設計分析

20.1.2 排版構架

20.2 模組拆分

20.2.1 banner圖片與導航選單

20.2.2 左側分欄

20.2.3 中部主體

20.2.4 右側分欄

20.2.5 footer腳註

20.3 整體調整