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

Detaillierte Erläuterung zur Lösung des Zirkelreferenzproblems bei der Verwendung von JSON.stringify

Wenn Programmierer täglich TypeScript-/JavaScript...

Verwenden Sie CSS, um einen 3D-Fotowandeffekt zu erstellen

Verwenden Sie CSS, um eine 3D-Fotowand zu erstell...

XHTML Basic 1.1, eine vom W3C empfohlene Auszeichnungssprache für mobiles Web

W3C hat kürzlich zwei Standards veröffentlicht, n...

Grafisches Tutorial zur Installation von Linux CentOS6.9 unter VMware

Als technischer Neuling zeichne ich den Vorgang d...

Perfekte Lösung für das Problem, dass MySQL sofort nach dem Start heruntergefahren wird (verursacht durch eine Beschädigung der ibdata1-Datei)

Das MySQL auf einem Server im Computerraum lief e...

HTML-Subtag und Sup-Tag

Heute stelle ich zwei HTML-Tags vor, die ich nich...

Detaillierte Erläuterung der Anwendung der Docker-Basistechnologie Namespace Cgroup

Docker zugrunde liegende Technologie: Die beiden ...

10 Dinge, die exzellente Webentwickler wissen müssen, um ihre Entwicklungsfähigkeiten zu verbessern

„Entwicklung ist mehr als nur Code schreiben“ stam...

CocosCreator-Tutorial für den Einstieg: Erstellen Sie Ihr erstes Spiel mit TS

Inhaltsverzeichnis Prämisse TypeScript vs. JavaSc...

So legen Sie ein Kennwort für MySQL Version 5.6 auf dem Mac fest

MySQL kann bei der Installation festgelegt werden...

Ein paar Dinge zu favicon.ico (am besten im Stammverzeichnis ablegen)

Öffnen Sie eine beliebige Webseite, zum Beispiel ...

Detaillierte Erläuterung des grafischen Tutorials zum Herunterladen, Installieren und Konfigurieren von Win10 DVWA (Lernen von Anfängern)

Das Computersystem wurde neu installiert und die ...

So verstehen Sie den Unterschied zwischen ref toRef und toRefs in Vue3

Inhaltsverzeichnis 1. Grundlagen 1.Referenz 2. to...

Tutorial zu XHTML-Webseiten

<br />Dieser Artikel soll Anfängern hauptsäc...

Anfänger lernen einige HTML-Tags (2)

Verwandter Artikel: Anfänger lernen einige HTML-Ta...