學習筆記（6）下拉及多級彈出菜單

內容和知識點：

帶下拉子菜單的導航菜單
絕對定位和浮動的區別和運用
css自適應寬度滑動門菜單

一、帶下拉子菜單的導航菜單
縱向導航教程中已使用過二級導航，今天製作下橫向導航菜單的二級菜單，方法和縱向一樣，只不過由縱向改變爲橫向而已。
先在html代碼增加二級菜單的代碼。
增加完代碼後，在瀏覽器裏預覽一下：

是不是一看頭都大了，怎麼變成這樣了。我們分析一下錯亂的原因。首先我們看下“自適應寬度”和“固定寬度”兩個二級菜單也繼承了一級菜單的背景和橫向排列，所以我們先把二級菜單的背景和浮動清除掉，增加以下css代碼：
#menu ul li ul li { float:none;}
#menu ul li ul li a { background:none;}

預覽看下，二級菜單是不是已經歸位了，但鼠標劃過時還繼承了一級菜單的樣式.

第一行設置二級菜單的灰色邊框；爲了美觀，我們把下拉菜單的寬度設置成和一級菜單寬度相同，第二行的width:85px再加上第一行上設置的邊框左右各1px後正好是87px，和一級菜單寬度相同。margin:0是爲了清除掉繼承一級菜單中margin-left:2px；最後一行設置鼠標劃過時的樣式。

            #menu ul li ul {
				border: solid 1px #EEEEEE;
			}
			#menu ul li ul li {
				float: none;
				width: 85px;
				background-color: palegoldenrod;
				margin: 0;
			}

			#menu ul li ul li a {
				background: none;
			}

			#menu ul li ul li a:hover {
				background: #333;
				color: #fff;
			}

下一步就該把二級菜單隱藏，當鼠標劃過時顯示出來了。增加如下代碼：

            #menu ul li ul {
				border: solid 1px #EEEEEE;
				display: none;
			}

			#menu ul li:hover ul {
				display: block;
			}

注意第二行的寫法，#menu ul li:hover ul這個比較難理解，它的意思是定義當鼠標劃過#menu下ul下li時，li下的ul的樣式，這裏設置爲display:block，意思是鼠標劃過時顯示這塊內容。開始隱藏，鼠標劃過時顯示，這就實現了我們想要的效果。目前IE6只支持a的僞類，其它標籤的僞類不支持，所以要想在IE6下也顯示正確，需要藉助js來實現。我們定義一個類.sfhover（自己命名，需和JS中相同）的屬性爲display:block;然後當鼠標劃過後，用JS給當前li添加上這個樣式上，根據css的優先級：指定的高於繼承的原則,就實現了IE6下的正確顯示。所以增加如下代碼：
#menu ul li.sfhover ul { display:block;}

還有一個問題是當前導航下有內容的話，如果二級菜單顯示，將會把下邊的內容擠跑，所以需要給#menu ul li ul增加position:absolute;屬性，當其絕對定位後，它將脫離原來文檔流，不再佔據空間，因此也不會再把下邊內容擠跑了

完整代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<script>
			{ 
				var sfEls=document.getElementById("menu").getElementsByTagName("li");
		 for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover";
}
  sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
 sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 
"");
}
}
}
window.onload=menuFix;
 </script>


		<style type="text/css">
			body {
				font-family: Verdana;
				font-size: 12px;
				line-height: 1.5;
			}

			a {
				color: #000;
				text-decoration: none;
			}

			a:hover {
				color: #F00;
			}

			#menu {
				width: 500px;
				height: 28px;
				margin: 0 auto;
				border-bottom: 3px solid #E10001;
			}

			#menu ul {
				list-style: none;
				margin: 0px;
				padding: 0px;
			}

			#menu ul li {
				float: left;
				margin-left: 2px;
			}

			#menu ul li a {
				display: block;
				width: 87px;
				height: 28px;
				line-height: 28px;
				text-align: center;
				background: url(http://www.aa25.cn/upload/2010-06/27/nav_bg2.gif) 0 0 no-repeat;
				font-size: 14px;
			}

			#menu ul li a:hover {
				background: url(http://www.aa25.cn/upload/2010-06/27/nav_bg3.gif) 0 0 no-repeat;
			}

			#menu ul li a#current {
				background: url(http://www.aa25.cn/upload/2010-06/27/nav_bg1.gif) 0 0 no-repeat;
				font-weight: bold;
				color: #fff;
			}

			#menu ul li ul {
				border: 1px solid #ccc;
				display: none;
				position: absolute;
			}

			#menu ul li ul li {
				float: none;
				width: 87px;
				background: #eee;
				margin: 0;
			}

			#menu ul li ul li a {
				background: none;
			}

			#menu ul li ul li a:hover {
				background: #333;
				color: #fff;
			}

			#menu ul li:hover ul {
				display: block;
			}

			#menu ul li.sfhover ul {
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li><a id="current" href="#">首頁</a></li>
				<li><a href="#">網頁版式</a>
					<ul>
						<li><a href="#">自適應寬度</a></li>
						<li><a href="#">固定寬度</a></li>
					</ul>
				</li>
				<li><a href="#">web教程</a>
					<ul>
						<li><a href="#">新手入門</a></li>
						<li><a href="#">視頻教程</a></li>
						<li><a href="#">常見問題</a></li>
					</ul>
				</li>
				<li><a href="#">web實例</a></li>
				<li><a href="#">常用代碼</a></li>
			</ul>
		</div>
	</body>
</html>

二、絕對定位和浮動的區別和運用

到底什麼時候用浮動，什麼時候用定位呢？

當一個元素使用絕對定位後，它的位置將依據瀏覽器左上角開始計算或相對於父容器（在父容器使用相對定位時）。 絕對定位使元素脫離文檔流，因此不佔據空間。絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素。

而浮動元素的定位還是基於正常的文檔流，然後從文檔流中抽出並儘可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出後，仍然在文檔流中的其他元素將忽略該元素並填補他原先的空間。它只是改變了文檔流的顯示，而沒有脫離文檔流。

一個元素浮動或絕對定位後，它將自動轉換爲塊級元素。

三、 css自適應寬度滑動門菜單

要想實現自適應寬度，需要在文字上增加一個輔助標籤，如span，分別在a上和span上設置背景，一個左側對齊，一個右側對齊，如下的原理圖:

四條輔助線內爲一個按鈕元素，綠色部分爲span，然後定義它的背景圖片靠右側對齊，而左側的部分爲a的背景圖片，定義靠左側對齊。當文字多時，會把span撐開，這實現了自適應寬度的按鈕了

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type="text/css">
			a {
				display: block;
				float: left;
				margin: 5px;
				height: 37px;
				line-height: 37px;
				
				background-color: palegoldenrod;
				color: #d84700;
				font-size: 14px;
				font-weight: bold;
				text-decoration: none;
				padding-left: 18px;
			}

			a span {
				display: block;
				background-color: pink;
				padding-right: 20px;
			}

			a:hover {
				background-color: #4CD964;
			}

			a:hover span {
				background-color: hotpink
			}
		</style>
	</head>
	<body>
		<p><a href="#"><span>註冊</span></a><a href="#"><span>登錄</span></a><a href="#"><span>測試測試測</span></a></p>
	</body>
</html>

學習筆記（6）下拉及多級彈出菜單

uni-app中class和style動態綁定

uni-app中的css3選擇器使用

vue 判斷某個時間小於當前時間

uniapp 條件渲染

hubilder 配置 Vue

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

linux以太網驅動總結