Eine einfache Demonstration der Verwendung von CSS zum Implementieren eines Neun-Quadrat-Rasterlayouts auf einer Seite-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Eine einfache Demonstration der Verwendung von CSS zum Implementieren eines Neun-Quadrat-Rasterlayouts auf einer Seite

Jun 05, 2018 pm 03:50 PM

css Jiugongge

Das Neun-Quadrat-Raster-Layout wird häufig bei der Erstellung einiger Web-Apps verwendet. Hier verwenden wir ein grobes Strukturbeispiel als einfache Demonstration der CSS-Implementierung des Neun-Quadrat-Raster-Layouts auf der Seite Beachten Sie die Kompatibilitätsprobleme unter IE6.

1. Rendering:

3. Layout 2 (kompatibel mit allen Browsern Gute Leistung)

CSS-CodeKopieren Sie den Inhalt in die Zwischenablage

&lt;!DOCTYPE html&gt;   
&lt;html&gt;   
&lt;head&gt;   
&lt;meta charset=&quot;utf-8&quot;&gt;   
&lt;title&gt;九宫格布局&lt;/title&gt;   
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;   
&lt;/head&gt;   
&lt;body&gt;   
&lt;html&gt;   
&lt;head&gt;   
&lt;style type=&quot;text/css&quot;&gt;   
body{margin:0;padding:0;}   
.grid_wrapper{   
 width: 170px;   
 height: 170px;   
 margin-left: auto;   
 margin-right: auto;   
}   
.grid{   
 margin-left: 5px;   
 margin-top: 5px;   
}   
.grid:after{   
 content: &quot;.&quot;;   
 display: block;   
 line-height: 0;   
 height: 0;   
 clear: both;   
 visibility: hidden;   
 overflow: hidden;   
}   
.grid a,.grid a:visited{   
 float: left;   
 display: inline;   
 border: 5px solid #ccc;   
 width: 50px;   
 height: 50px;   
 text-align: center;   
 line-height: 50px;   
 margin-left: -5px;   
 margin-top: -5px;   
 position: relative;   
 z-index: 1;   
}   
.grid a:hover{   
 border-color: #f00;   
 z-index: 2;   
}   
&lt;/style&gt;   
&lt;/head&gt;   
&lt;body&gt;   
&lt;p class=&quot;grid_wrapper&quot;&gt;   
 &lt;p class=&quot;grid&quot;&gt;   
  &lt;a href=&quot;#&quot; title=&quot;1&quot;&gt;1&lt;/a&gt;   
  &lt;a href=&quot;#&quot; title=&quot;2&quot;&gt;2&lt;/a&gt;   
  &lt;a href=&quot;#&quot; title=&quot;3&quot;&gt;3&lt;/a&gt;   
  &lt;a href=&quot;#&quot; title=&quot;4&quot;&gt;4&lt;/a&gt;   
  &lt;a href=&quot;#&quot; title=&quot;5&quot;&gt;5&lt;/a&gt;   
  &lt;a href=&quot;#&quot; title=&quot;6&quot;&gt;6&lt;/a&gt;   
  &lt;a href=&quot;#&quot; title=&quot;7&quot;&gt;7&lt;/a&gt;   
  &lt;a href=&quot;#&quot; title=&quot;8&quot;&gt;8&lt;/a&gt;   
  &lt;a href=&quot;#&quot; title=&quot;9&quot;&gt;9&lt;/a&gt;   
 &lt;/p&gt;   
&lt;/p&gt;   
&lt;/body&gt;   
&lt;/html&gt;

Nach dem Login kopieren

Dort ist ein Kompatibilitätsproblem unter IE6, die Darstellung ist wie folgt:
2016627114120994.jpg (175×228)

3. Layout 2 (gute Kompatibilität zwischen allen Browsern)

CSS-CodeKopieren Sie den Inhalt in die Zwischenablage

&lt;!DOCTYPE html&gt;   
&lt;html&gt;   
&lt;head&gt;   
&lt;meta charset=&quot;utf-8&quot;&gt;   
&lt;title&gt;九宫格布局&lt;/title&gt;   
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;   
&lt;/head&gt;   
&lt;body&gt;   
&lt;html&gt;   
&lt;head&gt;   
&lt;style type=&quot;text/css&quot;&gt;   
body,ul,li{margin:0;padding:0;}   
.grid_wrapper{   
 width: 170px;   
 height: 170px;   
 margin-left: auto;   
 margin-right: auto;   
}   
.grid{   
 margin-left: 5px;   
 margin-top: 5px;   
 list-style-type:none;   
}   
.grid:after{   
 content: &quot;.&quot;;   
 display: block;   
 line-height: 0;   
 width:0;   
 height: 0;   
 clear: both;   
 visibility: hidden;   
 overflow: hidden;   
}   
.grid li{float:left;line-height: 50px;}   
.grid li a,.grid li a:visited{   
 display:block;   
 border: 5px solid #ccc;   
 width: 50px;   
 height: 50px;   
 text-align: center;   
 margin-left: -5px;   
 margin-top: -5px;   
 position: relative;   
 z-index: 1;   
}   
.grid li a:hover{   
 border-color: #f00;   
 z-index: 2;   
}   
&lt;/style&gt;   
&lt;/head&gt;   
&lt;body&gt;   
&lt;p class=&quot;grid_wrapper&quot;&gt;   
 &lt;ul class=&quot;grid&quot;&gt;   
  &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;1&quot;&gt;1&lt;/a&gt;&lt;/li&gt;   
  &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;2&quot;&gt;2&lt;/a&gt;&lt;/li&gt;   
  &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;3&quot;&gt;3&lt;/a&gt;&lt;/li&gt;   
  &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;4&quot;&gt;4&lt;/a&gt;&lt;/li&gt;   
  &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;5&quot;&gt;5&lt;/a&gt;&lt;/li&gt;   
  &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;6&quot;&gt;6&lt;/a&gt;&lt;/li&gt;   
  &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;7&quot;&gt;7&lt;/a&gt;&lt;/li&gt;   
  &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;8&quot;&gt;8&lt;/a&gt;&lt;/li&gt;   
  &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;9&quot;&gt;9&lt;/a&gt;&lt;/li&gt;   
 &lt;/ul&gt;   
&lt;/p&gt;   
&lt;/body&gt;   
&lt;/html&gt;

Nach dem Login kopieren

Verwandte Empfehlungen:

CSS-Implementierung des WEB-Standardmenüeffektcodes mit umgekehrtem Dreieck markieren

CSS3 zum Erstellen abgerundeter Bilder und ovaler Bilder

Das obige ist der detaillierte Inhalt vonEine einfache Demonstration der Verwendung von CSS zum Implementieren eines Neun-Quadrat-Rasterlayouts auf einer Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn