效果展示
代碼如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3實現六邊形網格布局樣式代碼 - 何問起</title>
<base target="_blank" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css3/30/css/hexagons.css">
</head>
<body>
<ul id="hexGrid">
<li class="hex">
<a class="hexIn" href="http://hovertree.com/">
<img src="http://hovertree.com/texiao/css3/30/img/1.jpg" alt="" />
<h1>何問起</h1>
<p>嗨，我是1號，我叫何問起，我萌吧，歡迎點我.</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/h/bjaf/kqud99m6.htm">
<img src="http://hovertree.com/texiao/css3/30/img/2.jpg" alt="" />
<h1></h1>
<p>我是二號，歡迎點我，我唱歌很好聽的，帶上耳機吧，我有絕活。。。</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/hvtart/bjae/m8wrrmrw.htm">
<img src="http://hovertree.com/texiao/css3/30/img/3.jpg" alt="" />
<h1>冷冰冰</h1>
<p>我的外表冷冰冰，但是我很活潑的，進來看看就知道了。</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/h/bjaf/html5zixueji.htm">
<img src="http://hovertree.com/texiao/css3/30/img/4.jpg" alt="" />
<h1>美女</h1>
<p>別問我是誰，相逢何必曾相識，只需記住我曾經給你帶去的歡樂...</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/h/bjaf/vvxsmuh4.htm">
<img src="http://hovertree.com/texiao/css3/30/img/5.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/texiao/css3/20/">
<img src="http://hovertree.com/texiao/css3/30/img/6.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="http://hovertree.com/texiao/css3/30/img/7.jpg" alt="" />
<h1>HT主播</h1>
<p>我是網紅HT紫，Papi醬是我姐，如果你有絕活，歡迎加入我的團隊。。。</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://tool.hovertree.com/a/base64/">
<img src="http://hovertree.com/texiao/css3/30/img/8.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/texiao/css3/30/">
<img src="http://hovertree.com/texiao/css3/30/img/1.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="http://hovertree.com/texiao/css3/30/img/2.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="http://hovertree.com/texiao/css3/30/img/3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="http://hovertree.com/texiao/css3/30/img/4.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="http://hovertree.com/texiao/css3/30/img/5.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="http://hovertree.com/texiao/css3/30/img/6.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/h/bjaf/vvxsmuh4.htm">
<img src="http://hovertree.com/texiao/css3/30/img/7.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/menu/hovertreescj/">
<img src="http://hovertree.com/texiao/css3/30/img/8.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/h/bjaf/l3c6nm7b.htm">
<img src="http://hovertree.com/texiao/css3/30/img/1.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/h/bjaf/kqud99m6.htm">
<img src="http://hovertree.com/texiao/css3/30/img/2.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http:///">
<img src="http://hovertree.com/texiao/css3/30/img/3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hwq2.com/">
<img src="http://hovertree.com/texiao/css3/30/img/4.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.top">
<img src="http://hovertree.com/texiao/css3/30/img/5.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/h/bjaf/jynj6isd.htm">
<img src="http://hovertree.com/texiao/css3/30/img/6.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/h/bjaf/kf10ypp6.htm">
<img src="http://hovertree.com/texiao/css3/30/img/7.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="http://hovertree.com/texiao/css3/30/img/8.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://m.hovertree.com/miyu/bjaf/6890bvhs.htm">
<img src="http://hovertree.com/texiao/css3/30/img/1.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/code/html5/chtcwejf.htm">
<img src="http://hovertree.com/texiao/css3/30/img/2.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/tiku/">
<img src="http://hovertree.com/texiao/css3/30/img/3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/h/bjaf/ati6k7yk.htm">
<img src="http://hovertree.com/texiao/css3/30/img/4.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/menu/bootstrap/">
<img src="http://hovertree.com/texiao/css3/30/img/5.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/h/bjaf/scjyuanma.htm">
<img src="http://hovertree.com/texiao/css3/30/img/6.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/menu/down/">
<img src="http://hovertree.com/texiao/css3/30/img/7.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="http://hovertree.com/h/bjaf/taoshu.htm">
<img src="http://hovertree.com/texiao/css3/30/img/8.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
</ul>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用浏覽器：FireFox、Chrome、Safari、Opera、Edge、IE11. 不支持IE8及以下浏覽器。</p>
<p>來源：<a href="http://hovertree.com/" target="_blank">何問起</a> <a href="http://hovertree.com/menu/texiao/">網頁特效</a>
<a href="http://hovertree.com/h/bjaf/pned60nr.htm">代碼說明</a></p>
</div>
</body>
</html>