个人主页网页设计HTML模板

在数字化时代，拥有一个个人主页是展示自己技能、经验和兴趣的有效方式。本文将介绍如何创建一个基本的个人主页HTML模板，帮助你快速搭建自己的在线形象。

1. 基础HTML结构

首先，我们需要一个基本的HTML结构。这包括<!DOCTYPE html>声明、<html>标签以及包含元数据和内容的头部和主体部分。

html

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>My Personal Homepage</title> <link rel=“stylesheet” href=“styles.css”> </head> <body> <header> <h1>Welcome to My Personal Homepage</h1> <nav> <ul> <li><a href=“#about”>About Me</a></li> <li><a href=“#portfolio”>Portfolio</a></li> <li><a href=“#contact”>Contact</a></li> </ul> </nav> </header> <main> <section id=“about”> <h2>About Me</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </section> <section id=“portfolio”> <h2>Portfolio</h2> <div class=“gallery”> <!– Portfolio items go here –> </div> </section> <section id=“contact”> <h2>Contact Me</h2> <form action=“#”> <label for=“name”>Name:</label> <input type=“text” id=“name” name=“name”><br> <label for=“email”>Email:</label> <input type=“email” id=“email” name=“email”><br> <label for=“message”>Message:</label> <textarea id=“message” name=“message”></textarea><br> <input type=“submit” value=“Send”> </form> </section> </main> <footer> <p>© 2023 My Personal Homepage</p> </footer> <script src=“scripts.js”></script> </body> </html>

2. 添加CSS样式

为了使个人主页看起来更美观和专业，我们需要使用CSS来控制布局和样式。我们将创建一个外部CSS文件styles.css。

styles.css:

css

/* Basic Styles */ body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; } header { background-color: #333; color: white; padding: 10px 0; text-align: center; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline; margin-right: 10px; } nav ul li a { color: white; text-decoration: none; } main { padding: 20px; } footer { background-color: #333; color: white; text-align: center; padding: 10px 0; position: fixed; width: 100%; bottom: 0; } /* Gallery Styles */ .gallery { display: flex; flex-wrap: wrap; justify-content: space-around; } .gallery-item { margin: 10px; border: 1px solid #ccc; padding: 10px; max-width: 300px; }