web前端——地球日案例

最新推荐文章于 2024-08-26 08:33:56 发布

Hakuuna

最新推荐文章于 2024-08-26 08:33:56 发布

阅读量582

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/Hakuuna/article/details/130798237

版权

每年4月22日的世界地球日旨在提升公众环保意识，自1970年由尼尔森和海斯发起，已成为全球最大的民间环保节日。历年主题反映了对地球环境的关注，如“一个地球，一个家庭”、“拯救地球，就是拯救未来”。文章鼓励低碳生活和公众参与，以改善地球环境。

摘要由CSDN通过智能技术生成

要求：

1.在地球日页面上，添加“历年世界地球日主题”名称的表格，三级标题。

2.表格宽1000px ，高45opx，四行四列，单元格内容与表格题目相关。

3.表格边框黑色实线，1px，单线。

4.偶数行颜色#EAF2D3。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>世界地球日</title>
    <style>
        h2{
            text-align: center;
        }
        p{
            line-height: 1.5em;
        }
        li{
            font-style: italic;
            font-size: 20px;
            text-decoration: none;

        }
        table{
            width: 1000px;
            height: 450px;
        }
        table,td,th{
            border: 1px solid rgb(rgb(0, 0, 0));
        }
        table{
            border-collapse: collapse;
        }
        tr:nth-child(even){
            background-color: #eaf2d3;
        }
        a{
            
            text-decoration: none;}
            a{
                font-size: 22px;
            }
            a:hover{font-size: 120%;
                text-decoration: underline;
            }
    </style>
</head>
<body>
<header class="flex">
    <h1><img src="img/headerimg.jpg" alt=""></h1>
</header>
<nav class="flex">
    <!-- 导航菜单 -->
    <div class="menu">
        <ul>
            <li><a href="#">首页</a> </li>
            <li><a href="#">目录</a> </li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
</nav>
<main class="flex">
    <article>
        <h2>地球日</h2>
        <section>
            <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>
            <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>
            <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>


<br>
<h3>历年世界地球日主题</h3>
<table border="1">
    <tr>
        <th> 年份 </th>
        <th>主题</th>
        <th>年份</th>
        <th>主题</th>
    </tr>
    <tr>
        <td>1994</td>
        <td>一个地球，一个家庭</td>
        <td>1995</td>
        <td>各国人民联合起来，创造更加美好的世界。</td>
    </tr>
    <tr>
        <td>1996</td>
        <td>我们的地球、居住地、家园</td>
        <td>1997</td>
        <td>为了地球上的生命</td>
    </tr>
    <tr>
        <td>1998</td>
        <td>为了地球上的生命——拯救我们的海洋</td>
        <td>1999</td>
        <td>拯救地球，就是拯救未来</td>
    </tr>

</table>
<br>
</table>

<footer class="flex">
    <section id="footer-area">
        <p>&copy;2018，我们的地球日</p>
    </section>
</footer>
</body>
</html>

文章全码链接：

Hakuuna

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web前端——地球日案例

2.表格宽1000px ，高45opx，四行四列，单元格内容与表格题目相关。1.在地球日页面上，添加“历年世界地球日主题”名称的表格，三级标题。3.表格边框黑色实线，1px，单线。4.偶数行颜色#EA。
复制链接

扫一扫