您好我到处搜索过这个，但我找不到如何在tumblr上制作六边形网格！我设法让图像显示为六边形，但不知道如何布置像蜜蜂梳子一样......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{Title}{block:SearchPage} | {SearchQuery}{/block:SearchPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<meta name="image:Background" content="" />
<meta name="image:Custom header" content="" />
<meta name="color:Background" content="#F9F9F9" />
<meta name="color:Accent" content="#FF6600" />
<meta name="color:Text" content="#666666" />
<meta name="if:Infinite scroll" content="1" />
<meta name="if:4 columns" content="0" />
<meta name="if:Hide description" content="0" />
<meta name="text:Background properties" content="fixed center" />
<style type="text/css">
body {
margin: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
background: {color:Background} url({image:Background}) {text:Background properties};
color: {color:Text};
}
a {
color: inherit;
text-decoration: none;
}
p a,li a,.credit a,.h2 a {
border-bottom: 1px dotted {color:Text};
}
a img {
border: 0;
}
blockquote {
margin: 0;
padding: 0 0 0 0px;
border-left: 1px {color:Text} dotted;
}
.wrap {
margin: 20px auto;
width: {block:If4Columns}50{/block:If4Columns}{block:IfNot4Columns}900{/block:IfNot4Columns}px;
}
.header {
width: 100%;
text-align: left;
padding: 25px{block:PermalinkPage} 0{/block:PermalinkPage};
}
.header img {
max-width: 100%;
}
.header h1 {
text-transform: uppercase;
font-size: 30px;
margin: 0;
letter-spacing: 5px;
font-weight: normal;
color: {color:Accent};
}
.header p {
margin: 5px 0 0 0;
font-size: 12px;
font-size: 12px;
line-height: 175%;
padding: 0;
}
.links {
text-align: right;
}
.links a {
background: #FFF;
border-bottom: none;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
margin: 0 5px;
line-height: 35px;
padding: 5px 15px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: {color:Accent};
}
.posts {
margin: 2px 2px 2px 2px;
}
.post {
position: inherit;
float: right;
height: 250px;
width: {block:IndexPage}220px{/block:IndexPage}{block:PermalinkPage}50%{/block:PermalinkPage};
}
.hexagon {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 100%;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon2 {
width: 200px;
height: 400px;
margin: -60px -20px 0 -20px;
}
}
.post .permalink {
width: 150px;
background: -moz-linear-gradient(left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.75) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.75)), color-stop(50%,rgba(0,0,0,0.85)), color-stop(100%,rgba(0,0,0,0.75)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
background: linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#bf000000',GradientType=1 );
color: #FFF;
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -10px;
padding: 5px 0;
font-size: 10px;
text-transform: uppercase;
text-align: center;
height: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.25);
opacity: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
transition: all .25s ease;
}
.post:hover .permalink {
opacity: 1;
}
.post .player {
width: 50px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
font-size: 10px;
text-transform: uppercase;
text-align: center;
height: 50px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
.post .player_overflow {
width: 20px;
height: 5px;
margin: 11px;
overflow: hidden;
}
.post h2 {
font-size: 16px;
letter-spacing: 2px;
line-height: 150%;
margin: 0 0 10px 0;
text-transform: uppercase;
color: {color:Accent};
}
.post p,.post li {
font-size: 12px;
line-height: 175%;
margin: 5px 0;
padding: 0;
}
.post ul {
margin: 5px 25px;
padding: 0;
list-style: none;
}
.post img {
max-width: 100%;
height: auto;
}
.post .quote {
padding: 10px 15px;
background: #FFF;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 6px 5px rgba(0, 0, 0, 0.15);
margin-bottom: 20px;
font-size: 13px;
letter-spacing: normal;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight: normal;
text-transform: none;
line-height: 160%;
color: {color:Accent};
}
.post .quote .arrow {
position: absolute;
top: 100%;
left: 10px;
background: url(http://static.tumblr.com/jw8fmba/NDglv0xrl/arrow.png);
width: 35px;
height: 15px;
}
img.main {
width: 100%;
}
.media {
width: 500px;
margin: 0 auto;
}
.post ol.notes {
padding: 0;
margin: 10px 0 !important;
list-style-type: none;
position: relative;
}
.post ol.notes a {
border: 0 !important;
}
.post ol.notes li.note {
margin: 2px !important;
float: left;
width: 16px;
height: 16px;
}
.post ol.notes li.more_notes_link_container {
width: 100% !important;
text-align: center;
margin: 2px 0 !important;
}
.post ol.notes li.note img.avatar {
width: 16px;
height: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
span.action {
min-width: 500px;
position: absolute;
top: -20px;
left: 0;
font-size: 12px;
opacity: 0;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
transition: all .1s ease;
z-index: 999;
color: {color:Accent};
}
.post ol.notes li.note:hover span.action {
opacity: 1;
}
.post ol.notes li.note .answer_content {
font-weight: normal;
}
.post ol.notes li.note blockquote {
display: none;
}
#infscr-loading {
text-align: center;
z-index: 100;
position: fixed;
left: 45%;
bottom: 50px;
z-index: 999;
}
.credit { display: none !important }
{CustomCSS}
</style>
<!-- Untitled Themes customize assistant -->
</head>
<body id="32912">
<div class="wrap">
<table class="header">
<tr>
<td width="50%">
<span class="title">
{block:IfCustomHeaderImage}<a href="/"><img src="{image:Custom header}" /></a>{/block:IfCustomHeaderImage}
{block:IfNotCustomHeaderImage}<h1><a href="/">{Title}</a></h1>{/block:IfNotCustomHeaderImage}
</span>
{block:IfNotHideDescription}{block:Description}<p>{Description}</p>{/block:Description}{/block:IfNotHideDescription}
</td>
<td class="links">
<a href="/archive">{lang:Archive}</a>
{block:AskEnabled}<a href="/ask">{AskLabel}</a>{/block:AskEnabled}
{block:SubmissionsEnabled}<a href="/submit">{SubmitLabel}</a>{/block:SubmissionsEnabled}
{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
{block:Pagination}
<span id="pagination">
{block:PreviousPage}<a id="previous" href="{PreviousPage}">{lang:Previous page}</a>{/block:PreviousPage}
{block:NextPage}<a id="next" href="{NextPage}">{lang:Next page}</a>{/block:NextPage}
</span>
{/block:Pagination}
{block:PreviousPost}<a href="{PreviousPost}">{lang:Previous post}</a>{/block:PreviousPost}
{block:NextPost}<a href="{NextPost}">{lang:Next post}</a>{/block:NextPost}
</td>
</tr>
</table>
<div class="posts">
{block:Posts}
<!-- {PostType} -->
<div class="post" id="{PostID}">
{block:Audio}
{block:IndexPage}
{block:AlbumArt}
<a href="{Permalink}"><div class="photo" style="background: url({AlbumArtURL}) center"></div></a>
<div class="player">
<div class="player_overflow">
{AudioPlayerWhite}
</div>
</div>
{/block:AlbumArt}
<span{block:AlbumArt} style="display: none"{/block:AlbumArt}>
<div class="quote">
{AudioPlayerWhite}
<div class="arrow"></div>
</div>
{block:TrackName}<h2>{TrackName}</h2>{block:TrackName}
{block:Artist}<h2>{Artist}</h2>{block:Artist}
{block:Caption}{Caption}{/block:Caption}
</span>
{/block:IndexPage}
{block:PermalinkPage}
{block:AlbumArt}<img class="main" src="{AlbumArtURL}" />{block:AlbumArt}
<div style="margin: 10px 0">{AudioPlayerBlack}</div>
{block:TrackName}<h2>{TrackName}</h2>{block:TrackName}
{block:Artist}<h2>{Artist}</h2>{block:Artist}
{block:Album}<h2>{Album}</h2>{block:Album}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Audio}
{block:Photo}
{block:IndexPage}
{LinkOpenTag}
<div class="hexagon hexagon2"><div class="hexagon-in1"><div class="hexagon-in2" style="background: url({PhotoURL-400}) center"></div></div></div>
{LinkCloseTag}
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}
<img class="main" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Photo}
{block:Link}
<h2><a href="{URL}" {Target}>{Name}</a></h2>
{block:Description}{Description}{/block:Description}
{/block:Link}
{block:Text}
{block:Title}<h2>{Title}</h2>{/block:Title}
{Body}
{/block:Text}
{block:Quote}
<div class="quote">
"{Quote}"
<div class="arrow"></div>
</div>
{block:Source}<p>- {Source}</p>{/block:Source}
{/block:Quote}
{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul>
{block:Lines}<li>{block:Label}<strong>{Label}</strong> {/block:Label}{Line}</li>{/block:Lines}
</ul>
{/block:Chat}
{block:Answer}
<div class="quote">
{Question}
<div class="arrow"></div>
</div>
<p style="margin-left: 20px"><img style="margin: 0 3px -3px 0" src="{AskerPortraitURL-16}" /> {Asker}</p>
{Answer}
{/block:Answer}
{block:Photoset}
{block:IndexPage}
{Photoset-250}
{/block:IndexPage}
{block:PermalinkPage}
<div class="media">
{Photoset-500}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:PermalinkPage}
{/block:Photoset}
{block:Video}
{block:IndexPage}
{Video-250}
{/block:IndexPage}
{block:PermalinkPage}
<div class="media">
{Video-500}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:PermalinkPage}
{/block:Video}
{PostNotes}
</div>
{/block:Posts}
</div>
{block:IndexPage}
<script type="text/javascript">
$(function(){var $container = $('.posts').css({ opacity: 0 });$container.imagesLoaded(function(){$container.animate({ opacity: 1 });$container.masonry({itemSelector:'.post',columnWidth: 300});});{block:IfInfiniteScroll}
$container.infinitescroll({navSelector:'#pagination',nextSelector:'#pagination a#next',itemSelector: '.post',loading: {img:'http://static.tumblr.com/jw8fmba/D6Pluysct/loading.gif',donetext:''}},function( newElements ) { var $newElems = $( newElements ).css({ opacity: 0 });$newElems.imagesLoaded(function(){$newElems.animate({ opacity: 1 });$container.masonry( 'appended', $newElems, true );});});{/block:IfInfiniteScroll}});
</script>
{/block:IndexPage}
</body>
</html>
这是网站www.hexabee.tumblr.com
答案 0 :(得分：0)
您可以使用CSS来偏移行并定位它们以使它们重叠。
HTML：
<div>
<img src="hex.png"/>
<img src="hex.png"/>
<img src="hex.png"/>
</div>
<div class="alt">
<img src="hex.png"/>
<img src="hex.png"/>
<img src="hex.png"/>
<img src="hex.png"/>
</div>
<div>
<img src="hex.png"/>
<img src="hex.png"/>
<img src="hex.png"/>
</div>
CSS：
div{
/*negative bottom margin to move following rows up*/
}
div.alt{
position:relative;
/*use a negative left value to offset the alternate rows*/
}
现场演示：Hexagon Layout
虽然它不是最优雅的解决方案，但它可以让你到达你想要的地方。