recherche

Maison >interface Web >tutoriel HTML >Méthode de mise en œuvre de la disposition de la grille HTML à neuf carrés_HTML/Xhtml_Production de pages Web

Méthode de mise en œuvre de la disposition de la grille HTML à neuf carrés_HTML/Xhtml_Production de pages Web

WBOY
WBOYoriginal
2016-05-16 16:36:013121parcourir

Les mises en page diversifiées de sites Web sont notre spécialité front-end ! Récemment, j'ai vu que la page à onglet par défaut d'UC Browser utilise une disposition en grille à neuf carrés. J'ai fait quelques recherches, et ici, je vais partager le code et apprendre ensemble ! L'effet est le suivant :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >
  2. <html>
  3. <tête>
  4. <méta charset="utf- 8"> 
  5. <titre>Mise en page de grille HTML à neuf carrés entièrement compatible< ;/ titre>
  6. <méta http-equiv=" " > tête>
  7. <corps>
  8. <html>
  9. <tête>
  10. <style type
    11. =
  11. "texte/ css"> /**Réinitialiser le style d'onglet par défaut du navigateur*/ body,ul,li{margin:0;padding:0;} .xttblog{
  12. largeur : 1200px
  13. hauteur : 170px
  14. marge-haut : 50px ;
  15. marge-gauche : auto
  16. marge droite : auto
  17. }
  18. .box{margin-left : 5px;margin-top : 5px;list-style-type:none;}
  19. .box:après{
  20. contenu : ".";
  21. affichage : bloquer
  22. hauteur de ligne : 0 ;
  23. largeur:0;
  24. hauteur : 0;
  25. clair : les deux
  26. visibilité : masquée
  27. débordement : caché
  28. }
  29. .box li{float:left;line-height: 230px;}
  30. .box li a,.box li a:visité{
  31. display:bloquer
  32. bordure : 5px solide #ccc
  33. largeur : 380px
  34. hauteur : 230px
  35.  alignement du texte : centre ;
  36. marge gauche : -5px ;
  37. marge en haut : -5px ;
  38. position : relative ;
  39. indice z : 1 ;
  40. }
  41. .box li a:hover{border-color: #f00;z-index: 2;}  
  42. style>  
  43. tête>  
  44. <corps>  
  45. <div class="xttblog" >  
  46.  <ul classe="boîte" >  
  47.   <li><a href="#" titre=" 1"><img src="sh.jpg"/>a>li>  
  48.   <li><a href="#" titre=" 2"><img src="bd.jpg"/>a>li>  
  49.   <li><a href="#" titre=" 3"><img src="tb.jpg"/>a>li>  
  50.   <li><a href="#" titre=" 4"><img src="fh.jpg"/>a>li>  
  51.   <li><a href="#" titre=" 5"><img src="tb.jpg"/>a>li>  
  52.   <li><a href="#" titre=" 6"><img src="tb.jpg"/>a>li>  
  53.   <li><a href="#" titre=" 7"><img src="tb.jpg"/>a>li>  
  54.   <li><a href="#" titre=" 8"><img src="tb.jpg"/>a>li>  
  55.   <li><a href="#" titre=" 9"><img src="tb.jpg"/>a>li>  
  56.  ul>  
  57. div>  
  58. corps>
  59. html>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Déclaration：
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
Article précédent：AucunArticle suivant：用HTML和CSS打造属于自己的暖男“大白”_HTML/Xhtml_网页制作

Articles Liés

Voir plus