标题：HTML CSS个人主页模板

随着互联网的快速发展，个人主页已经成为展示个人形象、技能和作品的重要平台。本文将为您详细介绍一款简洁大方的HTML CSS个人主页模板，帮助您快速搭建属于自己的个人网站。

一、模板设计理念

1. 简洁大方：模板采用简约的设计风格，让用户能够专注于内容展示，避免过多的装饰性元素干扰视线。

2. 响应式布局：模板支持多种设备访问，自动适应不同屏幕尺寸，提升用户体验。

3. 模块化设计：模板将页面划分为多个模块，方便用户根据自己的需求进行修改和调整。

二、模板结构及代码

1. HTML结构

```html

作品集

2. CSS样式

```css /* 清除默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: Arial, sans-serif; }

/* 容器样式 */ .container { width: 80%; margin: 0 auto; padding: 20px; }

/* 头部样式 */ header { background-color: 333; color: fff; padding: 20px 0; }

header h1 { font-size: 2em; margin-bottom: 0; }

nav ul { list-style: none; display: flex; justify-content: space-around; }

nav ul li { font-size: 1.2em; }

nav ul li a { color: fff; text-decoration: none; }

/* 模块样式 */ section { margin-top: 40px; }

section h2 { font-size: 1.8em; margin-bottom: 20px; }

section p { font-size: 1em; line-height: 1.6; }

section ul { list-style: disc; padding-left: 20px; }

/* 作品集样式 */ .gallery { display: flex; justify-content: space-around; flex-wrap: wrap; }

.gallery img { width: 30%; margin: 10px; }

/* 联系方式样式 */ contact p { font-size: 1.2em; }

/* 页脚样式 */ footer { background-color: 333; color: fff; text-align: center; padding: 20px 0; }

```

三、使用说明

1. 将上述HTML和CSS代码保存为两个文件，分别命名为index.html和styles.css。

2. 将index.html文件作为网站首页，将styles.css文件作为样式表。

3. 根据自己的需求，修改index.html文件中的内容，如添加个人简介、技能、作品等。

4. 可以在styles.css文件中进一步调整样式，以满足个性化需求。

5. 将模板部署到服务器或本地环境，即可访问个人主页。

通过以上步骤，您就可以拥有一款属于自己的个人主页模板。在此基础上，您可以根据自己的需求进行修改和扩展，使其更加完善。祝您搭建成功！