2-17 作业,麻烦老师检查

来源:2-17 自由编程

小周和大何

2022-09-22 02:38:29

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小慕中学</title>
    <meta name="Keywords" content="升学,校园环境,位置,宿舍">
    <meta name="Descripition" content="小慕中学是省级标准化重点高中,秉承........">
</head>

<body>
    <!-- 页面头部 -->
    <div class="header">
        <!-- 页面logo -->
        <div class="logo">
            <h1>Logo</h1>
            <!-- 页面导航条 -->
            <div class="nav">
                <ul>
                    <li>HOME</li>
                    <li>ABOUT</li>
                    <li>GALLERY</li>
                    <li>FACULTY</li>
                    <li>EVENTS</li>
                    <li>CONTACT</li>
                </ul>
            </div>

        </div>
    </div>

    <!-- 页面banner -->
    <div class="banner">
        <!-- banner图片 -->
        <div class="ban-ima">
            <h2>banner图片</h2>
        </div>
        <!-- banner遮罩 -->
        <div class="ban-shade">
            <h2>banner遮罩层</h2>
        </div>
        <!-- bananer表单 -->
        <div class="ban-list">
            <h2>banner表单</h2>
        </div>
    </div>

    <!-- 页面的about -->
    <div class="about">
        <!-- about上半部分 -->
        <div class="abo-sho-des-area">
            <h2>about上半部分</h2>
        </div>
        <!-- about上半部分 -->
        <div class="abo-det-des-area">
            <h2>about下半部分</h2>
        </div>
    </div>

    <!-- 图片混排 -->
    <div class="picture">
        <div class="image1">
            <h2>图片1</h2>
        </div>
        <div class="text2">
            <h2>文字2</h2>
        </div>

        <div class="image3">
            <h2>图片3</h2>
        </div>
        <div class="text4">
            <h2>文字4</h2>
        </div>

        <div class="text5">
            <h2>文字5</h2>
        </div>
        <div class="image6">
            <h2>图片6</h2>
        </div>

        <div class="text7">
            <h2>文字7</h2>
        </div>
        <div class="image8">
            <h2>图片8</h2>
        </div>


        <!--Gallery区域 -->
        <div>
            <!-- gallery简短描述 -->
            <div class="Sho-des-area">
                <h2>gallery上半部分</h2>
                <div>
                    <dl>
                        <dt>图片</dt>
                        <dd>Science Lab</dd>
                    </dl>
                    <dl>
                        <dt>图片</dt>
                        <dd>Indoor Stadium</dd>
                    </dl>
                    <dl>
                        <dt>图片</dt>
                        <dd>Transportation</dd>
                    </dl>
                    <dl>
                        <dt>图片</dt>
                        <dd>Kids Room</dd>
                    </dl>
                    <dl>
                        <dt>图片</dt>
                        <dd>Meditation Classes</dd>
                    </dl>
                    <dl>
                        <dt>图片</dt>
                        <dd>Kids Play Ground</dd>
                    </dl>
                </div>
            </div>
            <!-- gallery详细描述 -->
            <div class="det-des-area">
                <h2>gallery下半部分</h2>
            </div>
        </div>

        <!-- 网页的页脚 -->
        <div class="footer">
            <div class="Text content">
                <p>&copy;2016 imooc.com 京ICP备13046642号</p>
            </div>
        </div>
</body>

</html>


写回答

1回答

好帮手慕小李

2022-09-22

同学你好,代码是对的,很棒。但建议同学按照设计稿来做,如下:

https://img.mukewang.com/climg/632bbe5b090accd308760920.jpg

同学调整一下,然后在提交上来,老师再帮同学看看。

继续努力!祝学习愉快!

0

前端工程师

前端入门如同写字,如果你不知道从哪开始,那就选择前端(含Vue3.x,React17,TS)

20327 学习 · 17877 问题

查看课程