CSS 3 DIV網(wǎng)頁樣式與布局從入門到精通
同屬CSS 3揭秘 DIV CSS 3 入門 CSS 3 權(quán)威指南 CSS3 禪意花園 大類。本書全面系統(tǒng)地講解了CSS基礎(chǔ)理論和實際運用技術(shù),通過大量實例對CSS DIV技術(shù)、CSS核心技術(shù)、CSS實戰(zhàn)應(yīng)用進行了深入淺出的分析。。 全書分三大部分,共16章。*部分主要介紹了CSS相關(guān)基礎(chǔ)知識,包括CSS樣式設(shè)計基礎(chǔ),使用CSS設(shè)置字體和文本樣式、圖片樣式,控制背景圖像,設(shè)計列表樣式、表格樣式、表單樣式,定義鏈接樣式,使用DIV CSS布局網(wǎng)頁,CSS定位與網(wǎng)頁版式設(shè)計等;第二部分介紹了CSS新技術(shù),包括使用CSS3布局網(wǎng)頁和設(shè)計動畫;第三部分為擴展應(yīng)用部分,介紹了如何使用JavaScript控制 CSS樣式、使用CSS設(shè)計XML文檔樣式、使用CSS設(shè)計移動頁面等。
CSS 3 DIV網(wǎng)頁樣式與布局從入門到精通 配備了極為豐富的學(xué)習資源,其中配套資源:248節(jié)教學(xué)視頻(可二維碼掃描)、素材源程序;附贈的拓展學(xué)習資源:習題及面試題庫、案例庫、工具庫、網(wǎng)頁模板庫、網(wǎng)頁配色庫、網(wǎng)頁素材庫、網(wǎng)頁案例欣賞庫等。
CSS 3 DIV網(wǎng)頁樣式與布局從入門到精通
適用于CSS從入門到精通、CSS DIV從入門到精通層次讀者,也可作為各大中專院校網(wǎng)頁設(shè)計、網(wǎng)頁制作、網(wǎng)站建設(shè)、Web前端開發(fā)相關(guān)專業(yè)的教學(xué)參考用書,或相關(guān)培訓(xùn)機構(gòu)的培訓(xùn)教材。
10年開發(fā)教學(xué)經(jīng)驗,一線講師半生心血。
1.
體驗好。
幾乎每個章節(jié)都有二維碼,微信掃一掃,可以隨時隨地看視頻。
2.
資源多
從配套到拓展,資源庫一應(yīng)俱全。除了249節(jié)配套微視頻和275個實例案例外。還提供如下學(xué)習資源:
(1)習題及面試題庫(共計1000題)
(2)案例庫(各類案例4396個)
(3)工具庫(HTML參考手冊11部、CSS參考手冊10部、JavaScript參考手冊26部)
(4)網(wǎng)頁模板庫(各類模板1636個)
(5)網(wǎng)頁素材庫(17大類)
(6)網(wǎng)頁配色庫(623項)
(7)網(wǎng)頁欣賞案例庫(共計508例)
3.案例多
實例案例豐富詳盡,達到275個,邊做邊學(xué)更快捷。跟著大量案例去學(xué)習,邊學(xué)邊做,從做中學(xué),學(xué)習可以更深入、更高效。
4.入門易
遵循學(xué)習規(guī)律,入門實戰(zhàn)相結(jié)合。編寫模式采用基礎(chǔ)知識 中小實例 實戰(zhàn)案例,內(nèi)容由淺入深,循序漸進,從入門中學(xué)習實戰(zhàn)應(yīng)用,從實戰(zhàn)應(yīng)用中激發(fā)學(xué)習興趣。
5.服務(wù)快:
提供在線服務(wù),隨時隨地可交流。提供QQ群、網(wǎng)站下載等多渠道貼心快捷服務(wù)。
隨著以CSS DIV技術(shù)為核心的網(wǎng)頁標準化設(shè)計的流行,對CSS的學(xué)習也成為設(shè)計人員的必修課;诖,本書系統(tǒng)地講解了CSS的基礎(chǔ)知識和實際運用技巧,通過大量實例對CSS進行深入淺出的講解。
全書著重講解如何用CSS DIV進行網(wǎng)頁布局,注重實際操作,使讀者在學(xué)習CSS應(yīng)用技術(shù)的同時,掌握CSS DIV的精髓。另外,本書還詳細講解了CSS的外延技術(shù)細節(jié),抓住CSS3最新技術(shù),讓讀者學(xué)有所成,學(xué)以致用,提高綜合應(yīng)用能力。
本書編寫特點
系統(tǒng)深入
本書系統(tǒng)地講解了CSS層疊樣式表技術(shù)在網(wǎng)頁設(shè)計中各個方面的應(yīng)用,從為什么要用CSS開始講解,循序漸進,配合大量實例,幫助讀者奠定堅實的理論基礎(chǔ),做到知其然,知其所以然。
案例豐富
書中設(shè)置大量應(yīng)用案例、示例,重點強調(diào)具體技術(shù)的靈活應(yīng)用,并且結(jié)合了作者長期的網(wǎng)頁設(shè)計制作和教學(xué)經(jīng)驗,使讀者真正做到學(xué)以致用。
重點突出
本書用相當?shù)钠攸c介紹了用DIV CSS進行網(wǎng)頁布局的方法和技巧,配以經(jīng)典的布局案例,幫助讀者掌握CSS最核心的應(yīng)用技術(shù)。
綜合應(yīng)用
真正的網(wǎng)頁除了外觀表現(xiàn)之外,還需要結(jié)構(gòu)標準語言和行為標準的結(jié)合,因此本書還特別講解了CSS與JavaScript、Ajax和XML的混合應(yīng)用,這些都是Web 2.0網(wǎng)站中的主要技術(shù),使讀者一并掌握高級的網(wǎng)頁制作技術(shù)。
本書內(nèi)容
本書分為3大部分,共16章,具體結(jié)構(gòu)劃分及內(nèi)容如下。
第1部分:CSS基礎(chǔ)知識,包括第1章~第11章,主要介紹了CSS相關(guān)的基礎(chǔ)知識,包括CSS樣式設(shè)計基礎(chǔ),使用CSS設(shè)置字體和文本樣式、圖片樣式、背景圖像樣式、列表樣式、表格樣式、表單樣式、鏈接樣式,使用DIV CSS布局網(wǎng)頁,使用CSS定位,網(wǎng)頁版式設(shè)計與實戰(zhàn)等。
第2部分:CSS3新技術(shù),包括第12章~第13章,主要通過對CSS3布局和動畫進行介紹,由淺入深地講解設(shè)計交互樣式和新布局的方法,幫助讀者輕松掌握DIV CSS新布局方式,制作出精美的網(wǎng)頁并搭建功能強大的網(wǎng)站。
第3部分:擴展應(yīng)用,包括第14章~第16章,主要介紹了設(shè)計可響應(yīng)的移動網(wǎng)頁、使用JavaScript控制CSS樣式、使用CSS設(shè)計XML文檔樣式等內(nèi)容。這些知識在網(wǎng)頁設(shè)計實踐中會經(jīng)常用到,因此讀者需要學(xué)習和掌握它們,并能夠綜合應(yīng)用各種技術(shù),解決復(fù)雜的網(wǎng)頁設(shè)計問題。
本書顯著特色
體驗好
二維碼掃一掃,隨時隨地看視頻。書中幾乎每個章節(jié)都提供了二維碼,讀者朋友可以通過手機微信掃一掃,隨時隨地看相關(guān)的教學(xué)視頻(若個別手機不能播放,請參考前言中的本書學(xué)習資源列表及獲取方式下載后在計算機上可以一樣觀看)。
資源多
從配套到拓展,資源庫一應(yīng)俱全。本書不僅提供了幾乎覆蓋全書的配套視頻和素材源文件,還提供了拓展的學(xué)習資源,如習題及面試題庫、案例庫、工具庫、網(wǎng)頁模板庫、網(wǎng)頁配色庫、網(wǎng)頁素材庫、網(wǎng)頁案例欣賞庫等,拓展視野、貼近實戰(zhàn),學(xué)習資源一網(wǎng)打盡!
案例多
案例豐富詳盡,邊做邊學(xué)更快捷。跟著大量的案例去學(xué)習,邊學(xué)邊做,從做中學(xué),使學(xué)習更深入、更高效。
入門易
遵循學(xué)習規(guī)律,入門與實戰(zhàn)相結(jié)合。本書編寫模式采用基礎(chǔ)知識 中小實例 實戰(zhàn)案例的形式,內(nèi)容由淺入深、循序漸進,從入門中學(xué)習實戰(zhàn)應(yīng)用,從實戰(zhàn)應(yīng)用中激發(fā)學(xué)習興趣。
服務(wù)快
提供在線服務(wù),隨時隨地可交流。本書提供QQ群、網(wǎng)站下載等多渠道貼心服務(wù)。
本書學(xué)習資源列表及獲取方式
本書的學(xué)習資源十分豐富,全部資源分布如下:
配套資源
(1)本書的配套同步視頻,共計249節(jié)(可用二維碼掃描觀看或從下述的網(wǎng)站下載)。
(2)本書的素材及源程序,共計275項。
拓展學(xué)習資源
(1)習題及面試題庫(共計1 000題)。
(2)案例庫(各類案例4 396個)。
(3)工具庫(HTML參考手冊11部、CSS參考手冊10部、JavaScript參考手冊26部)。
(4)網(wǎng)頁模板庫(各類模板1 636個)。
(5)網(wǎng)頁素材庫(17大類)。
(6)網(wǎng)頁配色庫(623項)。
(7)網(wǎng)頁案例欣賞庫(共計508例)。
以上資源的獲取及聯(lián)系方式
(1)登錄網(wǎng)站xue.bookln.cn,輸入書名,搜索到本書后下載。
(2)登錄中國水利水電出版社的官方網(wǎng)站:www.waterpub.com.cn/softdown/,找到本書后,根據(jù)相關(guān)提示下載。
(3)加入本書學(xué)習QQ群:621135618、625186596、625853788、626360108,讀者可以單擊QQ窗口右側(cè)的群應(yīng)用下的文件,找到相關(guān)資源后下載。
(4)讀者朋友還可通過電子郵件weilaitushu@126.com、945694286@qq.com與我們聯(lián)系。
本書約定
為了給讀者提供更多的學(xué)習資源,同時彌補篇幅有限的遺憾,本書提供了很多參考鏈接,部分書中無法詳細介紹的問題都可以通過這些鏈接找到答案。這些鏈接地址僅供參考,因為這些鏈接地址會因時間而有所變動或調(diào)整,本書無法保證所有這些地址是長期有效的。確有需要,請加入本書QQ群進行咨詢。
本書所列出的插圖可能會與讀者實際環(huán)境中的操作界面有所差別,這可能是由于操作系統(tǒng)平臺、瀏覽器版本等不同而引起的,在此特別說明,讀者應(yīng)該以實際情況為準。
本書適用對象
本書適用于網(wǎng)頁設(shè)計、網(wǎng)頁制作、網(wǎng)站建設(shè)的入門者和有一定基礎(chǔ)的讀者,也適用于高等院校,尤其是職業(yè)院校相關(guān)專業(yè)的學(xué)生及社會培訓(xùn)機構(gòu)的學(xué)員等。
關(guān)于作者
未來科技是由一群熱愛Web開發(fā)的青年骨干教師組成的一個松散組織,主要從事Web開發(fā)、教學(xué)培訓(xùn)、教材開發(fā)等業(yè)務(wù)。該群體編寫的同類圖書在很多網(wǎng)店上的銷量名列前茅,讓數(shù)十萬的讀者輕松跨進了Web開發(fā)的大門,為Web開發(fā)的普及和應(yīng)用做出了積極貢獻。
參與本書編寫的人員有:劉望、彭方強、鄒仲、謝黨華、雷海蘭、郭靖、馬林、劉金、吳云、趙德志、張衛(wèi)其、李德光、劉坤、楊艷、顧克明、班琦、蔡霞英、曾德劍、曾錦華、曾蘭香、曾世宏、曾旺新、曾偉、常星、陳娣、陳鳳娟、陳鳳儀、陳福妹、陳國鋒、陳海蘭、陳華娟、陳金清、陳馬路、陳石明、陳世超、陳世敏、陳文廣等。
編 者
第1章 CSS樣式設(shè)計基礎(chǔ)
視頻講解:27個 示例:37個
1.1 網(wǎng)頁設(shè)計需要學(xué)什么
1.1.1 學(xué)習HTML
1.1.2 掌握DIV布局
1.1.3 學(xué)習CSS
1.1.4 學(xué)習JavaScript
1.2 設(shè)計良好的結(jié)構(gòu)
1.2.1 一個簡單的文檔必須包含的
內(nèi)容
1.2.2 認識標簽
1.2.3 選用標簽
1.2.4 使用div和span
1.2.5 使用id和class
1.2.6 設(shè)置文檔類型
1.2.7 認識顯示模式
1.3 初識CSS
1.3.1 CSS發(fā)展歷史
1.3.2 CSS優(yōu)勢
1.3.3 CSS樣式
1.3.4 應(yīng)用CSS樣式
1.3.5 CSS樣式表
1.3.6 導(dǎo)入樣式表
1.3.7 CSS注釋和格式化
1.3.8 設(shè)計第一個樣式示例
1.4 CSS選擇器
1.4.1 認識CSS選擇器
1.4.2 標簽選擇器
1.4.3 ID選擇器
1.4.4 類選擇器
1.4.5 指定選擇器
1.4.6 包含選擇器
1.4.7 子選擇器
1.4.8 相鄰選擇器
1.4.9 兄弟選擇器
1.4.10 分組選擇器
1.4.11 偽選擇器
1.4.12 屬性選擇器
1.4.13 通用選擇器
1.5 CSS特性
1.5.1 層疊性
1.5.2 繼承性
第2章 使用CSS設(shè)置字體和文本樣式
視頻講解:19個 示例:21個
2.1 字體和文本樣式基礎(chǔ)
2.1.1 字體類型
2.1.2 字體大小
2.1.3 字體顏色
2.1.4 字體粗細
2.1.5 斜體字體
2.1.6 裝飾線
2.1.7 字體大小寫
2.1.8 文本水平對齊
2.1.9 文本垂直對齊
2.1.10 字間距和詞間距
2.1.11 行高
2.1.12 首行縮進
2.2 實戰(zhàn)案例
2.2.1 模擬百度Logo樣式
2.2.2 定義標題樣式
2.2.3 定義正文樣式
2.2.4 設(shè)計文本塊樣式
2.2.5 設(shè)計新聞版面
2.2.6 設(shè)計圖文版面
2.2.7 設(shè)計單頁版式
第3章 使用CSS設(shè)置圖片樣式
視頻講解:14個 示例:11個
3.1 圖片樣式基礎(chǔ)
3.1.1 圖片邊框
3.1.2 圖片大小
3.1.3 圖片對齊
3.1.4 半透明圖片
3.1.5 圓角圖片
3.1.6 陰影圖片
3.2 實戰(zhàn)案例
3.2.1 設(shè)計鑲邊效果
3.2.2 設(shè)計水印效果
3.2.3 圖文混排
3.2.4 圖片布局
3.2.5 多圖版式
3.2.6 圓角欄目
3.2.7 設(shè)計個人簡歷1
3.2.8 設(shè)計個人簡歷2
第4章 使用CSS控制背景圖像
視頻講解:15個 示例:13個
4.1 背景樣式基礎(chǔ)
4.1.1 背景顏色
4.1.2 版塊配色
4.1.3 設(shè)置背景圖像
4.1.4 背景平鋪
4.1.5 背景定位
4.1.6 固定背景
4.1.7 定位參考
4.1.8 背景裁剪
4.1.9 背景大小
4.1.10 多背景圖
4.2 實戰(zhàn)案例
4.2.1 設(shè)計帶花紋的網(wǎng)頁邊框
4.2.2 設(shè)計圓邊頁面
4.2.3 設(shè)計分欄版式
4.2.4 設(shè)計滑動門菜單
4.2.5 設(shè)計焦點圖
第5章 使用CSS定義鏈接樣式
視頻講解:12個 示例:11個
5.1 鏈接樣式基礎(chǔ)
5.1.1 設(shè)置鏈接樣式
5.1.2 定義下劃線樣式
5.1.3 定義類型標識樣式
5.1.4 定義按鈕樣式
5.1.5 案例:基本鏈接樣式應(yīng)用
5.2 實戰(zhàn)案例
5.2.1 鼠標光標樣式
5.2.2 文檔類型提示
5.2.3 工具提示樣式
5.2.4 立體菜單欄
5.2.5 設(shè)計CSS Sprites導(dǎo)航欄
5.2.6 選項卡
5.2.7 瀏覽大圖
第6章 使用CSS設(shè)計列表樣式
視頻講解:12個 示例:6個
6.1 列表樣式基礎(chǔ)
6.1.1 設(shè)置項目符號
6.1.2 自定義項目圖標
6.1.3 定義列表項目的版式
6.2 實戰(zhàn)案例
6.2.1 設(shè)計新聞欄目
6.2.2 設(shè)計導(dǎo)航菜單
6.2.3 設(shè)計多級菜單
6.2.4 設(shè)計列表版式
6.2.5 使用列表設(shè)計圖文混排頁面
6.2.6 設(shè)計水平滑動菜單
6.2.7 設(shè)計垂直滑動菜單
6.2.8 設(shè)計Tab面板
6.2.9 設(shè)計下拉式面板
第7章 使用CSS設(shè)計表格樣式
視頻講解:9個 示例:7個
7.1 表格樣式基礎(chǔ)
7.1.1 設(shè)置表格背景色和前景色
7.1.2 設(shè)置表格邊框
7.1.3 設(shè)置單元格邊距
7.1.4 設(shè)置表格標題的位置
7.1.5 隱藏空單元格
7.2 實戰(zhàn)案例
7.2.1 設(shè)計課程表
7.2.2 設(shè)計通訊錄
7.2.3 設(shè)計月歷
7.2.4 設(shè)計分組表格
第8章 使用CSS設(shè)計表單樣式
視頻講解:8個 示例:11個
8.1 表單樣式基礎(chǔ)
8.1.1 定義表單字體樣式
8.1.2 定義表單邊框和邊距樣式
8.1.3 定義表單背景樣式
8.2 實戰(zhàn)案例
8.2.1 定義表單樣式
8.2.2 設(shè)計下拉菜單樣式
8.2.3 設(shè)計注冊表
8.2.4 設(shè)計調(diào)查表
8.2.5 設(shè)計反饋表
第9章 使用DIV CSS布局網(wǎng)頁
視頻講解:14個 示例:14個
9.1 CSS盒模型
9.1.1 定義邊界
9.1.2 定義補白
9.1.3 定義邊框
9.1.4 定義尺寸
9.2 CSS布局基礎(chǔ)
9.2.1 定義顯示類型
9.2.2 定義顯示模式
9.2.3 網(wǎng)頁布局樣式
9.2.4 設(shè)置浮動顯示
9.2.5 清除浮動
9.2.6 浮動嵌套
9.2.7 網(wǎng)頁布局方法
9.3 實戰(zhàn)案例
9.3.1 網(wǎng)站重構(gòu)
9.3.2 設(shè)計兩列網(wǎng)頁
9.3.3 設(shè)計三列網(wǎng)頁
第10章 使用CSS定位
視頻講解:12個 示例:13個
10.1 CSS定位基礎(chǔ)
10.1.1 設(shè)置定位顯示
10.1.2 靜態(tài)定位
10.1.3 絕對定位
10.1.4 相對定位
10.1.5 固定定位
10.1.6 定位包含框
10.1.7 設(shè)置定位偏移
10.1.8 設(shè)置層疊順序
10.1.9 層疊上下文
10.2 實戰(zhàn)案例
10.2.1 畫冊式網(wǎng)頁定位
10.2.2 展廳式網(wǎng)頁定位
10.2.3 書簽式網(wǎng)頁定位
第11章 網(wǎng)頁版式設(shè)計與實戰(zhàn)
視頻講解:14個 示例:4個
11.1 HTML結(jié)構(gòu)重構(gòu)
11.1.1 設(shè)計基本結(jié)構(gòu)
11.1.2 SEO結(jié)構(gòu)優(yōu)化
11.2 單列版式
11.3 兩列版式
11.3.1 彈性版式
11.3.2 固寬版式
11.3.3 混合版式
11.4 三列版式
11.4.1 彈性版式
11.4.2 固寬版式
11.4.3 混合版式
11.4.4 多列等高
11.5 實戰(zhàn)案例
11.5.1 設(shè)計單列固寬網(wǎng)頁
11.5.2 設(shè)計單列彈性框架網(wǎng)頁
11.5.3 設(shè)計兩列彈性網(wǎng)頁
11.5.4 設(shè)計三列彈性網(wǎng)頁
第12章 使用CSS3布局網(wǎng)頁
視頻講解:15個 示例:15個
12.1 多列流動布局
12.1.1 設(shè)置列寬
12.1.2 設(shè)置列數(shù)
12.1.3 設(shè)置列間距
12.1.4 設(shè)置列邊框樣式
12.1.5 設(shè)置跨列顯示
12.1.6 設(shè)置列高度
12.2 彈性盒布局
12.2.1 定義Flexbox
12.2.2 定義伸縮方向
12.2.3 定義行數(shù)
12.2.4 定義對齊方式
12.2.5 定義伸縮項目
12.3 實戰(zhàn)案例
12.3.1 比較三種布局方式
12.3.2 設(shè)計可伸縮網(wǎng)頁模板
12.3.3 設(shè)計多列網(wǎng)頁
12.3.4 設(shè)計HTML5應(yīng)用網(wǎng)頁模板
第13章 使用CSS3設(shè)計動畫
視頻講解:23個 示例:29個
13.1 設(shè)計2D變換
13.1.1 定義旋轉(zhuǎn)
13.1.2 定義縮放
13.1.3 定義移動
13.1.4 定義傾斜
13.1.5 定義矩陣
13.1.6 定義變換原點
13.2 設(shè)計3D變換
13.2.1 定義位移
13.2.2 定義縮放
13.2.3 定義旋轉(zhuǎn)
13.3 設(shè)計過渡動畫
13.3.1 設(shè)置過渡屬性
13.3.2 設(shè)置過渡時間
13.3.3 設(shè)置延遲時間
13.3.4 設(shè)置過渡動畫類型
13.3.5 設(shè)置觸發(fā)方式
13.4 設(shè)計幀動畫
13.4.1 設(shè)置關(guān)鍵幀
13.4.2 設(shè)置動畫屬性
13.5 實戰(zhàn)案例
13.5.1 設(shè)計掛圖
13.5.2 設(shè)計高亮顯示
13.5.3 設(shè)計3D幾何體
13.5.4 設(shè)計旋轉(zhuǎn)的盒子
13.5.5 設(shè)計可折疊面板
13.5.6 設(shè)計翻轉(zhuǎn)廣告
13.5.7 設(shè)計跑步動畫
第14章 設(shè)計可響應(yīng)的移動網(wǎng)頁
視頻講解:9個 示例:7個
14.1 響應(yīng)式設(shè)計基礎(chǔ)
14.1.1 響應(yīng)式設(shè)計流程
14.1.2 設(shè)計響應(yīng)式圖片
14.1.3 定義媒體類型
14.1.4 使用@media
14.1.5 在中定義媒體查詢
14.1.6 設(shè)計響應(yīng)式布局
14.2 實戰(zhàn)案例
14.2.1 根據(jù)設(shè)備控制顯示內(nèi)容
14.2.2 設(shè)計伸縮菜單
14.2.3 設(shè)計可響應(yīng)網(wǎng)頁模板
14.2.4 設(shè)計響應(yīng)式網(wǎng)站首頁
第15章 使用JavaScript控制CSS樣式
視頻講解:39個 示例:73個
15.1 在網(wǎng)頁中使用JavaScript
15.1.1 使用