Maison >interface Web >tutoriel CSS >Implémentation de la disposition des colonnes de gauche, du milieu et de droite dans la page CSS
Implémentation de la disposition des colonnes de gauche, du milieu et de droite dans la page CSS
- 不言original
- 2018-06-21 16:36:233192parcourir
La mise en page avec les colonnes de gauche, du milieu et de droite est relativement courante dans les mises en page Web actuelles. Ci-dessous, je vais partager avec vous deux bonnes méthodes pour obtenir la mise en page des colonnes de gauche, du milieu et de droite. Le code est très détaillé. Ne le manquez pas si vous en avez besoin.
Copiez et collez le code suivant à utiliser :
Exemple 1 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="gb2312" />
<style type="text/css">
.page_center {
width:100%;
}
#nav {
background-color:red;
height:20px;
}
#left {
width:120px;
background-color:green;
position:absolute;
}
#middle {
background-color:yellow;
}
#right {
width:120px;
background-color:green;
position:absolute;
top:0;
right:0;
}
#foot {
background-color:pink;
}
#main {
position:relative;
}
</style>
</head>
<body>
<p id="nav" class="page_center">上边</p>
<p id="main" class="page_center">
<p id="left">左边</p>
<p id="middle"> 中间部分</p>
<p id="right">右边</p>
</p>
<p id="foot" class="page_center">底边</p>
</body>
</html>
Exemple 2 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#left{
float:left; width:240px; height:500px; background:#0C9;
}
#right{
float:right;width:240px;height:500px; background:#933;
}
#center{
height:500px;background:#06C;
}
</style>
<body>
<p id="left" >左边</p>
<p id="right" >右边</p>
<p id="center" style="">中间</p>
</body>
</html> <span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><strong></strong></span>
Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
À propos de la mise en œuvre d'une mise en page multi-lignes et multi-colonnes avec CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!