当前位置：首页 > 行业动态 > 正文

html个人网站模板

HTML个人网站模板，结构清晰美观，响应式设计，代码简洁易定制，适合快速

页面结构设计

基础HTML框架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">个人网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-内容区域 -->
</body>
</html>

核心页面模块

模块名称 功能说明 代码示例
导航栏 网站全局导航 html<nav><ul><li><a href="index.html">首页</a></li>...</ul></nav>
头部 个人简介/标语 html<header><h1>姓名</h1><p>职业/兴趣</p></header> |区 | 主体内容（多栏目） | div<section id="about">...</section><section id="skills">...</section></div>
页脚 版权信息/联系方式 footer<p>&copy; 2023 姓名 | 邮箱/社交链接</p></footer>

样式设计指南

基础样式规则

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}
a {
    text-decoration: none;
    color: #0066cc;
}

布局规范

元素类型 样式建议 示例代码
导航栏 固定顶部 + 水平排列 css nav { position: fixed; width: 100%; background: #fff; } |区 | 居中显示 + 最大宽度控制 | css .content { max-width: 1200px; margin: 0 auto; padding: 20px; }
按钮 圆角 + 悬停效果 css button { border-radius: 5px; transition: background 0.3s; }

响应式布局方案

移动端适配

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    .content {
        padding: 10px;
    }
}

自适应图片

<img src="photo.jpg" alt="个人照片" style="max-width: 100%; height: auto;">

常见问题与解答

问题1：如何修改网站主色调？

解答：

html个人网站模板 第1张

  1. 在 CSS 中定义全局颜色变量（如 :root） 
    :root {
    --main-color: #0066cc;
    --bg-color: #f9f9f9;
}
body { background-color: var(--bg-color); }
a { color: var(--main-color); }
  2. 修改 --main-color 值即可全局更新颜色
  3. 推荐使用 Adobe Color 生成配色方案

问题2：如何添加新页面并链接导航？

解答：

  1. 创建新页面（如 projects.html）
  2. 在导航栏 <ul> 中添加列表项 
    <li><a href="projects.html">作品集</a></li>
  3. 确保所有页面引用相同的 CSS 文件
  4. 如需动态效果，可添加 JavaScript 高亮当前页面链接 
    const navLinks = document.querySelectorAll('nav a');
navLinks.forEach(link => {
    if (link.href === window.location.href) {
        link.classList.add('active');
    }
0

相关文章