Maison >interface Web >tutoriel CSS >Exemple de code de page de mise en page CSS
Exemple de code de page de mise en page CSS
- 高洛峰original
- 2017-03-28 10:45:422837parcourir
Créez le fichier CSS comme suit :
@charset "utf-8";
/* CSS Document */
*{
margin:0px;
padding:0px;
border:0px;
}
#box{
width:1100px;
height:760px;
margin:auto;
}
#hen
{
width:1100px;
height:160px;
background-color:#936;
}
#zuo{
width:250px;
height:500px;
margin-top:10px;
background-color:#03C;
float:left;
margin-bottom:10px;
}
#zhong-1{
width:262px;
height:300px;
margin-top:10px;
margin-left:10px;
float:left;
background-color:#000;
}
#zhong-2{
width:262px;
height:300px;
margin-top:10px;
margin-left:10px;
float:left;
background-color:#000;
}
#xia{
width:544px;
height:190px;
background-color:#03C;
margin-top:10px;
float:left;
margin-bottom:10px;
}
#you{
width:295px;
height:500px;
margin-left:10px;
margin-top:10px;
background-color:#3F6;
float:right;
margin-bottom:10px;
}
#dibu
{
width:1100px;
height:50px;
margin-top:10px;
background-color:#CF3;
clear:both;
}fichier html comme suit :
<!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>CSS排版页面</title>
<link href="css/63301.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
<div id="hen"></div>
<div id="zuo"></div>
<div id="zhong-1"></div>
<div id="zhong-2"></div>
<div id="you"></div>
<div id="xia"></div>
<div id="dibu"></div>
</div>
</body>
</html>L'effet final est tel qu'indiqué ci-dessous :
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Partagez le code pour générer des motifs de petits points à l'aide de CSSArticle suivant：Partagez le code pour générer des motifs de petits points à l'aide de CSS