Question

嗨小伙子，

我现在已经完成了我的页脚设计，我已将其切片但我似乎无法找到一种编码这个东西的好方法.. 我把它切成1px宽度和标题，并且也不要忘记垫片...

不能很好地编写这个该死的东西下面是一张照片。

http://imageshack.us/photo/my-images/51/footerws.jpg/

如果有人可以提供帮助，我会很高兴：）

Answer 1

像这样：

http://jsfiddle.net/EQsAX/1/

就像你提供的图片

Answer 2

这样，您可以在不同元素中使用一个图像的不同位置。

请注意，它确实有助于不总是将图像切成小块。一个好处是图像同时加载（或图像是特定的）。特别是在菜单悬停效果中。

http://jsfiddle.net/FyMW6/

CSS：

ul li { 
    background-image: url("http://lorempixum.com/g/400/200/");
    background-repeat: no-repeat;

    width: 100px;
    height:200px;
    float: left;

    border: 1px solid red;
}

.first { background-position: -30px -0px; }
.second { background-position: -100px -0px; }
.third { background-position: -50px 0px; }

-0px是我无意中的错误..使用0px

HTML：

<ul>
    <li class="first"></li>
    <li class="second"></li>
    <li class="third"></li>
</ul>

帮我切片和编码这个页脚？

2 个答案: