前端练习01

最新推荐文章于 2024-10-04 00:46:18 发布

dream Fly YH

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量167

点赞数 3

文章标签：前端开发语言

本文链接：https://blog.csdn.net/qq_60247269/article/details/139707433

版权

完成‘回到顶部’案例，‘导航栏案例’(浮动、绝对定位)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
			padding: 0;
		}
        ul>li{
            list-style: none;
            float: left;
            position:relative;
            padding-left: 20px;
            padding-right: 20px;
        }
        #head_h>ul{
            width: 1000px;
            height: 60px;
            margin: auto;
            line-height: 60px;
        }
        #head_h{
            width: 100%;
            background-color: skyblue;
        }
        ul>li:hover{
            background-color: greenyellow;
        }

        #fj{
            display: none;
            width: 80px;
            text-align: center;
            position: absolute;
            left: 0px;
        }
        ul>li:hover>#fj{
            display: block;
            background-color: aquamarine;
        }
        #mh{
            display: none;
            width: 80px;
            text-align: center;
            position: absolute;
            left: 0px;
        }
        ul>li:hover>#mh{
            display: block;
            background-color: aquamarine;
        }
        #z{
            height: 5000px;
        }
        #button_head{
            width: 100px;
            height: 100px;
            border: 10px solid yellow;
            text-align: center;
            line-height: 100px;
            right:5px;
            top:30px;
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="z">
        <div  id="head_h">
            <ul>
                <li><img width="60px" height="60px" src="https://i1.hdslb.com/bfs/face/07a1bf790d2e3041889e68524f96255842b09b99.jpg" alt=""></li>
                <li>首页</li>
                <li>番剧
                    <div id="fj">
                        <div>怪物8号</div>
                        <div>迷宫饭</div>
                    </div>
                </li>
                <li>直播</li>
                <li>游戏中心</li>
                <li>会员购</li>
                <li>漫画
                    <div id="mh">
                        <div>刀剑神域</div>
                        <div>鬼灭之刃</div>
                    </div>
                </li>
                <li>赛事</li>
            </ul>
        </div>
    </div>
    <div id="head_back"></div>
        <div id="button_head">
            <a href="#z">回到顶部</a>
        </div>
</body>
</html>

效果：