CSS實戰心得筆記——常用下拉選單
阿新 • • 發佈:2018-11-02
寫作目的
花了一個月左右的時間,學完了HTML5和CSS的基礎知識,主要通過W3school、菜鳥教程和網易雲課堂的網課。學習過程中CSDN的很多部落格給了我幫助和啟發,效果要比生硬的教程好得多。因此,開始實戰練習的過程中,把每個案例的實現及其思路記錄在這裡,作為總結。
常用下拉選單
主要用於網站首頁導航欄的常用下拉選單
實現思路
1、div盒子模型作為容器,下拉選單整體為一個div,下拉選單內容作為一個巢狀div。
2、構建兩個類,一個為dropdown下拉選單(導航一級選單),一個為dropdown-content下拉內容(下拉子選單)。
3、下拉內容部分display進行隱藏。
4、運用錨偽類hover,滑鼠懸停一級選單時改變背景顏色和塊狀元素顯示,來實現選單下拉。滑鼠懸停下拉選單內容連結時,改變背景顏色,實現切換選單的效果。
程式碼實現:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.dropdown{
display: inline-block;
position: relative;
background-color: #FFA500;
min-width: 200px;
text-align: center;
line-height: 50px;
height : 50px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content{
display: none;
position: absolute;
background-color:whitesmoke;
min-width: 200px;
text-align: center;
height: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a{
color: #000000;
display : block;
text-decoration: none;
}
.dropdown:hover .dropdown-content{
display: block;
}
.dropdown-content a:hover{
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="dropdown">
<span>簡介</span>
<div class="dropdown-content">
<a href="http://www.runoob.com">140</a>
<a href="http://www.runoob.com">160</a>
<a href="http://www.runoob.com">180</a>
</div>
</div>
</body>
</html>
難點:
1.塊狀元素內文字垂直居中:設定line-height等於height
2.下拉選單每個連結的block大小與一級選單保持一致:設定min-width與一級選單一致,設定height等於一級選單height*下拉子菜單鏈接個數。