先搭建HTML结构并用CSS设置样式，实现一个结构清晰、响应式的个人网页。通过.container居中布局，header定义标题，nav创建导航链接，各section分区展示简介、技能与项目，footer放置版权信息；CSS设置字体、颜色、间距提升可读性，使用媒体查询适配移动端，导航在小屏垂直排列；添加border-radius、悬停效果等细节增强视觉体验，注重留白与字体选择，使页面简洁专业。
想用CSS做一个简单的个人网页布局，其实并不难。核心是结构清晰、样式简洁。下面一步步说明如何用HTML和CSS搭建一个基础但美观的个人主页。
1. 确定网页基本结构
一个典型的个人网页通常包含：头部（姓名/标题）、导航栏、简介区域、内容区（如技能、项目）、页脚。
先用HTML搭建骨架：
<div class="container">
<header>我的名字</header>
<nav>
<a href="#about">关于我</a>
<a href="#skills">技能</a>
<a href="#projects">项目</a>
</nav>
<section id="about">这里是简介</section>
<section id="skills">掌握的技能</section>
<section id="projects">做过的项目</section>
<footer>联系方式 © 2024</footer>
</div>
2. 使用CSS设置整体样式
给页面添加颜色、字体、间距，让内容更易读且美观。
立即学习“前端免费学习笔记（深入）”；
常用技巧包括：
- 设置容器居中并限制宽度：避免文字行太长影响阅读。
- 使用一致的颜色和字体：提升整体感。
- 合理留白：段落和模块之间留出空间，看起来更清爽。
.container {
width: 80%;
max-width: 960px;
margin: 0 auto;
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
text-align: center;
padding: 20px 0;
font-size: 2em;
color: #333;
}
nav {
text-align: center;
background: #f4f4f4;
padding: 10px;
}
nav a {
margin: 0 15px;
text-decoration: none;
color: #555;
}
nav a:hover {
color: #007acc;
}
section {
padding: 20px 0;
border-bottom: 1px solid #eee;
}
footer {
text-align: center;
padding: 20px;
font-size: 0.9em;
color: #777;
}
3. 响应式设计适配手机
现在很多人用手机浏览网页，加几行CSS就能让页面在小屏幕上也能正常显示。
使用媒体查询调整布局：
@media (max-width: 768px) {
.container {
width: 95%;
}
nav a {
display: block;
margin: 10px 0;
}
}
这样在手机上，导航链接会垂直排列，更容易点击。
4. 添加一点视觉亮点
不需要复杂动画，简单修饰就能提升质感。
- 给标题加个下划线或浅色背景
-
用圆角边框：比如
border-radius: 8px;
- 鼠标悬停效果：链接变色或轻微放大
例如让项目区块更有层次：
#projects {
background-color: #f9f9f9;
padding: 30px;
border-radius: 8px;
}
基本上就这些。只要结构清楚，样式简洁，就能做出一个专业又实用的个人网页。关键是保持内容清晰，别过度装饰。不复杂但容易忽略的是留白和字体可读性，这两点做好了，整体质感立马提升。
