【題目】
【我的代碼】
<!DOCTYPE html>
<html>
<head>
<title>01 PAGE</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
.container{
height: 300px;
width: 600px;
background-color: white;
/* position:fixed; */
/* position:relative; */
position:absolute;
/* margin: 0 auto; */
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -300px;
text-align:center;
}
.header{
height: 20%;
background-color: red;
position:initial;
}
.middle{
height: 60%;
background-color: white;
position:initial;
}
.leftSide{
height: 100%;
width: 20%;
background-color: rgb(128,128,128);;
/* position:initial; */
position:relative;
display: block;
float: left;
}
.rightSide{
height: 100%;
width: 80%;
background-color: white;
/* position:initial; */
position:relative;
float: left;
}
.rightTop{
height: 20%;
/* width: 80%; */
background-color: rgb(203, 203, 7);
/* position:initial; */
position:initial;
/* float: left; */
}
.rightBody{
height: 80%;
}
.rightLeft{
height: 100%;
width: 50%;
background-color: rgb(204, 205, 236);
/* position:initial; */
/* position:initial; */
position: relative;
float: left;
}
.rightRight{
height: 100%;
width: 50%;
background-color: rgb(204, 238, 3);
/* position:initial; */
/* position:initial; */
position: relative;
float: left;
}
.footer{
height: 20%;
background-color: rgb(212,208,199);
position:initial;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="middle">
<div class="leftSide">leftSide</div>
<div class="rightSide">
<div class="rightTop">rightTop</div>
<div class="rightBody">
<div class="rightLeft">rightLeft</div>
<div class="rightRight">rightRight</div>
</div>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
【我的代碼的實行結果】
【老師的代碼】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.myDiv1{width: 599px;height: 297px;position: absolute;left: 50%;top: 50%;margin-left: -299.5px;margin-top:-148.5px;background: black; }
.header{float: left;width: 100%;height: 60px;background: #fe0000;text-align: center;font-size: 22px;color: black;}
.leftNode{width: 121px;height:180px;float: left;background: #808080;text-align: center;font-size: 22px; }
.rightNode{width: 478px;height: 180px;float: left;background: green;}
.rightNode .rightTop{width:100%;float: left;height: 55px;text-align: center;font-size: 22px;background: #cdcc00; }
.rightNode .left{width: 240px;height:125px;background: #cccdec;text-align: center;font-size: 22px;float: left; }
.rightNode .right{width: 238px;height:125px;background: #ccee03;text-align: center;font-size: 22px;float: left; }
.foot{width: 100%;float: left;height: 57px;background: #d4cfc9;font-size: 22px;text-align: center;}
</style>
</head>
<body>
<div class='myDiv1'>
<div class='header'>header</div>
<div class='leftNode'>leftside</div>
<div class='rightNode'>
<div class='rightTop'>right top</div>
<div class='left'>left</div>
<div class='right'>right</div>
</div>
<div class='foot'>foot</div>
</div>
</body>
</html>
【老師的實行效果】
