天道8 发表于 2022-6-6 09:52:54

为什么会跳转到同一个页面


<!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>


为什么点击“关爱儿童关爱未来”和“招募信息”会跳转到同一个页面?

wp231957 发表于 2022-6-6 10:02:53

<li><a href="ND.HTML">关于我们-ND</li>

这个a标签没有闭合,所以下面所有的元素都从属于这个a
所以下面所有的点击事件 都会跳到ND.HTML

临时号 发表于 2022-6-6 13:40:07

许多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]
查看完整版本: 为什么会跳转到同一个页面