奥鹏_21春《Web网页开发基础》离线作业1

要求


在本文档中的题目下作答,在所写的代码下面粘贴运行后的网页截图,提交本word文档即可。

距离元旦还有10天,距离春节还有35天,距离情人节还有55天……你已经开始在着手准备礼物了吗?想要给你女/男朋友一个惊喜吗?亦或者是向心仪已久的女孩/男孩表白吗?

请你先做一个简单的页面,记录你们的日常及恩爱瞬间。通过H5课程内容的逐步深入,来不断完善和丰富页面的内容。实践见真知,用心见真爱,你准备好了吗? Let’t go!

题目一、用H5语义化标签做个简单的页面布局,要有头部、导航、内容(左右布局)、底部(如下图)


在这里插入图片描述

答案一


<!DOCTYPE html>
<html>
<header>这是我们的头部区域</header>
<nav>
    这是我们的导航区域
</nav>
<div>
    <aside>
        这是侧边区域
    </aside>
    <article>
        这是我们的主要内容区域
    </article>
</div>

<footer>
    这是我们的底部区域
</footer>
<html>
<style>
    header {
        background-color: darkgrey;
        width: 100%;
        font-size: 30px;
        height: auto;
        text-align: center;
        margin: 3px auto;
    }
    nav {
        background-color: darkgrey;
        width: 100%;
        text-align: center;
        margin: 3px auto;
        font-size: 20px;
        height: auto;
    }
    div {
        width: 100%;
        height: 100px;
        margin-bottom: 3px;
    }
    aside {
        width: calc((100% - 3px) * 0.2);
        text-align: center;
        height: 100%;
        background-color: darkgrey;
        float: left;
    }
    article {
        background-color: darkgrey;
        text-align: center;
        margin-left: 3px;
        width: calc((100% - 3px) * 0.8);
        height: 100%;
        float: right;
    }
    footer {
        background-color: darkkhaki;
        text-align: center;
        margin-top: 3px;
    }
</style>
在这里插入图片描述

题目二、寒冷时的一杯热咖啡,难过时的相互依偎,开心时的彼此分享。show time! 在以后的学习中,我们会逐渐丰富内容,给你的心上人一个惊喜。用HTML5语义化标签写一个文章布局(如下图)


在这里插入图片描述

答案二


<!DOCTYPE html>
<html>
<header>这是我们的头部区域</header>
<nav>
    这是我们的导航区域
</nav>
<div>
    <section>
        <article>
            <a1>这里是文档标题</a1>
            <HR align=center width=30% color=#987cb9 SIZE=2>
            <a3>作者:李贺    发布时间:2021-08</a3>
            <br>
            <br>
            <a2>这是我们的主要内容区域</a2>
        </article>
    </section>
</div>

<footer>
    这是我们的底部区域
</footer>
<html>

<style>
    header {
        background-color: darkgrey;
        width: 100%;
        font-size: 30px;
        height: auto;
        text-align: center;
        margin: 3px auto;
    }
    nav {
        background-color: darkgrey;
        width: 100%;
        text-align: center;
        margin: 3px auto;
        font-size: 20px;
        height: auto;
    }
    div {
        width: 100%;
        height: 200px;
        margin-bottom: 3px;
        background-color: rgb(220, 223, 207);
    }
    article {
        text-align: center;
        width: 100%;
        height: 100%;
    }
    a1 {
        width: 100%;
        font-size: 20px;
        font-weight: bold;
    }
    a3 {
        margin-bottom: 50px;
    }
    a2 {
        width: 100%;
        margin-top: 50px;
    }
    footer {
        background-color: darkkhaki;
        text-align: center;
        margin-top: 3px;
        
    }
</style>
在这里插入图片描述

版权声明:本文为作者原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原创文章,作者:老C,如若转载,请注明出处:https://www.code404.icu/1062.html

发表评论

登录后才能评论