9-25作业（参考答案）

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

9-25作业（参考答案）
9-25作业
2018-09-25坑
软件测试笔试题
最浅显易懂的Django系列教程（24）-ORM作业参考答案
9-25
9-25
9-25
9-25
9－25

公用css
页面名：exercise_1.css

* {
    margin: 0px;
    padding: 0px;
}

.box {
/*    设置边框2px,实线，灰色*/
    border: 2px solid gray;
/*    设置下边框不显示*/
    border-bottom-style: none;
/*设置盒子宽高*/
    width: 500px;
    height: 300px;
/*    居中*/
    margin: 0px auto;
}
/*外面大盒子*/
.ex-box {
/*    设置宽高*/
    width: 1000px;
    height: 500px;
/*    设置边框*/
    border: 2px solid gray;
}
/*里面小盒子*/
.in-box1 {
/*    边框*/
    border: 2px solid gray;
/*    宽度注意减去边框的宽度*/
    width: 496px;
    height: 300px;
/*    背景颜色*/
    background-color: pink;
/*    向左浮动*/
    float: left;
}

.in-box2 {
    border: 2px solid gray;
    width: 496px;
    height: 300px;
    background-color: pink;
    float: left;
}

#in_box_padding1{
    border: 2px solid gray;
/*    注意减去边框的宽度的同时减去padding的宽度,高度在这里减不减在效果上不明显*/
    width: 486px;
    height: 300px;
    background-color: pink;
    float: left;
/*    在盒子上方填充10px 左边填充10px*/
    padding-top: 10px;
    padding-left: 10px;
}
#in_box_padding2{
    border: 2px solid gray;
    width: 476px;
    height: 290px;
    background-color: pink;
    float: left;
    /*    在盒子上方填充20px 左边填充20px*/
    padding-top: 20px;
    padding-left: 20px;
}

练习1
文件名：exercise.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="exercise_1.css">
    <title>盒子练习1</title>
</head>
<body>
    <div class="box"> 
        这是随便写点内容
    </div>
</body>
</html>

练习2
页面名：boxinbox.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="exercise_1.css">
    <title>盒子嵌套</title>
</head>

<body>
    <div class="ex-box">外面的盒子
        <br>
        <div class="in-box1">内嵌盒子1</div>
        <div class="in-box2">内嵌盒子2</div>
    </div>
</body>

</html>

练习3
页面名：box_padding.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="exercise_1.css">
    <title>盒子中padding的运用</title>
</head>
<body>
    <div class="ex-box">
        <div id="in_box_padding1">这里随便写点内容</div>
        <div id="in_box_padding2">这里随便写点内容</div>
    </div>
</body>
</html>