Implementierungsmethode für HTML-Neun-Raster-Layouts

Implementierungsmethode für HTML-Neun-Raster-Layouts

Die Diversifizierung von Website-Layouts ist unsere Front-End-Spezialität! Kürzlich habe ich gesehen, dass die Standardregisterkarte des UC-Browsers ein Neuner-Raster-Layout verwendet. Ich habe es studiert und werde den Code hier teilen, damit wir gemeinsam lernen können! Die Wirkung ist wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2. < html >   
  3. <Kopf>​​   
  4. < Meta   Zeichensatz = "utf-8" >   
  5. < title > Vollständig kompatibles HTML-Neun-Raster-Layout </ title >   
  6. < Meta   http-equiv = "X-UA-kompatibel"   Inhalt = "IE=edge" >   
  7. </ Kopf >   
  8. < Textkörper >   
  9. < html >   
  10. <Kopf>​​   
  11. < Stil   Typ = "Text/CSS" >   
  12. /** Standard-Tab-Stil des Browsers zurücksetzen */
  13. Körper, ul, li {Rand: 0; Polsterung: 0;}
  14. .xttblog{
  15. Breite: 1200px;
  16. Höhe: 170px;
  17. Rand oben: 50px;
  18. Rand links: automatisch;
  19. Rand rechts: automatisch;
  20. }
  21. .box{Rand links: 5px;Rand oben: 5px;Listenstiltyp: keine;}
  22. .box:nach{
  23. Inhalt: ".";
  24. Anzeige: Block;
  25. Zeilenhöhe: 0;
  26. Breite: 0;
  27. Höhe: 0;
  28. klar: beides;
  29. Sichtbarkeit: versteckt;
  30. Überlauf: versteckt;
  31. }
  32. .box li{float:left;Zeilenhöhe: 230px;}
  33. .box li a,.box li a:besucht{
  34. Anzeige:Block;
  35. Rand: 5px durchgezogen #ccc;
  36. Breite: 380px;
  37. Höhe: 230px;
  38. Textausrichtung: zentriert;
  39. Rand links: -5px;
  40. Rand oben: -5px;
  41. Position: relativ;
  42. Z-Index: 1;
  43. }
  44. .box li a:hover{border-color: #f00;z-index: 2;}
  45. </ Stil >   
  46. </ Kopf >   
  47. < Textkörper >   
  48. < div   Klasse = "xttblog" >   
  49.   < ul   Klasse = "Box" >   
  50.    < li > < ein   href = "#"   Titel = "1" > < img   src = "sh.jpg" /> </ a > </ li >   
  51.    < li > < ein   href = "#"   Titel = "2" > < img   src = "bd.jpg" /> </ a > </ li >   
  52.    < li > < ein   href = "#"   Titel = "3" > < img   src = "tb.jpg" /> </ a > </ li >   
  53.    < li > < ein   href = "#"   Titel = "4" > < img   src = "fh.jpg" /> </ a > </ li >   
  54.    < li > < ein   href = "#"   Titel = "5" > < img   src = "tb.jpg" /> </ a > </ li >   
  55.    < li > < ein   href = "#"   Titel = "6" > < img   src = "tb.jpg" /> </ a > </ li >   
  56.    < li > < ein   href = "#"   Titel = "7" > < img   src = "tb.jpg" /> </ a > </ li >   
  57.    < li > < ein   href = "#"   Titel = "8" > < img   src = "tb.jpg" /> </ a > </ li >   
  58.    < li > < ein   href = "#"   Titel = "9" > < img   src = "tb.jpg" /> </ a > </ li >   
  59.   </ ul >   
  60. </div>​​   
  61. </ Körper >   
  62. </ html >   
  63.   

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein.

<<:  Detaillierte Erklärung des Overflow-Scrollens zur Lösung des Scroll-Lag-Problems

>>:  Erstellen privater Mitglieder in JavaScript

Artikel empfehlen

Beispielcode mit SCSS in Uni-App

Aufgetroffene Fallstricke Ich habe den ganzen Nac...

Starten Sie den Docker-Dienst neu, um den automatischen Start- und Stoppbefehl anzuwenden (empfohlen)

Schauen wir uns den Befehl zum Neustarten der Doc...

Detaillierte Erklärung der Routenkonfiguration von Vue-Router

Inhaltsverzeichnis einführen Objektattribute in R...

Lösung zum Verhindern des Caching in Seiten

Lösung: Fügen Sie in <head> den folgenden Co...

Ubuntu20.04 VNC-Installation und Konfigurationsimplementierung

VNC ist ein Remote-Desktop-Protokoll. Befolgen Si...

Zusammenfassung der Web-Frontend-Kenntnisse (persönliche praktische Erfahrung)

1. Als ich heute eine Seite erstellte, stieß ich a...

Detaillierte Erklärung zur Verwendung des Arguments-Objekts in JavaScript

Inhaltsverzeichnis Vorwort Grundlegende Konzepte ...

So packen Sie das Projekt per Idee in Docker

Viele Freunde wollten schon immer wissen, wie man...

Beispiel für eine HTTPS-Konfigurationsmethode für den Nginx-Server

Linux: Linux-Version 3.10.0-123.9.3.el7.x86_64 Ng...

Vue implementiert bidirektionale Datenbindung

In diesem Artikelbeispiel wird der spezifische Co...

Analyse und Lösung der Gründe, warum geplante MySQL-Aufgaben nicht normal ausgeführt werden können

Inhaltsverzeichnis Vorwort Ursachenanalyse und Lö...

MySQL-Variablendeklaration und Analyse gespeicherter Prozeduren

Deklarieren von Variablen Festlegen globaler Vari...

jQuery realisiert den Shuttle-Box-Effekt

In diesem Artikelbeispiel wird der spezifische Co...

So stellen Sie Confluence und Jira-Software in Docker bereit

Version: centos==7.2 jdk==1.8 Zusammenfluss == 6....

Realisieren Sie einen super coolen Wasserlichteffekt auf Leinwandbasis

In diesem Artikelbeispiel erfahren Sie den spezif...