suchen

Heim >Web-Frontend >HTML-Tutorial >Implementierungsmethode für das HTML-Layout mit neun Quadraten_HTML/Xhtml_Webseitenproduktion

Implementierungsmethode für das HTML-Layout mit neun Quadraten_HTML/Xhtml_Webseitenproduktion

WBOY
WBOYOriginal
2016-05-16 16:36:013121Durchsuche

Abwechslungsreiche Website-Layouts sind unsere Frontend-Spezialität! Kürzlich habe ich gesehen, dass die Standardregisterkarte von UC Browser ein Rasterlayout mit neun Quadraten verwendet. Ich habe etwas recherchiert und hier werde ich den Code teilen und gemeinsam lernen! Der Effekt ist wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >
  2. <html>
  3. <Kopf>
  4. <meta charset="utf- 8"> 
  5. <Titel>Voll kompatibles HTML-Rasterlayout mit neun Quadraten< ;/ Titel>
  6. <meta http-equiv=" " > Kopf>
  7. <Körper>
  8. <html>
  9. <Kopf>
  10. <Stil Typ
    11. =
  11. "text/ css"> /**Setzen Sie den Standard-Tab-Stil des Browsers zurück*/ body,ul,li{margin:0;padding:0;} .xttblog{
  12. Breite: 1200px
  13. Höhe: 170px;
  14. margin-top:50px
  15. margin-left: auto;
  16. margin-right: auto;
  17. }
  18. .box{margin-left: 5px;margin-top: 5px;list-style-type:none;}
  19. .box:after{
  20. Inhalt: „.“;
    21. Anzeige: blockieren;
    22. Zeilenhöhe: 0;
    23. width:0;
    24. Höhe: 0;
    25. klar: beides
    26. Sichtbarkeit: ausgeblendet;
    27. Überlauf: versteckt;
    28. }
    29. .box li{float:left;line-height: 230px;}
    30. .box li a,.box li a:visited{
    31. display:block;
    32. Rand: 5px durchgezogen #ccc;
  32. Breite: 380px;
  33. Höhe: 230px;
  34. text-align: center;
  35. Rand links: -5px;
    36. margin-top: -5px;
  36. Position: relativ;
  37. Z-Index: 1;
  38. }
  39. .box li a:hover{border-color: #f00;z-index: 2;}  
  40. Stil>  
  41. Kopf>  
  42. <Körper>  
  43. <div class="xttblog" >  
  44.  <ul Klasse="box" >  
  45.   <li><a href="#" title=" 1"><img src="sh.jpg"/>a>li>  
  46.   <li><a href="#" title=" 2"><img src="bd.jpg"/>a>li>  
  47.   <li><a href="#" title=" 3"><img src="tb.jpg"/>a>li>  
  48.   <li><a href="#" title=" 4"><img src="fh.jpg"/>a>li>  
  49.   <li><a href="#" title=" 5"><img src="tb.jpg"/>a>li>  
  50.   <li><a href="#" title=" 6"><img src="tb.jpg"/>a>li>  
  51.   <li><a href="#" title=" 7"><img src="tb.jpg"/>a>li>  
  52.   <li><a href="#" title=" 8"><img src="tb.jpg"/>a>li>  
  53.   <li><a href="#" title=" 9"><img src="tb.jpg"/>a>li>  
  54.  ul>  
  55. div>  
  56. Körper>
  57. html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：KeinerNächster Artikel：用HTML和CSS打造属于自己的暖男“大白”_HTML/Xhtml_网页制作

In Verbindung stehende Artikel

Mehr sehen