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
- >
-
<html>
-
<Kopf>
-
<meta charset="utf- 8">
-
<Titel>Voll kompatibles HTML-Rasterlayout mit neun Quadraten< ;/ Titel>
-
<meta http-equiv=" " >
Kopf>
-
<Körper>
-
<html>
-
<Kopf>
-
<Stil Typ
=- "text/ css">
/**Setzen Sie den Standard-Tab-Stil des Browsers zurück*/
body,ul,li{margin:0;padding:0;}
.xttblog{
- Breite: 1200px
- Höhe: 170px;
- margin-top:50px
- margin-left: auto;
- margin-right: auto;
- }
- .box{margin-left: 5px;margin-top: 5px;list-style-type:none;}
- .box:after{
- Inhalt: „.“;
Anzeige: blockieren;-
Zeilenhöhe: 0; -
width:0; -
Höhe: 0; -
klar: beides -
Sichtbarkeit: ausgeblendet; -
Überlauf: versteckt; -
} -
.box li{float:left;line-height: 230px;} -
.box li a,.box li a:visited{ -
display:block; -
Rand: 5px durchgezogen #ccc;
- Breite: 380px;
- Höhe: 230px;
- text-align: center;
- Rand links: -5px;
margin-top: -5px;
- Position: relativ;
- Z-Index: 1;
- }
- .box li a:hover{border-color: #f00;z-index: 2;}
-
Stil>
-
Kopf>
-
<Körper>
-
<div class="xttblog" >
-
<ul Klasse="box" >
-
<li><a href="#" title=" 1"><img src="sh.jpg"/>a>li>
-
<li><a href="#" title=" 2"><img src="bd.jpg"/>a>li>
-
<li><a href="#" title=" 3"><img src="tb.jpg"/>a>li>
-
<li><a href="#" title=" 4"><img src="fh.jpg"/>a>li>
-
<li><a href="#" title=" 5"><img src="tb.jpg"/>a>li>
-
<li><a href="#" title=" 6"><img src="tb.jpg"/>a>li>
-
<li><a href="#" title=" 7"><img src="tb.jpg"/>a>li>
-
<li><a href="#" title=" 8"><img src="tb.jpg"/>a>li>
-
<li><a href="#" title=" 9"><img src="tb.jpg"/>a>li>
-
ul>
-
div>
-
Körper>
-
html>
-
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
