先搭建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; }
基本上就这些。只要结构清楚，样式简洁，就能做出一个专业又实用的个人网页。关键是保持内容清晰，别过度装饰。不复杂但容易忽略的是留白和字体可读性，这两点做好了，整体质感立马提升。