一、先看一下在浏览器的运行效果：

二、结果分析
我们可以看到：
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>&copy;2018，我们的地球日</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项目案例开发》

更新一：
经过一些修改，优化了一下页面效果：

  1. 导航区将四个列表项目优化。将导航区display属性设置为block。再将导航区的列表ul的justify-content属性修改为flex-start，使列表项目位于容器的开头位置。
  2. 因为上次的页面导航的字体颜色不太清楚，现将导航和页脚字体颜色做了一些修改。这两部分用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;
}
# html # css # css3
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

【2026】 LLM 大模型系统学习指南 (14)

avatar 2048 AI社区

主题 《前端如何设计「可信」的 AI 产品体验》

先说一个反直觉的结论：可信 ≠ 永远正确可信 = 行为稳定 + 过程透明 + 风险可控对用户来说，AI 不需要完美，但必须可理解、可预期、可纠错。这正是前端擅长的领域。用户信任的，从来不是参数量，也不是排行榜。看得懂的过程说得清的边界可修正的结果可控的风险而这些，几乎都落在前端体验层。在 AI 时代，前端不是“接接口的人”，而是信任体验的架构师。

avatar 2048 AI社区

字节跳动 Eino 框架（Golang+AI）知识点全面总结

字节跳动 Eino 框架是 Golang 生态下的分布式 AI 工程化利器，核心优势在于 “降低 AI 应用的分布式部署门槛” 和 “兼顾性能与易用性”。整合模型管理、分布式推理 / 微调、资源调度、工程化工具链，提供全链路支持；Golang 原生设计，易部署、高并发，适配云原生与边缘环境；屏蔽 AI 分布式底层细节，让开发者专注于业务逻辑而非工程化实现。适合人群：Golang 开发者、AI 工程

avatar 2048 AI社区