|
|
|
分為3篇共11章，第1篇是響應式設計基礎，我們首先介紹清楚到底什麼是響應式設計，然后介紹分解響應式設計頁面，包括頁面中的元素、頁面的布局、導航欄、多媒體等；第二篇是響應式設計框架，詳細介紹了目前使用最廣泛的Bootstap框架，包括它的各種樣式設計和特效設計；最后一篇是實戰，用一個Bootstrap貼吧和HTML5扁平化公司主頁，實踐前面所學的內容。
楊旺功，男，畢業於重慶郵電大學，碩士。現任北京印刷學院設計藝術學院教師，主要研究方向是信息與交互設計產品創新設計，具有豐富的數字媒體交互產品設計和移動應用UI設計的教學經驗。在數字化藝術與設計領域成果顯著，發表多篇數字化藝術與設計的論文，對信息與交互設計有深入的研究。趙榮嬌，女，畢業於中國傳媒大學，碩士。中國傳媒大學新媒體研究院主辦《信息科技周刊》總編輯，《新媒體技術動態》發起人。目前就職於阿里去啊，擔任前端開發工程師，曾參與旅游特賣首頁、1688訂單等項目開發。熱愛技術，喜歡分享。
第1章 傳說中的響應式設計
1.1支持跨平台設備的響應式設計
1.1.1什麼樣的設計是響應式的
1.1.2響應式設計堅守的4大原則
1.2響應式設計與其他頁面設計的對比
1.2.1固定布局
1.2.2流式布局
1.3實戰：創建一個響應式網頁
1.3.1設置HTML文檔的Meta標簽
1.3.2設計HTML文檔結構
1.3.3使用CSS3媒介查詢
1.3.4運行第一個響應式頁面
1.4小結
第2章 響應式網頁中的元素
2.1文字
2.2表單
2.2.1自定義Radiobox
2.2.2自定義Checkbox動畫
2.2.3美化輸入框
2.2.4下拉框
2.3框架
2.3.1傳統的iFrame框架
2.3.2響應式的iFrame框架
2.4實戰：實現一個響應式登錄表單
2.4.1設置登錄表單的HTML結構
2.4.2設計登錄表單的通用樣式
2.4.3使用CSS3媒介查詢實現響應式登錄表單
2.5小結
第3章 響應式布局
3.1布局切換
3.2側邊欄
3.3寬高等比例變化
3.4列表
3.4.1定義列表分級菜單
3.4.2列表切換效果
3.5表格
3.5.1簡單自適應表格
3.5.2翻轉滾動表格
3.5.3隱藏表格欄目
3.6實戰：響應式商品展示列表
3.7小結
第4章 響應式導航
4.1響應式導航菜單設計五大原則
4.1.1按照優先級顯示內容
4.1.2用創造力來處理有限的空間
4.1.3下拉菜單
4.1.4給導航菜單換位置
4.1.5放棄導航菜單
4.2導航類型
4.2.1單層導航
4.2.2多層導航
4.2.3面包屑導航
4.3頁碼設計
4.4小結
第5章 響應式多媒體
5.1圖標的響應式
5.2圖像
5.2.1可適配的圖像
5.2.2圖像網格
5，3視頻
5.3.1內嵌視頻響應式的難點
5.3.2從其他網站中手動嵌入視頻
5.4響應式圖表
5.4.1一款響應式圖表庫
5.4.2帶Tooltip提示的線形圖
5.4.3簡單的餅圖
5.5小結
第6章 Bootstrap入門
6.1初次接觸Bootstrap
6.1.1Bootstrap的優勢
6.1.2下載Bootstrap
6.2在網站中引入Bootstrap
6.3調用Bootstrap的樣式
6.4調用Bootstrap的組件
6.5調用Bootstrap的js特效
6.6實戰：一個Bootstrap實現的響應式頁面V1.0
6.7小結
第7章 Bootstrap的樣式設計
7.1字體
7.1.1標題
7.1.2全局字體和段落
7.2表格
7.2.1基本用法
7.2.2表格的附加樣式
7.2.3為表格行或單元格添加狀態標識
7.2.4響應式表格
7.3表單
7.4按鈕
7.4.1按鈕的基本樣式
7.4.2調節按鈕大小
7.4.3塊級按鈕
7.4.4為按鈕設置不可點擊樣式
7.5圖片
7.5.1圖片類
7.5.2響應式圖片
7.6Bootstrap工具類
7.6.1響應式工具
7.6.2工具類
7.7實戰：Bootstrap響應式頁面V2.0
7.8小結
第8章 Bootstrap的組件設計
8.1下拉菜單
8.2按鈕組
8.2.1垂直排列的按鈕組
8.2.2兩端對齊的按鈕組
8.2.3嵌套按鈕組
8.3input控件組
8.3.1最常見的搜索框
8.3.2帶提示的搜索框
8.4導航
8.4.1膠囊式導航
8.4.2面包屑導航
8.4.3頭部導航
8.5列表組
8.6分頁
8.6.1普通的分頁
8.6.2上一頁／下一頁
8.7標簽
8.8面板
8.9進度條
8.10縮略圖
8.11實戰：Bootstrap響應式頁面V3.0
8.12小結
第9章 Bootstrap的特效設計
9.1模態對話框
9.2標簽頁切換
9.3TbOtip
9.4彈出框
9.5折疊
9.6幻燈片
9.7實戰：Bootstrap響應式頁面V4.0
9.8小結
第10章 使用Bootstrap實現一個百度貼吧后台
10.1確定后台管理的需求
10.2設計頁面布局
10.2.1引入Bootstrap3框架
10.2.2實現頁面布局代碼
10.3設計導航欄
10.3.1構建導航的整體架構
10.3.2設計標題和導航鏈接
10.3.3實現搜索框和通知系統
10.3.4實現管理員的登錄信息
10.3.5構建響應式導航
10.4設計左側邊欄
10.5設計主功能部分
10.5.1主功能的頭部
10.5.2主功能的帖子列表
10.6小結
第11章 使用HTML5設計扁平化的公司主頁
11.1響應式設計的關鍵
11.2導航欄的設計
11.2.1列表的實現
11，2.2彈出式菜單的實現
11.3主功能部分的設計
11.3.1什麼是視差滾動效果
11.3.2視差效果的實現
11.3.3圖文列表的實現
11.4小結
附錄 CSS3選擇器使用一覽
fl.l標簽選擇器
fl.2類選擇器
fl.3id選擇器
fl.4通配符選擇器
fl.5子元素選擇器
fl.6后代元素選擇器
fl.7相鄰元素選擇器
fl.8屬性選擇器
fl.9組選擇器
fl.10復合選擇器
fl.ll結構化偽類
fl.12目標偽類：target
fl.13狀態偽類
fl.14否定偽類：not（S）
