css設計徹底研究-展示頁
2025-07-31 08:12本頁面
【正文】 面地歸納和總結(jié)了不同形式布局的設計方法，并給出全面的案例。 ? 第 11章：深入講解了制作圓角框的多種方法，深入分析了不同方法的特點和使用范圍。 ? 第 9章：制作兩級的下拉菜單。 ? 第 7章：制作比較簡單的豎直排列的導航菜單。 ? 第 5章：介紹文字和圖像的排版。 ? 第 3章：深入講解 CSS的核心機制 ——盒子模型。 源碼網(wǎng) ： 第 0課 《 CSS設計徹底研究 》 簡介 “授人以魚” 與 “授人以漁” 第 0課 《 CSS設計徹底研究 》 簡介 ? 第 1章：介紹 (X)HTML和 CSS相關的核心基礎知識。 2：具有鉆研的精神和熱情。《 CSS設計徹底研究 》 第 0課 《 CSS設計徹底研究 》 簡介 CSS——嶄新 的“ 老 技術” CSS帶來的好處： ? CSS使頁面載入更快； ? CSS可以降低網(wǎng)站的流量費用； ? CSS使設計師在修改設計時更有效率，而代價更低； ? CSS使整個站點保持視覺的一致性； ? CSS使站點可以更好地被搜索引擎找到； ? CSS使站點對瀏覽者和瀏覽器更具親和力； ? 在世界上越來越多人采用 Web 標準時，掌握 CSS可以提高設計師的職場競爭實力。 第 0課 《 CSS設計徹底研究 》 簡介 面向讀者 本書面向的讀者，需要兩點基本要求： 1：具有一定網(wǎng)頁制作基礎的讀者，希望讀者已經(jīng)對 HTML的基本元素有所了解。 其中第一點權重占 10%，第 2點權重占 90%。 ? 第 2章：向讀者展示 CSS能夠給網(wǎng)頁設計帶來的效果。 ? 第 4章：講解 CSS布局的重點和難點 ——浮動和定位。 ? 第 6章：介紹了鏈接和導航相關的設置方法。 ? 第 8章：制作復雜一些的水平排列的導航菜單。 第 0課 《 CSS設計徹底研究 》 簡介 ? 第 10章：介紹了對表格的樣式的設置方法，通過制作復雜的多模式日歷。 ? 第 12章：介紹了在近年出現(xiàn)的一些新的網(wǎng)頁元素的制作方法，例如 Tab面板、折疊面板、伸縮面板等等。 ? 第 15至 17章：以 CSS禪意花園的作品為例，在研究成功作品的基礎上，制作了自己的 CSS禪意花園作品，從而演示了對整體頁面的布局方法。backgroundcolor:blue This is a line of Text./h1 ? 內(nèi)嵌式 style type=text/css h1{ color:white。 /style ? 鏈接式 link href= rel=stylesheet type=text/css / 第 1章 (X)HTML與 CSS核心基礎 ? 基本 CSS選擇器 ? 含義和作用 ? 標記選擇器 ? 類別選擇器 ? ID選擇器 h1 color: red。 { } 選擇器 屬性 值 屬性 值 聲明 聲明 第 1章 (X)HTML與 CSS核心基礎 ? 復合選擇器 ? “交集 ”選擇器 {……} divspecial {……} ? “并集 ”選擇器 div, , {……} ? 后代選擇器 div {……} 第 1章 (X)HTML與 CSS核心基礎 ? CSS的繼承特性 (13~) h t m lh e a db o d yt i t l e h 1 p u ll ipl iu l o lu ll il il il il i l il il i l i第 1章 (X)HTML與 CSS核心基礎 ? CSS的層疊特性 () 行內(nèi)樣式 ID樣式 類別樣式 標記樣式 p 這是第 1行文本 /p p class=red這是第 2行文本 /p p id=line3 class=red這是第 3行文本 /p p style=color:orange。 bordercolor:000000。 padding:5px。 } 第 3課 深入理解盒子模型 ? 屬性值的簡寫形式 ? 方法是按照規(guī)定的順序，給出 2個、 3個或者 4個屬性值，它們的含義將有所區(qū)別，具體含義如下： ? 如果給出 2個屬性值，前者表示上下邊框的屬性，后者表示左右邊框的屬性； ? 如果給出 3個屬性值，前者表示上邊框的屬性，中間的數(shù)值表示左右邊框的屬性，后者表示下邊框的屬性； ? 如果給出 4個屬性值，依次表示上、右、下、左邊框的屬性，即順時針排序。 borderstyle: dotted dashed solid double。 height: 128px。 /*上 左右 下 */ paddingleft: 10px。 } 第 3課 深入理解盒子模型 ? 外邊距（ margin） outerBox{ width: 128px。 padding: 20px 20px 10px。 border: 10px gray dashed。 background:cc0。 backgroundcolor:a9d6ff。 backgroundcolor:eeb0b0。塊元素 1/div div style=margintop:30px。 /li /ul ul li第 2個列表的第 1個項目內(nèi)容 /li li class=withborder第 2個列表的第 2個項目內(nèi)容，內(nèi)容更長一些，目的是演示自動折行的效果。 margin: 15px 15px 15px 15px。 } li { color: black。 padding: 10px 0px 10px 10px。 borderwidth: 5px。 margintop:20px； } 第 3課 深入理解盒子模型 ? CSS中的幾何題 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 準備代碼 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 實驗 1——設置第 1個浮動的 div 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 實驗 2——設置第 2個浮動的 div 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 實驗 3——設置第 3個浮動的 div 第 3課
化學相關推薦
鄂ICP備17016276號-1