Mise en page HTML

Les pages Web que nous ouvrons dans notre vie quotidienne sont toujours ordonnées et confortables à consulter, mais savez-vous comment elles font ? Ils sont présentés à l'aide de nos éléments HTML + quelques styles CSS, apprenons donc comment mettre en page la page aujourd'hui.

Mise en page du site Web

La plupart des sites Web organisent le contenu dans 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 la balise table HTML pour concevoir une belle mise en page, il n'est pas recommandé d'utiliser la balise table comme outil de mise en page - les tableaux ne sont pas des outils de mise en page.

Conseils : 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 vos pages Web avec soin.

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

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

Exemple

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<div id="container" style="width:400px">
<div id="header" style="background-color:#baff9e;">
    <h1 style="margin-bottom:0;">主要的网站标题</h1></div>
<div id="menu" style="background-color:#45caff;height:200px;width:150px;float:left;">
    <b>菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:250px;float:left;">
    这里是内容</div>
<div id="footer" style="background-color:#fdd8ff;clear:both;text-align:center;">
    版权 © php.cn</div>
</div>
</body>
</html>

Le code HTML ci-dessus will Produit le résultat suivant :

Mise en page HTML à l'aide d'un tableau

Commentaires : L'élément <table> n'est pas conçu comme un outil de mise en page. L'élément

<table> est utilisé pour afficher des données tabulaires.

L'utilisation de l'élément <table> peut obtenir des effets de mise en page car l'élément table peut être stylisé via CSS :

Exemple

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

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

Résultat de l'exécution du code :

Mise en page HTML

Astuce : Le plus grand avantage de l'utilisation de CSS est que si le code CSS est stocké 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 tutoriels 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).

Par exemple, utiliser Bootstrap

Bootstrap consiste à utiliser un framework CSS prêt à l'emploi.

Bootstrap est le framework HTML, CSS et JS le plus populaire pour développer un Web réactif.

Bootstrap vous aide à développer des sites qui ont fière allure quelle que soit la taille : écran, ordinateur portable, tablette ou téléphone mobile :

Pour en savoir plus sur Bootstrap, lisez notre tutoriel Bootstrap.

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <div id="container" style="width:400px"> <div id="header" style="background-color:#baff9e;"> <h1 style="margin-bottom:0;">主要的网站标题</h1></div> <div id="menu" style="background-color:#45caff;height:200px;width:150px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:250px;float:left;"> 这里是内容</div> <div id="footer" style="background-color:#fdd8ff;clear:both;text-align:center;"> 版权 © php.cn</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]