Div+CSS網(wǎng)頁樣式與布局從入門到精通

第1章 怎樣開發(fā)設(shè)計網(wǎng)站
1.1 網(wǎng)站開發(fā)設(shè)計需要什么
1.1.1 需要HTML文件
1.1.2 需要DIV來布局
1.1.3 需要CSS來定義樣式
1.1.4 需要JavaScript
1.2 通過Dreamweaver開發(fā)DIV+CSS
1.2.1 通過Dreamweaver在HTML頁面里插入DIV
1.2.2 Dreamweaver的CSS代碼支持
1.3 一個簡單的網(wǎng)頁需要包含什么
1.3.1 head部分
1.3.2 body部分
1.3.3 編寫注釋
第2章 HTML入門基礎(chǔ)
2.1 HTML標(biāo)簽
2.1.1 段落標(biāo)簽
2.1.2 文本標(biāo)簽
2.1.3 超鏈接標(biāo)簽
2.1.4 圖像標(biāo)簽
2.1.5 表格標(biāo)簽
2.2 HTML 5簡介
2.2.1 HTML5基礎(chǔ)
2.2.2 向后兼容
2.2.3 更加簡化
2.2.4 HTML 5語法中的3個要點
2.3 新增的主體結(jié)構(gòu)元素
2.3.1 實例應(yīng)用——article元素
2.3.2 實例應(yīng)用——section元素
2.3.3 實例應(yīng)用——nav元素
2.3.4 aside元素
2.4 新增的非主體結(jié)構(gòu)元素
2.4.1 實例應(yīng)用——header元素
2.4.2 實例應(yīng)用——hgroup元素
2.4.3 實例應(yīng)用——footer元素
2.4.4 實例應(yīng)用——address元素
第3章 CSS樣式設(shè)計基礎(chǔ)
3.1 初識CSS
3.1.1 CSS基本語法
3.1.2添加CSS的方法
3.1.3 設(shè)計第一個實例
3.2 CSS選擇器
3.2.1 CSS選擇器概述
3.2.2 標(biāo)簽選擇器
3.2.3 類選擇器
3.2.4 ID選擇器
3.2.5 偽類選擇器和偽元素
3.2.6 群組選擇器
3.2.7 相鄰選擇器
3.2.8 通用選擇器
3.3 CSS屬性和屬性值
3.3.1 CSS屬性
3.3.2 CSS單位
3.3.3 設(shè)置顏色
第4章 使用CSS設(shè)置文本和段落樣式
4.1字體屬性
4.1.1 字體font-family
4.1.2 字號font-size
4.1.3 字體風(fēng)格font-style
4.1.4 字體加粗font-weight
4.1.5 字體變形font-variant
4.2 段落屬性
4.2.1 單詞間隔word-spacing
4.2.2 字符間隔letter-spacing
4.2.3 文字修飾text-decoration
4.2.4 垂直對齊方式vertical-align
4.2.5 文本轉(zhuǎn)換text-transform
4.2.6 水平對齊方式text-align
4.2.7 文本縮進text-indent
4.2.8 文本行高line-height
4.2.9 處理空白white-space
4.2.10 文本反排unicode-bidi、direction
4.3 實例應(yīng)用
4.3.1 控制文本的行高和間隔
4.3.2 實現(xiàn)文本垂直居中
第5章 使用CSS設(shè)置圖片和背景樣式
5.1 圖片樣式設(shè)置
5.1.1 定義圖片邊框
5.1.2 文字環(huán)繞圖片
5.2 背景樣式設(shè)置
5.2.1 設(shè)置頁面背景顏色
5.2.2 定義背景圖片
5.2.3 背景圖片的重復(fù)
5.2.4背景關(guān)聯(lián)
5.2.5 定義背景圖片的位置
5.3 實例應(yīng)用
5.3.1 鼠標(biāo)經(jīng)過圖片顯示文字
5.3.2 鼠標(biāo)移上改變圖片透明度
5.3.3 將正方形圖片顯示為圓形圖片
5.3.4 多圖排列展示放大特效
第6章 使用CSS控制列表樣式
6.1 有序列表
6.1.1 有序列表ol
6.1.2 有序列表的序號類型type
6.1.3 有序列表的起始數(shù)值start
6.2 無序列表
6.2.1 無序列表標(biāo)簽
6.2.2 無序列表的類型type
6.2.3 目錄列表標(biāo)簽
6.2.4 定義列表標(biāo)簽
6.2.5 菜單列表標(biāo)簽
6.3 實例應(yīng)用
6.3.1 設(shè)計背景變換的導(dǎo)航欄目
6.3.2 設(shè)計橫向?qū)Ш讲藛?br /> 6.3.3　豎排導(dǎo)航
6.3.4 設(shè)計網(wǎng)頁下拉菜單
6.3.5商品列表分類可右側(cè)展開詳細(xì)分類
6.3.6 CSS網(wǎng)頁導(dǎo)航條
第7章 使用CSS設(shè)計表單樣式
7.1 表單form
7.1.1 程序提交action
7.1.2 表單名稱name
7.1.3 傳送方法method
7.1.4 編碼方式enctype
7.1.5 目標(biāo)顯示方式target
7.2 插入表單對象
7.2.1 文字字段text
7.2.2 密碼域password
7.2.3 單選按鈕radio
7.2.4 復(fù)選框checkbox
7.2.5 普通按鈕button
7.2.6 提交按鈕submit
7.2.7 重置按鈕reset
7.2.8 圖像域image
7.2.9 隱藏域hidden
7.2.10 文件域file
7.3 菜單和列表
7.3.1 下拉菜單
7.3.2 列表項
7.4 表單樣式實例
7.4.1 定義背景樣式
7.4.2 設(shè)置輸入文本的樣式
7.4.3 下劃橫線代替文本框特效
7.4.4 隨鼠標(biāo)點擊換色的輸入框
7.4.5文本框中只能輸入數(shù)字
第8章使用CSS設(shè)計表格樣式
8.1 創(chuàng)建表格
8.1.1 表格的基本構(gòu)成table、tr、td
8.1.2 設(shè)置表格的標(biāo)題caption
8.2 設(shè)置表格基本屬性
8.2.1 設(shè)置表格寬度width
8.2.2 設(shè)置表格高度height
8.2.3 設(shè)置表格對齊方式align
8.3 設(shè)置表格的屬性
8.3.1表格的邊框?qū)挾萣order
8.3.2 表格邊框顏色bordercolor
8.3.3 設(shè)置表格陰影
8.3.4 設(shè)置表格的漸變背景
8.4實例應(yīng)用
8.4.1 變換背景色的表格
8.4.2 表格隔行換色特效
8.4.3 dl dt dd實現(xiàn)表格布局
8.4.4 鼠標(biāo)經(jīng)過時改變表格行的顏色
8.4.5 CSS用虛線美化表格的邊框
第9章 使用CSS定義鏈接樣式
9.1 鏈接樣式設(shè)置基礎(chǔ)
9.1.1 光標(biāo)屬性cursor
9.1.2 定義下劃線樣式text-decoration
9.1.3 未訪問過的鏈接a:link
9.1.4 鼠標(biāo)懸停時狀態(tài)a:hover
9.1.5 已訪問超鏈接樣式a:visited
9.1.6 超鏈接的激活樣式a:active
9.2 實例應(yīng)用
9.2.1 不同的鼠標(biāo)顯示樣式
9.2.2向鏈接添加不同的樣式
9.2.3 按鈕式超鏈接
9.2.4翻轉(zhuǎn)式超鏈接
9.2.5 設(shè)計導(dǎo)航菜單
第10章 CSS中的濾鏡
10.1　濾鏡概述
10.2 動感模糊
10.3 對顏色進行透明處理
10.4 設(shè)置陰影
10.5 對象的翻轉(zhuǎn)
10.6 發(fā)光效果
10.7 X光片效果
10.8 波形濾鏡
10.9 遮罩效果
第11章 DIV+CSS布局入門
11.1認(rèn)識盒模型
11.2 外邊距
11.2.1 上外邊距margin-top
11.2.2 右外邊距margin-right
11.2.3 下外邊距margin-bottom
11.2.4 左外邊距margin-left
11.3 內(nèi)邊距
11.3.1 左內(nèi)邊距padding-top
11.3.2 右內(nèi)邊距padding-right
11.3.3 下內(nèi)邊距padding-bottom
11.3.4 左內(nèi)邊距padding-left
11.4 邊框
11.4.1 邊框樣式border-style
11.4.2 邊框?qū)挾萣order-width
11.4.3 邊框顏色border-color
11.4.4 邊框?qū)傩詁order
11.5 CSS布局理念
11.5.1　將頁面用Div分塊
11.5.2　設(shè)計各塊的位置
11.5.3　用CSS定位
第12章 用CSS定位控制網(wǎng)頁布局
12.1 position定位
12.1.1絕對定位absolute
12.1.2固定定位fixed
12.1.3相對定位relative
12.2 浮動定位
12.2.1 float屬性
12.2.2 浮動布局的新問題
12.2.3 清除浮動clear
12.3 定位層疊
12.3.1 層疊順序
12.3.2簡單嵌套元素中的層疊定位
12.3.3 包含子元素的復(fù)雜層疊定位
12.4 常見布局類型
12.4.1一列固定寬度
12.4.2 一列自適應(yīng)
12.4.3 兩列固定寬度
12.4.4兩列寬度自適應(yīng)
12.4.5兩列右列寬度自適應(yīng)
12.4.6 三列浮動中間寬度自適應(yīng)
12.5 實例應(yīng)用
12.5.1帶有邊框和邊界的圖像浮動于文本右側(cè)
12.5.2創(chuàng)建水平菜單
第13章 移動網(wǎng)頁設(shè)計基礎(chǔ)CSS3
13.1 邊框
13.1.1 圓角邊框 border-radius
13.1.2 邊框圖片border-image
13.1.3 邊框陰影box-shadow
13.2背景
13.2.1