7月5日作业 - 作业

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7月5日作业</title>
    <link rel="stylesheet" href="0705.css">
    <style>
        .question{
            border-style:dashed;
            border-color:lightcoral;
        }


        #one1{
            width:100px;
            height:100px;
            border-width:1px;
            border-style:dashed;
            background-color:gray;
            margin-bottom:50px
        }

        #one2{
            width:100px;
            height:100px;
            border-width:1px;
            border-style:solid;
            background-color:lightblue;
            margin-top:30px;
        }

        #two1{
            width:200px;
            height:200px;
            border-width:1px;
            /*border-style:solid;*//*父级添加边框后嵌套传递失效*/
            background-color:lightgray;
        }

        #two2{
            width:100px;
            height:100px;
            border-width:1px;
            border-style:dashed;
            background-color:teal;
            margin-top:50px;

        }

        #three1{
            width:100px;
            height:100px;
            background-color:lightgreen;
            /*margin-left:auto;
            margin-right:auto;*/
            margin:auto;/*简写*/
        }

        #four1{
            width:300px;
            padding:50px;
            background-color:lightcoral;
        }

        #four2{
            width:200px;
            height:200px;
            background-color:lawngreen;
        }

        #four1{
            width:200px;

        }

        #five1{
            padding:50px;
            background-color:lightcoral;
        }

        #five2{
            width:200px;
            height:200px;
            background-color:lawngreen;
        }

        #five3{
            width:300px;
        }

        #six1{
            width:300px;
            box-sizing:border-box;
            padding:50px;
            background-color:lightcoral;
        }

        #six2{
            width:200px;
            height:200px;
            background-color:lawngreen;
        }

        #seven1{
            width:100px;
            height:100px;
            background-color:lightgreen;
            float:left;
        }

        #seven2{
            width:200px;
            height:200px;
            background-color:lightblue;
            float:left;
        }

        #seven3{
            width:200px;
            height:200px;
            background-color:lightseagreen;
            float:right;
        }

        #seven4{
            width:100%;
            height:100px;
            background-color:gray;
            clear:both;
        }

        #eight1{
            width:100px;
            height:100px;
            background-color:lightgreen;
            position:relative;
            left:100px;
        }

        #eight2{
            width:100px;
            height:100px;
            background-color:lightseagreen;
        }

        #eight3{
            width:100px;
            height:100px;
            background-color:lawngreen;
            position:relative;
            left:100px;
        }

        #eight4{
            width:100px;
            height:100px;
            background-color:gold;
            position:relative;
            left:100px;
            bottom:200px;
        }

        #eight5{
            width:100px;
            height:100px;
            background-color:dodgerblue;
            position:relative;
            left:200px;
            bottom:300px;
        }

        #eight6{
            width:300px;
            height:300px;
            position:relative;
            border-style:solid;
            border-width:1px;
        }

        #eight7{
            width:100px;
            height:100px;
            background-color:lightgreen;
            position:absolute;
            left:100px;
        }

        #eight8{
            width:100px;
            height:100px;
            background-color:lightseagreen;
            position:absolute;
            top:100px;
        }

        #eight9{
            width:100px;
            height:100px;
            background-color:lawngreen;
            position:absolute;
            left:100px;
            top:200px;
        }

        #eight10{
            width:100px;
            height:100px;
            background-color:gold;
            position:absolute;
            left:100px;
            top:100px;
        }

        #eight11{
            width:100px;
            height:100px;
            background-color:dodgerblue;
            position:absolute;
            left:200px;
            top:100px;
        }
    </style>
</head>
<body>
一、理解并写出外边距的三个特征: 同级塌陷,嵌套传递,自动挤压的案例
<br />
<div class="question">
    同级塌陷:div-one2 的margin-top 30px塌陷到 div-one1的margin-bottom 50px之中
    <div id="one1"></div>
    <div id="one2"></div>

</div>
<br />

<div class="question">
    嵌套传递：子div的margin会传递到父级div，父级添加边框或文字后嵌套传递失效
    <div id="two1">

        <div id="two2">

        </div>
    </div>
</div>
<br />

<div class="question">
    自动挤压:通过margin左右auto挤压实现div元素水平居中
    <div id="three1"></div>
</div>
<br />
<hr>
二、 写案例,并分析内边距对盒中内容的影响,以及解决的三种方案是什么?
内边距会增加盒子的厚度，将盒子撑大，对此有3种解决方案

<div class="question">
    1、重新设置原来盒子的宽度
    <div id="four1">
        <div id="four2"></div>
    </div>
</div>
<br />

<div class="question">
    2、宽度分离
    <div id="five3">
        <div id="five1">
            <div id="five2"></div>
        </div>
    </div>
</div>
<br />

<div class="question">
    3、box-sizing 盒尺寸
    <div id="six1">
        <div id="six2"></div>
    </div>
</div>
<br />
<hr>

<div class="question">
    三、 浮动的实现原理与清除的技巧
    <br />
    <div id="seven1">左浮动</div>
    <div id="seven2">左浮动</div>
    <div id="seven3">右浮动</div>
    <div id="seven4">清除浮动</div>
</div>
<br />
<hr>

<div class="question">
    四、相对定位与绝对定位的区别与联系,并实例演示
    <br />
    相对定位：
    <div id="eight1"></div>
    <div id="eight2"></div>
    <div id="eight3"></div>
    <div id="eight4"></div>
    <div id="eight5"></div>
</div>
<br />
<hr>

<div class="question">
    绝对定位：
    <div id="eight6">
        <div id="eight7"></div>
        <div id="eight8"></div>
        <div id="eight9"></div>
        <div id="eight10"></div>
        <div id="eight11"></div>
    </div>
</div>
<br />
<hr>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟php中文网登陆(遮罩+绝对定位)和固定定位广告的展示方式</title>
    <link rel="stylesheet" href="0705-1.css">
    <style>
        body{
            margin:0;
            background-image:url(http://www.kmtest.top/phpstudy/0705/images/php.jpg);
            background-repeat:no-repeat;
            background-size:cover;
        }

        #shade{
            width:100%;
            height:100%;
            background-color:black;
            position:absolute;
            left:0;
            top:0;
            opacity:0.7;
        }

        #login img{
            width:380px;
            height:460px;
        }

        #login{
            background-color:white;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-190px;
            margin-top:-230px;
        }

        .ads{
            width:350px;
            height:250px;
            background-color:lightgreen;
            position:fixed;
            right:0;
            bottom:0;
        }

        button{
            width:20px;
            height:20px;
            float:right;
            margin-top:10px;
            margin-right:20px;
            color:red;
            border:none;
            background:none;
            font-size:2em;
        }
    </style>
</head>
<body>
<div id="shade"></div>
<div id="login">
    <img src="http://www.kmtest.top/phpstudy/0705/images/login.jpg" alt="登录">
</div>

<div class="ads">
    <button onclick="this.parentNode.style.display ='none'">X</button>
    <h2>php中文网第六期线上班</h2>
    <h1>招生进行中...</h1>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：下次把对应的作业标题写上, 以方便核对

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例