个人导航页html模板

作者：资本principal 发布日期:2025-09-06 浏览:103

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人导航页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
        }
        .nav-item {
            display: inline-block;
            margin: 10px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 5px;
        }
        .nav-item:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的个人导航页</h1>
        <a href="https://example.com/home" class="nav-item">首页</a>
        <a href="https://example.com/about" class="nav-item">关于我</a>
        <a href="https://example.com/projects" class="nav-item">项目展示</a>
        <a href="https://example.com/contact" class="nav-item">联系我</a>
    </div>
</body>
</html>

解释说明：

HTML结构：
- 使用了标准的HTML5文档结构，包括<!DOCTYPE html>声明、<html>标签、<head>和<body>部分。
- 在<head>中设置了字符编码为UTF-8，并定义了视口（viewport）以确保页面在移动设备上正确显示。
- 页面标题设置为“个人导航页”。
CSS样式：
- 使用内联<style>标签来定义页面的样式。
- body设置了背景颜色、字体和外边距。
- .container类用于居中对齐内容并添加一些内边距。
- .nav-item类用于定义导航链接的样式，包括背景颜色、文本颜色、内边距和圆角。
- 添加了:hover伪类，当鼠标悬停在导航链接上时，背景颜色会变深。
导航链接：
- 在<body>中使用<a>标签创建了四个导航链接，分别指向“首页”、“关于我”、“项目展示”和“联系我”。
- 每个链接都应用了.nav-item类，使其具有相同的样式。

这个模板可以作为一个简单的个人导航页的基础，你可以根据需要修改链接地址和样式。

上一篇：表格html

下一篇：html 圆角