2-17自由编程,请老师检查

来源:2-17 自由编程

Hanabie

2022-07-11 23:10:23

<body>

    <div class="header">

        <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">导航区域</div>

    </div>

    <div class="banner">

        <div class="banner-pic">banner图片</div>

        <div class="maskview">banner遮罩层</div>

        <div class="order">banner表单</div>

    </div>

    <div class="about">

        <div class="about-part1">about上半部分</div>

        <div class="about-part2">about下半部分</div>

    </div>

    <div class="pic-text">

        <ul>

            <li>图片1</li>

            <li>文字2</li>

            <li>图片3</li>

            <li>文字4</li>

            <li>文字5</li>

            <li>图片6</li>

            <li>文字7</li>

            <li>图片8</li>

        </ul>

    </div>

    <div class="gallery">

        <div class="gallery-part1">

            <p>gallery上半部分</p>

            <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 class="gallery-part2">gallery下半部分</div>

    </div>

    <div class="footer"><p>&copy;2016 imooc.com 京ICP备13046642号</p></div>

</body>

写回答

1回答

好帮手慕久久

2022-07-12

同学你好,gallery区域布局可以调整一下。gallery分成上下两部分,上部分是标题、下部分是6组图文:

https://img.mukewang.com/climg/62ccd66d094f43c910060514.jpg

所以调整如如下:

https://img.mukewang.com/climg/62ccd6b60959af2f07060584.jpg

祝学习愉快!

0

前端工程师

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

20327 学习 · 17877 问题

查看课程