css菜單制作教程?關注此頭條号“互聯網IT信息”——>私信發送 “天貓css” ，（注意：css全是小寫）即可得到源代碼的獲取方式，下面我們就來聊聊關于css菜單制作教程?接下來我們就一起去了解一下吧!
關注此頭條号“互聯網IT信息”——>私信發送 “天貓css” ，（注意：css全是小寫）即可得到源代碼的獲取方式。
1. 此篇文章講解目錄：案例和由此案例重點講解的知識點介紹
案例代碼實現
css僞類知識點詳解
2. 案例和相關知識點介紹此案例是頁面，效果如下：
此頁面的技術實現解析：
默認顯示圖片的div，通過a标簽的僞類hover來控制第二個div樣式的顯示。
此案例中主要用到了，基于此，我們會系統的将如下知識點全部講解：
css僞類
3. 此案例的代碼實現第一步：書寫html，其中包含圖片所在的div，以及a标簽包裹的鼠标滑過顯示的文字和鍊接
第二步：編寫圖片div的css樣式
第三步：編寫文字鍊接的css樣式，這裡opacity（透明屬性）先設置為0
第四步：通過a标簽僞類hover屬性來控制上面文字鍊接的opacity屬性值為1
4. 此案例的知識點詳解僞類簡介：
是基于動作的樣式，是對普通樣式的補充。具體介紹如下：
:link -- 僞類，适用于未被用戶訪問過的鍊接
:visited -- 僞類，适用于已被用戶訪問過的鍊接
:hover -- 僞類，光标指向一個元素，但此元素未被激活時的樣式
:active -- 僞類，适用于一個元素被激活時的樣式
僞類選擇符的順序：L-V-H-A
css僞類代碼實例：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>css選擇器3</title>
<style>
/*hover*/
input[type="text"]:hover{
background-color: #9E1CD5;
}
/*focus*/
input[type="text"]:focus{
background-color: #E12121;
}
/*active*/
input[type="text"]:active{
background-color: #4FAB58;
}
</style>
</head>
<body>
<inputtype="text"name="name">
</body>
</html>
大家好接下來我們會邀請前端架構師以連載的方式，并且結合阿裡天貓商城的門戶，系統講解Css的專業知識，歡迎大家關注頭條号“互聯網IT信息”。更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
