＜简单的左侧可活动消息栏＞

踏忘往昔

已于 2023-09-24 11:26:57 修改

阅读量103

点赞数 3

文章标签：前端 javascript html

于 2023-09-11 01:03:57 首次发布

本文链接：https://blog.csdn.net/qq_58426125/article/details/132798025

版权

HTML代码

<body>
    <nav>
<div>
    <p>这是一段消息</p>
    <h3>标题</h3>
</div>
<div>
    <p>这是一段消息</p>
    <h3>标题</h3>
</div>
<div>
    <p>这是一段消息</p>
    <h3>标题</h3>
</div>
<div>
    <p>这是一段消息</p>
    <h3>标题</h3>
</div>
<div>
    <p>这是一段消息</p>
    <h3>标题</h3>
</div>
<div>
    <p>这是一段消息</p>
    <h3>标题</h3>
</div>
    </nav>
</body>

CSS代码

    <style>
              *{
            list-style: none;
            text-decoration:none;
            margin: 0;
            padding: 0;
        } 
        body{
            background-color: rgb(47, 104, 194);
        }

    nav{
    /* 固定左侧消息栏让其不随页面滚动 */
    position: fixed;
} 
    nav div{
    /* 设置div容器大小 */
    width:50px;
    height: 50px; 
    /* 当文本溢出隐藏 */
    overflow: hidden;
    /* 设置nav中全部容器弹出的延迟时间 */
    transition:all 1s;
    background-color: cadetblue;
    /* 设置div圆角 */
    border-radius: 25px 25px 25px 25px;
}
    nav div p{
    /* 设置文本行高 */
    line-height: 50px; 
    margin-left: 5px;
    /* 未触发div隐藏 */
    display: none;
}
    nav div h3{
    float: right;
    margin-right: 5px;
    line-height: 50px;
}
    nav div:hover{
    /* 当触发div文本居中并扩大div容器的宽度 */
    text-align: center;
    width: 400px;  
}
    nav div:hover h3{
    /* 当div被触发隐藏标题 */
    display: none;
}
    nav div:hover p{
        /* 当div被触发显示文本 */
    display: block;
}
    </style>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左侧活动消息栏</title>
    <style>
              *{
            list-style: none;
            text-decoration:none;
            margin: 0;
            padding: 0;
        } 
        body{
            background-color: rgb(47, 104, 194);
        }

    nav{
    /* 固定左侧消息栏让其不随页面滚动 */
    position: fixed;
} 
    nav div{
    /* 设置div容器大小 */
    width:50px;
    height: 50px; 
    /* 当文本溢出隐藏 */
    overflow: hidden;
    /* 设置nav中全部容器弹出的延迟时间 */
    transition:all 1s;
    background-color: cadetblue;
    /* 设置div圆角 */
    border-radius: 25px 25px 25px 25px;
}
    nav div p{
    /* 设置文本行高 */
    line-height: 50px; 
    margin-left: 5px;
    /* 未触发div隐藏 */
    display: none;
}
    nav div h3{
    float: right;
    margin-right: 5px;
    line-height: 50px;
}
    nav div:hover{
    /* 当触发div文本居中并扩大div容器的宽度 */
    text-align: center;
    width: 400px;  
}
    nav div:hover h3{
    /* 当div被触发隐藏标题 */
    display: none;
}
    nav div:hover p{
        /* 当div被触发显示文本 */
    display: block;
}
    </style>
</head>
<body>
    <nav>
<div>
    <p>这是一段消息</p>
    <h3>标题</h3>
</div>
<div>
    <p>这是一段消息</p>
    <h3>标题</h3>
</div>
<div>
    <p>这是一段消息</p>
    <h3>标题</h3>
</div>
<div>
    <p>这是一段消息</p>
    <h3>标题</h3>
</div>
<div>
    <p>这是一段消息</p>
    <h3>标题</h3>
</div>
<div>
    <p>这是一段消息</p>
    <h3>标题</h3>
</div>
    </nav>
</body>
</html>