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

最新推荐文章于 2024-05-05 07:41:03 发布

Ronny-7

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量3.9k

点赞数 6

分类专栏： Web前端文章标签： html css html5 css3 前端

本文链接：https://blog.csdn.net/Cristiano272/article/details/112177641

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

要求：

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="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="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>

效果图：

效果图

Ronny-7

关注

6
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
Web前端HTML、CSS测试：世界地球日

要求：1、建立一个站点，在站点下建立images子目录，用于存放页面所需的图像。2、参照“样图.jpg”或下图建立页面，文件命名为index.html，使用内部样式。样图：附页面所需文字：世界地球日首页目录关于我们联系我们地球日每年的4月22日，是一个专为世界环境保护而设立的节日，旨在提高民众对于现有环境问题的意识，并动员民众参与到环保运动中，通过绿色低碳生活，改善地球的整体环境。地球日由盖洛德·尼尔森和丹尼斯·海斯于1970年发起。现今，地球日的庆祝活动已发展至全球192个国家，
复制链接

扫一扫