Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten-HTML-Tutorial-php.cn

Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten

高洛峰

Freigeben： 2017-02-21 13:34:39

Original

3007 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:

Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>全兼容的HTML九宫格布局</title>  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
</head>  
<body>  
<html>  
<head>  
<style type="text/css">  
/** 重置浏览器默认标签样式 */   
body,ul,li{margin:0;padding:0;}   
.xttblog{   
 width: 1200px;   
 height: 170px;   
 margin-top:50px;   
 margin-left: auto;   
 margin-right: auto;   
}   
.box{margin-left: 5px;margin-top: 5px;list-style-type:none;}   
.box:after{   
 content: ".";   
 display: block;   
 line-height: 0;   
 width:0;   
 height: 0;   
 clear: both;   
 visibility: hidden;   
 overflow: hidden;   
}   
.box li{float:left;line-height: 230px;}   
.box li a,.box li a:visited{   
 display:block;   
 border: 5px solid #ccc;   
 width: 380px;   
 height: 230px;   
 text-align: center;   
 margin-left: -5px;   
 margin-top: -5px;   
 position: relative;   
 z-index: 1;   
}   
.box li a:hover{border-color: #f00;z-index: 2;}   
</style>  
</head>  
<body>  
<p class="xttblog">  
 <ul class="box">  
  <li><a href="#" title="1"><img  src="sh.jpg"/ alt="Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten" ></a></li>  
  <li><a href="#" title="2"><img  src="bd.jpg"/ alt="Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten" ></a></li>  
  <li><a href="#" title="3"><img  src="tb.jpg"/ alt="Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten" ></a></li>  
  <li><a href="#" title="4"><img  src="fh.jpg"/ alt="Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten" ></a></li>  
  <li><a href="#" title="5"><img  src="tb.jpg"/ alt="Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten" ></a></li>  
  <li><a href="#" title="6"><img  src="tb.jpg"/ alt="Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten" ></a></li>  
  <li><a href="#" title="7"><img  src="tb.jpg"/ alt="Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten" ></a></li>  
  <li><a href="#" title="8"><img  src="tb.jpg"/ alt="Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten" ></a></li>  
  <li><a href="#" title="9"><img  src="tb.jpg"/ alt="Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten" ></a></li>  
 </ul>  
</p>  
</body>  
</html>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, das wird so sein hilfreich für das Studium aller sein.

Weitere Artikel zur Implementierungsmethode des HTML-Rasterlayouts mit neun Quadraten finden Sie auf der chinesischen PHP-Website!