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

jquery實現(xiàn)對菜單下邊框顯示的控制

asal 2019-04-14 16:01:36 271
abstrak：<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <title>獲取隨機色</title> <script type="text/javascript" src=&qu 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>獲取隨機色</title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
	<style>
		*{margin: 0;padding: 0}
		.top{width: 100%;height: 60px;background: black;}
		.logo{width: 140px;float: left;margin-right: 20px;}
		.logo img{width: 140px;height: 60px;}
		a{text-decoration:none; color:#D3D3D3;display: block;}
		li{list-style: none;}
		.nav_left{float: left;}
		.nav_left li{float: left;width: 96px;
		            margin:0 10px 0 10px;line-height: 55px;
		            font-size: 14px; 
		            font-family: Microsoft YaHei;
		            font-weight: 400;
		            text-align: center;border-bottom: 5px solid black;}
		.nav_left li:hover{

		    border-bottom: 5px solid #CDCDB4;
		}

		.circle{position: absolute;top: 15px;}
		.notice,.userbox{float:right;height: 60px;color:#D3D3D3;width: 60px;}
		.userbox{margin-right: 10px;}
		.userbox img{display:block;width: 28px;height: 28px;margin:16px 16px;border-radius:50%;}
		.notice{font-size: 20px;line-height: 60px;text-align: center;}
	</style>
</head>
<body>
    <div class="top">
        <div class="logo"><a href="index"><img src="images/logo.png" alt=""></a></div>
        <ul class="nav_left">
            <li style="width: 68px;background:rgba(255,255,255,0.2);border-bottom: 5px solid #CDCDB4;"><a href="">首頁</a></li>
            <li><a href="">視頻教程</a></li>
            <li><a href="">社區(qū)問答</a></li>
            <li><a href="">技術(shù)文章&nbsp<i class="fa fa-sort-down fa-1g"></i></a></li>
            <li><a href="">編程詞典&nbsp<i class="fa fa-sort-down fa-1g"></i></a></li>
            <li><a href="">工具下載&nbsp<i class="fa fa-sort-down fa-1g"></i></a></li>
            <li><a href="">特色課程&nbsp<i class="fa fa-circle circle" style="color:red; font-size:11px;" ></i></a></li>
            <li><a href="">菜鳥學堂</a></li>
        </ul>
        <div class="userbox">
            <a href=""><img src="images/avatar.jpg" alt=""></a>
        </div>
        <div class="notice"><a href=""><i class="fa fa-volume-up"></i><i class="fa fa-circle circle" style="color:red; font-size:11px;" ></i></a></div>
    </div>

</body>
<script>
	$('li').hover(
		function(){$('li:first').css('border-bottom-color','black');$(this).css('border-bottom-color','#CDCDB4');}
		,function(){$(this).css('border-bottom-color','black');$('li:first').css('border-bottom-color','#CDCDB4');}
		)
	
	
</script>
</html>

-----效果圖-----

QQ截圖20190414155059.png

思路：

1、與老師的布局不同，考慮到可調(diào)整性，采用了下邊框的方式。

2、下邊框的顯示用了jquery的hover事件，當鼠標移上li時，先把第一個li(也即首頁)的下邊框設為黑色，把當前l(fā)i的下邊框顏色設為米白；當鼠標移出li時，先把當前l(fā)i下邊框變黑，再把首頁下邊框變米白。

Guru membetulkan：天蓬老師Masa pembetulan：2019-04-14 21:44:30
Rumusan guru：布局只要遵循一定的原則即可, 細節(jié)之處, 每個人的處理方式都是不同的, 實現(xiàn)效果, 做對是第一位的, 然后再求優(yōu)

Nota Keluaran

Penyertaan Popular