请老师检查作业.

来源:2-17 自由编程

阿震757991

2023-02-27 20:28:11

<!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>作业1</title>
</head>
<body>
    <!-- Header区域 -->
    <div class="header">
        <!-- Logo -->
        <div class="logo">
            <p>logo</p>
            <ul>
                <li>HOME</li>
                <li>ABOUT</li>
                <li>GALLERY</li>
                <li>FACULTY</li>
                <li>EVENTS</li>
                <li>CONTACT</li>
            </ul>
        </div>

        <!-- 导航区域 -->
        <div class="nav">
            <p>导航区域</p>
        </div>
    </div>

    <!-- Banner区域 -->
    <div class="banner">
        <!-- 图片 -->
        <div class="img">
            <p>banner图片</p>
        </div>

        <!-- 遮罩层 -->
        <div class="cover">
            <p>banner遮罩层</p>
        </div>

        <!-- 表单 -->
        <div class="form">
            <p>banner表单</p>
        </div>
    </div>

    <!-- 主体部分 -->
    <div class="content">
        <!-- About区域 -->
        <div class="aboout">
            <!-- 上部分-标题和简短描述区域 -->
            <div class="up">
                <p>about上半部分</p>
            </div>

            <!-- 下部分-详细描述区 -->
            <div class="below">
                <p>about下半部分</p>
            </div>
        </div>

        <!-- 图文混排区域 -->
        <div class="img-and-content">
            <p>图片1</p>
            <p>文字2</p>
            <p>图片3</p>
            <p>文字4</p>
            <p>文字5</p>
            <p>图片6</p>
            <p>文字7</p>
            <p>图片8</p>
        </div>

        <!--Gallery区域 -->
        <div class="gallery">
            <!-- 上部分-标题和简短描述区域 -->
            <div class="up1">
                <p>gallery上半部分</p>
            </div>

            <!-- 下部分-gallery详细信息区 -->
            <div class="below1">
                <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>
    </div>

    <!-- Footer区域 -->
    <div class="footer">
        <p>&copy; 2016 imooc.com 京ICP备13046642号</p>
    </div>
</body>
</html>
写回答

1回答

imooc_慕慕

2023-02-28

同学你好,代码可以实现效果,很棒,祝学习愉快~

0

前端工程师

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

20327 学习 · 17877 问题

查看课程