前言

回顧前面幾天學習的內容，一共學了標籤，css樣式，盒模型，以及定位，下面將使用之前學習到的內容做幾個小案例。從而鞏固所學知識。

一、豎嚮導航欄

1.1 方法：用無序列表構建表單

<ul>
	<li><a href="#">主頁</a></li>
	<li><a href="#">新聞</a></li>
	......
</ul>

1.2 步驟：

先將導航條的主體元素寫完。

<!DOCTYPE> 
<html lang="ZH-cn"> 
<head>
   <meta charset="utf-8" > 
   <title>豎嚮導航條</title>
</head>
<body>
   <nav>
   	<ul>
   		<li><a href="#">主頁</a></li>
   		<li><a href="#">新聞</a></li>
   		<li><a href="#">學習</a></li>
   		<li><a href="#">登錄</a></li>
   		<li><a href="#">註冊</a></li>
   	</ul>
   </nav>
</body>
</html>

爲導航條添加樣式

/*清除瀏覽器默認的 marging 與 padding*/
/*設置字體大小與顏色*/
*{
		marging:0;
		padding:0;
		font-size:20px;
		color:#000000;
	}

發現a默認自帶的下劃線有點影響美觀

/*清除超鏈接默認的自帶的下劃線*/
a {
	text-decoration:none;
}

由於無序列表前面默認自帶小圓點，不太好看，將其去掉

ul {
		list-style:none;   /*去掉小圓點*/
		width:120px;    /*爲導航條整體設置寬度，高度我們採用默認文本高度*/
		background-color:#ffcccc;  /*背景顏色*/
		text-align:center;    /*設置文本居中對齊*/
		}

li{
	height:30px;    /*設置導航條每個條目的高度*/
	border-bottom: 1px dashed #ffffff; /*爲了更好看，設置邊框底部虛線條*/
	}

到這裏導航條已經制作差不多，看一下效果

最後可以通過設置僞類，方便提醒用戶選中的條目

li:hover{
	background-color:#ccffff;  /*鼠標懸停時，設置背景顏色*/
	}

<!DOCTYPE> 
<html lang="ZH-cn"> 
<head>
    <meta charset="utf-8" > 
    <title>豎嚮導航條</title>
	<style>
	*{
		marging:0;
		padding:0;
		font-size:20px;
		color:#000000;
	}
	a{
		text-decoration:none;
	}
	ul {
		list-style:none;
		width:120px;
		background-color:#ffcccc;
		text-align:center;
		}
	li{
		height:30px;
		border-bottom: 1px dashed #ffffff;
	}
	li:hover{
		background-color:#ccffff;
	}
	</style>
</head>
<body>
	<nav class="nav">
		<ul class="item">
			<li><a href="#">主頁</a></li>
			<li><a href="#">新聞</a></li>
			<li><a href="#">學習</a></li>
			<li><a href="#">登錄</a></li>
			<li><a href="#">註冊</a></li>
		</ul>
	</nav>
</body>
</html>

到這裏我發現有一個bug，這樣寫的話，a超鏈接可點擊的範圍小於整個條目框，用戶必須要對a超鏈接的範圍點擊才能跳轉。由於a標籤是內聯元素，無法對齊設置寬度。

解決辦法：
可以通過display將a標籤變成塊級元素，然後對其進行設置寬高即可。

a{
		text-decoration:none;
		background-color:#ffcccc;
		width:120px;
		height:31px;
		text-align:center;
		display:block;
		border-bottom: 1px dashed #ffffff;
	}

<!DOCTYPE> 
<html lang="ZH-cn"> 
<head>
    <meta charset="utf-8" > 
    <title>豎嚮導航條</title>
	<style>
	*{
		marging:0;
		padding:0;
		font-size:20px;
		color:#000000;
	}
	a{
		text-decoration:none;
		background-color:#ffcccc;
		width:120px;
		height:31px;
		text-align:center;
		display:block;
		border-bottom: 1px dashed #ffffff;
	}
	ul {
		list-style:none;
		}
	a:hover{
	background-color:#ccffff;
	}
	</style>
</head>
<body>
	<nav class="nav">
		<ul class="item">
			<li><a href="#">主頁</a></li>
			<li><a href="#">新聞</a></li>
			<li><a href="#">學習</a></li>
			<li><a href="#">登錄</a></li>
			<li><a href="#">註冊</a></li>
		</ul>
	</nav>
</body>
</html>

一個最簡單，最基礎的豎直導航條就實現了。當然在實際開發中不會有這麼簡單的需求，那就在此基礎上不斷完善就行了，正所謂千里之行，始於足下。

二、橫向導航欄

橫向導航欄內容跟豎直導航欄一樣，只需求修改部分的CSS屬性即可實現，ul、li都是塊級元素，我們知道塊級元素都是獨佔一行，那麼該通過什麼樣的方式讓所有的塊級元素佔一行呢？

回顧之前學的內容，發現有兩種做法可以解決：

（1）使用float浮動定位

	li{
		float:left;
	}

（2）使用display修改元素類型

li{
		display:inline-block
	}

第二種做法中間會有空隙，不知道是爲什麼，還沒解決。。。

<!DOCTYPE> 
<html lang="ZH-cn"> 
<head>
    <meta charset="utf-8" > 
    <title>豎嚮導航條</title>
	<style>
	*{
		marging:0;
		padding:0;
		font-size:20px;
		color:#000000;
	}
	a{
		text-decoration:none;
		background-color:#ffcccc;
		width:120px;
		height:31px;
		text-align:center;
		display:block;
	}
	ul {
		list-style:none;
		}
	
	li{
		display:inline-block
		/*float: left*/
	}
	a:hover{
	background-color:#ccffff;
	}
	</style>
</head>
<body>
	<nav class="nav">
		<ul class="item">
			<li><a href="#">主頁</a></li>
			<li><a href="#">新聞</a></li>
			<li><a href="#">學習</a></li>
			<li><a href="#">登錄</a></li>
			<li><a href="#">註冊</a></li>
		</ul>
	</nav>
</body>
</html>

三、下拉菜單

下拉菜單是導航中常用的一種形式，當鼠標懸停在某一目錄的時候，其二級目錄會顯示。

還是使用ul來做，我們的下拉菜單由兩部分組成，第一部分是標題部分，第二部分是該標題下對應的選項，使用列表構造。我們想要實現的功能是當用戶鼠標懸停至學習編程的時候，顯示其二級目錄 HTML、python、java。

<div class="nav">
    <div class="title">學習編程</div>
    <ul class="plat">
        <li><a href="#">HTML</a></li>
        <li><a href="#">python</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>

3.1 思路

（1）默認頁面，使用display：none屬性將ul列表下的所有條目隱藏。
（2）當鼠標懸停至title處，使用僞類：hover設置display：block即可。
（3）使用：hover控制其他元素的樣式有三種方式

parent控制子元素 son：

<div class="parent">
	<div class="son"></div>
</div>

/*鼠標懸停在parent處時， 改變son的背景顏色爲藍色*/
.parent:hover .son {
        background-color:blue;
    }

son1控制兄弟元素 son2：

<div class="parent">
	<div class="son1"></div>
	<div class="son2"></div>
</div>

/*鼠標懸停在son1處時， 改變son2的背景顏色爲藍色*/
.son1:hover + .son2 {
        background-color:blue;
    }

firend1控制就近元素 firend2：

<div class="firend1"></div>
<div class="firend2"></div>

/*鼠標懸停在firend1處時， 改變firend2的背景顏色爲藍色*/
.firend1:hover ~ .firend2 {
        background-color:blue;
    }

（4）使用：hover控制其他元素時，必須對需要隱藏的條目元素設置父級元素，否則當鼠標移開兄弟或者就近元素時，顯示屬性會失效，造成無法移開鼠標去點擊條目的bug。

所以我們給標題和條目放在同一個div中，內容如下

<div class="nav">
    <div class="title">學習編程</div>
    <ul class="plat">
        <li><a href="#">HTML</a></li>
        <li><a href="#">python</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>

3.2 步驟

（1）元素內容如上所示
（2）設置CSS樣式

（2.1）萬能第一步

  *{
     padding: 0;
     margin: 0;		
 }

（2.2）給標題和選項添加css樣式

.title{
		background-color:#ffcccc;
		width:120px;
		text-align:center;
}
		
a{
	text-decoration:none;
	background-color:#f1f1f1;
	width:120px;
	height:31px;
	text-align:center;
	display:block;
}

（2.3）設置鼠標懸停時選項的背景顏色

a:hover{
		background-color:#ccffff;
		}

（2.4）ul設置默認隱藏

.plat{
      display: none;
}

（2.5）鼠標懸停顯示

/*通過父元素改變子元素的屬性*/
 .nav:hover .plat{
            display: block;
            clear: both;
        }

默認效果：

懸停時：

源代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
			font-size: 20px;
			color:#000000;
			
        }
		.title{
		background-color:#ffcccc;
		width:120px;
		text-align:center;
		}
        a{
		text-decoration:none;
		background-color:#f1f1f1;
		width:120px;
		height:31px;
		text-align:center;
		display:block;
        }
		
		a:hover{
		background-color:#ccffff;
		}

        .plat{
            display: none;
        }
        .nav:hover .plat{
            display: block;
        }
 
    </style>
</head>
<body>
<div class="nav">
    <div class="title">學習編程</div>
    <ul class="plat">
        <li><a href="#">HTML</a></li>
        <li><a href="#">python</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>
</body>
</html>

四、帶下拉菜單的導航欄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
	/*清除padding、margin*/
        *{
            padding: 0;
            margin: 0;
			font-size: 20px;
			color:#000000;	
        }
		
		/*清除列表前的小圓點*/
		ul{
			list-style:none;
		}
		
		/*全局a標籤基本屬性，設置爲塊元素*/
		a{
			text-decoration:none;
			background-color:#ffcccc;
			width:120px;
			height:31px;
			text-align:center;
			display:block;
			border-bottom: 1px dashed #ffffff;
		}
	/*設置標題樣式，否則下拉選項會變成橫向排列*/
		.title{
		background-color:#ffcccc;
		width:120px;
		text-align:center;
		border-bottom: 1px dashed #ffffff;
		}
		
       /*下拉選項的背景顏色*/
        .plat li a{
		background-color:#f1f1f1;
        }
		
		   /*鼠標懸停的背景顏色*/
		a:hover, .plat li a:hover{
			background-color:#ccffff;
		}
	
	  /*隱藏內容*/
        .plat{
            display: none;
        }
		
		 /*顯示內容*/
        .title:hover .plat{
            display: block;
        }
 
    </style>
</head>
<body>
<nav>
		<ul>
			<li><a href="#">主頁</a></li>
			<li><a href="#">新聞</a></li>
			<li class="title">
				<a href="#">學習編程</a>
				<ul class="plat">
					<li><a href="#">HTML</a></li>
					<li><a href="#">python</a></li>
					<li><a href="#">java</a></li>
				</ul>
			</li>
			<li><a href="#">登錄</a></li>
			<li><a href="#">註冊</a></li>
		</ul>
	</nav>

</body>
</html>

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
	/*清除padding、margin*/
        *{
            padding: 0;
            margin: 0;
			font-size: 20px;
			color:#000000;	
        }
		
		/*清除列表前的小圓點*/
		ul{
			list-style:none;
		}
		
		/*全局a標籤基本屬性，設置爲塊元素*/
		a{
			text-decoration:none;
			background-color:#ffcccc;
			width:120px;
			height:30px;
			text-align:center;
			display:block;
		}
	
		.title{
		background-color:#ffcccc;
		width:120px;
		height:30px;
		text-align:center;
		}
		
        .plat li a{
		background-color:#f1f1f1;
        }
		
		a:hover, .plat li a:hover{
			background-color:#ccffff;
		}

        .plat{
            display: none;
        }
		
        .title:hover .plat{
            display: block;
        }
		
		li{
		float:left;
		}
 
    </style>
</head>
<body>
<nav>
		<ul>
			<li><a href="#">主頁</a></li>
			<li><a href="#">新聞</a></li>
			<li class="title">
			<a href="#">學習編程</a>
				<ul class="plat">
					<li><a href="#">HTML</a></li>
					<li><a href="#">python</a></li>
					<li><a href="#">java</a></li>
				</ul>
			</li>
			<li><a href="#">登錄</a></li>
			<li><a href="#">註冊</a></li>
		</ul>
	</nav>

</body>
</html>

初步實現導航欄最基本的功能，具體CSS樣式設計有待加強。本文主要實現功能，美觀另說。

Python全棧開發學習--HTML--CSS導航欄練習--Day5

前言

一、豎嚮導航欄

1.1 方法：用無序列表構建表單

1.2 步驟：

二、橫向導航欄

三、下拉菜單

3.1 思路

3.2 步驟

四、帶下拉菜單的導航欄

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

KubeKey 部署 K8s v1.28.8 實戰

Python全棧開發學習--javascript--（HTML DOM、瀏覽器BOM）--Day11

Python全棧開發學習--HTML 5--標籤--Day8

Python全棧開發學習--HTML--CSS3（下）--Day7

Python全棧開發學習--javascript--進階--Day10

Python全棧開發學習--Reactjs--基礎語法（中）--Day13

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結