Utilisez div + css pour écrire le cadre de page Web suivant:
Code:
fichier html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS作业2 </title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="first">
<div class="red1">
</div>
<div class="green1">
</div>
<div class="green2">
</div>
</div>
<div class="second">
<div class="orange1">
</div>
<div class="bluegreen">
<div class="blue1">
</div>
<div class="blue2">
</div>
<div class="blue3">
</div>
<div class="green3">
</div>
</div>
<div class="pink">
</div>
</div>
<div class="third">
</div>
</body>
</html>
fichier style.css:
body,h1{
margin:0;
padding:0;
color:#fff;
text-align:center;
}
.first {
margin: 0 auto;
background-color:#ffffff;
width:970px;
height:103px;
}
.red1{
background-color:red;
float: left;
height:103px;
width:277px;
}
.green1{
background-color: lawngreen;
float: right;
height: 49px;
width: 137px;
}
.green2{
background-color: lawngreen;
float: right;
margin-top: 8px;
height: 46px;
width: 679px;
}
.second{
margin-top: 10px;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;
height: 435px;
width: 970px;
}
.orange1{
background-color: orange;
float:left;
height: 435px;
width: 310px;
}
.bluegreen{
margin-left: 10px;
float: left;
background-color:#ffffff;
width:450px;
height:435px;
}
.blue1{
background-color: dodgerblue;
float: left;
height: 240px;
width: 450px;
}
.blue2{
background-color: dodgerblue;
float: left;
margin-top: 10px;
height: 110px;
width: 450px;
}
.blue3{
background-color: dodgerblue;
float: left;
margin-top: 10px;
height: 30px;
width: 450px;
}
.pink{
background-color: deeppink;
margin-left: 10px;
float: left;
height: 400px;
width: 190px;
}
.green3{
background-color: seagreen;
float: left;
margin-top: 10px;
height: 25px;
width: 650px;
}
.third{
margin-top: 10px;
margin-left:auto;
margin-right:auto;
background-color:darkblue;
height: 35px;
width: 970px;
}
résultat courant:
