一.导航栏二级菜单。
1.代码如下(方法1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{ margin: 0;padding: 0; }
#nav{background-color: #050201;width: 600px;height: 40px;margin: 0 auto}
ul li{list-style: none;float: left;line-height: 40px;text-align: center;position: relative}
a{text-decoration: none;color: white;padding: 0 20px;display: block}
a:hover{background-color: #ff0502;color: white; }
ul li ul{position: absolute;top: 40px;left: 0;}
ul li ul li{float: none;background-color: #050205;margin: 1px 0;display: none;}
ul li ul li a{padding: 0;}
ul li:hover ul li{display: block}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<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="#">服务端技术</a></li>
<li><a href="#">python开发</a></li>
</ul>
</li>
<li><a href="#">学习中心</a></li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
(方法2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{margin: 0; padding: 0}
#nav{ background-color: darkgrey; width: 600px; height: 40px; margin: 0 auto;}
ul{list-style: none}
ul li{float: left; line-height: 40px; text-align: center;position: relative}
a{ text-decortion:none; color: #0099cc; display: block;padding:0 10px;}
a:hover{background-color: #99cc00;color: #edcc61}
ul li ul li{float: none;background-color: #edcc61;margin-top: 2px}
ul li ul{position: absolute;left: 0px; top: 40px; display: none}
ul li ul li a:hover{background-color: #9933cc;}
ul li:hover ul{display: block}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a><>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">python</a><>
</ul>
<>
<li><a href="#">学习中心</a><>
<li><a href="#">经典案例</a><>
<li><a href="#">关于我们</a><>
</ul>
</div>
</body>
<ml>
最终样式如下:
二.jQuery初学。
jQuery(CSS的选择器 快速查询DOM文档中元素的能力 强化了JS获取页面元素的方式)基础语法:$(seleector).action()
其语法是为HTML元素的选取编织的
美元符号“$”定义jQuery
选择器(selector) 查询和查找HTML元素
jQuery的action()执行对元素的操作
基本框架如下:
<script type="text/javascript">
$(document).ready(function(){
$(".A>a").click(function(){
$(this).addClass("current")
.next.show()
.parent().siblings().childrend("a").removeClass("current")
.next().hide();
return false;
});
});
</script>
<ul class="1">
<li class="2">
<a href="#">a</a>
<ul class="##">
<li><a href="###">*</a></li>
<li><a href="####">**</a></li>
<li><a href="#####">***</a></li>
<li><a href="######">****</a></li>
</ul>
</li>
</ul>