Html学习笔记---hover

最新推荐文章于 2024-03-30 18:20:23 发布

xiaoa~

最新推荐文章于 2024-03-30 18:20:23 发布

阅读量1.8k

点赞数 1

分类专栏： html学习笔记

本文链接：https://blog.csdn.net/qq_34964399/article/details/79323611

版权

html学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position:fixed;
            left: 0;
            right: 0;
            top: 0;
            background-color:blue;
            height:60px;
            line-height:60px;
        }
        .header{
            width:980px;
            margin:0 auto;
        }
        /*a标签是行内标签，用inline-block就能撑起来大小*/
            .pg-header .menu{
            display:inline-block;
            color:white;
            padding:0 10px;
        }
        /*点到对应的突变其背后css样式就会改变*/
        .pg-header .menu:hover{
            background-color:indianred;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="header">
            <a >Logo</a>
            <a class="menu">火影</a>
            <a class="menu">海贼</a>
            <a class="menu">七龙珠</a>
            <a class="menu">幽游白书</a>
            <a class="menu">飙速宅男</a>
        </div>
    </div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiaoa~

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html学习笔记---hover

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .pg-header{ po
复制链接

扫一扫