周,我們學(xué)習(xí)了運(yùn)用:hover復(fù)合選擇器,制作鼠標(biāo)懸停在導(dǎo)航欄上的樣式變化效果。在課后作業(yè)中,我要求同學(xué)們把導(dǎo)航欄放入店鋪首頁(yè),運(yùn)用:hover選擇器制作鼠標(biāo)懸停在導(dǎo)航欄的效果。
先來(lái)回顧一下知識(shí)點(diǎn)。
:hover選擇器是CSS樣式中的復(fù)合選擇符,冒號(hào)前面的內(nèi)容代表鼠標(biāo)懸停的位置。它可以作用于網(wǎng)頁(yè)中的所有元素,如超鏈接<a>、表格<table>、單元格<td>等網(wǎng)頁(yè)標(biāo)簽。在Dreamweaver操作中,我們可以通過(guò)新建CSS規(guī)則,選擇復(fù)合選擇符,輸入:hover選擇器名稱(chēng)設(shè)置樣式。在輸入名稱(chēng)時(shí),格式為“網(wǎng)頁(yè)元素名稱(chēng):hover”,例如:a:hover代表鼠標(biāo)懸停在超鏈接上的效果。
當(dāng)然網(wǎng)頁(yè)元素名稱(chēng)也可以是其他選擇符:
例如類(lèi)選擇符,.apple:hover代表鼠標(biāo)懸停在類(lèi)選擇符上的效果,當(dāng)鼠標(biāo)經(jīng)過(guò)“class=apple”的網(wǎng)頁(yè)內(nèi)容時(shí)會(huì)發(fā)生的樣式變化;ID選擇符,#orange:hover代表鼠標(biāo)懸停在ID是orange的網(wǎng)頁(yè)內(nèi)容時(shí)發(fā)生的樣式變化。
與此同時(shí),冒號(hào)前的網(wǎng)頁(yè)元素名稱(chēng)也可以進(jìn)行重組,例如要設(shè)置ID為#tb表格中的超鏈接,在鼠標(biāo)懸停時(shí)的樣式變化,我們可以把網(wǎng)頁(yè)名稱(chēng)設(shè)置為#tb a:hover。多個(gè)選擇符疊加時(shí),使用空格分隔即可。
那么問(wèn)題來(lái)了,許多同學(xué)掌握了制作單個(gè)導(dǎo)航欄的方法,一旦將導(dǎo)航欄放入整體頁(yè)面卻出現(xiàn)了很多問(wèn)題。比如小佳同學(xué)就出現(xiàn)了“當(dāng)鼠標(biāo)經(jīng)過(guò)導(dǎo)航欄時(shí),是一整排全亮,甚至連店招所在的表格也跟著發(fā)生樣式變化”的問(wèn)題。這是為什么呢?
好,接下來(lái),我們來(lái)看看小佳同學(xué)的作業(yè):
「視頻解析版本」
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
「文字解析版本」
顯然小佳的作業(yè)中,鼠標(biāo)移入導(dǎo)航欄,出現(xiàn)了一整行的變化,而非單個(gè)單元格的變化,并且頂部店招區(qū)域也出現(xiàn)了樣式變化。
當(dāng)我們檢查小佳的代碼時(shí),我們發(fā)現(xiàn):hover選擇器前的網(wǎng)頁(yè)內(nèi)容是td,這就意味著鼠標(biāo)經(jīng)過(guò)網(wǎng)頁(yè)中所有的單元格都會(huì)發(fā)生以下所設(shè)置的樣式變化。
這里的td:hover是鼠標(biāo)懸停在單元格(列)的效果。而我們之前做的是一行N列的導(dǎo)航欄,不存在其他多余單元格,因此在這個(gè)情況下我們可以用td:hover來(lái)實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)單元格的效果。
但是,你看下面的代碼,有多少個(gè)td呢?我們這里多行多列,并且你在第二行的單元格中嵌套了表格。因此,如果用td:hover,頁(yè)面中所有的td都會(huì)有鼠標(biāo)經(jīng)過(guò)的效果,因此你會(huì)發(fā)現(xiàn)整個(gè)頁(yè)面都會(huì)出現(xiàn)鼠標(biāo)經(jīng)過(guò)變紅色的效果。所以,接下來(lái),我們要思考如何把td替換一下。
:hover前的td該如何被替換呢?
方法1:
新建CSS樣式,類(lèi)型為類(lèi)選擇器(命名為.daohang,為導(dǎo)航欄鼠標(biāo)未經(jīng)過(guò)時(shí)的樣式)設(shè)置好之后,選中導(dǎo)航欄單元格,并右鍵選擇應(yīng)用。設(shè)置后代碼如下:
應(yīng)用后,你可以直接到代碼區(qū)域把原來(lái)的td替換為.daohang。也可以新建CSS規(guī)則,類(lèi)型為復(fù)合樣式,名稱(chēng)為.daohang:hover。
方法2:
將表格的名稱(chēng)(ID)設(shè)置為tb1,那么是tb1這個(gè)表格中的單元格樣式變化,因此我們可以將名稱(chēng)設(shè)置為 “#tb1 td:hover”,這樣同樣可以實(shí)現(xiàn)之前的效果。
好了,以上就是:hover選擇器在網(wǎng)頁(yè)中的應(yīng)用,你學(xué)會(huì)了么?
如果你也想試一試,可以回復(fù)關(guān)鍵詞“網(wǎng)頁(yè)”獲取圖片素材和Dreamweaver CS6軟件。
們?cè)谠O(shè)計(jì)網(wǎng)站的時(shí)候,有時(shí)候?yàn)榱梭w現(xiàn)出別具一格的風(fēng)格,往往會(huì)設(shè)計(jì)出一些特殊的風(fēng)格。這里就舉一個(gè)比較常見(jiàn)的例子 —— 傾斜的背景顏色。
在CSS中,沒(méi)有某一個(gè)屬性能夠直接實(shí)現(xiàn)傾斜的背景顏色,而是需要通過(guò)一些“手段”來(lái)實(shí)現(xiàn)。最常想到的方案就是在內(nèi)容的底部放置一個(gè)div,給這個(gè)div設(shè)定一個(gè)背景顏色,然后讓這個(gè)div傾斜一個(gè)角度,從而實(shí)現(xiàn)傾斜的背景顏色。比如像下圖所示的案例:
那么下面就來(lái)用一個(gè)基本的實(shí)例來(lái)解釋并實(shí)現(xiàn)傾斜背景的效果:
首先要說(shuō)明一下,頁(yè)面導(dǎo)航條是固定在頁(yè)面頂部的,導(dǎo)航條不會(huì)隨著頁(yè)面的滾動(dòng)而移動(dòng)。這個(gè)效果的實(shí)現(xiàn)非常簡(jiǎn)單,就是利用了 position 這個(gè)屬性的 fixed 值來(lái)實(shí)現(xiàn)的。
我下面的代碼實(shí)例中,HTML用來(lái)給頁(yè)面上添加元素,而在 CSS 部分需要精細(xì)化的設(shè)定屬性的參數(shù)值,而且需要若干個(gè)HTML標(biāo)簽的CSS來(lái)配合,從而實(shí)現(xiàn)傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來(lái)描述這些屬性的效果和目的,大家在閱讀的時(shí)候可以將 CSS 結(jié)合著 HTML 一起來(lái)理解?;蛘呖梢灾苯幽梦业倪@個(gè)實(shí)例作為一個(gè)模板來(lái)使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="navbar-bg">
<ul class="navbar">
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item sign">
<a href="https://www.baidu.com">Sign</a>
</li>
</ul>
</div>
<div class="box-bg">
<div class="box">
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
</div>
</div>
<div class="content">
<h1>This is content</h1>
</div>
<div class="footer">
<div class="footer-bg">
<ul class="list">
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
</ul>
</div>
</div>
</body>
</html>
為了讓導(dǎo)航條和其他元素都能夠與頁(yè)面的兩邊留出距離,我在實(shí)際內(nèi)容標(biāo)簽的外圍又包裹了一層div,主要在這個(gè)包裹的div里設(shè)定左右內(nèi)間距,從而實(shí)現(xiàn)兩邊留白的效果。這些外圍包裹的 div 的 class 名稱(chēng)一般都會(huì)有一個(gè)后綴 "-bg"。
在實(shí)際內(nèi)容的排列時(shí),我采用了更加方便靈活的彈性布局,這樣會(huì)相對(duì)的減少HTML和CSS的代碼量。
另外,如果想要實(shí)現(xiàn)傾斜的背景顏色,那么這些帶有 bg 后綴的 div 就是需要傾斜的標(biāo)簽。傾斜這些 div 其實(shí)很簡(jiǎn)單,只需要設(shè)定一個(gè) transform: skew(0deg, -9deg) 這樣的CSS代碼即可,但是我們可以想象一下,原本是長(zhǎng)方形的 div 按照 Y 軸逆時(shí)針旋轉(zhuǎn)了一個(gè)弧度(-9deg)后,它會(huì)變成一個(gè)平行四邊形,這個(gè)平行四邊形是左邊低右邊高。這樣就會(huì)露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過(guò)多個(gè) CSS 屬性的配合來(lái)遮住露出的白色的body部分。下面就來(lái)看一下這個(gè)HTML對(duì)應(yīng)的 CSS 代碼部分。
在大家閱讀 CSS 的代碼之前,我給出一個(gè)原理圖來(lái)解釋一下其中的原理:
當(dāng)外圍的 div 傾斜了之后,就需要把內(nèi)容部分的div的上部的內(nèi)間距增大,以此來(lái)遮住平行四邊形的左側(cè)露出的白色區(qū)域。這是頁(yè)面上部區(qū)域的原理。
那么頁(yè)面底部也同樣需要實(shí)現(xiàn)這樣傾斜背景顏色的設(shè)計(jì),這樣才能將風(fēng)格一致,產(chǎn)生美感。原理還是這個(gè)原理圖所示的邏輯,不同的地方在于,底部最外圍的 div 不傾斜,而是需要兩個(gè)屬性,height 和 overflow-y,并且這個(gè) div 不能帶有背景顏色。它們的作用是當(dāng)它里面的內(nèi)容超出這個(gè) div 的區(qū)域時(shí)就不顯示,這樣就會(huì)讓上圖中藍(lán)色的平行西變形的左下角區(qū)域被紅色的框線(xiàn)裁剪掉,從而讓這個(gè)div 乖乖的呆在頁(yè)面的底部。而這個(gè) div 里面一層的 div 需要讓它傾斜,而且還帶有一個(gè)背景顏色。這樣組合出來(lái)的效果就是一個(gè)看似是左右兩邊是豎線(xiàn),下部是橫線(xiàn),只有上部是斜線(xiàn)的帶有背景顏色的四邊形,這個(gè)四邊形里面是實(shí)際的頁(yè)面內(nèi)容。
最終的樣子在這篇 CSS 代碼的最后展示出來(lái)了。
HTML 在頁(yè)面上放置了一個(gè)按鈕
<button class="btn">點(diǎn)擊按鈕</button>
如果想要實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停在按鈕上時(shí),按鈕文字加粗,在 CSS 里這樣設(shè)置
.btn:hover {
font-weight: bolder;
}
但是這樣做了之后,當(dāng)文字加粗后,勢(shì)必會(huì)將按鈕的尺寸撐的更大。那么有可能會(huì)影響到按鈕周?chē)渌?HTML 元素的位置,如果你的頁(yè)面內(nèi)容比較多,而且比較緊湊的話(huà),撐大的按鈕會(huì)將周?chē)脑赝崎_(kāi),這很有可能會(huì)擾亂頁(yè)面的布局。
如果既要保留按鈕的鼠標(biāo)懸停文字加粗的效果,還不能影響到周?chē)氐奈恢茫梢栽俳o按鈕設(shè)定一個(gè)固定的尺寸。
.btn {
padding: 1rem;
width: 4rem;
}
.btn:hover {
font-weight: bolder;
}
這樣按鈕的尺寸就不會(huì)變化,但是文字在鼠標(biāo)懸停時(shí)會(huì)加粗,按鈕周?chē)脑匾膊粫?huì)受到影響。
以上這種情況一般在頁(yè)面頂部的導(dǎo)航條上最為常見(jiàn),請(qǐng)大家注意。
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。