老师麻烦检查下代码 谢谢

来源:3-8 自由编程

慕勒8540250

2022-08-18 13:47:51

<!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>Document</title>
</head>
<body>
    <header>
        <div class="logo"><img src="images/logo.png" alt=""></div>
        <div class="nav">
            <ul>
                <li>HOME</li>
                <li>ABOUT</li>
                <li>GALLERY</li>
                <li>FACULTY</li>
                <li>EVENTS</li>
                <li>CONTACT</li>
            </ul>
        </div>
    <header>

    <div class="banner">
        <div class="bannerImage">
            <img src="images/banner3.jpg" alt="">
        </div>
        <div class="bannerLayer">banner遮罩层</div>
        <div class="bannerForm">banner表单</div>
    </div>

    <div class="About">
        <h3>ABOUT</h3>
        <div class="about-upper">
            <p>分割线</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        </div>
        <div class="about-down">
            <h3>A WORD ABOUT US</h3>
            <p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
        </div>
    </div>

    <div class="explore">
        <p>EXPLORE</p>
        <img src="images/bb3.jpg" alt="">
        <div>
            <p>7000</p>
            <p>分割线</p>
            <p>Students</p>
            <p>600</p>
            <p>分割线</p>
            <p>Faculty</p>
        </div>
    </div>

    <div class="images-and-texts">
        <div class="image1"><img src="images/b1.jpg" alt=""></div>
        <div class="text2">
            <h3>Library</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
        <div class="image3"><img src="images/b2.jpg" alt=""></div>
        <div class="text4">
            <h3>Library</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
        <div class="text5">
            <h3>Library</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <p>EXPLORE</p>
        </div>
        <div class="image6"><img src="images/b3.jpg" alt=""></div>
        <div class="text7">
            <h3>Library</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <p>EXPLORE</p>
        </div>
        <div class="image8"><img src="images/b4.jpg" alt=""></div>
    </div>

    <div class="gallery">
        <div class="gallery-upper">
            <h3>GALLERY</h3>
            <p>分割线</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        </div>
        <div class="gallery-down">
            <dl>
                <dt><img src="images/03-01.jpg" alt=""></dt>
                <dd>Science Lab</dd>
            </dl>
            <dl>
                <dt><img src="images/03-02.jpg" alt=""></dt>
                <dd>Indoor Stadium</dd>
            </dl>
            <dl>
                <dt><img src="images/03-03.jpg" alt=""></dt>
                <dd>Transportation</dd>
            </dl>
            <dl>
                <dt><img src="images/03-04.jpg" alt=""></dt>
                <dd>Kids Room</dd>
            </dl>
            <dl>
                <dt><img src="images/03-05.jpg" alt=""></dt>
                <dd>Meditation Classes</dd>
            </dl>
            <dl>
                <dt><img src="images/03-06.jpg" alt=""></dt>
                <dd>Kids Play Ground</dd>
            </dl>
        </div>
    </div>

    <footer>
        <p>&copy; 2016 imooc.com 京ICP备13046642号</p>
    <footer>
</body>
</html>


写回答

1回答

imooc_慕慕

2022-08-18

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

0

前端工程师

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

20327 学习 · 17877 问题

查看课程