使用VScode实现W3school的导航栏_vscode怎么写导航-CSDN博客

本文链接：https://blog.csdn.net/qq_43558421/article/details/123032379

本文介绍了如何使用VScode来实现类似W3school的导航栏，包括设置向右展开的样式，灰色背景，深色字体，鼠标悬停时颜色加深且整个方块被选中的效果。通过步骤说明和代码展示，详细解释了整个过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.要求样式

导航栏向右展开
背景颜色为灰色
字体颜色略深
鼠标悬停颜色最深
鼠标悬停时整个方块都被选中
尽量还原w3school的导航栏

2.vscode代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航</title>
    <link rel="stylesheet" href="../重置样式表/reset.css">
    <style>
        .nav{
            width: 1151px;
            height: 48px;
            background-color: gainsboro;
            margin: 100px auto;
        }
        /* 设置li属性 */
        .nav li{
            /* 向左浮动 */
            float: left;
            height: 48px;
            /* 将文字在父元素中垂直居中 */
            line-height: 48px;
            
        }
        /* 设置导航属性 */
        .nav a{
            /* 转换为块元素 */
            display: block;
            /* 字体类型 */
            text-decoration: none;
            /* 字体颜色 */
            color: gray;
            /* 外边距 */
           font-size: 20px;
           padding: 0 30px;
        }
        a:hover{
            background-color: #3f3f3f;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Server Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Building</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>
    </ul>
</body>
</html>

3.结果展示