Question

更新

这里有一个js-fiddle，图片可用：http://jsfiddle.net/TBwWw/

我正在使用我发现here的教程。

我有一个无序列表，只是将图像链接到一个较大的列表，并在页面上显示图像。

<ul class="polaroids"> 
   <li>
      <a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!">
        <img src="example/cyan_hawk.jpg" alt="Roeland!">
      </a>
   </li>
</ul>

然后css应该调整图像大小，添加宝丽来效果和更多。

ul.polaroids a:after {
content: attr(title);
}

/* By default, we tilt all our images -2 degrees */
ul.polaroids a {
    -webkit-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
    -webkit-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    transform: rotate(2deg);
}
/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
    -webkit-transform: none;
    -o-transform: none;
    -ms-transform: none;
    -moz-transform: none;
    transform: none;
    position: relative;
    top: -5px;
}

/* Rotate every fifth image by 5 degrees and offset it */
ul.polaroids li:nth-child(5n) a {
    -webkit-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
    position: relative;
    right: 5px;
}

/* Keep default rotate for every eighth, but offset it */
ul.polaroids li:nth-child(8n) a {
    position: relative;
    top: 8px;
    right: 5px;
}

/* Keep default rotate for every eleventh, but offset it */
ul.polaroids li:nth-child(11n) a {
    position: relative;
    top: 3px;
    left: -5px;
}

/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
ul.polaroids a:hover {
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    -moz-transform: scale(1.25);
    transform: scale(1.25);
    position: relative;
    z-index: 5;
}

/* Add drop shadows and smooth out the transition (Safari only) */
ul.polaroids a {
    -webkit-transition: 0 .15s linear;
    -moz-transition: 0 .15s linear;
    -o-transition: 0 .15s linear;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
}

/* On hover, darken the shadows a bit */
ul.polaroids a {
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
}

最终结果应该是：

enter image description here

但他们只是出现了无序的列表文本装饰和后标题效果，如下所示：

enter image description here

教程评论中的其他人都说它工作得很好。我不明白为什么它不适合我。我确实在外部样式表中有css链接并正确找到。最后，Google Chrome控制台显示没有错误。我在Google Chrome和Internet Explorer中尝试过它。

Answer 1

试试这个：

http://jsfiddle.net/jC84f/1/

ul.polaroids { width: 970px; margin: 0 0 18px -30px; }
ul.polaroids li { display: inline; }
ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; }
ul.polaroids a:after { content: attr(title); }

ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); }
ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px;  -moz-transform: none; }
ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg); }
ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }

ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }

ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }

code { background: rgba(0,0,0,.5); padding: 2px 3px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.75); -webkit-border-radius: 3px; -moz-border-radius: 3px; }

ol.code { background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); }
ol.code li, ol.code li code { font-size: 14px !important; }
ol.code code { background: none; }

Answer 2

首先，所有图像都应该在单个ul中，而不是像你在小提琴中那样分开。其次，您缺少列表样式，并且display / float属性可以包装。

我能够通过添加以下CSS来获取您的示例：

ul { list-style: none; }
ul li { display: inline; }
ul a {
    display: inline;
    float: left;
}
ul img { display: block; }

我认为这基本上是你所缺少的，所以你可能想要根据自己的喜好调整内容（包括间距，类等）。这是我的小提琴：http://jsfiddle.net/jC84f/3/

宝丽来图片库只有css

2 个答案: