DIV CSS網(wǎng)站布局案例精粹（第2版）目錄

時間：2023-02-24 02:30:01 | 來源：營銷百科

時間：2023-02-24 02:30:01 來源：營銷百科

DIV CSS網(wǎng)站布局案例精粹（第2版）目錄：目??錄

第1章?社區(qū)交友網(wǎng)站 1

1.1?網(wǎng)站頁面效果分析 1

1.1.1? 首頁效果分析 1

1.1.2? 博客頁面的效果分析 2

1.1.3? 網(wǎng)站文件綜述 3

1.2?規(guī)劃首頁的布局 4

1.2.1? 搭建首頁頁頭的DIV 4

1.2.2? 搭建導(dǎo)航菜單部分的DIV 5

1.2.3? 搭建首頁主體部分最左列的DIV 6

1.2.4? 搭建'你的圈子'部分的DIV 7

1.2.5? 搭建'最近博客文章'部分的DIV 8

1.2.6? 搭建頁腳部分的DIV 9

1.2.7? 首頁CSS效果分析 9

1.3?電子賀卡頁面 10

1.3.1? 導(dǎo)航列表部分的DIV 10

1.3.2? 賀卡目錄部分的DIV 11

第2章?眾星璀璨的影視網(wǎng)站 13

2.1?網(wǎng)站頁面效果分析 13

2.1.1? 首頁效果分析 13

2.1.2? 電影分類頁面的效果分析 15

2.1.3? 網(wǎng)站文件綜述 16

2.2?規(guī)劃首頁的布局 16

2.2.1? 搭建首頁頁頭的DIV 16

2.2.2? 搭建'最新電影'部分的DIV 17

2.2.3? 搭建'最新電影新聞'部分的DIV 18

2.2.4? 搭建'搜索'部分的DIV 20

2.2.5? 搭建頁腳部分的DIV 21

2.2.6? 首頁CSS效果分析 22

2.3?分類頁面 23

2.3.1? 分類頁面左邊部分的DIV 23

2.3.2? 分類頁面中間部分的DIV 24

第3章?美食資訊網(wǎng)站 27

3.1?網(wǎng)站頁面效果分析 27

3.1.1? 首頁效果分析 27

3.1.2? 美食店鋪頁面的效果分析 29

3.1.3? 網(wǎng)站文件綜述 30

3.2?規(guī)劃首頁的布局 30

3.2.1? 搭建首頁頁頭的DIV 30

3.2.2? 搭建'高級搜索'部分的DIV 31

3.2.3? 搭建'免費試吃餐廳'部分的DIV 32

3.2.4? 搭建'飆升排行榜'部分的DIV 33

3.2.5? 搭建頁腳部分的DIV 34

3.2.6? 首頁CSS效果分析 35

3.3?在首頁中實現(xiàn)動態(tài)效果 35

3.4?店鋪介紹頁面 37

3.4.1? 店鋪介紹頁面菜單標簽的DIV 37

3.4.2? 店鋪介紹頁面右邊相關(guān)介紹的DIV 38

第4章?寵物題材的主題網(wǎng)站 40

4.1?網(wǎng)站頁面效果分析 40

4.1.1? 首頁效果分析 40

4.1.2? 寵物社區(qū)頁面的效果分析 41

4.1.3? 網(wǎng)站文件綜述 42

4.2?規(guī)劃首頁的布局 43

4.2.1? 搭建首頁頁頭的DIV 43

4.2.2? 搭建'寵物新聞'部分的DIV 44

4.2.3? 搭建'分類導(dǎo)航'部分的DIV 44

4.2.4? 搭建'圖片欣賞'部分的DIV 45

4.2.5? 搭建'聯(lián)系方式'部分的DIV 46

4.2.6? 搭建'寵物故事'部分的DIV 47

4.2.7? 搭建'寵物信息'部分的DIV 47

4.2.8? 搭建頁腳部分的DIV 47

4.2.9? 首頁CSS效果分析 48

4.3?首頁特色 48

4.4?寵物社區(qū)頁面 50

第5章?溫馨怡人的電影網(wǎng)站 51

5.1?網(wǎng)站頁面效果分析 51

5.1.1? 首頁效果分析 51

5.1.2? 新片介紹頁面的效果分析 52

5.1.3? 網(wǎng)站文件綜述 53

5.2?規(guī)劃首頁的布局 54

5.2.1? 搭建首頁頁頭的DIV 54

5.2.2? 搭建首頁主體部分的DIV 54

5.2.3? 搭建頁腳部分的DIV 57

5.2.4? 首頁CSS效果分析 58

5.3?在首頁中實現(xiàn)動態(tài)效果 59

5.3.1? 變換Logo顏色的方法 60

5.3.2? 實現(xiàn)導(dǎo)航凸出的效果 60

5.4?新片介紹頁面 61

5.4.1? 電影列表的DIV 61

5.4.2? 最新影評的DIV 62

5.4.3? 電影導(dǎo)航的DIV 63

第6章?導(dǎo)游推廣為一體的海洋公園網(wǎng)站 65

6.1?網(wǎng)站頁面效果分析 65

6.1.1? 首頁效果分析 65

6.1.2? 導(dǎo)游頁面的效果分析 66

6.1.3? 網(wǎng)站文件綜述 67

6.2?規(guī)劃首頁的布局 68

6.2.1? 搭建首頁頁頭的DIV 68

6.2.2? 搭建'標題圖片'部分的DIV 69

6.2.3? 搭建'最新特別公告'部分的DIV 70

6.2.4? 搭建'海洋公園歡迎您'部分的

DIV 71

6.2.5? 搭建頁腳部分的DIV 72

6.2.6? 首頁CSS效果分析 73

6.3?導(dǎo)游頁面 74

6.3.1? 導(dǎo)游頁面右邊部分的DIV 74

6.3.2? 導(dǎo)游頁面娛樂項部分的DIV 75

第7章?主題明顯的環(huán)保網(wǎng)站 77

7.1?網(wǎng)站頁面效果分析 77

7.1.1? 首頁效果分析 77

7.1.2? 環(huán)保圖片展示頁面的效果分析 78

7.1.3? 網(wǎng)站文件綜述 79

7.2?規(guī)劃首頁的布局 79

7.2.1? 搭建首頁頁頭的DIV 79

7.2.2? 搭建導(dǎo)航和快速鏈接部分的DIV 80

7.2.3? 搭建'圖片新聞'部分的DIV 81

7.2.4? 搭建'圖片見證'部分的DIV 82

7.2.5? 搭建頁腳部分的DIV 83

7.2.6? 首頁CSS效果分析 83

7.3?在首頁中實現(xiàn)動態(tài)效果 84

7.4?環(huán)保圖片頁面 85

7.4.1? 環(huán)保導(dǎo)航部分的DIV 85

7.4.2? 導(dǎo)航菜單部分的DIV 86

7.4.3? 圖片部分的DIV 87

第8章?寓教于樂的博物館網(wǎng)站 89

8.1?網(wǎng)站頁面效果分析 89

8.1.1? 首頁效果分析 89

8.1.2? 最近活動頁面的效果分析 91

8.1.3? 網(wǎng)站文件綜述 91

8.2?規(guī)劃首頁的布局 92

8.2.1? 搭建首頁頁頭的DIV 92

8.2.2? 搭建'導(dǎo)航菜單'部分的DIV 93

8.2.3? 搭建'館內(nèi)資訊'等4部分的DIV 94

8.2.4? 搭建'館內(nèi)要聞和科教動態(tài)'部分

的DIV 95

8.2.5? 搭建頁腳部分的DIV 95

8.2.6? 首頁CSS效果分析 97

8.3?在首頁中實現(xiàn)動態(tài)效果 97

8.4?最近活動頁面 98

8.4.1? '最近活動信息'部分的DIV 98

8.4.2? 右邊部分導(dǎo)航菜單的DIV 99

第9章?體現(xiàn)個性的個人網(wǎng)站 101

9.1?網(wǎng)站頁面效果分析 101

9.1.1? 首頁效果分析 101

9.1.2? 作品導(dǎo)航頁的效果分析 102

9.1.3? 網(wǎng)站文件綜述 104

9.2?規(guī)劃首頁的布局 104

9.2.1? 搭建首頁頁頭的DIV 104

9.2.2? 搭建'搜索'部分的DIV 105

9.2.3? 搭建'作品展示'部分的DIV 106

9.2.4? 搭建頁腳部分的DIV 108

9.2.5? 首頁CSS效果分析 109

9.3?作品導(dǎo)航頁面 110

9.3.1? 左邊導(dǎo)航部分的DIV 110

9.3.2? 作品部分的DIV 111

第10章?內(nèi)容豐富的交友網(wǎng)站 113

10.1?網(wǎng)站頁面效果分析 113

10.1.1? 首頁效果分析 113

10.1.2? 活動頁面的效果分析 114

10.1.3? 網(wǎng)站文件綜述 115

10.2?規(guī)劃首頁的布局 116

10.2.1? 搭建首頁頁頭的DIV 116

10.2.2? 搭建首頁主體部分的DIV 117

10.2.3? 搭建頁腳部分的DIV 119

10.2.4? 首頁CSS效果分析 120

10.3?在首頁中實現(xiàn)動態(tài)效果 122

10.3.1? 更改字體的實現(xiàn)方式 122

10.3.2? 實現(xiàn)更換會員信息的效果 123

10.4?活動頁面 124

10.4.1? 活動頁面左邊部分的DIV 124

10.4.2? 活動頁面右邊部分的DIV 125

第11章?酒店介紹網(wǎng)站 127

11.1?網(wǎng)站頁面效果分析 127

11.1.1? 首頁效果分析 127

11.1.2? 酒店搜索頁面的效果分析 128

11.1.3? 網(wǎng)站文件綜述 129

11.2?規(guī)劃首頁的布局 130

11.2.1? 搭建首頁頁頭的DIV 130

11.2.2? 搭建'酒店廣告'部分的DIV 131

11.2.3? 搭建'酒店推廣'部分的DIV 132

11.2.4? 搭建'酒店新聞'部分的DIV 132

11.2.5? 搭建'視頻新聞'部分的DIV 133

11.2.6? 搭建'友情鏈接'部分的DIV 134

11.2.7? 搭建頁腳部分的DIV 135

11.2.8? 首頁CSS效果分析 135

11.3?在首頁中實現(xiàn)動態(tài)效果 136

11.4?酒店搜索頁面 137

11.4.1? 酒店搜索頁面左邊部分的DIV 138

11.4.2? 酒店搜索頁面右邊部分的DIV 138

第12章?教育網(wǎng)站 141

12.1?網(wǎng)站頁面效果分析 141

12.1.1? 首頁效果分析 141

12.1.2? 教育中心頁面的效果分析 142

12.1.3? 網(wǎng)站文件綜述 143

12.2?規(guī)劃首頁的布局 144

12.2.1? 搭建首頁頁頭的DIV 144

12.2.2? 搭建'行業(yè)前景'部分的DIV 145

12.2.3? 搭建'重要新聞'部分的DIV 146

12.2.4? 搭建'訂購電子新聞'等部分的

DIV 146

12.2.5? 搭建頁腳部分的DIV 147

12.2.6? 首頁CSS效果分析 147

12.3?教育中心頁面 148

12.3.1? '教學(xué)一覽'部分的DIV 148

12.3.2? '教學(xué)管理'部分的DIV 149

12.3.3? '課程安排'等部分的DIV 150

第13章?清新淡雅的休閑旅游網(wǎng)站 151

13.1?網(wǎng)站效果圖分析 151

13.1.1? 首頁效果分析 151

13.1.2? '關(guān)于個人旅游'頁面的效果分析 152

13.1.3? 網(wǎng)站文件綜述 152

13.2?規(guī)劃首頁的布局 153

13.2.1? 搭建首頁頁頭部分 153

13.2.2? 搭建'正文部分：BANNER廣告'

部分的DIV 155

13.2.3? 搭建'美景的誘惑'部分的DIV 157

13.2.4? 搭建'權(quán)威信息發(fā)布'部分的DIV 158

13.2.5? 搭建'查看相關(guān)反饋'部分的DIV 160

13.2.6? 搭建首頁頁腳部分的DIV 160

13.2.7? 首頁CSS效果分析 162

13.3?'關(guān)于個人旅游'介紹頁面 163

13.3.1? '適用線路推薦'部分的DIV 164

13.3.2? '個人旅游聯(lián)系咨詢'部分的DIV 164

13.3.3? '國內(nèi)跟團旅游'等部分的DIV 165

第14章?電腦商城網(wǎng)站 167

14.1?網(wǎng)站頁面效果分析 167

14.1.1? 首頁效果分析 167

14.1.2? 臺式機頁面的效果分析 169

14.1.3? 網(wǎng)站文件綜述 170

14.2?規(guī)劃首頁的布局 171

14.2.1? 搭建首頁頁頭的DIV 171

14.2.2? 搭建首頁主體部分的DIV 171

14.2.3? 搭建頁腳部分的DIV 174

14.2.4? 首頁CSS效果分析 175

14.3?在首頁中實現(xiàn)動態(tài)效果 176

14.3.1? 圖片展開的實現(xiàn)方式 177

14.3.2? 導(dǎo)航小模塊出現(xiàn)背景色 178

14.4?臺式機頁面 179

14.4.1? 臺式機頁面左邊部分的DIV 179

14.4.2? 臺式機頁面右邊部分的DIV 180

第15章?汽車網(wǎng)站 182

15.1?網(wǎng)站頁面效果分析 182

15.1.1? 首頁效果分析 182

15.1.2? 新車介紹頁面的效果分析 183

15.1.3? 網(wǎng)站文件綜述 184

15.2?規(guī)劃首頁的布局 184

15.2.1? 搭建首頁頁頭的DIV 184

15.2.2? 搭建'廣告'部分的DIV 186

15.2.3? 搭建'最新新聞'部分的DIV 186

15.2.4? 搭建'新車上市'部分的DIV 187

15.2.5? 搭建'最新動態(tài)'部分的DIV 188

15.2.6? 搭建頁腳部分的DIV 189

15.2.7? 首頁CSS效果分析 190

15.3?在首頁中實現(xiàn)菜單的動態(tài)效果 191

15.4?新車介紹頁面 192

15.4.1? 新車介紹頁面左邊列表的DIV 192

15.4.2? 新車介紹頁面右邊部分的DIV 194

第16章?美觀的巧克力網(wǎng)站設(shè)計 197

16.1?網(wǎng)站頁面效果分析 197

16.1.1? 首頁效果分析 197

16.1.2? 巧克力產(chǎn)品列表頁面的效果分析 198

16.1.3? 巧克力網(wǎng)站的文件綜述 199

16.2?規(guī)劃首頁的布局 199

16.2.1? 首頁切圖 199

16.2.2? 搭建首頁網(wǎng)站導(dǎo)航部分的DIV 200

16.2.3? 搭建首頁Logo部分的DIV 200

16.2.4? 搭建'巧克力文化'和'巧克力

產(chǎn)品'部分的DIV 201

16.2.5? 搭建頁腳部分的DIV 203

16.2.6? 首頁CSS效果分析 204

16.3?利用CSS樣式完善首頁效果 205

16.3.1? 首頁頁頭的CSS效果 205

16.3.2? 定義首頁頁腳的CSS效果 206

16.4?產(chǎn)品列表頁面 206

16.4.1? 產(chǎn)品列表頁面分類部分的DIV 207

16.4.2? 產(chǎn)品列表頁面產(chǎn)品部分的DIV 207

16.5?產(chǎn)品詳細頁面 208

第17章?火爆的三國殺桌面游戲網(wǎng)站 210

17.1?網(wǎng)站頁面效果分析 210

17.1.1? 首頁效果分析 210

17.1.2? 三國殺卡牌介紹頁面的效果分析 212

17.1.3? 網(wǎng)站文件綜述 212

17.2?規(guī)劃首頁的布局 213

17.2.1? 搭建首頁頁頭的DIV 213

17.2.2? 搭建標題性圖片區(qū)域部分的DIV 214

17.2.3? 搭建'玩家視頻'部分的DIV 214

17.2.4? 搭建'游戲攻略'部分的DIV 215

17.2.5? 搭建'玩家討論區(qū)'部分的DIV 216

17.2.6? 搭建'壁紙下載'等部分的DIV 218

17.2.7? 搭建頁腳部分的DIV 219

17.2.8? 首頁CSS效果分析 219

17.3?首頁討論區(qū)部分的鏈接效果 221

17.4?卡牌介紹頁面 222

17.4.1? 卡牌介紹頁面標簽卡部分的DIV 222

17.4.2? 卡牌介紹頁面左邊部分的DIV 223

17.4.3? 卡牌介紹頁面右邊部分的DIV 223

第18章?布局經(jīng)典的設(shè)計公司網(wǎng)站 224

18.1?網(wǎng)站頁面效果分析 224

18.1.1? 首頁效果分析 224

18.1.2? 設(shè)計理念頁面的效果分析 226

18.1.3? 網(wǎng)站文件綜述 226

18.2?規(guī)劃首頁的布局 227

18.2.1? 搭建首頁頁頭的DIV 227

18.2.2? 搭建'企業(yè)簡介'部分的DIV 228

18.2.3? 搭建'優(yōu)秀網(wǎng)站案例'部分的

DIV 229

18.2.4? 搭建'我們的觀點'部分的DIV 230

18.2.5? 搭建'我們的設(shè)計理念'部分的

DIV 230

18.2.6? 搭建頁腳部分的DIV 232

18.2.7? 首頁CSS效果分析 232

18.3?設(shè)計理念頁面 233

18.3.1? '我們的服務(wù)'部分的DIV 233

18.3.2? 行業(yè)案例展示部分的DIV 235

18.3.3? '標志設(shè)計'部分的DIV 236

第19章?深藍色調(diào)的社區(qū)網(wǎng)站 237

19.1?網(wǎng)站頁面效果分析 237

19.1.1? 首頁效果分析 237

19.1.2? 博客列表頁面的效果分析 238

19.1.3? 網(wǎng)站文件綜述 239

19.2?規(guī)劃首頁的布局 239

19.2.1? 搭建首頁頁頭的DIV 240

19.2.2? 搭建'網(wǎng)站導(dǎo)航'部分的DIV 241

19.2.3? 搭建'分類導(dǎo)航'部分的DIV 242

19.2.4? 搭建頁腳部分的DIV 244

19.2.5? 首頁CSS效果分析 244

19.3?博客列表頁面 245

19.3.1? 博客列表頁面左邊導(dǎo)航部分的

DIV 245

19.3.2? 博客列表頁面博客顯示部分的

DIV 247

第20章?食品專類的購物網(wǎng)站 249

20.1?網(wǎng)站頁面效果分析 249

20.1.1? 首頁效果分析 249

20.1.2? 食品分類介紹頁面的效果分析 251

20.1.3? 網(wǎng)站文件綜述 251

20.2?規(guī)劃首頁的布局 252

20.2.1? 搭建首頁頁頭的DIV 252

20.2.2? 搭建'功能模塊'部分的DIV 253

20.2.3? 搭建'商品展示'部分的DIV 254

20.2.4? 搭建'快速導(dǎo)航'部分的DIV 255

20.2.5? 搭建頁腳部分的DIV 256

20.2.6? 首頁CSS效果分析 256

20.3?首頁的動態(tài)效果 257

20.4?進口食品頁面 257

20.4.1? 進口食品頁面分類列表的DIV 258

20.4.2? 進口食品頁面產(chǎn)品列表的DIV 259

第21章?精美絕倫的視頻網(wǎng)站 262

21.1?網(wǎng)站頁面效果分析 262

21.1.1? 首頁效果分析 262

21.1.2? 個人視頻專輯頁面的效果分析 264

21.1.3? 網(wǎng)站文件綜述 265

21.2?規(guī)劃首頁的布局 265

21.2.1? 搭建首頁頁頭的DIV 265

21.2.2? 搭建視頻導(dǎo)航菜單部分的DIV 266

21.2.3? 搭建'熱門視頻'部分的DIV 267

21.2.4? 搭建'焦點討論'部分的DIV 268

21.2.5? 搭建'推薦視頻'部分的DIV 268

21.2.6? 搭建'近期新視頻'部分的DIV 269

21.2.7? 搭建頁腳部分的DIV 270

21.2.8? 首頁CSS效果分析 271

21.3?在首頁中實現(xiàn)動態(tài)效果 272

21.3.1? 實現(xiàn)父子菜單聯(lián)動的效果 272

21.3.2? 實現(xiàn)圖片切換的效果 273

21.4?個人視頻專輯頁面 274

21.4.1? 個人視頻專輯頁面上邊部分的

DIV 274

21.4.2? 個人視頻專輯頁面下邊部分的

DIV 275

第22章?色彩繽紛的圖片網(wǎng)站 277

22.1?網(wǎng)站頁面效果分析 277

22.1.1? 首頁效果分析 277

22.1.2? 最新圖片頁面的效果分析 278

22.1.3? 網(wǎng)站文件綜述 279

22.2?規(guī)劃首頁的布局 280

22.2.1? 搭建首頁第一行的DIV 280

22.2.2? 搭建頁腳部分的DIV 282

22.2.3? 首頁CSS效果分析 283

22.3?首頁CSS效果分析 284

22.3.1? 更改字體的實現(xiàn)方式 284

22.3.2? 導(dǎo)航欄動態(tài)效果 286

22.4?最新圖片頁面 287

22.4.1? 最新圖片頁面左邊下半部分的

DIV 287

22.4.2? 最新圖片頁面右邊部分的DIV 288

第23章?精美的糖果公司網(wǎng)站 290

23.1?網(wǎng)站頁面效果分析 290

23.1.1? 首頁效果分析 290

23.1.2? 視頻展示頁面的效果分析 292

23.1.3? 網(wǎng)站文件綜述 292

23.2?規(guī)劃首頁的布局 293

23.2.1? 搭建首頁頁頭的DIV 293

23.2.2? 搭建'公司介紹'部分的DIV 294

23.2.3? 搭建'視頻展示'部分的DIV 295

23.2.4? 搭建推廣模塊的DIV 295

23.2.5? 搭建招商部分的DIV 295

23.2.6? 搭建'免費試吃'廣告部分的

DIV 296

23.2.7? 搭建頁腳部分的DIV 297

23.2.8? 首頁CSS效果分析 298

23.3?視頻展示頁面效果分析 299

23.3.1? 導(dǎo)航部分的DIV 299

23.3.2? 導(dǎo)航部分下方廣告位的DIV 300

23.3.3? 視頻展示部分的DIV 301

第24章?休閑娛樂的小說閱讀網(wǎng)站 302

24.1?網(wǎng)站頁面效果分析 302

24.1.1? 首頁效果分析 302

24.1.2? 小說介紹頁面的效果分析 304

24.1.3? 網(wǎng)站文件綜述 305

24.2?規(guī)劃首頁的布局 306

24.2.1? 搭建'注冊和登錄'導(dǎo)航條的

DIV 306

24.2.2? 搭建Logo圖標和廣告圖片部分的

DIV 307

24.2.3? 搭建導(dǎo)航菜單的DIV 307

24.2.4? 搭建'最新推薦榜'部分的DIV 308

24.2.5? 搭建'本站強力推薦小說'部分

的DIV 309

24.2.6? 搭建'小說導(dǎo)航'部分的DIV 310

24.2.7? 搭建'最新公告'部分的DIV 311

24.2.8? 搭建頁腳部分的DIV 311

24.2.9? 首頁CSS效果分析 312

24.3?在首頁中實現(xiàn)動態(tài)效果 313

24.4?小說介紹頁面 314

24.4.1? 作家介紹部分的DIV 314

24.4.2? 小說目錄部分的DIV 314

24.4.3? 小說推薦部分的DIV 315

第25章?包羅萬象的新聞門戶網(wǎng)站 317

25.1?網(wǎng)站頁面效果分析 317

25.1.1? 首頁效果分析 317

25.1.2? 新聞專題導(dǎo)讀頁面的效果分析 319

25.1.3? 網(wǎng)站文件綜述 320

25.2?規(guī)劃首頁的布局 320

25.2.1? 搭建首頁頁頭的DIV 320

25.2.2? 搭建'新聞專欄'部分的DIV 321

25.2.3? 搭建'熱點新聞'部分的DIV 322

25.2.4? 搭建'主題頻道'部分的DIV 323

25.2.5? 搭建'社會新聞'部分的DIV 324

25.2.6? 搭建'關(guān)于我們'部分的DIV 326

25.2.7? 搭建頁腳部分的DIV 326

25.2.8? 首頁CSS效果分析 327

25.3?新聞專題導(dǎo)讀頁面 328

25.3.1? 搜索部分的DIV 328

25.3.2? 新聞專題部分的DIV 328

第26章?醫(yī)院網(wǎng)站 330

26.1?網(wǎng)站頁面效果分析 330

26.1.1? 首頁效果分析 330

26.1.2? 專家介紹頁面的效果分析 331

26.1.3? 網(wǎng)站文件綜述 332

26.2?規(guī)劃首頁的布局 332

26.2.1? 搭建首頁頁頭部分 333

26.2.2? 搭建'醫(yī)學(xué)導(dǎo)讀'部分的DIV 334

26.2.3? 搭建'健康你我'部分的DIV 335

26.2.4? 搭建'最新新聞'部分的DIV 335

26.2.5? 搭建'便民導(dǎo)航'部分的DIV 336

26.2.6? 搭建'資訊'部分的DIV 337

26.2.7? 搭建頁腳部分的DIV 337

26.2.8? 首頁CSS效果分析 338

26.3?專家介紹頁面 339

26.3.1? 專家介紹頁面左邊科室列表的

DIV 339

26.3.2? 專家介紹頁面中間部分的DIV 340

第27章?星光燦爛的娛樂資訊網(wǎng)站 343

27.1?網(wǎng)站頁面效果分析 343

27.1.1? 首頁效果分析 343

27.1.2? 明星介紹頁面的效果分析 345

27.1.3? 網(wǎng)站文件綜述 346

27.2?規(guī)劃首頁的布局 346

27.2.1? 搭建首頁頁頭的DIV 346

27.2.2? 搭建'網(wǎng)站導(dǎo)航菜單'部分的

DIV 347

27.2.3? 搭建'娛樂要聞'部分的DIV 348

27.2.4? 搭建'更多要聞'部分的DIV 349

27.2.5? 搭建'更多圖片新聞'部分的

DIV 349

27.2.6? 搭建頁腳部分的DIV 351

27.2.7? 首頁CSS效果分析 352

27.3?明星圖片頁面 352

27.3.1? 明星圖片頁面左邊日歷部分的

DIV 352

27.3.2? 明星圖片頁面中間部分的DIV 355

第28章?雜志網(wǎng)站 358

28.1?網(wǎng)站頁面效果分析 358

28.1.1? 首頁效果分析 358

28.1.2? 雜志介紹頁面的效果分析 360

28.1.3? 網(wǎng)站文件綜述 360

28.2?規(guī)劃首頁的布局 361

28.2.1? 搭建首頁頁頭的DIV 361

28.2.2? 搭建'雜志推薦'部分的DIV 363

28.2.3? 搭建'雜志列表'部分的DIV 364

28.2.4? 搭建'填寫表單'部分的DIV 365

28.2.5? 搭建'快速導(dǎo)航'部分的DIV 366

28.2.6? 首頁CSS效果分析 367

28.3?雜志介紹頁面 368

28.3.1? 雜志介紹頁面左邊導(dǎo)航部分的

DIV 368

28.3.2? 雜志介紹頁面博客顯示部分的

DIV 370

第29章?簡潔的購物網(wǎng)站 372

29.1?網(wǎng)站頁面效果分析 372

29.1.1? 首頁效果分析 372

29.1.2? 商品展示頁面的效果分析 374

29.1.3? 購物網(wǎng)站文件綜述 375

29.2?規(guī)劃首頁的布局 375

29.2.1? 搭建首頁頁頭的DIV 375

29.2.2? 搭建導(dǎo)航部分的DIV 376

29.2.3? 搭建'用戶博客'部分的DIV 377

29.2.4? 搭建'產(chǎn)品展示'部分的DIV 378

29.2.5? 搭建頁腳的DIV 379

29.2.6? 首頁CSS效果分析 379

29.3?利用CSS樣式完善首頁效果 381

29.3.1? 整體布局 381

29.3.2? 定義其他樣式 381

29.4?商品展示頁面 382

29.4.1? 用DIV層構(gòu)建分頁效果 382

29.4.2? 用CSS構(gòu)建商品圖片的效果 383

29.5?站點地圖頁面 384

第30章?個人圖片博客網(wǎng)站 386

30.1?網(wǎng)站頁面效果分析 386

30.1.1? 首頁效果分析 386

30.1.2? 圖片展示頁面的效果分析 387

30.1.3? 網(wǎng)站文件綜述 388

30.2?規(guī)劃首頁的布局 389

30.2.1? 搭建首頁第一行的DIV 389

30.2.2? 搭建首頁主體部分的DIV 390

30.2.3? 搭建頁腳部分的DIV 392

30.2.4? 首頁CSS效果分析 393

30.3?首頁CSS效果分析 394

30.3.1? DIV陰影效果的實現(xiàn)方式 394

30.3.2? 圖標懸浮效果 395

30.4?圖片展示頁面 396

30.5?博客文章頁面 398

30.5.1? 博客文章頁面文章部分的DIV 398

30.5.2? 博客文章頁面歸檔和分類部分的

DIV 400