最近在学习CSS排版布局，老师布置了一道关于网页作业的题目。我的任务是根据已有的网页设计图，实现一个内容完整、布局合理的网页。

最开始，我要根据设计图做出初始的HTML结构，包括

<header>
<h1>My Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section 1</h2>
<p>Some text here...</p>
</section>
<section>
<h2>Section 2</h2>
<p>Some text here...</p>
</section>
<section>
<h2>Section 3</h2>
<p>Some text here...</p>
</section>
</main>
<footer>
<p>© 2021 My Website</p>
</footer>

接下来，我开始使用CSS进行排版布局。首先是基础布局的设置，包括页面宽度、背景颜色、文字字体等。

body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 14px;
background-color: #eaeaea;
color: #333;
}
#wrapper {
width: 960px;
margin: 0 auto;
background-color: #fff;
}

然后是对各个元素的布局和样式设置。例如，对于header中的导航部分，我设置了横向排列以及鼠标悬停效果；对于main部分的各个section，我设置了内外边距以及边框样式等。

header {
height: 80px;
line-height: 80px;
border-bottom: 1px solid #ccc;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
nav li {
float: left;
margin: 0 10px;
}
nav li a {
text-decoration: none;
color: #333;
}
nav li a:hover {
color: #f00;
}
main {
padding: 30px;
}
section {
margin-bottom: 30px;
border: 1px solid #ccc;
padding: 20px;
}
section h2 {
margin: 0 0 20px;
font-size: 24px;
}
section p {
line-height: 1.5;
margin: 0;
}
footer {
height: 50px;
line-height: 50px;
border-top: 1px solid #ccc;
text-align: center;
}

最终，我成功地完成了我的CSS排版布局作业，完美地展示了原始网页设计图的内容和风格。这让我更加熟练地掌握了CSS排版的技巧和方法，并体验了一次前端网页设计的过程。