Latest web development tutorials

mise en page HTML

Mise en page pour améliorer l'apparence du site est très important.

S'il vous plaît concevoir soigneusement votre mise en page.


Exemples

exemples en ligne

Mise en page en utilisant l'élément <div>
Comment utiliser l'élément <div> à la mise en page.

Utiliser la mise en page <table>
Comment utiliser l'élément <table> pour la mise en page.


mise en page du site

La plupart des sites de contenu dans une pluralité de colonnes (comme un magazine ou d'un journal).

La plupart des sites peuvent utiliser les <div> ou <table> éléments pour créer plusieurs colonnes. CSS est utilisé pour positionner les éléments, ou de créer un arrière-plan et l'apparence colorée de la page.

lampe Bien que nous pouvons utiliser la balise HTML table pour concevoir une belle mise en page, mais la balise table est pas recommandé pour une utilisation comme outil de mise en page - pas un outils de table de mise en page.


HTML Layout - Utilisation élément <div>

élément div est un élément de niveau bloc utilisé pour regrouper les éléments HTML.

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

Exemples

<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Titre> Ce tutoriel (w3big.com) </ title> </ Head> <Body> <Div id = "container" style = "width: 500px"> <Div id = "header" style = "background-color: # FFA500;"> <H1 style = "margin-bottom: 0 ;"> La page principale titre </ h1> </ div> <Div id = "menu" style = "background-color: # FFD700; hauteur: 200px; largeur: 100px; float: left;"> <B> Menu </ b> <br> HTML <br> CSS <br> JavaScript </ div> <Div id = "content" style = "background-color: #EEEEEE ; hauteur: 200px; largeur: 400px; float: left;"> texte ici </ div> <Div id = "footer" style = "background-color: # FFA500; clear: both; text-align: center;"> Droit d' auteur © w3big.com </ div> </ Div> </ Body> </ Html>

Essayez »

Le code HTML ci-dessus donne les résultats suivants:


HTML mise en page - en utilisant des tables

Utilisez HTML balise <table> est de créer une mise en page d'une manière simple.

La plupart des sites peuvent utiliser les <div> ou <table> éléments pour créer plusieurs colonnes. CSS est utilisé pour positionner les éléments, ou de créer un arrière-plan et l'apparence colorée de la page.

lampe Même si vous pouvez utiliser des tables HTML pour créer une belle mise en page, mais le but est de présenter les données sous forme de tableau de table design - pas de table outil de mise en page!

L'exemple suivant utilise trois rangées de deux tables - la première et la dernière ligne utilise l'attribut colspan pour couvrir deux:

Exemples

<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Titre> Ce tutoriel (w3big.com) </ title> </ Head> <Body> <Table width = "500" border = "0"> <Tr> <Td colspan = "2" style = "background-color: # FFA500;"> <H1> titre principal de page </ h1> </ Td> </ Tr> <Tr> <Td style = "background-color: # FFD700; largeur: 100px;"> <B> Menu </ b> <br> HTML <br> CSS <br> JavaScript </ td> <Td style = "background-color: #eeeeee ; hauteur: 200px; width: 400px;"> texte ici </ td> </ Tr> <Tr> <Td colspan = "2" style = "background-color: # FFA500; text-align: center;"> Droit d' auteur © w3big.com </ td> </ Tr> </ Table> </ Body> </ Html>

Essayez »

Le code HTML ci-dessus donne les résultats suivants:



HTML Layout - Conseils utiles

Astuce: les plus grands avantages de l' utilisation de CSS est que si le code CSS est stocké dans une feuille de style externe, puis le site sera plus facile à entretenir.En éditant un seul fichier, vous pouvez modifier la mise en page pour toutes les pages. Pour en savoir plus sur CSS, visitez notre tutoriel CSS .

Astuce: En raison de créer la mise en page avancée est consommatrice de temps très, en utilisant un modèle est une option rapide.vous pouvez Grâce à un moteur de recherche trouver beaucoup de modèles gratuits de site (Vous pouvez utiliser ces aménagement du site préconstruit, et les optimiser).


Les balises HTML de mise en page

标签描述
<div> 定义文档区块,块级(block-level)
<span> 定义 span,用来组合文档中的行内元素。