今天按照之前学习的内容做了一个网络页面设计大概边框。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面布局 </title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.b1{
width: 1519px;
height: 50px;
background-color:rgb(51,51,51);
margin: auto;
}
.b2{
width: 1519px;
height: 38px;
background-color:rgb(255,255,255);
margin: auto;
}
.b3{
width: 1519px;
height: 500px;
background-color:rgb(239,239,239);
margin: auto;
}
.b4{
width: 1519px;
height: 60px;
background-color:rgb(51,51,51);
margin:auto;
}
.b5{
width: 1519px;
height: 70px;
background-color:rgb(255,255,255);
margin: auto;
}
.box1{
width: 1200px;
height: 300px;
background-color: rgb(255,255,255);
margin: auto;
}
.box2{
width: 250px;
height: 300px;
background-color:yellow;
float:right;
}
.box3{
width: 250px;
height: 300px;
background-color: red;
float:right;
margin: 0 50px;
}
.box4{
width: 250px;
height: 300px;
background-color:blue;
float:right;
margin: 0 50px;
}
.box5{
width: 250px;
height: 300px;
background-color: green;
float:right;
}
.b61{
width: 1519px;
height: 200px;
background-color:rgb(255,255,255);
margin: auto;
}
.box11{
width: 1200px;
height: 300px;
background-color: rgb(255,255,255);
margin: auto;
}
.box21{
width: 250px;
height: 300px;
background-color:yellow;
float:right;
}
.box31{
width: 250px;
height: 300px;
background-color: red;
float:right;
margin: 0 50px;
}
.box41{
width: 250px;
height: 300px;
background-color:blue;
float:right;
margin: 0 50px;
}
.box51{
width: 250px;
height: 300px;
background-color: green;
float:right;
}
.b62{
width: 1519px;
height: 50px;
background-color:rgb(255,255,255);
margin: auto;
}
.box12{
width: 1200px;
height: 300px;
background-color: rgb(255,255,255);
margin: auto;
}
.box22{
width: 250px;
height: 300px;
background-color:yellow;
float:right;
}
.box32{
width: 250px;
height: 300px;
background-color: red;
float:right;
margin: 0 50px;
}
.box42{
width: 250px;
height: 300px;
background-color:blue;
float:right;
margin: 0 50px;
}
.box52{
width: 250px;
height: 300px;
background-color: green;
float:right;
}
.b63{
width: 1519px;
height: 50px;
background-color:rgb(255,255,255);
margin: auto;
}
.box13{
width: 1200px;
height: 300px;
background-color: rgb(255,255,255);
margin: auto;
}
.box23{
width: 250px;
height: 300px;
background-color:yellow;
float:right;
}
.box33{
width: 250px;
height: 300px;
background-color: red;
float:right;
margin: 0 50px;
}
.box43{
width: 250px;
height: 300px;
background-color:blue;
float:right;
margin: 0 50px;
}
.box53{
width: 250px;
height: 300px;
background-color: green;
float:right;
}
.b64{
width: 1519px;
height: 50px;
background-color:rgb(255,255,255);
margin: auto;
}
.box14{
width: 1200px;
height: 300px;
background-color: rgb(255,255,255);
margin: auto;
}
.box24{
width: 250px;
height: 300px;
background-color:yellow;
float:right;
}
.box34{
width: 250px;
height: 300px;
background-color: red;
float:right;
margin: 0 50px;
}
.box44{
width: 250px;
height: 300px;
background-color:blue;
float:right;
margin: 0 50px;
}
.box54{
width: 250px;
height: 300px;
background-color: green;
float:right;
}
.b65{
width: 1519px;
height: 50px;
background-color:rgb(255,255,255);
margin: auto;
}
.box15{
width: 1200px;
height: 300px;
background-color: rgb(255,255,255);
margin: auto;
}
.box25{
width: 250px;
height: 300px;
background-color:yellow;
float:right;
}
.box35{
width: 250px;
height: 300px;
background-color: red;
float:right;
margin: 0 50px;
}
.box45{
width: 250px;
height: 300px;
background-color:blue;
float:right;
margin: 0 50px;
}
.box55{
width: 250px;
height: 300px;
background-color: green;
float:right;
}
.b66{
width: 1519px;
height: 50px;
background-color:rgb(255,255,255);
margin: auto;
}
.box16{
width: 1200px;
height: 300px;
background-color: rgb(255,255,255);
margin: auto;
}
.box26{
width: 250px;
height: 300px;
background-color:yellow;
float:right;
}
.box36{
width: 250px;
height: 300px;
background-color: red;
float:right;
margin: 0 50px;
}
.box46{
width: 250px;
height: 300px;
background-color:blue;
float:right;
margin: 0 50px;
}
.box56{
width: 250px;
height: 300px;
background-color: green;
float:right;
}
.b67{
width: 1519px;
height: 200px;
background-color:rgb(255,255,255);
margin: auto;
}
.b7{
width: 1519px;
height: 200px;
background-color:rgb(51,51,51);
margin: auto;
}
.b8{
width: 1519px;
height: 60px;
background-color:rgb(255,255,255);
margin: auto;
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b2"></div>
<hr>
<div class="b3"> </div>
<div class="b4"> </div>
<div class="b5"> </div>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
<div class="b61"></div>
<div class="box11">
<div class="box12"></div>
<div class="box13"></div>
<div class="box14"></div>
<div class="box15"></div>
</div>
<div class="b62"></div>
<div class="box12">
<div class="box22"></div>
<div class="box32"></div>
<div class="box42"></div>
<div class="box52"></div>
</div>
<div class="b63"></div>
<div class="box13">
<div class="box23"></div>
<div class="box33"></div>
<div class="box43"></div>
<div class="box53"></div>
</div>
<div class="b64"></div>
<div class="box14">
<div class="box24"></div>
<div class="box34"></div>
<div class="box44"></div>
<div class="box54"></div>
</div>
<div class="b65"></div>
<div class="box15">
<div class="box25"></div>
<div class="box35"></div>
<div class="box45"></div>
<div class="box55"></div>
</div>
<div class="b66"></div>
<div class="box16">
<div class="box26"></div>
<div class="box36"></div>
<div class="box46"></div>
<div class="box56"></div>
</div>
<div class="b67"></div>
<div class="b7"></div>
<div class="b8"></div>
</body>
</html>
运行结果如下；
image.png
image.png
有什么瑕疵 请大家积极 指出改正。
网友评论