整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
周，我們學習了運用:hover復合選擇器，制作鼠標懸停在導航欄上的樣式變化效果。在課后作業中，我要求同學們把導航欄放入店鋪首頁，運用:hover選擇器制作鼠標懸停在導航欄的效果。
先來回顧一下知識點。
:hover選擇器是CSS樣式中的復合選擇符，冒號前面的內容代表鼠標懸停的位置。它可以作用于網頁中的所有元素，如超鏈接<a>、表格<table>、單元格<td>等網頁標簽。在Dreamweaver操作中，我們可以通過新建CSS規則，選擇復合選擇符，輸入:hover選擇器名稱設置樣式。在輸入名稱時，格式為“網頁元素名稱:hover”，例如：a:hover代表鼠標懸停在超鏈接上的效果。
當然網頁元素名稱也可以是其他選擇符：
例如類選擇符，.apple:hover代表鼠標懸停在類選擇符上的效果，當鼠標經過“class=apple”的網頁內容時會發生的樣式變化；ID選擇符，#orange:hover代表鼠標懸停在ID是orange的網頁內容時發生的樣式變化。
與此同時，冒號前的網頁元素名稱也可以進行重組，例如要設置ID為#tb表格中的超鏈接，在鼠標懸停時的樣式變化，我們可以把網頁名稱設置為#tb a:hover。多個選擇符疊加時，使用空格分隔即可。
那么問題來了，許多同學掌握了制作單個導航欄的方法，一旦將導航欄放入整體頁面卻出現了很多問題。比如小佳同學就出現了“當鼠標經過導航欄時，是一整排全亮，甚至連店招所在的表格也跟著發生樣式變化”的問題。這是為什么呢？
好，接下來，我們來看看小佳同學的作業：
「視頻解析版本」
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
「文字解析版本」
顯然小佳的作業中，鼠標移入導航欄，出現了一整行的變化，而非單個單元格的變化，并且頂部店招區域也出現了樣式變化。
當我們檢查小佳的代碼時，我們發現:hover選擇器前的網頁內容是td，這就意味著鼠標經過網頁中所有的單元格都會發生以下所設置的樣式變化。
這里的td:hover是鼠標懸停在單元格（列）的效果。而我們之前做的是一行N列的導航欄，不存在其他多余單元格，因此在這個情況下我們可以用td:hover來實現鼠標經過單元格的效果。
但是，你看下面的代碼，有多少個td呢？我們這里多行多列，并且你在第二行的單元格中嵌套了表格。因此，如果用td:hover，頁面中所有的td都會有鼠標經過的效果，因此你會發現整個頁面都會出現鼠標經過變紅色的效果。所以，接下來，我們要思考如何把td替換一下。
:hover前的td該如何被替換呢？
方法1：
新建CSS樣式，類型為類選擇器（命名為.daohang，為導航欄鼠標未經過時的樣式）設置好之后，選中導航欄單元格，并右鍵選擇應用。設置后代碼如下：
應用后，你可以直接到代碼區域把原來的td替換為.daohang。也可以新建CSS規則，類型為復合樣式，名稱為.daohang:hover。
方法2：
將表格的名稱（ID）設置為tb1，那么是tb1這個表格中的單元格樣式變化，因此我們可以將名稱設置為 “#tb1 td:hover”，這樣同樣可以實現之前的效果。
好了，以上就是:hover選擇器在網頁中的應用，你學會了么？
如果你也想試一試，可以回復關鍵詞“網頁”獲取圖片素材和Dreamweaver CS6軟件。
們在設計網站的時候，有時候為了體現出別具一格的風格，往往會設計出一些特殊的風格。這里就舉一個比較常見的例子 —— 傾斜的背景顏色。
在CSS中，沒有某一個屬性能夠直接實現傾斜的背景顏色，而是需要通過一些“手段”來實現。最常想到的方案就是在內容的底部放置一個div，給這個div設定一個背景顏色，然后讓這個div傾斜一個角度，從而實現傾斜的背景顏色。比如像下圖所示的案例：
那么下面就來用一個基本的實例來解釋并實現傾斜背景的效果：
首先要說明一下，頁面導航條是固定在頁面頂部的，導航條不會隨著頁面的滾動而移動。這個效果的實現非常簡單，就是利用了 position 這個屬性的 fixed 值來實現的。
我下面的代碼實例中，HTML用來給頁面上添加元素，而在 CSS 部分需要精細化的設定屬性的參數值，而且需要若干個HTML標簽的CSS來配合，從而實現傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來描述這些屬性的效果和目的，大家在閱讀的時候可以將 CSS 結合著 HTML 一起來理解。或者可以直接拿我的這個實例作為一個模板來使用。
<!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>為了讓導航條和其他元素都能夠與頁面的兩邊留出距離，我在實際內容標簽的外圍又包裹了一層div，主要在這個包裹的div里設定左右內間距，從而實現兩邊留白的效果。這些外圍包裹的 div 的 class 名稱一般都會有一個后綴 "-bg"。
在實際內容的排列時，我采用了更加方便靈活的彈性布局，這樣會相對的減少HTML和CSS的代碼量。
另外，如果想要實現傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標簽。傾斜這些 div 其實很簡單，只需要設定一個 transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長方形的 div 按照 Y 軸逆時針旋轉了一個弧度（-9deg）后，它會變成一個平行四邊形，這個平行四邊形是左邊低右邊高。這樣就會露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過多個 CSS 屬性的配合來遮住露出的白色的body部分。下面就來看一下這個HTML對應的 CSS 代碼部分。
在大家閱讀 CSS 的代碼之前，我給出一個原理圖來解釋一下其中的原理：
當外圍的 div 傾斜了之后，就需要把內容部分的div的上部的內間距增大，以此來遮住平行四邊形的左側露出的白色區域。這是頁面上部區域的原理。
那么頁面底部也同樣需要實現這樣傾斜背景顏色的設計，這樣才能將風格一致，產生美感。原理還是這個原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個屬性，height 和 overflow-y，并且這個 div 不能帶有背景顏色。它們的作用是當它里面的內容超出這個 div 的區域時就不顯示，這樣就會讓上圖中藍色的平行西變形的左下角區域被紅色的框線裁剪掉，從而讓這個div 乖乖的呆在頁面的底部。而這個 div 里面一層的 div 需要讓它傾斜，而且還帶有一個背景顏色。這樣組合出來的效果就是一個看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個四邊形里面是實際的頁面內容。
最終的樣子在這篇 CSS 代碼的最后展示出來了。
HTML 在頁面上放置了一個按鈕
<button class="btn">點擊按鈕</button>如果想要實現當鼠標懸停在按鈕上時，按鈕文字加粗，在 CSS 里這樣設置
.btn:hover {
font-weight: bolder;
}但是這樣做了之后，當文字加粗后，勢必會將按鈕的尺寸撐的更大。那么有可能會影響到按鈕周圍其他 HTML 元素的位置，如果你的頁面內容比較多，而且比較緊湊的話，撐大的按鈕會將周圍的元素推開，這很有可能會擾亂頁面的布局。
如果既要保留按鈕的鼠標懸停文字加粗的效果，還不能影響到周圍元素的位置，可以再給按鈕設定一個固定的尺寸。
.btn {
padding: 1rem;
width: 4rem;
}
.btn:hover {
font-weight: bolder;
}這樣按鈕的尺寸就不會變化，但是文字在鼠標懸停時會加粗，按鈕周圍的元素也不會受到影響。
以上這種情況一般在頁面頂部的導航條上最為常見，請大家注意。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
