Maison > Article > interface Web > Explication détaillée de la disposition des div H5 et de la disposition des tables
Explication détaillée de la disposition des div H5 et de la disposition des tables
- php中世界最好的语言original
- 2018-03-26 11:37:076437parcourir
Cette fois, je vais vous apporter une explication détaillée de la disposition des div H5 et de la disposition des tables. Quelles sont les précautions pour la disposition des div H5 et la disposition des tables. Voici des cas pratiques, jetons un coup d'oeil.
L'exemple de cet article analyse la mise en page html5 p et la mise en page du tableau pour votre référence. Le contenu spécifique est le suivant
mise en page p : html+css implémente une mise en page simple. .
Dans #container, la hauteur ne peut pas être écrite en pourcentage et doit être une hauteur spécifique.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>p布局</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#container{
width:100%;
height:650px;
background-color: aqua;
}
#heading{
width:100%;
height:10%;
background-color: azure;
}
#content-menu{
width:30%;
height:80%;
background-color: chartreuse;
float:left;
}
#content-body{
width:70%;
height:80%;
background-color: chocolate;
float:left;
}
#footer{
width:100%;
height:10%;
background-color: darkgrey;
clear: both;
}
</style>
</head>
<body>
<p id="container">
<p id="heading">头部</p>
<p id="content-menu">内容菜单</p>
<p id="content-body">内容主体</p>
<p id="footer">底部</p>
</p>
</body>
</html>
Rendu :
Disposition du tableau :
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>table布局</title> </head> <body marginwidth="0px" marginheight="0px"> <table width="100%" height="650px" style="background-color: aqua"> <tr> <td colspan="3" width="100%" height="10%" style="background-color: chartreuse">这是头部</td> </tr> <tr> <td width="20%" height="80%" style="background-color: antiquewhite">左菜单</td> <td width="60%" height="80%" style="background-color: coral">内容</td> <td width="20%" height="80%" style="background-color: cornflowerblue">右菜单</td> </tr> <tr> <td colspan="3" width="100%" height="10%" style="background-color: crimson">这是底部</td> </tr> </table> </body> </html>
Rendu :
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Explication détaillée de l'utilisation de la requête de pagination
Explication détaillée de l'utilisation des requêtes liées à la date fonctions en JS
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!