abstrait：一、功能代碼<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)</title> <link rel="stylesheet&quo
一、功能代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php中文網(wǎng)</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="icon" href="picture/logo.png">
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<!-- 頁面頭部 -->
<div class="container-fluid">
<a href="javascript:;"><img src="picture/logo (1).png" alt=""></a>
<ul class="ul_box">
<li style="background:rgba(109,122,138,0.5);"><a href="">首頁</a></li>
<li><a href="">視頻教程</a></li>
<li><a href="">社區(qū)問答</a></li>
<li id="dictionary"><a href="">編程詞典</a><i class="glyphicon glyphicon-triangle-bottom"></i>
<ul class="ul_box_dictionary">
<li><a href="">php詞典</a></li>
<li><a href="">技術(shù)文章</a></li>
<li><a href="">jquery詞典</a></li>
<li><a href="">php教程</a></li>
<li><a href="">html詞典</a></li>
<li><a href="">小程序開發(fā)</a></li>
<li><a href="">javascript詞典</a></li>
<li><a href="">html教程</a></li>
</ul>
</li>
<li><a href="">手冊下載</a></li>
<li><a href="">工具下載</a></li>
<li><a href="">類庫下載</a></li>
<li><a href="">特色課程</a></li>
<li><a href="">菜鳥學(xué)堂</a></li>
</ul>
<div class=".container-fluid_right">
<a href="">登錄</a>
<a href="">注冊</a>
</div>
<div class="clear"></div>
</div>
<script>
$(function(){
//實(shí)現(xiàn)‘編程詞典’彈出功能
$('.ul_box_dictionary').hide();
$('#dictionary').hover(function(){
$(this).children('i').attr('class','glyphicon glyphicon-triangle-top')
$(this).children('ul').slideDown(500)
},function(){
$(this).children('i').attr('class','glyphicon glyphicon-triangle-bottom')
$(this).children('ul').slideUp(500)
})
//實(shí)現(xiàn)‘編程詞典’彈出后移動到ul各個(gè)li的事件
$('.ul_box_dictionary li').hover(function(){
$(this).css('background','#ccc')
},function(){
$(this).css('background','#fff')
})
})
</script>
</body>
</html>css樣式代碼
*{margin: 0px;padding: 0px;}
body{
background: #F3F5F7;
font-size: 14px;
}
.clear{clear: both;}
.container-fluid{
height: 60px;
background: black;
line-height: 60px;
}
.container-fluid a img{
width: 135px;
height: 60px;
float: left;
}
.container-fluid ul{
float: left;
}
.ul_box>li {
list-style: none;
width: 100px;
height: 60px;
text-align: center;
float: left;
margin-left: 10px;
cursor: pointer;
}
.container-fluid a {
text-decoration: none;
color: #ccc;
}
.container-fluid div{
float: right;
right: 10px;
}
.container-fluid div a{
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
}
.ul_box>li:hover{
border-bottom: 3px solid #A5EA6A;
}
.ul_box>li>a:hover{
color: #fff;
}
.container-fluid div a:hover{
color: #fff;
background:rgba(109,122,138,0.5);
}
i{
color: #ccc;
margin-left: 5px;
}
.ul_box_dictionary{
width: 220px;
height: 160px;
margin-top: 10px;
padding: 5px 0;
background: #fff;
}
.ul_box_dictionary li{
width: 110px;
height: 36px;
list-style: none;
float: left;
text-align: center;
line-height: 36px;
}
.ul_box_dictionary li a{
color: #313131;
}
Professeur correcteur：天蓬老師Temps de correction：2019-01-29 11:42:10
Résumé du professeur：沒有看到圖片, 很遺憾, 下次配個(gè)圖, 一張圖,勝過代碼千行