<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>第八课 实战首页布局</title>
<style>
#container{
width :1002px;
background: gray;
}
#header {
height:120px;
background:green;
}
#main {
height:600px;
background: yellow;
}
#lside{
float:left;
height:600px;
width:700px;
background: pink;
}
#a1 {
float:left;
height:300px;
width:350px;
background: red;
}
#a2 {
float:left;
height:300px;
width:350px;
background: pink;
}
#a3 {
float:left;
height:300px;
width:350px;
background: green;
}
#a4 {
float:left;
height:300px;
width:350px;
background: red;
}
#rside{
float:right;
height:600px;
background: yellow;
width:302px;
}
#footer {
height: 120px;
background: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="lside">
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
</div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
HTML网页开发(燕十八)-实战首页布局-作业
最新推荐文章于 2021-06-29 06:49:20 发布