第2章-網(wǎng)頁樣式-資料下載頁
2025-08-16 02:27本頁面
【正文】 允許浮動元素出現(xiàn)在兩側(cè) img { clear:both。 } 示例 清除兩側(cè)浮動 清除左右浮動 依次清除文本的左右浮動 .layer04 { border:1px 666 dashed。 fontsize:12px。 lineheight:23px。 clear:left。 } .layer04 { border:1px 666 dashed。 fontsize:12px。 lineheight:23px。 clear:right。 } 清除左浮動 清除右浮動 清除兩測浮動 清除兩側(cè)浮動 示例 .layer01 { border:1px F00 dashed。 float:left。 } r04 borde 666 dashed。fontsize:12px。 lineheight:23px。 clear:both。 } 溢出處理 overflow屬性 屬性值 說明 visible 默認值。內(nèi)容不會被修剪，會呈現(xiàn)在盒子之外 hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的 scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余內(nèi)容 auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容 示例 14： overflow屬性 小結(jié) 網(wǎng)頁中常用的布局類型為國字型和拐角型。 學習使用 float屬性布局網(wǎng)頁和定位網(wǎng)頁元素。 使用 clear屬性清除浮動影響。 使用 clear和 overflow屬性擴展盒子高度。 使用 overflow屬性處理溢出內(nèi)容。 74/30 position屬性 為什么需要 position屬性？ 提問 進行復(fù)雜的元素定位 浮于頁面之上的提示框 浮動廣告 消息提示框 第 75頁 /共 69頁 定位 position屬性 static：默認值，沒有定位 relative：相對定位 absolute：絕對定位 fixed：固定定位 static定位 static屬性值 沒有定位，以標準流方式顯示 相對定位 relative屬性值 相對自身原來位置進行偏移 偏移設(shè)置： top、 left、 right、 bottom 示例 first { backgroundcolor:FC9。 border:1px B55A00 dashed。 position:relative。 top:20px。 left:20px。 } third { C5DECC。 395E4F dashed。 right:20px。 bottom:30px。 相對定位元素的規(guī)律 設(shè)置相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置。 設(shè)置相對定位的盒子仍在標準流中，它對父級盒子和相鄰的盒子都沒有任何影響。 浮動元素設(shè)置相對定位 設(shè)置第二個盒子右浮動，再設(shè)置第一、第二盒子相對定位 second { backgroundcolor:CCF。 border:1px 0000A8 dashed。 float:right。 } 示例 first { backgroundcolor:FC9。 border:1px B55A00 dashed。 position:relative。 right:20px。 bottom:20px。} second { backgroundcolor:CCF。 border:1px 0000A8 dashed。 float:right。 position:relative。 left:20px。 top:20px。} 相對定位小結(jié) 設(shè)置了 position屬性值為 relative的網(wǎng)頁元素，無論是在標準流中還是在浮動流中，都不會對它的父級元素和相鄰元素有任何影響，它只針對自身原來的位置進行偏移。 絕對定位 absolute屬性值 偏移設(shè)置： left、 right、 top、 bottom 絕對定位小結(jié) 使用了絕對定位的元素以它最近的一個“已經(jīng)定位”的“祖先元素” 為基準進行偏移。如果沒有已經(jīng)定位的祖先元素，那么會以瀏覽器窗口為基準進行定位。 絕對定位的元素從標準文檔流中脫離，這意味著它們對其他元素的定位不會造成影響。 zindex屬性 在 CSS中， zindex屬性的作用是什么？ Zindex屬性控制元素堆疊時，有什么特點。 問題 用于調(diào)整定位時重疊塊的上、下位置 位于 xy軸的頁面，相當于 zindex:0 當 zindex:1時，圖片位于 xy軸的頁面之下 在 z軸上疊加的層，相當于 zindex:1 在 z軸上疊加的層，相當于 zindex:2 網(wǎng)頁元素透明度 CSS設(shè)置元素透明度 屬性 說明 舉例 opacity:x /* IE9 + etc...modern browsers */ x值為 0~1，值越小越透明 opacity:。 filter:alpha(opacity=x) /* IE 49 */ x值為 0~100，值越小越透明 filter:alpha(opacity=40)。 演示示例 16： zindex屬性 小結(jié) 使用 position屬性定位頁面元素。 position屬性值有 static、 relative、 absolute和 fixed，其中 relative和 absolute兩種定位方式是網(wǎng)頁制作中經(jīng)常使用的。 使用 zindex屬性設(shè)置定位元素的堆疊順序。 使用 opacity:x或 filter:alpha(opacity=x)方式設(shè)定網(wǎng)頁元素的透明度。 網(wǎng)站制作流程 網(wǎng)站制作流程 1 ? 美工或網(wǎng)頁設(shè)計師 ? 設(shè)計界面 2 ? 前端工程師 ? 切圖，制作靜態(tài)頁面，實現(xiàn)交互效果 3 ? 軟件工程師 ? 實現(xiàn)網(wǎng)站功能，并將功能與界面整合 4 ? 測試工程師 ? 測試網(wǎng)站性能與功能后，交付用戶使用 選擇器擴展 子元素選擇器 屬性選擇器 兄弟相鄰選擇器 第 88頁 /共 69頁 選擇器的用途 是 css的語法標準，應(yīng)用到 jquery 小程序 第 89頁 /共 69頁
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1