Comment mettre en page HTML

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.

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

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

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>

Rendu :

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>

Rendu :

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

 <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>