亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

導航欄布局篇(二、導航欄下拉菜單布局)

Original 2019-07-11 09:06:59 388
abstract：首先，先說一下這里的下拉菜單布局的思路，主要是用css的hover和display語句來實現(xiàn)下拉菜單的顯示。即先使用display把下拉框隱藏起來，然后再在hover觸發(fā)的時候，再使用display語句把下拉框顯示出來。具體代碼如下：<!DOCTYPE html> <html> <head> <title>導航欄常用布局</titl

首先，先說一下這里的下拉菜單布局的思路，主要是用css的hover和display語句來實現(xiàn)下拉菜單的顯示。即先使用display把下拉框隱藏起來，然后再在hover觸發(fā)的時候，再使用display語句把下拉框顯示出來。具體代碼如下：

<!DOCTYPE html>
<html>
<head>
	<title>導航欄常用布局</title>
</head>
<style type="text/css">
	*{margin: 0;padding: 0;}
	a{text-decoration:none;padding:auto 5px;}
	i{border: solid black;border-width: 0 1px 1px 0;display: inline-block;padding: 3px;margin:0 5px 5px 5px;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
	body{width: 100%;height:23px;}
	nav{width: 1280px;height:23px; margin: auto ;background-color: yellow;}
	ul{list-style:none;}
	
	hr{width: 2px;line-height: 10px;color: pink;margin:2px auto;padding:3px 0px ;display: inline;text-align: center;}
	.left{width: 40%;line-height:22px;background-color: pink;float: left;}
	.left .inlines{display: inline;margin:0;float: left;display: inline-block;}
	.right{width: 58%;line-height:22px;float: right;text-align: right;}
	.right .inlines{display: inline;margin:0;display: inline-block;}
	.inlines a:hover{color:#ff5000;}
	.inlines ul{border:1px solid #ff5000;width:100px;display: none;border-top: none;}
	/*.list-select a{border:1px solid #ff5000;width: 100%;}*/
	.inlines:hover ul{color: red;width: 100px;display:block;position: absolute;}
	.inlines ul li:hover{}
	.inlines ul li{color: yellow;}
	.clear{clear: both;}
</style>
<body>
	<nav>
		<ul class="left">
			<li class="inlines"><a href="#">中國大陸&nbsp;&nbsp;<i></i>&nbsp;
				<ul>
					<li><a href="#">中國香港</a></li>
					<li><a href="#">中國澳門</a></li>
					<li><a href="#">中國臺灣</a></li>
				</ul>
			</a></li>
			<li class="inlines"><a href="#">親，請登錄</a>&nbsp;</li>
			<li class="inlines"><a href="#">免費注冊</a>&nbsp;</li>
			<li class="inlines"><a href="#">手機逛淘寶</a></li>
		</ul>
		<ul class="right">
			<li class="inlines"><a href="#">我的淘寶<i></i>
				<ul>
					<li><a href="#">已買到的寶貝</a></li>
					<li><a href="#">我的足跡</a></li>
				</ul>
			</a></li>
			<li class="inlines"><a href="#">購物車<i></i>
				<ul>
					<li><span>您的購物車里沒有任何寶貝！</span><a href="#">查看我的購物車</a></li>
				</ul>
			</a></li>
			<li class="inlines"><a href="#">收藏夾<i></i>
				<ul>
					<li><a href="#">收藏的寶貝</a></li>
					<li><a href="#">收藏的店鋪</a></li>
				</ul>
			</a></li>
			<li class="inlines"><a href="#">商品分類</a></li>
			<li class="inlines">&nbsp;<hr>&nbsp;</li>
			<li class="inlines"><a href="#">賣家中心<i></i>
				<ul>
					<li><a href="#">免費開店</a></li>
					<li><a href="#">已售出的寶貝</a></li>
					<li><a href="#">出售中的寶貝</a></li>
				</ul>
			</a></li>
			<li class="inlines"><a href="#">聯(lián)系客服<i></i>
				<ul>
					<li><a href="#">消費者客服</a></li>
					<li><a href="#">賣家客服</a></li>
					<li><a href="#">中國臺灣</a></li>
				</ul>
			</a></li>
			<li class="inlines"><a href="#">網(wǎng)站導航<i></i>
				<ul>
					<li><a href="#">主題市場</a></li>
					<li><a href="#">特色市場</a></li>
					<li><a href="#">阿里APP</a></li>
				</ul>
			</a></li>
		</ul>
	</nav>
	<div class="clear"></div>
	
</body>
</html>


以上就是用css語句實現(xiàn)下拉菜單布局的內(nèi)容。

注：這里的下拉菜單是一個純靜態(tài)--無數(shù)據(jù)交互的下拉框，有數(shù)據(jù)交互的下拉框一般均使用js實現(xiàn)。


Correcting teacher：查無此人Correction time：2019-07-11 13:30:03
Teacher's summary：完成的不錯，常用的css樣式可以寫到公用文件里，每個項目都可以加載這一個公用文件。繼續(xù)加油。

Release Notes

Popular Entries