Comment mettre en page HTML-tutoriel HTML-php.cn

Les méthodes d'utilisation du HTML pour la mise en page sont : 1. Organisez les lignes et les colonnes du tableau via la balise "
" pour obtenir l'effet de mise en page ; 2. Placez le contenu Web sur plusieurs pages ; -disposition en colonnes dans ; 3. Utilisez les balises div et span pour la mise en page.

Comment mettre en page HTML

La mise en page est la partie de la conception graphique qui traite de la disposition des éléments visuels sur une page. Ensuite, dans l'article, je présenterai en détail comment utiliser HTML pour la mise en page de pages Web. J'espère que cela vous sera utile.

[Cours recommandés : Tutoriel HTML]

Mise en page :

Titre : Partie du front-end, utilisée en haut de la page. La balise
est utilisée pour ajouter une section d'en-tête à une page Web.
Barre de navigation : La barre de navigation est la même que la liste des menus. Il est utilisé pour afficher des informations de contenu à l'aide de liens hypertextes.
Index/Sidebar : Il contient des informations supplémentaires ou des publicités qui n'ont pas toujours besoin d'être ajoutées à la page.
Section de contenu : La section de contenu est la partie principale du contenu affiché.
Pied de page : la section de pied de page contient des informations de contact et d'autres requêtes liées à la page Web. La section de pied de page est toujours placée au bas de la page Web. La balise
est utilisée pour définir le pied de page d'une page Web.

Utiliser la mise en page de tableau

La manière la plus simple et la plus populaire de créer une mise en page consiste à utiliser la balise HTML

Vous pouvez organiser les colonnes et les lignes du tableau comme vous le souhaitez

Exemple

Par exemple, implémentez l'exemple de mise en page HTML suivant en utilisant un tableau avec 3 lignes et 2 colonnes, mais avec un en-tête Et la colonne de pied de page utilise l'attribut colspan pour s'étendre sur deux colonnes

<table width = "100%" border = "0">
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>标题</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20">
               <b>侧边栏</b>
            </td>
            <td bgcolor = "#eee" width = "100" height = "200">
               内容
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  页脚
               </center>
            </td>
         </tr>
      </table>

Copier après la connexion

Rendu :

Comment mettre en page HTML

Plus de disposition des colonnes

Placez le contenu Web sur plusieurs pages, vous pouvez conserver le contenu dans la colonne du milieu ou utiliser la colonne de gauche pour utiliser les menus, et la colonne de droite peut être utilisée pour placer des publicités ou autres. contenu.

<table width = "100%" border = "0">
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>左菜单</b>
            </td>
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               内容
            </td>
            <td bgcolor = "#aaa" width = "20%">
               <b>右菜单</b>
            </td>
         </tr>  
      <table>

Copier après la connexion

Rendu :

Comment mettre en page HTML

Utiliser la disposition div

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

est un élément de niveau bloc, l'élément HTML est utilisé pour regrouper les éléments au niveau en ligne

 <div style = "width:450px">
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>标题</h1>
         </div>
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>左侧栏</b></div>
         </div>
         <div style = "background-color:#eee; height:200px; width:250px; float:left;" >
            <b>内容</b>
         </div>
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>右侧栏</b></div>
         </div>
       <div style = "background-color:#b5dcb3; clear:both">
            <center>
               页脚
            </center>
         </div>
      </div>

Copier après la connexion

Rendu :

Image 020.png

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde.

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!

Étiquettes associées：

html mise en page de pages Web

source：php.cn

Article précédent：Comment l'éditeur de texte enrichi ueditor implémente le téléchargement d'images entre domaines Article suivant：Qu'est-ce que la balise méta en HTML ? Quelles sont les propriétés?

Déclaration de ce site Web

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

Derniers articles par auteur