正文

孩子，学会用代码给网页加菜单，超简单！

/0 浏览量
0925

嗨，亲爱的孩子们！今天我们要一起探索一个超级有趣的话题——如何用代码给网页添加一个漂亮的菜单！别看它听起来有点复杂，其实超简单哦！让我们一起动手试试吧！

了解HTML和CSS

首先，我们要知道两个超级重要的东西：HTML和CSS。

  • HTML：它是网页的骨架，就像房子的框架一样，告诉浏览器网页的结构是怎样的。
  • CSS：它是网页的装饰，负责让网页看起来更漂亮，就像房子的装修一样。

创建基本的HTML菜单

我们先从HTML开始。想象一下，我们要在网页上创建一个菜单，它可能包含几个链接，比如“首页”、“关于我们”和“联系我们”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的菜单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</body>
</html>

这段代码创建了一个简单的导航菜单，里面有三个链接。

添加CSS样式

接下来，我们用CSS来美化这个菜单。创建一个名为styles.css的文件，并添加以下代码：

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

nav ul li {
    float: left;
}

nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #111;
}

这段CSS代码做了几件事情：

  • 移除了列表的默认样式。
  • 设置了菜单的背景颜色。
  • 让菜单项水平排列。
  • 设置了链接的样式和悬停效果。

测试你的菜单

现在，打开你的HTML文件，看看效果吧！你应该能看到一个漂亮的菜单，点击链接还能跳转到不同的页面哦！

小结

孩子们，通过今天的学习，你们已经学会了如何用HTML和CSS创建一个基本的网页菜单。这只是一个开始，随着你们对代码的了解越来越深，你们可以创造出更多有趣和复杂的网页效果。加油吧，未来的网页设计师们！

-- 展开阅读全文 --