一、先看一下在浏览器的运行效果：
二、结果分析
我们可以看到：
1.当鼠标在边栏超链接悬停时，字体颜色的变化并且带有下划线修饰
2.图片右边的文字介绍随着浏览器宽度大小的变化而改变
3.采用弹性伸缩盒，响应式web设计思想布局。页头、导航、内容和页脚4个部分宽度为80%，最大宽度为960px，最小宽度为260px。内容区3个部分显示区域比例为2:1:1。
4.段落首行缩进两个字，边栏列表项标记图像。
其中，暂时只运用了html和css相关知识，并没有js，后续可能会更新。
三、接下来看一下代码：
index.html
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>世界地球日</title><link rel="stylesheet" href="styles.css"></head><body><header class="flex"><h1><img src="images/headerimg.jpg"></h1></header><nav class="flex"><!-- 导航菜单 --><div class="menu"><ul><li><a href="index.html">首页</a></li><li><a href="list.html">目录</a></li><li><a href="about.html">关于我们</a></li><li><a href="contact">联系我们</a></li></ul></div></nav><main class="flex"><article><h2>地球日</h2><section><img src="images/greenery.png" alt=""><div><p>每年的4月22日，是一个专为世界环境保护而设立的节日，旨在提高民众对于现有环境问题的意识，并动员民众参与到环保运动中，通过绿色低碳生活，改善地球的整体环境。地球日由盖洛德·尼尔森和丹尼斯·海斯于1970年发起。现今，地球日的庆祝活动已发展至全球192个国家，每年有超过10亿人参与其中，使其成为世界上最大的民间环保节日。中国从20世纪90年代起，每年都会在4月22日举办世界地球日活动。</p><p>1970年4月22日的地球日活动，是人类有史以来第一次规模宏大的群众地球日，作为人类现代环保运动的开端，它推动了西方国家环境法规的建立。</p></div></section></article><aside id="sidebar1"><h3>目录</h3><ul class="uq"><li><a href="#">活动影响</a></li><li><a href="#">创始人</a></li><li><a href="#">历年主题</a></li><li><a href="#">历年国内活动</a></li></ul></aside><aside id="sidebar2"><h3>做什么</h3><ul class="uq"><li><a href="#">倡导低碳生活</a></li><li><a href="#">从身边的小事做起</a></li><li><a href="#">从节约资源做起</a></li><li><a href="#">科学发展</a></li><li><a href="#">公众参与</a></li><li><a href="#">防治有毒化学品污染</a></li></ul></aside></main><footer class="flex"><section id="footer-area"><p>©，我们的地球日</p></section></footer></body></html>
style.css
body{background-color: #EDF6F7;color: #060606;font-family: 微软雅黑;font-size: 14px;}a{text-decoration:none;}footer section p{background-color:#384E80;text-align: center;}section div p{text-indent:2em;}h2,h3{color: #83B441;}.uq{list-style-image: url("images/arrow.gif");}nav .menu ul li:hover{text-decoration:underline;}.uq li a:hover{color: #5F822F;text-decoration:underline;}* {margin: 0;padding: 0;}img{width: 100%;}.flex{width: 80%; max-width: 960px; min-width: 260px;margin: 0 auto;}main {display: flex; flex-direction: row;background: #FFF;padding-bottom: 10px;}article {flex: 3;padding: 10px;}#sidebar1 {flex: 1;padding: 10px;}#sidebar2 {flex:1;padding: 10px;}article section{display: flex; flex-direction: row; flex-wrap: wrap;}article section div{padding-left: 10px; flex: 2;}article section img{max-height: 188px; max-width:220px; flex: 1;}nav .menu ul {display: flex;justify-content: space-around;flex-flow: row;align-items: center;flex-wrap: wrap;background-color:#384E80;color: #DCF4F4;list-style-type: none;}
四、总结（做的过程中存在疑惑）
1.内容区第一部分的段落文字无法根据浏览器宽度的大小变化而调整与左边图片的位置。可以将flex-wrap属性值设为wrap,这样文字部分若超过容器大小会自动换行。
2. 页头部分的图片无法根据浏览器大小变化而调整大小。
五、声明
1.网页中的图片来源：张树明——《WEB前端从入门到实战：HTML5\CSS3\JavaScript项目案例开发》
更新一：
经过一些修改，优化了一下页面效果：
导航区将四个列表项目优化。将导航区display属性设置为block。再将导航区的列表ul的justify-content属性修改为flex-start，使列表项目位于容器的开头位置。因为上次的页面导航的字体颜色不太清楚，现将导航和页脚字体颜色做了一些修改。这两部分用color属性设置字体颜色为#DCF4F4。
修改的部分代码如下：
style.css
nav .menu ul {display: flex;justify-content: flex-start;flex-flow: row;align-items: center;flex-wrap: wrap;background-color:#384E80;list-style-type: none;height: 50px;}
nav .menu ul li a{color: #DCF4F4;display: block;min-width: 130px; max-width: 130px;text-align: center;}
