要求：

1、建立一个站点，在站点下建立images子目录，用于存放页面所需的图像。
2、参照“样图.jpg”或下图建立页面，文件命名为index.html，使用内部样式。

样图：

附页面所需文字：

世界地球日

首页目录关于我们联系我们
地球日
每年的4月22日，是一个专为世界环境保护而设立的节日，旨在提高民众对于现有环境问题的意识，并动员民众参与到环保运动中，通过绿色低碳生活，改善地球的整体环境。地球日由盖洛德·尼尔森和丹尼斯·海斯于1970年发起。现今，地球日的庆祝活动已发展至全球192个国家，每年有超过10亿人参与其中，使其成为世界上最大的民间环保节日。中国从20世纪90年代起，每年都会在4月22日举办世界地球日活动。
1970年4月22日的地球日活动，是人类有史以来第一次规模宏大的群众地球日，作为人类现代环保运动的开端，它推动了西方国家环境法规的建立。

目录
活动影响创始人历年主题历年国内活动

2020，我们的地球日

导航菜单背景色：#384E80

index.html源码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>世界地球日</title><style>li{list-style-type: none;}*{padding: 0px; margin: 0px;}.contair{max-width: 940px; margin: 0px auto;}main{display: flex; flex-flow: row wrap;}#left{flex: 3; margin-right: 35px;}#right{flex: 1;}.content{display: flex; flex-flow: row nowrap; margin: 10px;}nav{display: flex; justify-content: flex-start; background-color: #384E80}nav ul{display: flex; flex-flow: row nowrap;}nav ul li a{width: 120px; display: flex; color: #FFFFFF; text-decoration: none; height: 50px; justify-content: center; align-items: center;}nav ul li a:hover{text-decoration: underline;}#logo{position: relative; height: 200px;}#logo h1{position: absolute; font-family:"楷体"; font-size: 3.3rem; color: #FFFFFF; top: 40px; left: 40px;}#left h2{color: #84ce00; border-bottom: 1px dashed #CCCCCC; padding: 5px; margin-right: 20px;}#right h2{color: #559c00; border-bottom: 1px dashed #CCCCCC; padding: 5px;}#right li{list-style-image: url("images/arrow.gif"); margin-left: 15px;}.content p{margin: 5px; text-indent: 2rem; text-align: justify;}footer{background-color: #384E80;}footer p{color: #FFFFFF; height: 60px; font-size: 1rem; display: flex; justify-content: center; align-items: center;}</style>
</head>
<body>
<section id="logo" class="contair"><h1>世界地球日</h1><img src="data:images/headerimg.jpg" alt="">
</section>
<nav class="contair"><ul><li><a href="">首页</a></li><li><a href="">目录</a></li><li><a href="">关于我们</a></li><li><a href="">联系我们</a></li></ul>
</nav>
<main class="contair"><section id="left"><h2>地球日</h2><div class="content"><div><img src="data:images/greenery.png" alt=""></div><div><p>每年的4月22日，是一个专为世界环境保护而设立的节日，旨在提高民众对于现有环境问题的意识，并动员民众参与到环保运动中，通过绿色低碳生活，改善地球的整体环境。地球日由盖洛德·尼尔森和丹尼斯·海斯于1970年发起。现今，地球日的庆祝活动已发展至全球192个国家，每年有超过10亿人参与其中，使其成为世界上最大的民间环保节日。中国从20世纪90年代起，每年都会在4月22日举办世界地球日活动。</p><p>1970年4月22日的地球日活动，是人类有史以来第一次规模宏大的群众地球日，作为人类现代环保运动的开端，它推动了西方国家环境法规的建立。</p></div></div></section><section id="right"><h2>目录</h2><div><ul><li><a href=""><p>活动影响</p></a></li><li><a href=""><p>创始人</p></a></li><li><a href=""><p>历年主题</p></a></li><li><a href=""><p>历年国内活动</p></a></li></ul></div></section>
</main>
<footer class="contair"><p>©2020，我们的地球日</p>
</footer>
</body>
</html>

效果图：

Web前端HTML、CSS测试：世界地球日相关推荐

小白学Java Web 3 Web前端之CSS基本知识2
这一篇接着上一篇的内容来分享,上一篇还有大量的样式属性没有列出,不过在继续分享之前,我想先来分享一下关于网页的布局相关的一些东西,因为下一篇我打算分享用仅仅前面三小篇的内容来制作一个简单的静态网页, ...
Web前端HTML+CSS全套（1~20）
Web前端HTML+CSS全套(1~20) 拨云见日 CSS基础切图流程 PC企业站布局 PC游戏站布局溯本求源 HTML扩展 CSS扩展 HTMLS新语法 CSS3新语法兼容与hack 风生水 ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
前言持续学习总结输出中,今天分享的是Web前端,CSS背景图片大小.文字阴影.盒子阴影.过渡背景图片大小 background-size:宽度高度; 设置背景图片的大小取值场景数字+px ...
canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性一.css属性和 ...
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
web前端html+css常用布局05列表布局
web前端html+css常用布局05列表布局注意:引入jquery的jquery-2.1.4.min.js包图片从自己目录中路径. 代码: <!DOCTYPE html> <h ...
Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...

Web前端HTML、CSS测试：世界地球日

要求：

样图：

附页面所需文字：

index.html源码：

效果图：

Web前端HTML、CSS测试：世界地球日相关推荐

最新文章

热门文章