亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

.box1 {
    background-color: aquamarine;

    /*設(shè)置父盒子寬高為300，但由于設(shè)置內(nèi)邊距為50之后，需要重設(shè)寬高為200，才能減去撐大的部分，所以在這里直接設(shè)為200*/
    width: 200px;
    height: 200px;

    /*設(shè)置盒子的內(nèi)邊距為50，擠壓內(nèi)容使之居中*/
    padding: 50px;
}

/*將box2作為box1的內(nèi)容*/
.neirong {
    background-color: darksalmon;
    width: 200px;
    height: 200px;
}

/*將box2作為box1的內(nèi)容*/
.neirong {
    background-color: darksalmon;
    width: 200px;
    height: 200px;
}

/*給父盒子再套一個(gè)殼*/
.ke {
    width: 300px;
}

.box2 {
    background-color: aquamarine;
    padding: 50px;
}

<div class="ke">
    <div class="box2">
        <div class="neirong"></div>
    </div>
</div>

.neirong {
    background-color: darksalmon;
    width: 200px;
    height: 200px;
}

.box3 {
    width: 300px;
    height: 300px;
    /*把父盒子的邊框作為外殼，父盒子變成了內(nèi)容，寬度設(shè)置在邊框上就相當(dāng)于設(shè)置在外層上，父盒子作為內(nèi)容自動(dòng)繼承寬度*/
    box-sizing: border-box;
    background-color: aquamarine;
    padding: 50px;
    border: black 1px solid;
}

<div class="box3">
        <div class="neirong"></div>
</div>

.xddw {
    /*position: relative;*/
    width: 400px;
    height: 400px;
    border: coral solid 1px;
}

.xd1 {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: aquamarine;

    /*設(shè)置位置*/
    top: 0;
    left: 100px;
}

.xd2 {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: darksalmon;
}

.xd3 {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: lightgoldenrodyellow;

    /*設(shè)置位置*/
    top: -100px;
    left: 100px;
}

.xd4 {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blueviolet;

    /*設(shè)置位置*/
    top: -200px;
    left: 200px;
}

.xd5 {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: lightseagreen;

    /*設(shè)置位置*/
    top: -200px;
    left: 100px;
}

    <div class="xddw">
        <div class="xd1">1</div>
        <div class="xd2">2</div>
        <div class="xd3">3</div>
        <div class="xd4">4</div>
        <div class="xd5">5</div>
    </div>

.jddw {
    position: relative;
    width: 400px;
    height: 400px;
    border: coral solid 1px;
}

.jd1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: aquamarine;

    /*設(shè)置位置*/
    top: 0;
    left: 100px;
}

.jd2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: darksalmon;

    /*設(shè)置位置*/
    top: 100px;
    left: 0;
}

.jd3 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: lightgoldenrodyellow;

    /*設(shè)置位置*/
    top: 100px;
    left: 100px;
}

.jd4 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blueviolet;

    /*設(shè)置位置*/
    top: 100px;
    left: 200px;
}

.jd5 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: lightseagreen;

    /*設(shè)置位置*/
    top: 200px;
    left: 100px;
}

    <div class="jddw">
        <div class="jd1">1</div>
        <div class="jd2">2</div>
        <div class="jd3">3</div>
        <div class="jd4">4</div>
        <div class="jd5">5</div>
    </div>

.back {
    width: 1371px;
    height: 526px;
    margin: auto;
    background-image: url("../image/back.png");
}

.foot {
    width: 479px;
    height: 108px;
    margin: auto;
    background-image: url("../image/foot.png");
}

.shade {
    /* 遮罩絕對(duì)定位,并自動(dòng)伸展到整個(gè)窗口 */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    /* 將背景設(shè)置為純黑,并通過(guò)透明度使背影內(nèi)容透出來(lái) */
    background-color: black;
    opacity: 0.5;
}

.login {
    /* 遮罩絕對(duì)定位，定位到畫(huà)面居中*/
    position: absolute;
    width: 349px;
    height: 371px;
    left: 50%;
    top: 50%;
    margin-left: -174px;
    margin-top: -285px;
}

.ads {
    position: fixed;
    right: 0;
    bottom: 25px;
    width: 388px;
    height: 491px;
}

<h1>7月5日直播課作業(yè)5</h1>
<hr>
<!--作業(yè)5：模仿完成課堂上的二個(gè)定位案例:模擬php中文網(wǎng)登陸(遮罩+絕對(duì)定位)和固定定位廣告的展示方式-->
<h3>作業(yè)5：模仿完成課堂上的二個(gè)定位案例:模擬php中文網(wǎng)登陸(遮罩+絕對(duì)定位)和固定定位廣告的展示方式</h3>
<!--背景圖-->
<div class="back"></div>
<div class="foot"></div>
<div class="shade"></div>
<div class="login"><img src="static/image/login.png" alt="" ></div>
<div class="ads">
        <div>
            <button onclick="this.parentNode.style.display = 'none'">X</button>
            <img src="static/image/kf.png" alt="">
        </div>
</div>