産品特色
編輯推薦
1. 藉助生活中的實例,讓技術變得通俗易懂
2. 拒絕字典式的知識排布,注重學習流程與邏輯,依據實戰順序進行講解
3. 由淺入深,循序漸進,注重理論與實踐相結閤
4. 融入開發經驗,項目實戰貫穿全程
5. 每個環節均有相關總結、問題答疑
6. 內容緊跟行業發展,取其精華並融入新的知識
內容簡介
《HTML5布局之路》從開發實戰的視角,介紹瞭網站製作知識和開發流程。首章當中,針對HTML5的基本知識及《HTML5布局之路》所涉及的所有內容進行整體概括。主要內容包括:HTML5入門知識,網頁整體布局,盒模型,浮動布局,定位布局,代碼語義性,擴展性,文本樣式的處理,錶格錶單,PC端網站開發實戰與復習方法,移動端開發方法,HTML5新增結構標簽,CSS3新增樣式,響應式布局等。
目錄
第1章 旅途之前
1.1 講解方法與旅途指南
1.1.1 和其他技術書籍相比,本書到底有何不同
1.1.2 書籍概覽
1.1.3 推薦學習流程
1.1.4 旅途指南
1.2 HTML5學習的前期準備
1.3 認識HTML
1.3.1 HTML5是做什麼的
1.3.2 HTML5的由來
1.3.3 HTML5的基本組成
1.3.4 專業化角度認識HTML
1.3.5 容易混淆的概念
1.4 瞭解HTML5行業前景與基本概念
1.4.1 一些行業詞匯
1.4.2 HTML5的行業並非一勞永逸
1.4.3 近幾年來HTML5行業的變化
1.4.4 到底是什麼決定著薪資
1.4.5 是誰決定你的去留
1.5 HTML與CSS的學法
1.5.1 方法1整體到局部,骨架到血肉
1.5.2 方法2類比
1.5.3 方法3記憶很重要
1.5.4 方法4聚沙成塔
1.5.5 方法5循序漸進
1.5.6 方法6知識的遷移
1.5.7 方法7生活輔助學習
1.5.8 方法8實踐齣真知
1.6 開發工程師與Photoshop
1.6.1 圖片切圖
1.6.2 認識軟件
1.7 切圖與Photoshop相關用法
1.7.1 切圖的基本流程
1.7.2 打開文件
1.7.3 找到切圖目標
1.7.4 整理好要處理的圖層
1.7.5 新建文件存儲目標圖像
1.7.6 在新文件中調整圖像位置
1.7.7 修改畫布大小
1.7.8 將圖片按照最佳格式類型進行存儲
1.7.9 圖片大小處理與壓縮
1.8 使用Photoshop獲取圖層信息
1.8.1 獲取顔色
1.8.2 文字內容與特點
1.8.3 撤銷
1.8.4 圓角大小的測量
1.8.5 陰影的測量
1.8.6 將文字處理成圖像
1.8.7 Photoshop快捷鍵總結
1.9 代碼編輯器
1.9.1 Sublime Text
1.9.2 其他代碼編輯器
1.1 0瀏覽器調試
1.1 0.1 為何要進行瀏覽器調試
1.1 0.2 瀏覽器調試的基本要求
1.1 0.3 瀏覽器調試方法
第2章 HTML5入門
2.1 網站開發流程
2.1.1 網站開發流程圖
2.1.2 網站需求調查階段
2.1.3 網站技術分析階段
2.1.4 網站頁麵策劃階段
2.1.5 網站設計開發階段
2.1.6 網站測試改進階段
2.1.7 前端工程師負責的部分
2.2 第一個HTML文件
2.2.1 創建基本的網站文件夾
2.2.2 創建第一個HTML文件
2.2.3 HTML標簽的書寫規則
2.2.4 HTML書寫規則的問題區
2.3 基本的HTML結構
2.3.1 一個HTML文件的基本組成
2.3.2 文檔聲明
2.3.3 title標題
2.3.4 meta元信息
2.3.5 HTML文件的內容區
2.3.6 HTML注釋
2.3.7 網站開發常用標簽
2.3.8 基本HTML結構的問題區
第3章 整體布局(上)——標簽尺寸處理
3.1 整體布局與整體布局中使用的標簽
3.1.1 整體布局
3.1.2 div元素
3.2 什麼是CSS
3.2.1 沒有CSS時代的網頁
3.2.2 什麼是CSS
3.3 CSS引入方式
3.3.1 行內書寫——最簡單的樣式操作方法
3.3.2 內部書寫——簡化樣式操作
3.3.3 外部引入——控製多頁麵樣式
3.3.4 CSS三種常見引入方式比較
3.3.5 外部引入CSS的擴展知識
3.3.6 CSS引入方式的問題區
3.4 CSS選擇器
3.4.1 生活中的"選擇器"——找人
3.4.2 CSS選擇器的基本語法
3.4.3 CSS基本選擇器
3.4.4 樣式衝突的問題
3.4.5 生活中的"優先級"——誰是老大
3.4.6 CSS選擇器優先級
3.4.7 行內的style屬性
3.4.8 選擇器的使用原則
3.4.9 CSS選擇器的問題區
3.5 CSS編碼規範
3.5.1 CSS注釋
3.5.2 書寫風格
3.5.3 關於類名命名
3.5.4 樣式書寫順序
3.5.5 CSS編碼規範的問題區
3.6 CSS樣式重置
3.6.1 什麼是樣式重置
3.6.2 為何需要樣式重置
3.6.3 樣式重置文件
3.7 盒模型
3.7.1 生活中的"盒模型"——魚缸
3.7.2 盒模型基本知識
3.7.3 盒模型——width與height屬性
3.7.4 盒模型——margin屬性
3.7.5 盒模型——padding屬性
3.7.6 盒模型——border屬性
3.7.7 盒模型的問題區
第4章 整體布局(下)——浮動布局
4.1 浮動
4.1.1 為何要浮動
4.1.2 生活中的"浮動"——水槽
4.1.3 浮動——float屬性
4.1.4 浮動特效分析
4.1.5 浮動的問題區
4.2 浮動的影響
4.2.1 文檔流
4.2.2 浮動元素對父級元素高度的影響
4.2.3 浮動元素對兄弟級元素布局的影響
4.3 清除浮動
4.3.1 浮動——clear屬性
4.3.2 清除浮動的不同類型
4.3.3 為兄弟元素設置clear樣式
4.3.4 空標簽清除浮動
4.3.5 br標簽清除浮動
4.3.6 父元素浮動
4.3.7 父元素設置overflow: hidden或auto
4.3.8 利用after僞元素清除浮動
4.3.9 after僞元素清除浮動的實際用法
4.4 關於"清除浮動"的問題區
4.4.1 clear: both的兼容問題
4.4.2 為父級設置高度是不是清除浮動的方法
4.4.3 浮動元素與非浮動元素處於同一行時會齣現的問題
4.4.4 清除浮動方法的選擇
4.5 較為復雜的浮動布局
4.5.1 功能需求
4.5.2 需求分析
第5章 模塊布局(上)——選擇標簽
5.1 為何要選擇標簽
5.2 開發時可以選用的標簽以及功能
5.2.1 h1~h6標題類標簽
5.2.2 hr分隔綫
5.2.3 p與br段落與換行
5.2.4 無序列錶與有序列錶
5.2.5 自定義列錶
5.2.6 行內標簽
5.2.7 代碼範例的顯示效果圖
5.3 標簽選擇時的影響因素
5.4 標簽的默認顯示樣式
5.4.1 顯示屬性display
5.4.2 根據標簽默認display屬性劃分類彆
5.4.3 顯示樣式影響的標簽選用
5.4.4 display的問題區
5.5 標簽的閤理嵌套
5.5.1 標簽嵌套基本規則
5.5.2 錯誤嵌套時的錶現情況
5.6 SEO搜索引擎優化——標簽語義性
5.6.1 為何要談SEO
5.6.2 SEO是什麼
5.6.3 搜索爬蟲工作原理
5.6.4 爬蟲抓取的是什麼
5.6.5 什麼樣的網站纔能夠被快速收錄
5.6.6 針對SEO,前端開發要注意什麼
5.6.7 SEO中錶示強調的標簽
5.6.8 關於SEO的問題區
5.7 嵌套層數與深度
5.8 標簽選擇實戰(1)——確定標簽
5.8.1 功能需求
5.8.2 提齣實現方案
5.8.3 標簽選擇思路分析
5.8.4 實現方案的對比分析
5.9 樣式的可控性
5.9.1 原有選擇器對樣式的控製問題
5.9.2 加強版選擇器——後代選擇器
5.9.3 加強版選擇器——子代選擇器
5.9.4 加強版選擇器——群組選擇器
5.9.5 加強版選擇器優先級算法
5.9.6 關於樣式可控性的問題區
5.1 0標簽選擇實戰(2)——樣式控製
5.1 0.1 方案1——使用ul無序列錶
5.1 0.2 方案2——使用dl自定義列錶
5.1 0.3 當前最優方案
第6章 模塊布局(下)——可用性與擴展性
6.1 a標簽
6.1.1 超鏈接
6.1.2 超鏈接的屬性
6.1.3 錨鏈接
6.1.4 超鏈接的基本樣式
6.1.5 關於a標簽的問題區
6.2 光標樣式
6.2.1 光標效果
6.2.2 cursor相關屬性
6.2.3 關於cursor: hand
6.2.4 關於自定義光標樣式的支持程度
6.3 標簽選擇實戰(3)——添加鏈接
6.3.1 為實例添加a標簽
6.3.2 調整可觸區
6.3.3 當前方案的具體代碼
6.3.4 方案結束瞭嗎
6.4 img標簽的選用
6.4.1 img標簽基本語法
6.4.2 數據圖與背景圖
6.4.3 img問題的規避
6.4.4 img中alt與title的區彆
6.4.5 href與src的區彆
6.5 後颱維護對前端的影響
6.5.1 圖像加載對頁麵布局的影響
6.5.2 文字超齣造成的頁麵混亂
6.6 網頁中哪裏需控製高度或超齣隱藏
6.6.1 不同頁麵的不同需求
6.6.2 關於高度設定的基本結論
6.6.3 何時考慮超齣隱藏
6.6.4 關於"高度控製與超齣隱藏"的問題區
6.7 內容的超齣處理——overflow
6.7.1 基本語法與功能
6.7.2 實現文本超齣隱藏
6.7.3 實現文本超齣顯示為省略號
6.7.4 關於overflow的問題區
6.8 代碼擴展性——關於margin負值
6.8.1 前後颱數據整閤方式
6.8.2 比數據條數少一個的虛綫如何實現
6.8.3 特殊情況的類名設置詳析
6.8.4 擴展性曾經的救世主——margin負值
6.8.5 margin負值的問題區
6.9 標簽選擇實戰(4)——完成開發
6.9.1 考慮超齣和margin負值
6.9.2 完整版代碼
6.9.3 總結
第7章 文本等細節類樣式處理
7.1 背景類樣式
7.1.1 背景顔色——background�瞔olor屬性
7.1.2 背景圖片——background�瞚mage屬性
7.1.3 背景重復——background�瞨epeat屬性
7.1.4 背景定位——background�瞤osition屬性
7.1.5 背景關聯——background�瞐ttachment屬性
7.1.6 復閤寫法——background屬性
7.1.7 背景類樣式的相關問題
7.2 透明背景
7.2.1 opacity與filter
7.2.2 rgba控製
7.2.3 transparent
7.2.4 透明背景的問題區
7.3 背景圖閤並
7.3.1 什麼是背景圖閤並
7.3.2 為何進行背景圖閤並
7.3.3 背景圖閤並的核心技術與操作方法
7.3.4 CSS Sprite
7.3.5 背景圖閤並的問題區
7.4 段落樣式
7.4.1 line�瞙eight
7.4.2 text�瞕ecoration
7.4.3 text�瞚ndent
7.4.4 text�瞐lign
7.4.5 vertical�瞐lign
7.4.6 word�瞫pacing與letter�瞫pacing
7.4.7 word�瞱rap與word�瞓reak
7.4.8 段落樣式的問題區
7.5 字體類樣式
7.5.1 color
7.5.2 font�瞗amily
7.5.3 font�瞫ize
7.5.4 font�瞫tyle
7.5.5 font�瞱eight
7.5.6 font復閤樣式
7.5.7 網絡字體
7.5.8 字體類樣式的問題區
第8章 特殊布局情況——定位布局
8.1 定位屬性
8.1.1 為何要使用定位
8.1.2 生活中的"定位"——便攜貼
8.1.3 定位——position屬性
8.1.4 定位對文檔流的影響
8.2 絕對定位的位置控製
8.2.1 設置絕對定位的元素的基本特點
8.2.2 定位——left等屬性
8.3 層級覆蓋關係
8.3.1 定位——z�瞚ndex屬性
8.3.2 多級彆的層疊關係比較
8.4 固定定位
第9章 特殊布局情況——界限控製與僞元素的妙用
9.1 未設置固定寬高元素的界限控製
9.1.1 何處需要考慮界限控製
9.1.2 最小高度
9.1.3 最小寬度
9.1.4 最大寬度與最大高度
9.2 僞元素
9.2.1 什麼是僞元素
9.2.2 僞元素的種類
9.2.3 僞元素的書寫格式
9.2.4 after與before僞元素
9.2.5 讓僞元素按照塊元素特性渲染
9.2.6 僞元素實現背景圖
9.2.7 僞元素的問題區
第10章 錶格
10.1 table布局的興衰
10.1.1 錶格的發展曆史
10.1.2 錶格的應用
10.2 table各類元素以及用法
10.2.1 基本標簽
10.2.2 錶格的嵌套規則
10.2.3 行列閤並控製
10.2.4 關於錶格元素的問題區
10.3 基本數據錶的開發與製作
10.3.1 基本數據錶的功能需求
10.3.2 基本數據錶的實現思路
10.3.3 基本數據錶的需求分析
10.3.4 基本數據錶的實現
10.4 table元素的屬性
10.4.1 table的常見屬性
10.4.2 width與height——寬度與高度
10.4.3 border——錶格邊框設置
10.4.4 cellspacing與cellpadding——空白區設置
10.5 錶格特有的CSS屬性
10.5.1 閤並單元格之間的邊框——border�瞔ollapse
10.5.2 邊框之間的空隙——border�瞫pacing
10.5.3 空白單元格——empty�瞔ells
10.6 錶格屬性與樣式選用原則
第11章 錶單
11.1 認識錶單
11.1.1 錶單的作用——實現對話
11.1.2 嚮服務端發送數據的場景示例
11.1.3 錶單的基本結構
11.1.4 各類錶單元素通用屬性
11.2 錶單常用元素
11.2.1 form
11.2.2 input
11.2.3 label
11.2.4 select、option與optgroup
11.2.5 textarea
11.2.6 button
11.2.7 fieldset與legend元素
11.2.8 錶單元素的問題區
11.3 錶單嵌套規則
11.4 錶單元素的特殊狀態屬性
11.5 屬性選擇器
11.5.1 屬性選擇器的應用場景
11.5.2 基本的屬性選擇器
11.5.3 模糊類屬性選擇器
11.6 錶單元素的實際應用
11.6.1 去掉錶單元素外部的聚焦綫
11.6.2 textarea的尺寸控製
11.6.3 自定義樣式的錶單元素
第12章 停下來迴頭看路
12.1 從〇開始
12.1.1 〇是什麼
12.1.2 最常見的答案
12.1.3 讓結果變得更優秀
12.2 網狀復習法
12.2.1 網狀復習法的特點
12.2.2 網狀復習法的實現方式
12.2.3 網狀復習法的簡單案例
12.2.4 網狀復習HTML與CSS
12.3 歸納整理法
12.3.1 歸納整理法的特點
12.3.2 歸納整理法的實現方式
12.3.3 歸納整理復習HTML與CSS
12.4 hack技術
12.4.1 什麼是hack技術
12.4.2 常用IE hack
12.4.3 IE條件注釋
12.5 實現網頁開發之後要考慮的東西
12.6 PC端瀏覽器的兼容問題
第13章 HTML5新標簽與CSS3基礎
13.1 HTML5新增元素
13.1.1 新增結構元素及含義
13.1.2 使用HTML5新結構元素完成頁麵搭建
13.1.3 HTML5新元素的問題區
13.2 瀏覽器內核
13.2.1 瀏覽器主要內核
13.2.2 常見瀏覽器內核前綴
13.2.3 瀏覽器內核的問題區
13.3 CSS3選擇器
13.3.1 CSS2.0選擇器迴顧
13.3.2 CSS3選擇器——通用兄弟選擇器
13.3.3 CSS3選擇器——僞類選擇器
13.3.4 CSS3選擇器的問題區
13.4 CSS3圓角邊框
13.4.1 圓角邊框——border�瞨adius
13.4.2 圓角邊框效果實例
13.4.3 CSS3圓角帶來的變革
13.4.4 CSS3圓角邊框的問題區
13.5 CSS3文本陰影
13.5.1 文本陰影——text�瞫hadow
13.5.2 文本陰影效果實例
13.5.3 文本陰影的問題區
13.6 CSS3盒陰影
13.6.1 盒陰影——box�瞫hadow
13.6.2 盒陰影的效果實例
13.6.3 關於盒陰影的問題區
13.7 CSS3背景新屬性
13.7.1 背景尺寸——background�瞫ize
13.7.2 背景切割——background�瞔lip
13.7.3 背景原點——background�瞣rigin
13.7.4 背景切割與背景原點的區彆
13.8 漸變背景
13.8.1 什麼是漸變
13.8.2 漸變的種類
13.8.3 如何書寫CSS3漸變
13.9 新元素和CSS3基礎屬性為網站帶來瞭什麼
第14章 轉戰移動端(上)——百分比與rem
14.1 移動端發展
14.1.1 智能手機熱潮
14.1.2 針對移動端的探索
14.1.3 分辨率初變
14.1.4 多分辨率的處理
14.1.5 移動端的未來
14.1.6 移動端發展總結&開發移動端的基本流程
14.2 設備調試方法
14.2.1 設備調試方法的種類
14.2.2 調試的基本原則: 多颱真機測試
14.3 視口——viewport
14.3.1 視口以及常見數值
14.3.2 調整視口大小——命令類
14.3.3 viewport元標簽以及屬性
14.3.4 視口調整的各種命令
14.3.5 對待視口的基本原則
14.4 當盒模型與行高遇到百分比
14.4.1 盒模型單位如何選擇
14.4.2 margin和padding使用百分比作為單位
14.4.3 height使用百分比作為單位
14.4.4 border使用百分比作為單位
14.4.5 line�瞙eight使用百分比作為單位
14.5 CSS3新增度量單位
14.5.1 新度量單位
14.5.2 rem與em
14.5.3 vw與vh
14.6 字體處理不容小覷
14.6.1 美工圖設計的基準字體
14.6.2 移動端網絡字體使用更加頻繁
14.7 盒陰影的妙用
14.8 背景圖的處理
14.9 使用JS配閤rem讓頁麵適應各個分辨率
14.9.1 Step1查看設計圖,確定需要兼容的分辨率
14.9.2 Step2調整視口
14.9.3 Step3確定設計圖的最小字體
14.9.4 Step4按照設計圖的像素進行開發
14.9.5 Step5使用百分比和rem替換px
14.9.6 Step6使用JS控製基準字體
第15章 轉戰移動端(下)——響應式&移動端的探索
15.1 響應式布局
15.1.1 理解響應式布局
15.1.2 響應式布局的優劣勢
15.1.3 響應式布局的核心技術
15.2 媒體查詢
15.2.1 什麼是媒體查詢
15.2.2 媒體查詢書寫方法
15.2.3 常見媒體類型
15.2.4 關於媒體的特性
15.3 讓移動端開發變得更好——關於高清屏幕
15.3.1 高清分辨率
15.3.2 此前移動端開發存在的一些不足
15.3.3 按照高清分辨率解讀的"想法"
15.3.4 flexible.js的用法
15.3.5 flexible框架使用的注意事項
15.4 讓移動端開發變得更快——固定像素的實現方法
15.4.1 MetaHandler.js
15.4.2 框架當前還存在的問題
15.5 移動端兼容
15.5.1 CSS3媒體查詢兼容問題
15.5.2 HTML與CSS的基本兼容問題
15.5.3 默認樣式處理
第16章 CSS3變形與動畫
16.1 CSS3二維變形
16.1.1 二維變形基本語法
16.1.2 具體變形方式語法詳析
16.1.3 變形順序對最終結果是否會造成影響
16.2 CSS3三維變形
16.2.1 如何觸發三維變形
16.2.2 Z軸的位置
16.2.3 三維變形的變形屬性
16.2.4 視角
16.2.5 鏇轉帶來的問題
16.2.6 關於三維變形的應用
16.2.7 關於變形的問題區
16.3 CSS3過渡
16.3.1 過渡的基本屬性
16.3.2 過渡的閤寫方法transition
16.3.3 多屬性過渡時,各個屬性的書寫方法
16.3.4 過渡得以實現的必備要素
16.3.5 關於過渡的問題區
16.4 CSS3動畫
16.4.1 幀與關鍵幀
16.4.2 CSS3動畫的基本語法
16.4.3 animation動畫的基本屬性
16.4.4 動畫命令的閤寫方法animation
16.4.5 動畫與過渡的比較
第17章 各章節自評習題集
17.1 習題集
17.1.1 習題內容
17.1.2 習題答案
17.2 習題集
17.2.1 習題內容
17.2.2 習題答案
17.3 習題集
17.3.1 習題內容
17.3.2 習題答案
17.4 習題集
17.4.1 習題內容
17.4.2 習題答案
17.5 習題集
17.5.1 習題內容
17.5.2 習題答案
17.6 習題集
17.6.1 習題內容
17.6.2 習題答案
17.7 習題集
17.7.1 習題內容
17.7.2 習題答案
17.8 習題集
17.8.1 習題內容
17.8.2 習題答案
17.9 習題集
17.9.1 習題內容
17.9.2 習題答案
17.1 0習題集
17.1 0.1 習題內容
17.1 0.2 習題答案
17.1 1習題集
17.1 1.1 習題內容
17.1 1.2 習題答案
17.1 2習題集
17.1 2.1 習題內容
17.1 2.2 習題答案
17.1 3習題集
17.1 3.1 習題內容
17.1 3.2 習題答案
17.1 4習題集
17.1 4.1 習題內容
17.1 4.2 習題答案
第18章 各章節代碼實戰
18.1 代碼檢錯——[第2、3章]
18.1.1 實戰題目
18.1.2 實戰答案
18.2 為元素設置盒模型樣式——[第3章 ]
18.2.1 實戰題目
18.2.2 實戰答案
18.3 使用浮動實現網頁布局——[第4章 ]
18.3.1 實戰題目
18.3.2 實戰答案
18.4 閤理選擇標簽——[第5、6章]
18.4.1 實戰題目
18.4.2 實戰答案
18.5 文本樣式處理——[第7章 ]
18.5.1 實戰題目
18.5.2 實戰答案
18.6 定位布局——[第8章 ]
18.6.1 實戰題目
18.6.2 實戰答案
18.7 僞元素的應用——[第9章 ]
18.7.1 實戰題目
18.7.2 實戰答案
18.8 課程錶與錶格簡曆製作——[第10章 ]
18.8.1 實戰題目
18.8.2 實戰答案
18.9 CSS3陰影特效——[第13章 ]
18.9.1 實戰題目
18.9.2 實戰答案
18.1 0響應式布局——[第15章 ]
18.1 0.1 實戰題目
18.1 0.2 實戰答案
18.1 1二維三維特效動畫——[第16章 ]
18.1 1.1 實戰題目
18.1 1.2 實戰答案
第19章 網頁案例實戰
19.1 PC端網頁開發實戰
19.1.1 功能需求
19.1.2 整體測繪
19.1.3 實現整體布局
19.1.4 實現頭部模塊(含LOGO與微信)部分
19.1.5 實現導航模塊部分
19.1.6 實現內容左側最新文章部分
19.1.7 實現內容右側廣告區部分
19.1.8 實現tab區域標題部分
19.1.9 實現tab區域內容部分
19.1.1 0實現底部(版權)區域部分
19.1.1 1實現大圖部分
19.1.1 2考慮超齣隱藏以及光標移入狀態
19.1.1 3考慮臨界值
19.1.1 4代碼優化
19.2 移動端網頁開發實戰
19.2.1 功能需求
19.2.2 整體測繪
19.2.3 實現整體布局
19.2.4 添加JS控製,實現多分辨率自適應
19.2.5 實現熱門與推薦部分
19.2.6 實現具體文章模塊部分
19.2.7 實現頂部區域
19.2.8 實現底部版權部分
19.2.9 代碼優化
第20章 附錄
20.1 HTML5發展史
20.1.1 萌芽
20.1.2 第一次瀏覽器大戰
20.1.3 第二次瀏覽器大戰
20.1.4 第三次瀏覽器大戰
20.2 手機端操作係統發展史
20.2.1 諾基亞的世界開始動搖
20.2.2 微軟、蘋果、榖歌之戰
20.2.3 一代霸主隕落
20.2.4 iOS、安卓高奏凱歌
20.2.5 蘋果和Adobe
20.3 HTML的各種布局
20.3.1 錶格布局
20.3.2 DIV CSS
20.3.3 960柵格
20.3.4 經典的三欄布局——雙飛翼
20.3.5 瀑布流布局
20.3.6 響應式布局
20.3.7 單頁麵無限滾動
20.3.8 移動端的rem自適應布局
20.3.9 其他布局以及未來
20.4 編輯器插件安裝與應用
20.4.1 插件安裝
20.4.2 關於Emmet插件的相關配置
20.4.3 利用Emmet插件快速編寫HTML代碼
20.5 開發需要準備的基本軟件
20.5.1 基本軟件列錶
20.5.2 WAMP軟件的安裝
20.5.3 初識多人協同開發用的"版本控製管理工具"
20.6 HTML5學習平颱與網站
20.6.1 HTML5布局之路——官方平颱
20.6.2 其他學習類網站
20.6.3 找工作的網站平颱
20.7 單詞列錶
20.8 網頁中部分模塊的CSS命名參考
20.9 重置代碼解析
20.9.1 重置代碼
20.9.2 重置代碼解析
20.9.3 在重置文件中添加的語句
20.1 0開發備忘錄
20.1 0.1 書寫基本的需求分析報告
20.1 0.2 基本的前期準備工作
20.1 0.3 移動端與PC端的特殊性
20.1 0.4 整體開發的基本順序提醒
20.1 0.5 具體開發中的注意事項
20.1 0.6 其他
20.1 1Iconfont
20.1 1.1 什麼是Iconfont
20.1 1.2 Iconfont中圖標的下載
20.1 1.3 Iconfont可能齣現的問題以及解決辦法
20.1 1.4 實際開發中Iconfont的用途
參考文獻
精彩書摘
《HTML5布局之路》:
第3章整體布局(上) ——標簽尺寸處理
3.1整體布局與整體布局中使用的標簽
3.1.1整體布局
瞭解基本規則,做好前期開發準備之後,就要真正進入“代碼書寫”階段瞭。網頁整體布局,是整個網站具體代碼實現時的第一步,該步驟是針對網頁進行分析,劃分為多個模塊,將一個網頁解讀成幾個組成部分,並針對這些組成部分進行位置、大小的控製。第3章和第4章所涉及的具體知識如圖3.1所示。
圖3.1第3章和第4章涉及的知識
在整體布局的過程中……這種元素也是在整體布局當中會使用到的唯獨的HTML元素。
然後要涉及關於CSS布局方麵的一些知識,讓一個個div能夠按照開發工程師的需求和想法,呈現齣相應的大小,齣現在網頁中適當的位置上,如圖3.2所示。
……
前言/序言
前言
從2009年開始,HTML5逐漸進入人們的視野,2012年,HTML5開發在北京嶄露頭角,隨著2015年微信公眾號的推廣、國傢對創業的大力扶持,各類企業對網站以及移動網站的依賴性越來越強,HTML5開發在各個二綫城市飛速發展。
通過HTML與CSS進行網頁布局,是實現網站開發的第一步,良好的HTML與CSS有助於我們更好地書寫齣企業需要的前端頁麵。
本書從實戰角度齣發,基於行業特點和要求,將知識按照開發的流程和順序進行拆分,然後逐步實現網頁的開發,伴隨著網頁的實現過程講解相應的知識點,並在適當章節進行總結,以保證在知識、方法和流程得到突齣的前提下,讓知識點“網絡化”“體係化”。
適用人群
本書適用於每一個希望自學HTML5的人、擁有一定計算機基礎的初學者、希望學習HTML5的大學生、希望夯實基礎的HTML5開發工程師閱讀。此外,也可以作為計算機相關專業的師生學習用書和培訓機構的教材。
本書結構
本書共由19章以及附錄組成,各章簡介如下。
第1章旅途之前,介紹本書的學習方法與流程、HTML5的基本概念、HTML5行業的前景、在HTML5開發中與切圖相關的工作、Photoshop工具的具體用法、Sublime編輯器的使用方法以及瀏覽器的調試方法。
第2章HTML5入門,講解網站開發的基本流程,探討前端開發工程師在流程中的位置和作用,包括認識並創建HTML文件,HTML結構中的文檔聲明、標題、元信息、注釋、常見的HTML標簽等。
第3章整體布局(上)——標簽尺寸處理,介紹CSS技術,並藉助代碼實例探討不同引入方式的優劣勢,介紹ID、類名、標簽名等三種基本選擇器以及它們的使用情景,CSS編碼規範,瀏覽器默認樣式與樣式重置,盒模型的各個屬性。
第4章整體布局(下)——浮動布局,講解各類標簽在布局時存在的不足,引齣浮動的基本知識和概念,探討浮動對元素布局的影響,如何清除浮動以及各種清除浮動方法的優劣勢。
第5章模塊布局(上)——選擇標簽,首先介紹在模塊布局當中會使用到的各類標簽,之後探討為何選取標簽,包括在選取標簽時需要考慮的具體因素,標簽的默認樣式、嵌套規則、標簽的語義性、樣式的可控性等。
第6章模塊布局(下)——可用性與擴展性,討論在模塊布局的標簽選擇時要考慮的擴展性和可用性,包括超鏈接a標簽、鼠標樣式的處理、img標簽的選用與處理、超齣隱藏設置等。
第7章文本等細節類樣式處理,講解關於具體文本的各類樣式,包括背景樣式、字體樣式、段落樣式、背景圖閤並技術以及網絡字體設置的相關知識。
第8章特殊布局情況——定位布局,介紹定位布局這種比較特殊的布局方式,討論元素針對哪個元素進行定位,多個定位元素之間的層疊關係等。
第9章特殊布局情況——界限控製與僞元素的妙用,探討網頁開發中的一些“界限”問題,對於存在界限的布局應當如何實現和處理,此外還介紹瞭僞元素的知識及應用。
第10章錶格,介紹錶格布局的興衰、當前開發中錶格布局的具體用法、錶格包含的各類標簽、錶格標簽專有的屬性和樣式。
第11章錶單,講解錶單的主要功能、基本用法,錶單包含的各類常用元素,錶單元素的特殊狀態和屬性,此外還介紹瞭屬性選擇器,討論瞭錶單元素的實際應用。
第12章停下來迴頭看路,探討復習的方式方法,介紹網狀復習法與歸納整理法的基本概念,並以實例的方式針對HTML與CSS的PC端開發知識進行整理和歸納。此外,對hack技術以及網頁開發之後的優化方法進行介紹。
第13章HTML5新標簽與CSS3基礎,講解HTML5新增結構元素、瀏覽器內核以及瀏覽器內核前綴、CSS3的新增選擇器、CSS3圓角邊框、CSS3文本陰影、CSS3盒陰影、CSS3背景類樣式等。
第14章轉戰移動端(上)——百分比與rem,探討移動端的發展曆程,並依據移動端的發展,講解設備調試的基本方法,視口viewport,盒模型、行高等屬性設置百分比時存在的問題,CSS3新增的度量單位(rem等)、盒陰影背景尺寸等技術在移動端的應用等。
第15章轉戰移動端(下)——響應式&移動端的探索,介紹響應式布局及媒體查詢的基本知識,討論優化移動端開發的方法與框架,包括flexible、Metahandler。此外,還介紹移動端較為常見的兼容問題。
第16章CSS3變形與動畫,講解CSS3二維變形、CSS3三維變形、CSS3過渡與CSS3動畫,探討二維變形與三維變形在屬性上的區彆,過渡與動畫在用法與含義上的區彆。
第17章各章節自評習題集,針對第1~16章,齣於加強理論知識基礎的考慮,設置瞭相對應的習題集,主要用於考查理論類知識和比較基礎的小型實戰類知識。
第18章各章節代碼實戰,針對第1~16章的大部分章節,設置瞭與之相對應的代碼實戰題。
第19章網頁案例實戰,針對第1~16章,設置瞭兩個較大型的網頁案例,分彆是PC端網頁和移動端網頁的實戰開發。
第20章附錄,介紹HTML5的發展史,手機端操作係統發展史,HTML的各種布局,編輯器插件安裝與應用,開發需要準備的基本軟件,HTML5學習平颱與網站,學習HTML5技術涉及的部分單詞,CSS樣式重置代碼解析,開發備忘錄,Iconfont等。
源代碼
在學習本書示例代碼時,可以手工輸入所有完整案例,也可以使用隨書的源代碼文件。本書所有完整案例的源代碼、涉及的一些軟件、文件,均可以在本書的電子資料庫當中下載。