正文

HTML5轻松制作空心圆点导航列表教程

/0 浏览量
0626

在网页设计中，导航栏是用户与网站交互的重要部分。一个美观且实用的导航栏可以提升用户体验。今天，我将教你如何使用HTML5和CSS3轻松制作一个空心圆点导航列表。

准备工作

在开始之前，请确保你的电脑上安装了文本编辑器（如Notepad++、Sublime Text等），以及浏览器（如Chrome、Firefox等）用于查看效果。

HTML结构

首先，我们需要构建HTML结构。以下是一个简单的空心圆点导航列表的HTML代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>空心圆点导航列表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <ul class="dot-nav">
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#services">服务</a></li>
            <li><a href="#contact">联系方式</a></li>
        </ul>
    </nav>
</body>
</html>

CSS样式

接下来，我们需要为这个导航列表添加一些样式。以下是一个简单的CSS代码，用于创建空心圆点导航列表：

/* 清除列表默认样式 */
.dot-nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

/* 设置列表项样式 */
.dot-nav li {
    float: left;
}

/* 设置链接样式 */
.dot-nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* 设置链接的背景颜色 */
.dot-nav li a:hover {
    background-color: #111;
}

/* 设置圆点样式 */
.dot-nav li::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

/* 设置鼠标悬停时的圆点样式 */
.dot-nav li a:hover::after {
    opacity: 1;
}

效果展示

将上述HTML和CSS代码保存为.html和.css文件，并在浏览器中打开.html文件。你应该能看到一个带有空心圆点的导航列表。

总结

通过本教程，你学会了如何使用HTML5和CSS3制作一个空心圆点导航列表。你可以根据自己的需求调整样式，使其更加美观和实用。希望这个教程对你有所帮助！

-- 展开阅读全文 --