一、设计背景与目标
随着Web前端开发技术的不断发展，Div+CSS作为经典的网页布局方式，仍然是前端开发的基础与核心。本次期末作品旨在通过纯Div+CSS技术设计并实现一个个人主页，展示个人信息、技能、作品及联系方式，综合运用HTML结构搭建与CSS样式表布局能力，体现“结构与表现分离”的前端开发思想。
二、整体架构设计
本个人网页采用标准的三栏式布局：头部（Header）、主体内容区（Main Content）和页脚（Footer）。主体内容区进一步分为左侧导航栏和右侧内容展示区。所有布局组件均使用<div>标签承载，类名遵循语义化命名规范，便于维护与扩展。CSS重置用于清除默认边距，并采用Flex box与Float结合的方式实现灵活布局。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人主页 | 张三</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="logo">张三的博客</div>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">作品集</a></li>
<li><a href="#">联系我</a></li>
</ul>
</div>
<div class="container">
<div class="sidebar">
<div class="profile">
<img src="avatar.jpg" alt="头像">
<h3>张三</h3>
<p>Web前端开发</p>
</div>
<div class="skill-list">
<h4>技能标签</h4>
<span>HTML5</span> <span>CSS3</span> <span>JavaScript</span>
</div>
</div>
<div class="content">
<div class="section" id="about">
<h2>关于我</h2>
<p>热爱前端技术，专注于响应式页面设计与用户体验。</p>
</div>
<div class="section" id="portfolio">
<h2>作品集</h2>
<div class="work-card">
<h3>企业官网</h3>
<p>基于Div+CSS的静态企业站</p>
</div>
<div class="work-card">
<h3>个人博客</h3>
<p>使用Flex布局的博客模板</p>
</div>
</div>
</div>
</div>
<div class="footer">
<p>© 2024 张三 保留所有权利</p>
</div>
</body>
</html>三、CSS表现形式与布局实现
整体采用外部样式表，使用CSS变量定义主题色与字体，提升复用性。主要特点：
- 使用Flexbox实现大部分容器内的图文居中对齐和等高等宽效果；
- 在极端窗口角度下或CSS Grid不可用时，具有优雅降级效果；
- 使用盒子模型实现精致的内边距形成组件外观。
`css
/ 重置基础样式 /
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', 'PingFang SC', sans-serif;
background: #f8f9fc;
color: #222;
line-height: 1.6;
}
/ 布局容器：所有主要模块水平居中固定宽度 /
.header,
\.container,
\.footer {
max-width: 1100px;
margin: 0 auto;
width: 100%;
padding: 1rem 1.5rem;
}
/ 页头横向布局及纵向对齐展示 /
.header {
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffffdd;
border-bottom: 1px solid rgba(0, 0, 0.08)
/* it's ready now -- ready word replaced with realistic 'augmentations ' -- more likely follow last
]
}
