Mise en page HTML

Sur Internet, vous pouvez voir partout des colonnes formatées comme les journaux.

La plupart des sites Web peuvent utiliser les éléments <div> ou <table> CSS est utilisé pour positionner des éléments ou créer des arrière-plans et des looks colorés pour les pages.

Utilisez l'élément <div> pour mettre en page

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#00FFFF;">
<h1 style="margin-bottom:0;">标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
</div>
 
<div id="content" style="background-color:#00FF00;height:200px;width:400px;float:left;">
内容</div>
 
<div id="footer" style="background-color:#FF00FF;clear:both;text-align:center;">
版权 © php.cn</div>
 
</div>
 
</body>
</html>

Utiliser des tableaux pour la mise en page

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>标题</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © php.cn</td>
</tr>
</table>
 
</body>
</html>

Mise en page HTML - Conseils utiles

Astuce : Le plus grand avantage de l'utilisation de CSS est que si vous stockez le code CSS dans une feuille de style externe, le site sera plus facile à maintenir. En modifiant un seul fichier, vous pouvez modifier la mise en page de toutes les pages. Pour en savoir plus sur CSS, visitez nos didacticiels CSS

Conseil : Étant donné que la création de mises en page avancées prend du temps, l'utilisation de modèles est une option rapide. Il existe de nombreux modèles de sites Web gratuits disponibles via les moteurs de recherche (vous pouvez utiliser ces mises en page de sites Web prédéfinies et les optimiser).

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>布局教程</title> <style type="text/css"> #Container{ width:1000px; margin:0 auto;/*设置整个容器在浏览器中水平居中*/ background:#CF3; } #Header{ height:80px; background:#093; } #logo{ padding-left:50px; padding-top:20px; padding-bottom:50px; } #Content{ height:600px; /*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/ margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/ background:#0FF; } #Content-Left{ height:400px; width:200px; margin:20px;/*设置元素跟其他元素的距离为20像素*/ float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/ background:#90C; } #Content-Main{ height:400px; width:720px; margin:20px;/*设置元素跟其他元素的距离为20像素*/ float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/ background:#90C; } /*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/ #Footer{ height:40px; background:#90C; margin-top:20px; } .Clear{ clear:both; } </style> </head> <body> <div id="Container"> <div id="Header"> <div id="logo">这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。</div> </div> <div id="Content"> <div id="Content-Left">Content-Left</div> <div id="Content-Main">Content-Main</div> </div> <div class="Clear"></div> <div id="Footer">Footer</div> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique