界面连接处无缝连接==值得一看

最新推荐文章于 2021-08-01 20:21:46 发布

comeonzeze-邢泽涛

最新推荐文章于 2021-08-01 20:21:46 发布

阅读量440

点赞数

分类专栏： javascript html 文章标签：无缝连接

本文链接：https://blog.csdn.net/weixin_42321963/article/details/81870002

版权

javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            border: 0;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        #ad {
            width: 502px;
            height: 400px;
            border: 1px solid gray;
            margin: 0 auto;
            background-color: rgba(157, 157, 157, 0.65);
            position: relative;
            top: 10px;
        }

        li {
            display: block;
            width: 100px;
            text-align: center;
            padding: 20px 0px;
            float: left;
            border: 1px solid gray;
            border-left: 0px;
            border-top: 0px;
            background-color: rgba(167, 130, 60, 0.4);
        }

        li#l1 {
            border-right: 0px;
        }

        /* 这一点是关键点*/
        li.col {
            border-bottom: 1px solid transparent;
        }
    </style>

</head>
<body>
<div id="ad">
    <ul>
        <li>国际新闻</li>
        <li>国内新闻</li>
        <li>计算机新闻</li>
        <li>国内新闻</li>
        <li id="l1">计算机新闻</li>
    </ul>
</div>
<script>
   var aa=document.getElementsByTagName("li");
   for(var o of aa){
       o.onmouseover=function () {
           //这一点是关键点
           for(var o1 of aa){
               o1.className="";
           }
           this.className="col";
       }
   }


</script>

</body>
</html>

结果：