10-7 作业参考

题目二：照图制作网页
html文件名：divindiv.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

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;
}