美文网首页
10-7 作业参考

10-7 作业参考

作者: 黑夜也会笑我 | 来源:发表于2017-10-11 16:43 被阅读0次

    题目二:照图制作网页
    html文件名:divindiv.html

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="divindiv.css">
        <title>盒子的嵌套</title>
    </head>
    <body>
        <div class="box">
            <div class="in_box"></div>
            <div class="in_box2">
                <div class="lbox1"></div>
                <div id="lbox2"></div>
                <div class="lbox1"></div>
            </div>
            <div class="in_box"></div>
        </div>
    </body>
    </html>
    

    css文件名:divindiv.css

    *{
        margin: 0px;
        padding: 0px;
    }
    .box{
        width: 500px;
        height: 300px;
        background: pink;
        margin: 0 auto;
    }
    .in_box{
        width: 100px;
        height: 100px;
        margin: 0px auto;
        background: orange;
    }
    .in_box2{
        width: 300px;
        height: 100px;
        margin: 0px auto;
        background: orange;
    }
    .lbox1 {
        width: 100px;
        height: 100px;
        background: blue;
        float: left;
    }
    #lbox2 {
        width: 100px;
        height: 100px;
    /*    background: red;*/
        float: left;
    }
    
    .cin_box {
        width: 100px;
        height: 100px;
        margin: 0px auto;
    }
    
    .cin_box2 {
            width: 300px;
        height: 100px;
        margin: 0px auto;
    }
    

    题目三:按图制作网页
    html文件名:divindiv2

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="divindiv2.css">
        <title>盒子的嵌套</title>
    </head>
    <body>
        <div class="box">
            <div class="in_box"></div>
            <div class="in_box2">
                <div class="lbox1"></div>
                <div id="lbox2"></div>
                <div class="lbox1"></div>
            </div>
            <div class="cin_box"></div>
        </div>
    </body>
    </html>
    

    css文件名:divindiv2.css

    * {
        margin: 0px;
        padding: 0px;
    }
    .box {
        width: 500px;
        height: 300px;
        background: pink;
        margin: 0 auto;
    }
    .in_box {
        width: 100px;
        height: 100px;
        margin: 0px auto;
        /*    background: orange;*/
    }
    .in_box2 {
        width: 300px;
        height: 100px;
        margin: 0px auto;
        /*    background: orange;*/
    }
    .lbox1 {
        width: 100px;
        height: 100px;
        /*    background: blue;*/
        float: left;
        border-top: 1px solid black;
    }
    #lbox2 {
        width: 100px;
        height: 100px;
        /*    background: red;*/
        float: left;
    }
    .cin_box {
        width: 100px;
        height: 100px;
        margin: 0px auto;
    }
    .cin_box2 {
        width: 300px;
        height: 100px;
        margin: 0px auto;
    }
    .cin_box {
        width: 100px;
        height: 100px;
        margin: 0px auto;
        border-top: 1px solid black;
    }
    

    相关文章

      网友评论

          本文标题:10-7 作业参考

          本文链接:https://www.haomeiwen.com/subject/jlbwyxtx.html