1. 程式人生 > >CSS實戰心得筆記——常用下拉選單

CSS實戰心得筆記——常用下拉選單

寫作目的

花了一個月左右的時間,學完了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*下拉子菜單鏈接個數。