精通DIV CSS網(wǎng)頁樣式與布局目錄

時(shí)間：2023-02-13 13:18:01 | 來源：營銷百科

時(shí)間：2023-02-13 13:18:01 來源：營銷百科

精通DIV CSS網(wǎng)頁樣式與布局目錄：《精通div css網(wǎng)頁樣式與布局》

n第1章 開發(fā)網(wǎng)站，我們需要做些什么 1

n1.1 網(wǎng)站需要什么 1

n1.1.1 需要html文件 1

n1.1.2 需要div來'圈地' 2

n1.1.3 需要css來定義樣式 2

n1.1.4 需要javascript 3

n1.1.5 需要空間和域名 4

n1.2 通過dreamweaver開發(fā)div css程序 4

n1.2.1 安裝dreamweaver 5

n1.2.2 使用dreamweaver 5

n1.2.3 dreamweaver的三種工作方式 6

n1.2.4 通過dreamweaver在html頁面中開發(fā)div 7

n1.2.5 通過dreamweaver開發(fā)css程序 9

n1.2.6 在div里引入css效果 10

n1.3 一個(gè)簡單的網(wǎng)頁需要包含什么 11

n1.3.1 head部分 11

n1.3.2 body部分 11

n1.3.3 編寫注釋 12

n1.4 開發(fā)一個(gè)網(wǎng)站的總體流程 13

n.1.4.1 美工先用photoshop給出效果 13

n1.4.2 通過切圖，得到素材 14

n1.4.3 搭建div 14

n1.4.4 搭建css和js效果 15

n1.4.5 測試網(wǎng)頁 15

n1.5 網(wǎng)站的建設(shè)標(biāo)準(zhǔn)和布局方式 16

n1.5.1 網(wǎng)站的建設(shè)標(biāo)準(zhǔn) 16

n1.5.2 頁面布局 17

n1.6 上機(jī)題 21

n第2章 html和xhtml 22

n2.1 html基礎(chǔ) 22

n2.1.1 html概述 22

n2.1.2 html基礎(chǔ)結(jié)構(gòu) 23

n2.2 html標(biāo)簽 24

n2.2.1 基本標(biāo)簽 24

n2.2.2 格式標(biāo)簽 26

n2.2.3 文本標(biāo)簽 28

n2.2.4 超鏈標(biāo)簽 29

n2.2.5 圖像標(biāo)簽 30

n2.2.6 表格標(biāo)簽 31

n2.2.7 分區(qū)標(biāo)簽 33

n2.3 xhtml介紹 35

n2.3.1 什么是xhtml 35

n2.3.2 html轉(zhuǎn)換成xhtml的方法 36

n2.4 實(shí)訓(xùn)——綜合各種標(biāo)簽的網(wǎng)頁 39

n2.5 上機(jī)題 42

n第3章 css基礎(chǔ)知識介紹 44

n3.1 css的概念 44

n3.2 css的基本語法 45

n3.2.1 css選擇器 45

n3.2.2 選擇器聲明 48

n3.2.3 css的繼承 50

n3.3 css的四種引入方式 51

n3.4 css的常見問題 52

n3.4.1 讓css適用所有瀏覽器 53

n3.4.2 css注釋與字符編碼控制 54

n3.5 css里的單位和值 55

n3.5.1 顏色 55

n3.5.2 長度單位 57

n3.5.3 通過url引入外部資源 59

n3.6 實(shí)訓(xùn)——css基本語法的演練 60

n3.7 上機(jī)題 62

n第4章 通過css控制字體樣式 66

n4.1 通過css控制文本樣式 66

n4.1.1 定義文字顏色 66

n4.1.2 通過css設(shè)置字體 67

n4.1.3 字體粗細(xì)與斜體 69

n4.1.4 定義字體大小和行高 71

n4.1.5 下劃線、頂劃線、刪除線 72

n4.2 用css控制字間距和對齊方式 74

n4.2.1 設(shè)置字間距 74

n4.2.2 控制對齊方式 75

n4.3 通過css定義樣式表 76

n4.3.1 通過css定義無序列表的效果 77

n4.3.2 通過css定義排序列表的樣式 77

n4.4 實(shí)訓(xùn)——css字體樣式綜合演練 79

n4.4 上機(jī)題 82

n第5章 通過css定義鏈接樣式 86

n5.1 針對鏈接的css基本概念 86

n5.1.1 css偽類別 86

n5.1.2 用偽類定義動態(tài)超鏈接 87

n5.2 定義豐富的超鏈特效 89

n5.2.1 給鏈接添加提示文字 89

n5.2.2 按鈕式超鏈接 90

n5.2.3 為超鏈添加背景圖效果 91

n5.3 用css定義針對超鏈的鼠標(biāo)特效 93

n5.3.1 用css設(shè)計(jì)鼠標(biāo)的箭頭 93

n5.3.2 定義鼠標(biāo)的變幻效果 95

n5.4 實(shí)訓(xùn)——用css美化超鏈接 96

n5.5 上機(jī)題 101

n第6章 通過css定義圖片樣式 104

n6.1 css定義圖片樣式 104

n6.1.1 定義圖片邊框 104

n6.1.2 定義圖片大小 106

n6.1.3 通過css保證圖片不變形 107

n6.1.4 定義圖片的對齊方式 109

n6.2 通過css設(shè)置文字和圖片交互的效果 112

n6.2.1 設(shè)置文字環(huán)繞的效果 112

n6.2.2 浮動廣告 114

n6.3 實(shí)訓(xùn)——用css設(shè)計(jì)圖文并茂的效果 115

n6.4 通過css設(shè)置背景顏色 118

n6.4.1 設(shè)置頁面背景色 118

n6.4.2 通過背景色給頁面分塊 119

n6.5 通過css處理背景圖像樣式 121

n6.5.1 設(shè)置頁面背景圖樣式 121

n6.5.2 設(shè)置背景圖重復(fù)的效果 121

n6.5.3 定義背景圖片的位置 122

n6.5.4 固定背景圖片 123

n6.6 實(shí)訓(xùn)——實(shí)現(xiàn)美食資訊網(wǎng)的菜單部分 124

n6.7 上機(jī)題 126

n第7章 通過css設(shè)置表格的樣式 131

n7.1 表格基礎(chǔ) 131

n7.2 用css設(shè)置表格的樣式 132

n7.2.1 設(shè)置表格的顏色 132

n7.2.2 設(shè)置表格的邊框樣式 133

n7.2.3 設(shè)置隔行變色的單元格樣式 135

n7.2.4 設(shè)置大小和對齊方式 136

n7.3 實(shí)訓(xùn)——用css搭建一個(gè)綜合效果的表格 138

n7.4 上機(jī)題 142

n第8章 通過css定義表單樣式 146

n8.1 認(rèn)識表單元素 146

n8.1.1 輸入域標(biāo)簽[input] 146

n8.1.2 文本域標(biāo)簽[textarea] 147

n8.1.3 選擇域標(biāo)簽[select]和[option] 148

n8.1.4 表單各元素在網(wǎng)頁中的用法 148

n8.2 通過css設(shè)置各元素的外觀 149

n8.2.1 用css修飾表單元素的背景色 149

n8.2.2 用css改變表單元素的邊框樣式 152

n8.2.3 用css修改表單文字的樣式 153

n8.3 實(shí)訓(xùn)——css定義表單樣式練習(xí) 156

n8.4 上機(jī)題 161

n第9章 css濾鏡的應(yīng)用 164

n9.1 濾鏡概述 164

n9.2 通道（alpha） 165

n9.3 模糊（blur） 166

n9.4 運(yùn)動模糊（motionblur） 167

n9.5 透明色（chroma） 169

n9.6 翻轉(zhuǎn)變換（flip） 169

n9.7 光暈（glow） 170

n9.8 灰度（gray） 172

n9.9 反色（invert） 173

n9.10 遮罩（mask） 173

n9.11 陰影（shadow） 175

n9.12 x射線（x-ray） 176

n9.13 浮雕紋理（emboss和engrave） 177

n9.14 波浪（wave） 179

n9.15 上機(jī)題 180

n第10章 css定位與div布局 184

n10.1 盒子模型 184

n10.1.1 盒子模型的概念 184

n10.1.2 content 185

n10.1.3 border 185

n10.1.4 padding 188

n10.1.5 margin 190

n10.2 元素的定位 193

n10.2.1 定位方式 193

n10.2.2 css的定位原理 194

n10.2.3 利用float定位 199

n10.2.4 利用css堆元素定位 201

n10.3 塊元素和行內(nèi)元素 203

n10.3.1 塊元素 203

n10.3.2 行內(nèi)元素 204

n10.4 實(shí)訓(xùn)——用css定位頁面的布局 205

n10.5 上機(jī)題 210

n第11章 用javascript搭建動態(tài)效果 214

n11.1 javascript概述 214

n11.1.1 javascript概述 214

n11.1.2 javascript嵌入html文檔 215

n11.2 用javascript設(shè)置圖片的效果 216

n11.2.1 實(shí)現(xiàn)相冊效果 216

n11.2.2 實(shí)現(xiàn)圖片滑動切換效果 220

n11.3 針對菜單的效果 223

n11.3.1 用javascript實(shí)現(xiàn)頁簽效果 223

n11.3.2 用javascript實(shí)現(xiàn)下拉式菜單 225

n11.3.3 用javascript實(shí)現(xiàn)滑輪式菜單效果 228

n11.4 針對文字的效果 229

n11.4.1 文字的打字效果 229

n11.4.2 帶提示文字的javascript特效 231

n11.5 上機(jī)題 234

n第12章 div css布局綜述 236

n12.1 布局方式 236

n12.1.1 用div將頁面分塊 236

n12.1.2 設(shè)計(jì)各塊的位置 237

n12.1.3 用css將分布的div定位 237

n12.2 css排版樣式 239

n12.2.1 設(shè)計(jì)上中下版式的樣式 239

n12.2.2 設(shè)計(jì)固定寬度且居中的樣式 241

n12.2.3 設(shè)計(jì)左中右版式的樣式 244

n12.2.4 設(shè)計(jì)塊的背景色及背景圖片 247

n12.2.5 內(nèi)容分類顯示版式 248

n12.3 實(shí)訓(xùn)——構(gòu)建一個(gè)上下結(jié)構(gòu)的頁面 251

n12.4 實(shí)訓(xùn)——構(gòu)建一個(gè)左中右結(jié)構(gòu)的頁面 255

n12.5 上機(jī)題 258

n第13章 css、xml和ajax綜合使用方式 266

n13.1 xml基礎(chǔ) 266

n13.1.1 xml的特點(diǎn) 266

n13.1.2 xml的結(jié)構(gòu)和基本語法 267

n13.2 xml與css的綜合應(yīng)用 269

n13.2.1 在xml里鏈接css文件 270

n13.2.2 通過xml和css，搭建具有圖文并茂效果的案例 271

n13.3 ajax與css的綜合應(yīng)用 273

n13.3.1 ajax概述 273

n13.3.2 ajax與css的綜合應(yīng)用 274

n13.4 實(shí)訓(xùn)——xml與css結(jié)合的練習(xí) 279

n13.5 實(shí)訓(xùn)——ajax與css結(jié)合的練習(xí) 283

n13.6 上機(jī)題 285

n第14章 解決css開發(fā)中的常見問題 288

n14.1 解決瀏覽器不兼容的問題 288

n14.1.1 解決字體大小不兼容的問題 288

n14.1.2 解決div里的float懸浮問題 290

n14.1.3 容器高度的限定問題 292

n14.2 解決html和css的中文編碼問題 295

n14.2.1 css與html頁面的默認(rèn)編碼問題 295

n14.2.2 css中文注釋'標(biāo)'的問題 297

n第15章 娛樂門戶網(wǎng)站 299

n15.1 網(wǎng)站頁面效果分析 299

n15.1.1 首頁效果分析 299

n15.1.2 '店鋪'頁面的效果分析 301

n15.1.3 網(wǎng)站文件綜述 302

n15.2 規(guī)劃首頁的布局 302

n15.2.1 搭建首頁頁頭部分的div 302

n15.2.2 搭建'第一列'部分的div 304

n15.2.3 搭建'標(biāo)簽導(dǎo)航'部分的div 305

n15.2.4 搭建'新進(jìn)店鋪'部分的div 306

n15.2.5 搭建'最新資訊'部分的div 307

n15.2.6 搭建'第三列'部分的div 309

n15.2.7 搭建頁腳部分的div 310

n15.2.8 首頁css效果分析 310

n15.3 店鋪頁面 311

n15.3.1 商鋪資料部分的div 311

n15.3.2 商鋪推薦部分的div 313

n第16章 旅游酒店網(wǎng)站 316

n16.1 網(wǎng)站頁面效果分析 316

n16.1.1 首頁效果分析 316

n16.1.2 '酒店推薦'頁面的效果分析 317

n16.1.3 網(wǎng)站文件綜述 318

n16.2 規(guī)劃首頁的布局 318

n16.2.1 搭建首頁頁頭部分的div 319

n16.2.2 搭建'推薦景點(diǎn)'部分的div 319

n16.2.3 搭建'最新新聞'部分的div 320

n16.2.4 搭建'游玩指南'部分的div 321

n16.2.5 搭建'在線訂票'部分的div 322

n16.2.6 搭建'熱門旅游專題'部分的div 324

n16.2.7 搭建頁腳部分的div 324

n16.2.8 首頁css效果分析 326

n16.3 酒店推薦頁面 326

n16.3.1 酒店推薦列表部分的div 326

n16.3.2 推薦酒店列表部分的div 328

n第17章 設(shè)計(jì)公司網(wǎng)站 331

n17.1 網(wǎng)站頁面效果分析 331

n17.1.1 首頁效果分析 331

n17.1.2 '設(shè)計(jì)理念'頁面的效果分析 333

n17.1.3 網(wǎng)站文件綜述 333

n17.2 規(guī)劃首頁的布局 334

n17.2.1 搭建首頁頁頭部分的div 334

n17.2.2 搭建'網(wǎng)站廣告'部分的div 335

n17.2.3 搭建'公司介紹'部分的div 336

n17.2.4 搭建'設(shè)計(jì)服務(wù)'部分的div 336

n17.2.5 搭建'預(yù)約登記'部分的div 338

n17.2.6 搭建頁腳部分的div 340

n17.2.7 首頁css效果分析 340

n17.3 設(shè)計(jì)理念頁面 341

n17.3.1 設(shè)計(jì)理念介紹的div 341

n17.3.2 業(yè)務(wù)分類部分的div 343

n第18章 新聞網(wǎng)站 345

n18.1 網(wǎng)站頁面效果分析 345

n18.1.1 首頁效果分析 345

n18.1.2 '新聞內(nèi)容'頁面的效果分析 346

n18.1.3 網(wǎng)站文件綜述 347

n18.2 規(guī)劃首頁的布局 348

n18.2.1 搭建首頁頁頭部分的div 348

n18.2.2 搭建'深度新聞'部分的div 349

n18.2.3 搭建'會議活動'部分的div 350

n18.2.4 搭建'大圖新聞'部分的div 351

n18.2.5 搭建'新聞報(bào)道'部分的div 351

n18.2.6 搭建'名人博客'部分的div 352

n18.2.7 搭建頁腳部分的div 353

n18.2.8 首頁css效果分析 354

n18.3 新聞內(nèi)容頁面 355

n18.3.1 分類列表部分的div 355

n18.3.2 新聞文章部分的div 356