使用VScode实现W3school的导航栏

最新推荐文章于 2024-10-08 11:00:38 发布

SinglePup

最新推荐文章于 2024-10-08 11:00:38 发布

阅读量1.4k

点赞数

文章标签： vscode css html

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

版权

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

摘要由CSDN通过智能技术生成

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;