您的位置:首页 - 教程 - 网页特效 - 正文
CSS3实现六边形网格布局
效果展示

代码如下:
<!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://keleyi.com/">
<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>

评论: