Habituellement, nous ajoutons rarement des bordures aux balises p, mais lors de la conception, nous ajoutons des bordures aux balises div, pour que cela paraisse plus évident
Faisons un exemple : Par exemple, sur la page d'accueil du site Web , la partie médiane de la tête (divisée en deux parties) et la partie inférieure, comment implémenter un style de mise en page comme celui-ci
Nous devons d'abord donner un grand div et placer les deux parties médianes de ? la tête et le bas ici. div, nous devons créer un style CSS pour le premier div, puis ajouter 3 balises div
à ce div. Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#dv1{
width:800px;
height:500px;
border:1px solid red;
margin:0 auto; /*居中*/
}
</style>
</head>
<body>
<div id="dv1">
<div id="top">头部</div>
<div id="cen">中部</div>
<div id="but">底部</div>
</div>
</body>
</html>. Ensuite, nous devons ajouter des balises div au milieu et en bas de la tête. Ajoutez respectivement des styles, le code complet est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#dv1{
width:800px; height:500px;border:1px solid red;margin:0 auto; /*居中*/text-align:center;
}
#top{
width:780px;height:100px;border:1px solid green;margin:0 auto;background-color:#ccc;margin-top:30px;
}
#cen{
width:780px; height:200px;border:1px solid black;margin:0 auto;background-color:#f77;margin-top:5px;
}
#but{
width:780px;height:100px;border:1px solid #f60;margin:0 auto;margin-top:5px;
}
#left{
width:200px;
height:198px;
border:1px solid green;
margin-left:5px;
float:left;
}
#right{
width:570px;
height:198px;
border:1px solid black;
float:right;
}
</style>
</head>
<body>
<div id="dv1">
<div id="top">头部</div>
<div id="cen">
<div id="left">左边</div>
<div id="right">右边</div>
</div>
<div id="but">底部</div>
</div>
</body>
</html> Remarque : la bordure doit également être divisée en haut, bas, gauche et droite
bordure en haut en haut
bordure en gauche à gauche
bordure en bas à droite
bordure en bas
section suivante