<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习导航栏的制作</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
$(".div1").click(function() {
$(".div2").addClass("dlHover");
});
$(".div1").hover(function(){//第一个函数作为鼠标悬浮时执行的函数
$(this).addClass("bg");
},function(){//第二个函数作为鼠标离开时执行的函数
$(this).removeClass("bg");
$(".div2").removeClass("dlHover");
});
});
</script>
<style>
*{margin: 0px auto;padding: 0px;text-align: center;}
ul{list-style: none;}
.div2{display:none;width: 100px;border: 1px solid gray;background: #00FFFF;}
.dlHover{position:absolute;z-index: 9999;display: block;}
.div1{border: 1px solid gray;width: 100px;background-color: #999999;}
.bg{background-color: #1F9999;}
</style>
</head>
<body>
<div class="div1">
<span class="span1">导航1</span>
<div class="div2">
<ul>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</div>
</div>
<h3>学习导航栏的制作</h3>
<p>这是一个简单的导航栏</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/xiazai/code/1522">
<img src="https://img.php.cn/upload/webcode/000/000/000/598d4264dc465233.png" alt="SpringTime简洁风格管理后台模板">
</a>
<div class="aritcle_card_info">
<a href="/xiazai/code/1522">SpringTime简洁风格管理后台模板</a>
<p>SpringTime是一个简洁风格管理后台模板，导航和侧栏很漂亮，表格和表单的设计也很好。有仪表盘、新文章、用户管理、照片库、制品、服务控制等系统功能菜单。</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="SpringTime简洁风格管理后台模板">
<span>105</span>
</div>
</div>
<a href="/xiazai/code/1522" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="SpringTime简洁风格管理后台模板">
</a>
</div>
</body>
</html>
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
887
收藏
