communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > HTML5
élément de balise html pied de page inférieur tutoriel de mise en page CSS

HTML5
élément de balise html pied de page inférieur tutoriel de mise en page CSS

巴扎黑
Libérer： 2017-06-27 09:50:12
original
3603 Les gens l'ont consulté

L'élément de balise HTML5

ajoute une nouvelle balise d'élément de pied de page html5. Comprenez les bases de la nouvelle balise de pied de page en HTML 5 et comprenez le didacticiel de mise en page CSS du pied de page pour vraiment maîtriser et comprendre

Rappelez-vous Lorsque nous indiquions les droits d'auteur en bas de la page Web avant la version HTML5 précédente, nous avions l'habitude d'utiliser id="footer" ou class="footer". Apprenez-en davantage sur les balises du didacticiel HTML !

Par exemple,

mise en page HTML traditionnelleCode :


Mais en html5, ce nom couramment utilisé de "pied de page" est ajouté en tant que membre de balise d'élément html5.

1.

syntaxe HTML5 - TOP

1. Grammaire

Pour apprendre le CSS, recherchez les ressources DIV+CSS sur DIVCSS5 !


2 Ajoutez un identifiant à la balise de l'élément de pied de page

© DIVCSS5.COM Tous droits réservés
Pour apprendre le CSS, recherchez les ressources DIV+CSS sur DIVCSS5 !


3. >

< ;footer class=”yanshi”> © DIVCSS5.COM Tous droits réservés
Pour apprendre le CSS, recherchez les ressources DIV+CSS sur DIVCSS5 ! 🎜> 4. Expansion des connaissances

Lorsque nous utilisons la balise footer dans le développement HTML5, nous pouvons la traiter comme une balise div ordinaire, mais elle est généralement utilisée pour la mise en page inférieure du site Web. Généralement, une page Web ne comporte qu’une seule zone inférieure. Il est donc préférable de n’utiliser le pied de page qu’une seule fois.


Remarque :

est nouveau dans HTML5 et n'est pas compatible avec IE8 et versions antérieures

navigateur IE

, utilisez-le donc avec prudence.

2. Cas de disposition d'utilisation du pied de page HTML5 - TOP

Maîtrisez la balise de pied de page en comparant et en observant la disposition traditionnelle des balises div et la disposition des balises de pied de page. En même temps, ajoutez une classe au pied de page et définissez la police rouge à des fins de comparaison.

1. Exemple de code de mise en page HTML5 complet

Ce qui précède utilise la balise html div traditionnelle et la mise en page de la balise de pied de page html5, et définit également la classe pour le pied de page.

2. Capture d'écran du navigateur de mise en page HTML5

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>footer 在线演示 DIVCSS5</title> 
  <style> body{text-align:center} /* 传统布局CSS */  #footer{color:#CCC; background:#630202;border-top:1px solid #871515; padding:10px 0 30px 0; width:100%}  /* HTML5布局样式 直接对footer元素设置样式 */  footer{ background:#CCC;border-top:1px solid #000; padding:10px 0 30px 0; width:100%} .color-F00{ color:#F00}  </style> 
 </head> 
 <body> 
  <p>传统html 使用div布局</p> 
  <div id="footer">
    　　&copy; DIVCSS5.COM 版权所有
   <br /> 　　学习CSS，找DIV+CSS资源上DIVCSS5! 
  </div> 
  <p>html5 footer标签布局</p> 
  <footer>
    　　&copy; DIVCSS5.COM 版权所有
   <br /> 　　学习CSS，找DIV+CSS资源上DIVCSS5! 
  </footer> 
  <p>html5 footer标签布局设置class</p> 
  <footer class="color-F00">
    　　&copy; DIVCSS5.COM 版权所有
   <br /> 　　学习CSS，找DIV+CSS资源上DIVCSS5! 
  </footer>   
 </body>
</html>
Copier après la connexion

Disposition du pied de page HTML5 du code HTML et diagramme d'épissage de l'effet de navigation du navigateur

HTML5 <footer> élément de balise html pied de page inférieur tutoriel de mise en page CSSObligatoire pour tester Pour l'effet de mise en page de la balise de pied de page html5, vous devez tester le navigateur IE qui prend en charge HTML5. Il est recommandé de tester avec le navigateur Google Chrome ou le navigateur Win IE9 ou supérieur.

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：
css h5 html html5 元素 标签
source：php.cn
Article précédent：L'utilisation de la balise en HTML Article suivant：L'implémentation CSS de la balise div footer est corrigée en bas de page
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
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2324
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2459
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
2074
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1959
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
2029
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal