为什么会跳转到同一个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中华支教信息中心</title>
<style>
*{margin: 0;padding: 0;font-size: 12px;}
ul li{list-style: none;}
.clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}
.top{background: #4CB0A0;width:100%;display: table;}
.top ul {float: right;margin-right:0px; }
.top ul li {float: left;margin:5px; }
.top ul li a{text-decoration:none;display: block;color: ##c2c2c2;line-height: :30px;margin: 10px 0px;width: 75px;text-align: center;}
#xiaohai {font-size:200%;height: 350px; background-image: url("zhijiao.jpeg");background-size:cover;height: 750px;}
h1 {font-size: 150%;color: white;padding: 50px;text-align: center;font-family: FangSong;color: green;text-decoration: none;}
.main{width:1000px;overflow:hidden;margin:20px auto;}
.aboutus{width:700px;float:left;}
.aboutus img{width:280px;height:200px;float:left;margin-right:20px;}
.aboutus p{text-indent:28px;line-height:26px;}
.zhijiaoxinxi .title{width:100%;height:30px;line-height:30px;background-color:#fff433;font-size:20px;text-align: center;text-decoration:none;}
.zhijiaoxinxi ul{width:260px;margin:auto;}
.zhijiaoxinxi li{height:26px;line-height:26px;text-indent:20px;overflow:hidden;}
.zhijiaoxinxi li a{color:#000;text-decoration: none;text-align: left;}
.zhijiaoxinxi li a:hover{color:#dd3b30;}
.zhijiaoxinxi {width:280px;float:right;}
.tuji{width:100%;clear:both;padding-top:10px;overflow:hidden;}
.tuji .title{height:30px;line-height:30px;border-bottom:10px solid #84C1FF;font-size:20px;color:#AAAAFF;}
.tuji .title span{display:block;width:100px;height:30px;text-align:center;float:left;font-size: 20px;}
.tuji ul{padding-top:10px;}
.tuji li{width:240px;margin:5px;float:left;background:#f2f2f2;}
.tuji li img{width:240px;height:180px;}
</style>
</head>
<body>
<div class="top">
<ul>
<li><a href="login.html">登陆</li>
<li><a href="reg.html">注册</li>
<li><a href="baoming.html">报名支教</li>
<li><a href="#">支教老师须知</li>
<li><a href="ND.HTML">关于我们-ND</li>
</ul>
</div>
<div id="xiaohai">
<h1>关爱儿童,关爱未来</h1>
</div>
<div class="main">
<div class="aboutus">
<img src="luanke.jpg">
<p>
有这样一个德国人,从1997年开始,常年深入到中国广西不通电话、
不通公路的偏远山村,
去陪伴当地的乡村留守儿童。
在当地村民眼中:
这个不抽烟、不喝酒、不吃肉、
不要工资,也不谈恋爱,
整天与乡村孩子在一起的德国人,
就是个一个“怪人”。
</p>
<p>
他的行为吸引央视记者柴静,
两次前往深山进行采访。
第一次采访结束后柴静就觉得:
面对这个人,让自己土崩瓦解……
无形中这位德国中年男人,成了柴静的精神导师。他的事迹被媒体广泛报道后,有人说他是圣徒,是当代“白求恩”,也有人说他是异类,是失败者……但他不为所动,我只是在遵从我的内心,做我自己想做的事。这个德国人曾经有个中文名字:卢安克
</p>
</div>
<div class="zhijiaoxinxi">
<div class="title">招募信息</div>
<ul>
<li><a href="zhijiaoxinxi1.html">艺启梦想西部支教志愿者</li>
<li><a href="zhijiaoxinxi2.html">本木源助学四川支教志愿者老师申请</a></li>
<li><a href="zhijiaoxinxi3.html">荞麦花开四川支教志愿者老师申请</a></li>
<li><a href="zhijiaoxinxi4.html">绿之叶公益四川支教老师申请</a></li>
<li><a href="zhijiaoxinxi5.html">索玛花四川凉山支教老师申请</a></li>
<li><a href="zhijiaoxinxi6.html">小书包公益重庆支教老师申请</a></li>
<li><a href="zhijiaoxinxi7.html">为中国而教支教老师申请</a></li>
</ul>
</div>
<div class="tuji">
<div class="title"><span>支教图集</span></div>
<ul>
<li>
<img src="zhijiao1.webp">
</li>
<li>
<img src="zhijiao2.jpeg">
</li>
<li>
<img src="zhijiao3.jpeg">
</li>
<li>
<img src="zhijiao4.jpeg">
</li>
</ul>
</div>
</body>
</html>
为什么点击“关爱儿童关爱未来”和“招募信息”会跳转到同一个页面? <li><a href="ND.HTML">关于我们-ND</li>
这个a标签没有闭合,所以下面所有的元素都从属于这个a
所以下面所有的点击事件 都会跳到ND.HTML 许多a标签都没有闭合标签,所以才会出现上述情况,我已经帮你把所有的a标签都加上了闭合标签,下次写代码要注意些了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中华支教信息中心</title>
<style>
*{margin: 0;padding: 0;font-size: 12px;}
ul li{list-style: none;}
.clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}
.top{background: #4CB0A0;width:100%;display: table;}
.top ul {float: right;margin-right:0px; }
.top ul li {float: left;margin:5px; }
.top ul li a{text-decoration:none;display: block;color: ##c2c2c2;line-height: :30px;margin: 10px 0px;width: 75px;text-align: center;}
#xiaohai {font-size:200%;height: 350px; background-image: url("zhijiao.jpeg");background-size:cover;height: 750px;}
h1 {font-size: 150%;color: white;padding: 50px;text-align: center;font-family: FangSong;color: green;text-decoration: none;}
.main{width:1000px;overflow:hidden;margin:20px auto;}
.aboutus{width:700px;float:left;}
.aboutus img{width:280px;height:200px;float:left;margin-right:20px;}
.aboutus p{text-indent:28px;line-height:26px;}
.zhijiaoxinxi .title{width:100%;height:30px;line-height:30px;background-color:#fff433;font-size:20px;text-align: center;text-decoration:none;}
.zhijiaoxinxi ul{width:260px;margin:auto;}
.zhijiaoxinxi li{height:26px;line-height:26px;text-indent:20px;overflow:hidden;}
.zhijiaoxinxi li a{color:#000;text-decoration: none;text-align: left;}
.zhijiaoxinxi li a:hover{color:#dd3b30;}
.zhijiaoxinxi {width:280px;float:right;}
.tuji{width:100%;clear:both;padding-top:10px;overflow:hidden;}
.tuji .title{height:30px;line-height:30px;border-bottom:10px solid #84C1FF;font-size:20px;color:#AAAAFF;}
.tuji .title span{display:block;width:100px;height:30px;text-align:center;float:left;font-size: 20px;}
.tuji ul{padding-top:10px;}
.tuji li{width:240px;margin:5px;float:left;background:#f2f2f2;}
.tuji li img{width:240px;height:180px;}
</style>
</head>
<body>
<div class="top">
<ul>
<li><a href="login.html">登陆</a></li>
<li><a href="reg.html">注册</a></li>
<li><a href="baoming.html">报名支教</a></li>
<li><a href="#">支教老师须知</a></li>
<li><a href="ND.HTML">关于我们-ND</a></li>
</ul>
</div>
<div id="xiaohai">
<h1>关爱儿童,关爱未来</h1>
</div>
<div class="main">
<div class="aboutus">
<img src="luanke.jpg">
<p>
有这样一个德国人,从1997年开始,常年深入到中国广西不通电话、
不通公路的偏远山村,
去陪伴当地的乡村留守儿童。
在当地村民眼中:
这个不抽烟、不喝酒、不吃肉、
不要工资,也不谈恋爱,
整天与乡村孩子在一起的德国人,
就是个一个“怪人”。
</p>
<p>
他的行为吸引央视记者柴静,
两次前往深山进行采访。
第一次采访结束后柴静就觉得:
面对这个人,让自己土崩瓦解……
无形中这位德国中年男人,成了柴静的精神导师。他的事迹被媒体广泛报道后,有人说他是圣徒,是当代“白求恩”,也有人说他是异类,是失败者……但他不为所动,我只是在遵从我的内心,做我自己想做的事。这个德国人曾经有个中文名字:卢安克
</p>
</div>
<div class="zhijiaoxinxi">
<div class="title">招募信息</div>
<ul>
<li><a href="zhijiaoxinxi1.html">艺启梦想西部支教志愿者</a></li>
<li><a href="zhijiaoxinxi2.html">本木源助学四川支教志愿者老师申请</a></li>
<li><a href="zhijiaoxinxi3.html">荞麦花开四川支教志愿者老师申请</a></li>
<li><a href="zhijiaoxinxi4.html">绿之叶公益四川支教老师申请</a></li>
<li><a href="zhijiaoxinxi5.html">索玛花四川凉山支教老师申请</a></li>
<li><a href="zhijiaoxinxi6.html">小书包公益重庆支教老师申请</a></li>
<li><a href="zhijiaoxinxi7.html">为中国而教支教老师申请</a></li>
</ul>
</div>
<div class="tuji">
<div class="title"><span>支教图集</span></div>
<ul>
<li>
<img src="zhijiao1.webp">
</li>
<li>
<img src="zhijiao2.jpeg">
</li>
<li>
<img src="zhijiao3.jpeg">
</li>
<li>
<img src="zhijiao4.jpeg">
</li>
</ul>
</div>
</body>
</html>
页:
[1]