CSS3網頁樣式與布局案例課堂 | 被動收入的投資秘訣 - 2024年7月

CSS3網頁樣式與布局案例課堂

作者:劉玉紅等
出版社:清華大學
出版日期:2017年09月01日
ISBN:9787302477747
語言:繁體中文

本書以零基礎講解為宗旨,用實例引導讀者深入學習,采取【基礎入門→核心技術→網頁布局→高級技能→綜合案例】的講解模式,深入淺出地講解CSS3的各項技術及實戰技能。本書第1篇主要講解CSS樣式入門、CSS3樣式的基本語法、CSS3的高級特性等;第2篇主要講解控制網頁字體與段落樣式、控制網頁圖片樣式、控制網頁背景與邊框樣式、美化網頁超鏈接和鼠標、控制表格和表單樣式、控制列表和菜單樣式、使用濾鏡美化網頁元素等;第3篇主要講解CSS定位與DIV布局核心技術、CSS+DIV盒子的浮動與定位、固定寬度網頁布局剖析與制作、自動縮放網頁布局剖析與制作等;第4篇主要講解過渡和動畫效果、2D和3D變幻效果、創建響應式頁面等;第5篇主要講解設計商業門戶類網頁、設計在線購物類網頁、設計企業門戶類網頁、設計娛樂休閑類網頁、設計圖像影音類網頁。本書適合任何想學習CSS網頁設計與布局的人員,無論您是否從事計算機相關行業,無論您是否接觸過CSS3,通過學習均可快速掌握CSS3的設計方法和技巧。劉玉紅、蒲娟作者長期從事網站開發工作,數年來承接了大量的項目,具有豐富的實踐經驗。

第1篇 基 礎 入 門第1章 CSS樣式入門 31.1 認識CSS 41.1.1 CSS的功能 41.1.2 瀏覽器與CSS 41.1.3 CSS的發展歷史 51.2 CSS常用單位 51.2.1 顏色單位 51.2.2 長度單位 91.3 編輯和瀏覽CSS 101.3.1 手工編寫CSS 101.3.2 使用Dreamweaver編寫CSS 111.4 在HTML中調用CSS的方法 131.4.1 行內樣式 131.4.2 內嵌樣式 141.4.3 鏈接樣式 151.4.4 導入樣式 161.5 調用方法的優先級 171.5.1 行內樣式和內嵌樣式的比較 181.5.2 內嵌樣式和鏈接樣式的比較 181.5.3 鏈接樣式和導入樣式的比較 191.6 綜合案例——制作產品銷售統計表 201.7 大神解惑 221.8 跟我練練手 22第2章 CSS3樣式的基本語法 232.1 CSS基礎語法 242.1.1 CSS構造規則 242.1.2 CSS的注釋 242.2 CSS的常用選擇器 252.2.1 標簽選擇器 252.2.2 類選擇器 262.2.3 ID選擇器 272.2.4 選擇器的聲明 272.3 綜合案例——制作炫彩網站Logo 282.4 大神解惑 312.5 跟我練練手 31第3章 CSS3的高級特性 333.1 復合選擇器 343.1.1 全局選擇器 343.1.2 交集選擇器 353.1.3 並集選擇器 353.1.4 繼承選擇器 363.2 CSS3新增的選擇器 373.2.1 屬性選擇器 373.2.2 結構偽類選擇器 393.2.3 UI元素狀態偽類選擇器 403.2.4 偽類選擇器 423.3 CSS的繼承特性 433.3.1 繼承關系 433.3.2 CSS繼承的運用 443.4 CSS的層疊特性 453.4.1 同一選擇器被多次定義的處理 453.4.2 同一標簽運用不同類型選擇器的處理 463.5 綜合案例——制作新聞菜單 473.6 大神解惑 493.7 跟我練練手 50第II篇 核 心 技 術第4章 使用CSS3控制網頁字體與段落樣式 534.1 通過CSS控制字體樣式 544.1.1 控制字體類型 544.1.2 定義字體大小 554.1.3 定義字體風格 564.1.4 控制文字的粗細 574.1.5 將小寫字母轉換為大寫字母 584.1.6 設置字體的復合屬性 594.1.7 定義文字的顏色 594.2 CSS3中新增的文本高級樣式 614.2.1 添加文本的陰影效果 614.2.2 設置文本溢出效果 624.2.3 控制文本的換行 634.2.4 設置字體尺寸 644.3 通過CSS控制文本間距與對齊方式 654.3.1 設置單詞之間的間隔 654.3.2 設置字符之間的間隔 664.3.3 為文本添加下划線、上划線、刪除線 674.3.4 設置垂直對齊方式 684.3.5 轉換文本的大小寫 694.3.6 設置文本的水平對齊方式 704.3.7 設置文本的縮進效果 724.3.8 設置文本的行高 734.3.9 文本的空白處理 744.3.10 文本的反排 754.4 綜合案例1——設置網頁標題 764.5 綜合案例2——制作新聞頁面 784.6 大神解惑 794.7 跟我練練手 80第5章 使用CSS控制網頁圖片樣式 815.1 圖片縮放 825.1.1 通過描述標記width和height縮放圖片 825.1.2 使用CSS3中的max-width和max-height縮放圖片 825.1.3 使用CSS3中的width和height縮放圖片 835.2 設置圖片的對齊方式 845.2.1 設置圖片橫向對齊 845.2.2 設置圖片縱向對齊 855.3 圖文混排 875.3.1 設置文字環繞效果 875.3.2 設置圖片與文字的間距 885.4 綜合案例1——制作學校宣傳單 905.5 綜合案例2——制作簡單圖文混排網頁 925.6 大神解惑 945.7 跟我練練手 94第6章 使用CSS控制網頁背景與邊框樣式 956.1 使用CSS控制網頁背景 966.1.1 設置背景顏色 966.1.2 設置背景圖片 976.1.3 背景圖片重復 986.1.4 背景圖片顯示 1006.1.5 背景圖片位置 1016.2 CSS3中新增控制網頁背景屬性 1026.2.1 背景圖片大小 1026.2.2 背景顯示區域 1046.2.3 背景圖片裁剪區域 1056.2.4 背景復合屬性 1076.3 使用CSS控制邊框樣式 1086.3.1 設置邊框樣式 1086.3.2 設置邊框顏色 1096.3.3 設置邊框線寬 1106.3.4 設置邊框復合屬性 1126.4 CSS3中新增邊框圓角效果 1136.4.1 設置圓角邊框 1136.4.2 指定兩個圓角半徑 1146.4.3 繪制4個不同圓角邊框 1156.4.4 繪制不同種類的邊框 1176.5 CSS3中的漸變效果 1196.5.1 線性漸變效果 1196.5.2 徑向漸變效果 1216.6 綜合案例1——制作簡單公司主頁 1226.7 綜合案例2——制作簡單生活資訊主頁 1266.8 大神解惑 1276.9 跟我練練手 128第7章 使用CSS3美化網頁瀏覽效果 1297.1 使用CSS3美化超鏈接 1307.1.1 改變超級鏈接基本樣式 1307.1.2 設置帶有提示信息的超級鏈接 1317.1.3 設置超級鏈接的背景圖 1327.1.4 設置超級鏈接的按鈕效果 1337.2 使用CSS3美化鼠標特效 1347.2.1 使用CSS3控制鼠標箭頭 1347.2.2 設置鼠標變幻式超鏈接 1357.2.3 設置網頁頁面滾動條 1367.3 綜合案例1——圖片版本超級鏈接 1387.4 綜合案例2——鼠標特效 1407.5 綜合案例3——制作一個簡單的導航欄 1427.6 大神解惑 1447.7 跟我練練手 144第8章 使用CSS控制表格和表單樣式 1458.1 美化表格樣式 1468.1.1 設置表格邊框樣式 1468.1.2 設置表格邊框寬度 1488.1.3 設置表格邊框顏色 1498.2 美化表單樣式 1508.2.1 美化表單中的元素 1508.2.2 美化提交按鈕 1528.2.3 美化下拉菜單 1538.3 綜合案例1——制作用戶登錄頁面 1558.4 綜合案例2——制作用戶注冊頁面 1568.5 大神解惑 1598.6 跟我練練手 159第9章 控制列表和菜單樣式 1619.1 美化項目列表的樣式 1629.1.1 美化無序列表 1629.1.2 美化有序列表 1639.1.3 美化自定義列表 1659.1.4 制作圖片列表 1669.1.5 縮進圖片列表 1679.1.6 列表復合屬性 1689.2 使用CSS制作網頁菜單 1699.2.1 制作無須表格的菜單 1699.2.2 制作水平和垂直菜單 1719.3 綜合案例1——模擬soso導航欄 1739.4 綜合案例2——將段落轉變成列表 1779.5 大神解惑 1789.6 跟我練練手 178第10章 使用濾鏡美化網頁元素 17910.1 濾鏡概述 18010.2 設置基本濾鏡效果 18110.2.1 高斯模糊濾鏡 18110.2.2 明暗度濾鏡 18210.2.3 對比度濾鏡 18310.2.4 陰影濾鏡 18410.2.5 灰度濾鏡 18510.2.6 反相濾鏡 18610.2.7 透明度濾鏡 18710.2.8 飽和度濾鏡 18810.2.9 深褐色濾鏡 18910.3 使用復合濾鏡效果 19010.4 大神解惑 19110.5 跟我練練手 192第III篇 網 頁 布 局第11章 CSS定位與DIV布局核心技術 19511.1 了解塊級元素和行內級元素 19611.1.1 塊級元素和行內級元素的應用 19611.1.2 div元素和span元素的區別 19811.2 盒子模型 19811.2.1 盒子模型的概念 19811.2.2 定義網頁border區域 19911.2.3 定義網頁padding區域 20011.2.4 定義網頁margin區域 20111.3 彈性盒模型 20411.3.1 定義盒子布局方向 20511.3.2 定義盒子布局順序 20611.3.3 定義盒子布局位置 20811.3.4 定義盒子彈性空間 20911.3.5 管理盒子空間 21111.3.6 盒子空間的溢出管理 21311.4 綜合案例1——圖文排版效果 21411.5 綜合案例2——淘 寶導購菜單 21711.6 大神解惑 21911.7 跟我練練手 220第12章 CSS+DIV盒子的浮動與定位 22112.1 定義DIV 22212.1.1 什麼是DIV 22212.1.2 創建DIV 22212.2 盒子的定位 22312.2.1 靜態定位 22312.2.2 相對定位 22412.2.3 絕對定位 22512.2.4 固定定位 22612.2.5 盒子的浮動 22712.3 其他CSS布局定位方式 22912.3.1 溢出定位 22912.3.2 隱藏定位 23112.3.3 z-index空間定位 23312.4 新增CSS3多列布局 23412.4.1 設置列寬度 23412.4.2 設置列數 23612.4.3 設置列間距 23712.4.4 設置列邊框樣式 23812.5 綜合案例1——定位網頁布局樣式 24012.6 綜合案例2——制作陰影文字效果 24312.7 大神解惑 24412.8 跟我練練手 244第13章 固定寬度網頁布局剖析與制作 24513.1 CSS排版觀念 24613.1.1 將頁面用div分塊 24613.1.2 設置各塊位置 24613.1.3 用CSS定位 24713.2 固定寬度網頁剖析與布局 25013.2.1 網頁單列布局模式 25013.2.2 網頁1-2-1型布局模式 25413.2.3 網頁1-3-1型布局模式 25813.3 大神解惑 26113.4 跟我練練手 262第14章 自動縮放網頁布局剖析與制作 26314.1 自動縮放網頁1-2-1型布局模式 26414.1.1 「1-2-1」等比例變寬布局 26414.1.2 「1-2-1」單列變寬布局 26514.2 自動縮放網頁1-3-1型布局模式 26614.2.1 「1-3-1」三列寬度等比例布局 26614.2.2 「1-3-1」單側列寬度固定的變寬布局 26614.2.3 「1-3-1」中間列寬度固定的變寬布局 27014.2.4 「1-3-1」雙側列寬度固定的變寬布局 27314.2.5 「1-3-1」中列和左側列寬度固定的變寬布局 27714.3 分列布局背景色的使用 28014.3.1 設置固定寬度布局的列背景色 28014.3.2 設置特殊寬度變化布局的列背景色 28214.4 綜合案例1——單列寬度變化布局 28414.5 綜合案例2——多列等比例寬度變化布局 28514.6 大神解惑 28814.7 跟我練練手 288第IV篇 高 級 技 能第15章 過渡和動畫效果 29115.1 了解過渡效果 29215.2 添加過渡效果 29215.3 了解動畫效果 29515.4 添加動畫效果 29615.5 大神解惑 29715.6 跟我練練手 298第16章 2D和3D效果 29916.1 了解2D轉換效果 30016.2 添加2D轉換效果 30016.2.1 添加2D移動效果 30016.2.2 添加2D旋轉效果 30116.2.3 添加2D縮放效果 30216.2.4 添加2D傾斜效果 30316.2.5 添加綜合變幻效果 30416.3 添加3D轉換效果 30516.4 大神解惑 30816.5 跟我練練手 308第17章 創建響應式頁面 30917.1 了解彈性盒子 31017.2 使用彈性盒子 31017.3 設置彈性子元素的位置 31317.4 設置彈性子元素的橫向對齊方式 31417.5 設置彈性子元素的縱向對齊方式 31917.6 設置彈性子元素的換行方式 32117.7 綜合案例——使用彈性盒子創建響應式頁面 32317.8 大神解惑 32517.9 跟我練練手 326第V篇 綜 合 案 例第18章 商業門戶類網站賞析 32918.1 整體設計 33018.1.1 顏色應用分析 33018.1.2 架構布局分析 33118.2 主要模塊設計 33118.2.1 網頁整體樣式插入 33118.2.2 網頁局部樣式 33318.2.3 頂部模塊樣式代碼分析 34018.2.4 中間主體代碼分析 34118.2.5 底部模塊分析 34418.3 網站調整 34518.3.1 部分內容調整 34518.3.2 模塊調整 34518.3.3 調整后預覽測試 347第19章 設計在線購物類網頁 34919.1 整體布局 35019.1.1 設計分析 35019.1.2 排版架構 35019.2 主要模塊設計 35119.2.1 Logo與導航區 35119.2.2 Banner與資訊區 35319.2.3 產品類別區域 35419.2.4 頁腳區域 355第20章 設計企業門戶類網頁 35720.1 構思布局 35820.1.1 設計分析 35820.1.2 排版架構 35820.2 主要模塊設計 35920.2.1 Logo與導航菜單 35920.2.2 Banner區 36020.2.3 資訊區 36120.2.4 版權信息 363第21章 設計娛樂休閑類網頁 36521.1 整體設計 36621.1.1 應用設計分析 36621.1.2 架構布局分析 36721.2 主要模塊設計 36821.2.1 網頁整體樣式插入 36821.2.2 頂部模塊代碼分析 36921.2.3 視頻模塊代碼分析 37021.2.4 評論模塊代碼分析 37121.2.5 熱門推薦模塊代碼分析 37321.2.6 底部模塊分析 37521.3 網頁調整 37621.3.1 部分內容調整 37621.3.2 調整后預覽測試 377第22章 設計圖像影音類網頁 37922.1 整體設計 38022.1.1 顏色應用分析 38022.1.2 架構布局分析 38122.2 主要模塊設計 38222.2.1 樣式代碼分析 38222.2.2 頂部模塊樣式代碼分析 38622.2.3 網站主體模塊代碼分析 38722.2.4 底部模塊分析 39122.3 網站調整 39222.3.1 部分內容調整 39222.3.2 模塊調整 39222.3.3 調整后預覽測試 395

「網站開發案例課堂」系列圖書是專門為網站開發和數據庫初學者量身定做的一套學習用書,由劉玉紅策划、千谷高新教育的高級講師編著,整套書涵蓋網站開發、數據庫設計等方面。整套書具有以下特點。


相關書籍