web二级菜单和广告悬浮

最新推荐文章于 2024-07-18 16:15:24 发布

random39

最新推荐文章于 2024-07-18 16:15:24 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/random39/article/details/80114597

版权

二级菜单和广告悬浮的简单实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*设置边缘和内边距都为0*/
            * {
                margin: 0;
                padding: 0;
            }
            /*menu下面的li列表属性为空*/
            .menu li{
                list-style: none;
            }

            .menu li {
                width:120px;
                height: 35px;
                background-color: greenyellow;
                color: white;
                text-align: center;
                line-height: 35px;
                border-bottom: 1px solid lightgray;
                overflow: hidden;
            }
            .menu>li:hover  /*伪类：当鼠标停在上面显示隐藏的*/
            {
                height: auto;
                overflow: hidden;
            }
            .menu li ul li {
                /*width: 120px;
                height: 35px;
                line-height: 35px;*/
                background-color: palevioletred;
                /*color: white;
                text-align: center;
                border-bottom: 1px solid lightgray;*/
            }
            #dav {
                width: 200px;
                height: 200px;
                background-color: blue;
                position: fixed;  /*固定定位*/
                top: 100px;
                right: 50px;

            }
            #abc {
                float: right;  /*浮动在右*/
                border: none;  /*边界为空*/
            }

        </style>
    </head>
    <body>
        <div id = "dav">
            <button id = "abc">关闭</button>
        </div>

        <ul class = "menu">
            <li>
                陕西省
                <ul>
                    <li>西安市</li>
                    <li>咸阳市</li>
                    <li>安康市</li>
                </ul>
            </li>
            <li>
                江西省
                <ul>
                    <li>南昌市</li>
                    <li>新余市</li>
                    <li>赣州市</li>
                </ul>
            </li>
            <li>
                四川省
                <ul>
                    <li>成都市</li>
                    <li>自贡市</li>
                    <li>德阳市</li>
                    <li>遂宁市</li>
                    <li>资阳市</li>
                </ul>
            </li>
            <li>
                西藏自治区
                <ul>
                    <li>拉萨市</li>
                    <li>日客则市</li>
                    <li>林芝市</li>
                </ul>
            </li>
        </ul>

        <!--当鼠标点击关闭三次才可以关闭掉
        前两次都是跳转达到百度首页-->
        <script>
            var counter = 0
            var closeBtn = document.getElementById('abc');
            closeBtn.onclick = function() {
                counter += 1;
                if( counter ==3) {
                    var dav = document.getElementById('dav');
                    dav.style.display = "none";
                }else{
                    window.open('http://www.baidu.com');
                }
            };
        </script>
    </body>
</html>

实现之后的效果