1、CSS設(shè)計徹底研究,第0課 CSS設(shè)計徹底研究簡介,CSS嶄新的“老技術(shù)” CSS帶來的好處： CSS使頁面載入更快； CSS可以降低網(wǎng)站的流量費用； CSS使設(shè)計師在修改設(shè)計時更有效率，而代價更低； CSS使整個站點保持視覺的一致性； CSS使站點可以更好地被搜索引擎找到； CSS使站點對瀏覽者和瀏覽器更具親和力； 在世界上越來越多人采用 Web 標(biāo)準(zhǔn)時，掌握CSS可以提高設(shè)計師的職場競爭實力。,第0課 CSS設(shè)計徹底研究簡介,面向讀者 本書面向的讀者，需要兩點基本要求： 1：具有一定網(wǎng)頁制作基礎(chǔ)的讀者，希望讀者已經(jīng)對HTML的基本元素有所了解。 2：具有鉆研的精神和熱情。 其中第一點權(quán)重占

2、10%，第2點權(quán)重占90%。源碼網(wǎng)：,第0課 CSS設(shè)計徹底研究簡介,“授人以魚” 與 “授人以漁”,第0課 CSS設(shè)計徹底研究簡介,第1章：介紹(X)HTML和CSS相關(guān)的核心基礎(chǔ)知識。 第2章：向讀者展示CSS能夠給網(wǎng)頁設(shè)計帶來的效果。 第3章：深入講解CSS的核心機制盒子模型。 第4章：講解CSS布局的重點和難點浮動和定位。 第5章：介紹文字和圖像的排版。 第6章：介紹了鏈接和導(dǎo)航相關(guān)的設(shè)置方法。 第7章：制作比較簡單的豎直排列的導(dǎo)航菜單。 第8章：制作復(fù)雜一些的水平排列的導(dǎo)航菜單。 第9章：制作兩級的下拉菜單。,第0課 CSS設(shè)計徹底研究簡介,第10章：介紹了對表格的樣式的設(shè)置方法，通

3、過制作復(fù)雜的多模式日歷。 第11章：深入講解了制作圓角框的多種方法，深入分析了不同方法的特點和使用范圍。 第12章：介紹了在近年出現(xiàn)的一些新的網(wǎng)頁元素的制作方法，例如Tab面板、折疊面板、伸縮面板等等。 第13和14章：全面地歸納和總結(jié)了不同形式布局的設(shè)計方法，并給出全面的案例。 第15至17章：以CSS禪意花園的作品為例，在研究成功作品的基礎(chǔ)上，制作了自己的CSS禪意花園作品，從而演示了對整體頁面的布局方法。,第0課 CSS設(shè)計徹底研究簡介,學(xué)習(xí)資料 CSS設(shè)計徹底研究即將出版 精通CSS+DIV網(wǎng)頁樣式與布局 ,第1章 (X)HTML與CSS核心基礎(chǔ),HTML與CSS的關(guān)系 HTML與XH

4、TML DOCTYPE（文檔類型）的含義與選擇 ,第1章 (X)HTML與CSS核心基礎(chǔ),XHTML與HTML的重要區(qū)別 1. 在XHTML中標(biāo)記名稱必須小寫 2. 在XHTML中屬性名稱必須小寫 3. 在XHTML中標(biāo)記必須嚴格嚴格嵌套 4. 在XHTML中標(biāo)記必須封閉 5. 在XHTML中，即使是空元素的標(biāo)記也必須封閉 6. 在XHTML中屬性值用雙引號括起來 7. 在XHTML中屬性值必須使用完整形式 8. 在XHTML中，應(yīng)該區(qū)分“內(nèi)容標(biāo)記”與“結(jié)構(gòu)標(biāo)記”,第1章 (X)HTML與CSS核心基礎(chǔ),在HTML中引入CSS的方法 行內(nèi)式 This is a line of Text. 內(nèi)嵌

5、式 h1 color:white; background-color:blue ,第1章 (X)HTML與CSS核心基礎(chǔ),在HTML中引入CSS的方法 導(dǎo)入式 importmystyle.css; 鏈接式 ,第1章 (X)HTML與CSS核心基礎(chǔ),基本CSS選擇器 含義和作用 標(biāo)記選擇器 類別選擇器 ID選擇器,第1章 (X)HTML與CSS核心基礎(chǔ),復(fù)合選擇器 “交集”選擇器 div.special div#special “并集”選擇器 div, h1.first, p.specia 后代選擇器 div h1.first span.firstLetter,第1章 (X)HTML與CSS核心

6、基礎(chǔ),CSS的繼承特性 (1315.htm),第1章 (X)HTML與CSS核心基礎(chǔ),CSS的層疊特性 (16.htm) 行內(nèi)樣式 ID樣式 類別樣式 標(biāo)記樣式 這是第1行文本 這是第2行文本 這是第3行文本 這是第4行文 這是第5行文本,第2課 “CSS禪意花園”, 如何查找作品,第2課 “CSS禪意花園”, 郊野兩列布局 像素畫三列布局 百合池塘三列布局變體 郁金香多列布局 日與夜包含圓角的設(shè)計 Si6包含傾斜的設(shè)計,第2課 “CSS禪意花園”, 如何查找作品 谷香食品主題設(shè)計 城市建筑主題設(shè)計 “卡通版”禪意花園特色效果 收音機特色效果 殺手風(fēng)格特色效果 海底世界特色效果 博物館特色設(shè)計

7、 劇院效果特色效果,第3課 深入理解盒子模型,什么是“模型”本質(zhì)特征的抽象 布局的“模型”,第3課 深入理解盒子模型,什么是“模型”本質(zhì)特征的抽象 布局的“模型”,第3課 深入理解盒子模型,div border-width:6px; border-color:#000000; margin:20px; padding:5px; background-color:#FFFFCC; ,第3課 深入理解盒子模型,屬性值的簡寫形式 方法是按照規(guī)定的順序，給出2個、3個或者4個屬性值，它們的含義將有所區(qū)別，具體含義如下： 如果給出2個屬性值，前者表示上下邊框的屬性，后者表示左右邊框的屬性； 如果給出3個

8、屬性值，前者表示上邊框的屬性，中間的數(shù)值表示左右邊框的屬性，后者表示下邊框的屬性； 如果給出4個屬性值，依次表示上、右、下、左邊框的屬性，即順時針排序。,第3課 深入理解盒子模型,屬性值的簡寫形式 border-color: red green border-width:1px 2px 3px; border-style: dotted dashed solid double;,第3課 深入理解盒子模型,內(nèi)邊距（padding） #outerBox width: 128px; height: 128px; padding: 20px 20px 10px; /*上 左右 下*/ padding-

9、left: 10px; border: 10px gray dashed; ,第3課 深入理解盒子模型,外邊距（margin） #outerBox width: 128px; height: 128px; padding: 20px 20px 10px; /*上 左右 下*/ padding-left: 10px; border: 10px gray dashed; body border:1px black solid; background:#cc0; ,第3課 深入理解盒子模型,HTML與DOM,第3課 深入理解盒子模型,標(biāo)準(zhǔn)文檔流,第3課 深入理解盒子模型,標(biāo)記與標(biāo)記 div：塊級元素

10、 （block） span：行內(nèi)元素（inline）,第3課 深入理解盒子模型,盒子在標(biāo)準(zhǔn)流中的定位原則 實驗1行內(nèi)元素之間的水平margin span.left margin-right:30px; background-color:#a9d6ff; span.right margin-left:40px; background-color:#eeb0b0; ,第3課 深入理解盒子模型,盒子在標(biāo)準(zhǔn)流中的定位原則 實驗2塊級元素之間的豎直margin 塊元素1 塊元素2 ,第3課 深入理解盒子模型,盒子在標(biāo)準(zhǔn)流中的定位原則 實驗3嵌套盒子之間的margin,第3課 深入理解盒子模型, 第1個列

11、表的第1個目內(nèi)容 第1個列表的第2個項目內(nèi)容，內(nèi)容更長一些，目的是演示自動折行的效果。 第2個列表的第1個項目內(nèi)容 第2個列表的第2個項目內(nèi)容，內(nèi)容更長一些，目的是演示自動折行的效果。 ,CSS中的幾何題 ul background: #ddd; margin: 15px 15px 15px 15px; padding: 5px 5px 5px 5px; li color: black; background: #aaa margin: 20px 20px 20px 20px; padding: 10px 0px 10px 10px; list-style: none li.withborde

12、r border-style: dashed; border-width: 5px; border-color: black; margin-top:20px； ,第3課 深入理解盒子模型,CSS中的幾何題,第3課 深入理解盒子模型,盒子的浮動 準(zhǔn)備代碼,第3課 深入理解盒子模型,盒子的浮動 實驗1設(shè)置第1個浮動的div,第3課 深入理解盒子模型,盒子的浮動 實驗2設(shè)置第2個浮動的div,第3課 深入理解盒子模型,盒子的浮動 實驗3設(shè)置第3個浮動的div,第3課 深入理解盒子模型,盒子的浮動 實驗4改變浮動的方向,第3課 深入理解盒子模型,盒子的浮動 實驗5再次改變浮動的方向,第3課 深入理解

13、盒子模型,盒子的浮動 實驗6全部向左浮動,第3課 深入理解盒子模型,盒子的浮動 實驗7使用clear屬性清除浮動的影響,第3課 深入理解盒子模型,盒子的浮動 實驗8擴展盒子的高度,第4課 盒子的浮動與定位,盒子的定位 廣義的“定位”：當(dāng)提到把希望某個元素放到某個位置的時候，這個動作可以稱為定位操作，可以使用任何CSS規(guī)則來實現(xiàn)，這就是泛指的一個網(wǎng)頁排版中的定位操作，使用傳統(tǒng)的表格排版時，同樣存在定為的問題。 狹義的“定位”：在CSS中有一個非常重要的屬性position，這個單詞要翻譯為中文，也是定位的意思，然而要使用CSS進行定位操作的手段，并不僅僅通過擇個屬性來實現(xiàn)，因此不要把把二者混淆。

14、,第4課 盒子的浮動與定位,盒子的定位 static：這是默認的屬性值，也就是該盒子按照標(biāo)準(zhǔn)流（包括浮動方式）進行布局。 relative：稱為相對定位，使用相對定位的盒子的位置根據(jù)常以標(biāo)準(zhǔn)流的排版方式為基礎(chǔ)，然后使盒子相對于它在原本的標(biāo)準(zhǔn)位置偏移指定的距離。相對定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它。 absolute：絕對定位，盒子的位置以他的包含框為基準(zhǔn)進行偏移。絕對定位的框從標(biāo)準(zhǔn)流中脫離。這意味著它們對其后的兄弟盒子的定位沒有影響，其他的盒子就好形這個盒子不存在一樣。 fixed：稱為固定定位，它和絕對定位類似，只是以瀏覽器窗口為基準(zhǔn)，進行定位。,第4課 盒子的浮動與

15、定位,盒子的定位 static：這是默認的屬性值，也就是該盒子按照標(biāo)準(zhǔn)流（包括浮動方式）進行布局。,第4課 盒子的浮動與定位,盒子的定位 Relative：稱為相對定位，使用相對定位的盒子的位置根據(jù)常以標(biāo)準(zhǔn)流的排版方式為基礎(chǔ)，然后使盒子相對于它在原本的標(biāo)準(zhǔn)位置偏移指定的距離。相對定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它。,第4課 盒子的浮動與定位,盒子的定位 Absolute：絕對定位，盒子的位置以他的包含框為基準(zhǔn)進行偏移。絕對定位的框從標(biāo)準(zhǔn)流中脫離。這意味著它們對其后的兄弟盒子的定位沒有影響，其他的盒子就好形這個盒子不存在一樣。,第4課 盒子的浮動與定位,盒子的定位 Fixe

16、d：稱為固定定位，它和絕對定位類似，只是以瀏覽器窗口為基準(zhǔn)，進行定位。,第4課 盒子的浮動與定位,盒子的display屬性 Box-1 Box-2 Box-3 Box-4 Box-5 Box-6 Box-7 Box-7 ,第4課 盒子的浮動與定位,盒子的display屬性 Box-1 Box-2 Box-3 Box-4 Box-5 Box-6 Box-7 Box-8 ,第5課 介紹文字和圖像的排版,CSS文字樣式 準(zhǔn)備網(wǎng)頁 設(shè)置字體 文字大小 行高 文字顏色與背景顏色 文字加粗、傾斜與大小寫 文字的裝飾效果 文字的水平對齊方式 文字布局 段落的垂直對齊方式,第5課 介紹文字和圖像的排版,CSS

17、圖像樣式 5.2.1 基本設(shè)置 5.2.1 背景圖像 5.2.1 標(biāo)題的圖像替換,第5課 介紹文字和圖像的排版,CSS圖像陰影 基本設(shè)置 柔邊陰影 IE6兼容,第5課 介紹文字和圖像的排版,CSS圖像陰影,第6課 鏈接與導(dǎo)航,動態(tài)超鏈接 a:link, a:visited text-decoration:none; a:hover, a:active text-decoration:underline;,第6課 鏈接與導(dǎo)航,按鈕式超鏈接,第6課 鏈接與導(dǎo)航,浮雕背景超鏈接,第6課 鏈接與導(dǎo)航,讓下劃線動起來,第6課 鏈接與導(dǎo)航,簡單的豎直排列菜單,第6課 鏈接與導(dǎo)航,橫豎自由轉(zhuǎn)換菜單,第7課

18、豎直排列的導(dǎo)航菜單,雙豎線菜單,第7課 豎直排列的導(dǎo)航菜單,雙斜角橫線菜單,第7課 豎直排列的導(dǎo)航菜單,立體菜單,第7課 豎直排列的導(dǎo)航菜單,箭頭菜單,第7課 豎直排列的導(dǎo)航菜單,帶說明信息的菜單,第8課 水平排列的導(dǎo)航菜單,自適應(yīng)的水平菜單,第8課 水平排列的導(dǎo)航菜單,自適應(yīng)的斜角水平菜單,第8課 水平排列的導(dǎo)航菜單,應(yīng)用滑動門技術(shù)的玻璃效果菜單,第8課 水平排列的導(dǎo)航菜單,三狀態(tài)玻璃效果菜單（雙層滑動門應(yīng)用）,第8課 水平排列的導(dǎo)航菜單,不使用圖像的圓角菜單,第8課 水平排列的導(dǎo)航菜單,會跳起的多彩菜單,第9課 下拉菜單,第1步,第9課 下拉菜單,第2步,第9課 下拉菜單,第3步,第9課

19、下拉菜單,第4步,第9課 下拉菜單,第5步,第9課 下拉菜單,第6步,第10課 表格也精彩,HTML結(jié)構(gòu),第10課 表格也精彩,Excel方式二維變色提示的表格,第10課 表格也精彩,三種顯示模式的日歷,第10課 表格也精彩,三種顯示模式的日歷,第10課 表格也精彩,三種顯示模式的日歷,第11課 高級網(wǎng)頁元素,Tab面板,第11課 高級網(wǎng)頁元素,折疊面板,第11課 高級網(wǎng)頁元素,伸縮面板,第12課 圓角設(shè)計,示例,第12課 圓角設(shè)計,固定寬度圓角框 兩背景圖像法,第12課 圓角設(shè)計,固定寬度圓角框 帶邊框的固定寬度圓角框,第12課 圓角設(shè)計,固定寬度圓角框 單背景圖象的帶邊框固定寬度圓角框,第

20、12課 圓角設(shè)計,不固定寬度的圓角框,第12課 圓角設(shè)計,“4圖像”法, UNfixed Rounded 這是一個不固定寬度的圓角框，由于是寬度不固定，因此制作起來復(fù)雜一些。這個圓角框的上下隨著內(nèi)容增多可以自由伸展，圓角不會被破壞。此外，設(shè)置為不同的寬度，也同樣適用。 ,第12課 圓角設(shè)計,“5圖像”二維滑動門經(jīng)典圓角框,丹麥的設(shè)計師Sren Madsen,“A List Apart”的第165期,第12課 圓角設(shè)計,“5圖像”二維滑動門經(jīng)典圓角框,第12課 圓角設(shè)計,“5圖像”二維滑動門經(jīng)典圓角框,第13課 固定寬度局,CSS排版觀念 1-2-1布局,第13課 固定寬度局,1-3-1布局,第

21、13課 固定寬度局,1-(1-2)+1)-1布局,第13課 固定寬度局,1-2-1布局實現(xiàn)方法,第13課 固定寬度局,1-(1-2)+1)-1布局實現(xiàn)方法,第13課 固定寬度局,魔術(shù)布局,第14課 可變寬度布局剖析與制作,單列布局,第14課 可變寬度布局剖析與制作,兩列布局,第14課 可變寬度布局剖析與制作,三列布局,第14課 可變寬度布局剖析與制作,兩列等比例布局,#header,#pagefooter,#container margin:0 auto; width：760px; /*刪除原來的固定寬度*/ width:85%; /*改為比例寬度*/ #content float:right

22、; width：500px; /*刪除原來的固定寬度*/ width:66%; /*改為比例寬度*/ #side float:left; width：260px; /*刪除原來的固定寬度*/ width:33%; /*改為比例寬度*/ ,第14課 可變寬度布局剖析與制作,兩列等比例布局,第14課 可變寬度布局剖析與制作,兩列等比例布局,第14課 可變寬度布局剖析與制作,1-2-1單列變寬布局,第14課 可變寬度布局剖析與制作,1-2-1單列變寬布局改進浮動法,#header,#pagefooter,#container margin:0 auto; width:85%; #contentWrap margin-right:-300px; float:left; width:100%; #content margin-right:300px; #side float:right; width:300px; #pagefooter