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

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

WBOY

Freigeben： 2016-05-16 16:36:01

Original

3115 Leute haben es durchsucht

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: „.“;
Breite: 380px;
Höhe: 230px;
text-align: center;
Rand links: -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.