老师,请检查代码是否正确

来源:4-8 自由编程

qq_慕工程8315848

2020-10-17 22:15:26

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

        margin: 0;

        padding: 0;

        }

        ul,ol{

            list-style: none;

        }

        a{

            text-decoration: none;

        }


        main{

            width: 1200px;

            margin: 0 auto;

            position: relative;

        }

        main .main-top{

            margin-top: 30px;

        }

        main  h3{

            font-size: 32px;

            text-align: center;

        }

        main .main-top .line{

            width: 60px;

            height: 3px;

            background: #07cbc9;

            margin: 10px auto;


        }

        main .main-top p{

            text-align: center;

            color: gray;

            font-style: 14px;

        }

        main .content{

            width: 1201px;

            height: 464px;

        }

        main .content .left-concent{

            float: left;


        }

        main .content .left-concent h3{

            text-align: left;

            margin: 30px 0;

        }

        main .content .left-concent .box{

            width: 300px;

            padding: 20px;

            font-size: 18px;

            border: 1px solid gray;

            background: rgba(255, 255, 255, .5);

            position: absolute;

            z-index: 9;

        }

        main .content .left-concent .box p{

            margin-bottom: 30px;

        }


        main .content .left-concent .box .btn{

            width: 140px;

            height: 40px;

            background: #000;

            color: white;

            text-align: center;

            line-height: 40px;

        }

        main .content img{

            float: left;

            width: 650px;

            height: 435px;

            position: absolute;

            left: 50%;

            margin-left: -325px;

            bottom: 0;


        }

        main .content .right-content{

            float: right;


        }

        main .content .right-content ul li{

            width: 260px;

            padding: 40px 0;

            text-align: center;

            margin: 30px 0 0 20px;

            border: 1px solid #07cbc9;

        }

        main .content .right-content ul li h4{

            font-size: 28px;

        }

        main .content .right-content ul li .line{

            width: 60px;

            height: 3px;

            background: #07cbc9;

            margin: 10px auto;

        }

    </style>

</head>

<body>

    <main>

        <div class="main-top">

            <h3>ABOUT</h3>

            <div class="line"></div>

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting 

                <br>industry. Lorem Ipsum has been the industry's standard dummy 

                <br>text ever since the 1500s.</p>

        </div>

        <div class="content">

            <div class="left-concent">

                <h3>A WORD 

                    <br>ABOUT US</h3>

                <div class="box">

                    <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 class="btn">EXPLORE</div>

                </div>

            </div>

            <img src="images/bb3.jpg" alt="">

            <div class="right-content">

                <ul>            

                    <li class="right-content-top">

                        <h4>70000</h3>

                        <div class="line"></div>

                        <p>Student</p>

                    </li>

                    <li class="right-content-bottom">

                        <h4>600</h3>

                        <div class="line"></div>

                        <p>Facyltyu</p>

                    </li>

                 </ul>

            </div>

        </div>

    </main>

</body>

</html>



写回答

1回答

好帮手慕星星

2020-10-18

同学你好,代码布局以及实现效果很棒。继续加油,祝学习愉快!

0

0 学习 · 15276 问题

查看课程