Mise en page HTML

La mise en page des pages Web est très importante pour améliorer l'apparence du site Web.

Veuillez concevoir la mise en page de votre page Web avec soin.

Mise en page du site Web

La plupart des sites Web organiseront leur contenu en plusieurs colonnes (tout comme un magazine ou un journal).

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.

Bien que nous puissions utiliser des balises de tableau HTML pour concevoir de belles mises en page, la balise de table n'est pas recommandée comme outil de mise en page - Les tableaux ne le sont pas outils de mise en page.

Mise en page HTML - Utilisation de l'élément <div>

L'élément div est un élément de niveau bloc utilisé pour regrouper des éléments HTML.

L'exemple suivant utilise cinq éléments div pour créer une mise en page multi-colonnes :

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#cc6666;}
div#menu {background-color:#99CCFF; height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>网站头部图片，标题</h1>
</div>
<div id="menu">
<h2>菜单</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">内容</div>
<div id="footer">底部</div>
</div>
</body>
</html>

Mise en page HTML - utilisation de tableaux

L'utilisation de la balise HTML <table> est un moyen simple de créer des mises en page.

Vous pouvez 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.

Astuce : Même si vous pouvez utiliser des tableaux HTML pour créer de belles mises en page, les tableaux sont conçus pour présenter des données tabulées - les tableaux ne sont pas des outils de mise en page !

L'exemple suivant utilise un tableau avec trois lignes et deux colonnes - la première et la dernière lignes utilisent l'attribut colspan pour s'étendre sur les deux colonnes :

Exemple

<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>网站头部图片，标题</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
内容</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
标题</td>
</tr>
</table>
</body>
</html>

Les deux méthodes sont différentes, mais l'effet est le même.

Mise en page HTML - Conseils utiles

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

Conseil : étant donné que la création de mises en page avancées peut prendre 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> <style type="text/css"> div#container{width:500px} div#header {background-color:#cc6666;} div#menu {background-color:#99CCFF; height:200px; width:100px; float:left;} div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;} div#footer {background-color:#99bbbb; clear:both; text-align:center;} h1 {margin-bottom:0;} h2 {margin-bottom:0; font-size:14px;} ul {margin:0;} li {list-style:none;} </style> </head> <body> <div id="container"> <div id="header"> <h1>网站头部图片，标题</h1> </div> <div id="menu"> <h2>菜单</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">内容</div> <div id="footer">底部</div> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Mise en page HTML

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]