定位作业训练

body代码

 <div id="box1">

        <div id="box2">

            <p>前端开发</p>

        </div>

        <div id="box3">

            <img src="images/01.jpg">

            <div id="box4">

                <p1 style="font-size: 20px;">Web前端学习</p>

                <p style="color: orange">您就是未来的前端工程师</p>

            </div>

        </div>

        <div id="box6">

             <img src="images/label.png">

             <p2>点播</p>

        </div>

    </div>

style代码

 #box1{

            width: 500px;

            height: 500px;

            border: 1px gray solid;

        }

        #box2{

            width: 500px;

            height: 50px;

            text-align: center;

            padding-top: 15px;

            padding-bottom: 15px;

            border-bottom: 1px gray solid;

        }

        #box3{

            width: 427px;

            height: 350px;

            text-align: center;

            margin-left: 30px;

            margin-top: 20px;

            border-bottom: 1px gray solid;

            border-left: 1px gray solid;

            border-right: 1px gray solid;

        }

        #box4{

              font-size: 20px;

              float: left;

        }

        #box4 p1{

               position: relative;

               left: 0;

        }

        #box6{

            position: relative;

            left:  116px;

            bottom: 367px;

        }

        #box6 p2{

            color: white;

            position: absolute;

            top: -2px;

            left: 253px;

        }