正文

学会制作超简单UL LI菜单，网页设计不求人

/0 浏览量
0509

在网页设计中，列表菜单（UL LI）是一种非常常见的元素，用于展示导航链接、项目列表或其他信息。掌握如何制作一个简单的UL LI菜单，可以让您在不需要求助专业人士的情况下，轻松地美化自己的网页。下面，我将一步一步地教您如何制作一个超简单的UL LI菜单。

准备工作

在开始之前，请确保您已经安装了以下工具：

  • 文本编辑器：如Notepad++、Sublime Text或Visual Studio Code。
  • 浏览器：如Google Chrome、Mozilla Firefox等，用于预览效果。

第一步：创建HTML结构

首先，我们需要创建一个基本的HTML结构。打开您的文本编辑器，输入以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超简单UL LI菜单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">产品与服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>
</html>

这段代码创建了一个包含四个列表项的菜单。每个列表项都包含一个链接（<a>标签），指向不同的页面或信息。

第二步：添加CSS样式

接下来，我们需要为这个菜单添加一些基本的样式。在同一个文件夹中创建一个名为styles.css的文件，并输入以下代码：

ul {
    list-style-type: none; /* 移除默认的列表符号 */
    margin: 0; /* 移除默认的外边距 */
    padding: 0; /* 移除默认的内边距 */
    overflow: hidden; /* 隐藏溢出的内容 */
    background-color: #333; /* 设置背景颜色 */
}

li {
    float: left; /* 使列表项横向排列 */
}

li a {
    display: block; /* 使链接充满整个列表项 */
    color: white; /* 设置链接文字颜色 */
    text-align: center; /* 设置文字居中 */
    padding: 14px 16px; /* 设置内边距 */
    text-decoration: none; /* 移除下划线 */
}

li a:hover {
    background-color: #111; /* 鼠标悬停时改变背景颜色 */
}

这段CSS代码将使菜单具有以下样式：

  • 无边框、无内边距、无外边距。
  • 列表项横向排列。
  • 链接文字居中，并充满整个列表项。
  • 背景颜色为深灰色，链接文字颜色为白色。
  • 鼠标悬停时，背景颜色变为深灰色。

第三步：预览效果

保存所有文件后，在浏览器中打开HTML文件，您应该能看到一个简单的UL LI菜单。您可以点击链接，查看它们是否正常工作。

总结

通过以上步骤，您已经成功制作了一个超简单的UL LI菜单。这个菜单不仅美观，而且功能齐全。如果您想要进一步美化菜单或添加更多功能，可以继续学习和探索CSS和HTML的相关知识。现在，您已经不再需要求助专业人士来设计网页了！

-- 展开阅读全文 --