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

Analyse der Methoden zur visuellen Strukturierung und Gestaltung von Kinder-Websites

1. Warm und sanft Zugehörige Adresse: http://www.w...

JavaScript-Flusskontrolle (Schleife)

Inhaltsverzeichnis 1. for-Schleife 2. Doppelte fo...

So verwenden Sie Lazy Loading in React, um die Ladezeit des ersten Bildschirms zu verkürzen

Inhaltsverzeichnis verwenden Installieren Wie wir...

Darstellung des Vorgangs zur Verwendung von FileZilla zur Verbindung mit dem FTP-Server

Als ich begann, einen FTP-Server auf dem Server e...

Zusammenfassung der Linux-Befehle zur Dateiverzeichnisverwaltung

Befehl „touch“ Es hat zwei Funktionen: Eine beste...

Informationen zur Verwendung der Vue v-on-Direktive

Inhaltsverzeichnis 1. Auf Ereignisse achten 2. Üb...

Zusammenfassung der MySQL-Sperrwissenspunkte

Das Konzept des Schlosses ①. Im wirklichen Leben ...

JavaScript implementiert den Div-Maus-Drag-Effekt

In diesem Artikel wird der spezifische Code für J...

Was ist Webdesign

<br />Originalartikel: http://www.alistapart...

Detaillierte Erklärung dieser Referenz und benutzerdefinierter Eigenschaften in JavaScript

Inhaltsverzeichnis 1. dieses Schlüsselwort 2. Ben...

Eine einfache und eingehende Studie zu Async und Await in JavaScript

Inhaltsverzeichnis 1. Einleitung 2. Detaillierte ...

Nginx-Dienst 500: Interner Serverfehler einer der Gründe

500 (Interner Serverfehler) Auf dem Server ist ei...

Nutzungsszenarien und Quellcodeanalyse der Funktionskomponenten erweiterter Vue-Komponenten

Inhaltsverzeichnis einführen Anwendungsszenarien ...

Einige Probleme, die durch inkonsistente MySQL-Kodierung verursacht werden können

Gespeicherte Prozeduren und Codierung Wenn in ges...

Detailliertes Installations- und Konfigurationstutorial zum MySQL-Flashback-Tool binlog2sql

Überblick binlog2sql ist ein in Python entwickelt...