需要书架的HTML/CSS样式

Question

任何人都可以为我提供这种书架的响应式html/CSS.

删除了狡猾的图像链接

我试图在网上找到同样的架子,但他们没有善良/不敏感

那就是查看更多/更少的按钮.

非常感谢,

Answer 1

这是给你的概念:

DEMO

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-12 shelf hidden-md hidden-lg"></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-12 shelf"></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-12 shelf hidden-md hidden-lg"></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-12 shelf"></div>
    </div>
</div> 

CSS:

.book {
    padding: 15px 0 0 0;
    margin: auto;
}
.shelf {
    border-bottom: 30px solid #A1A194;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    top: -15px;
    z-index: -1;
}

这个怎么运作:

好的,所以你想在视口md大小的时候在书架上放6本书,而你想在书架上放3本书.

因此,首先将所有书籍包装在一行中,因为您希望它们在不同的视口大小之间流畅地进行.每本书都将用div类包装:div col-xs-4(12/4 = 3)和col-md-2(12/2 = 6).

接下来,您需要为货架添加div.你有一个非常简单的6-3设计,所以在每组三列之后添加一个带有类架子的div,并给它一个类名为shelf.架子需要float设置为left将其放入其余列div的流中,并且它需要宽度为100%.所以,我们也将这个col-xs-12类添加到shelfdiv中.这将确保架子跨越整个容器,而不管视口的大小(即,从xs和向上).

由于您需要在较大视口大小的架子上放置六本书,因此您必须隐藏md和lg视口上的所有其他书架.您可以使用Bootstrap中内置的响应实用程序类来执行此操作.添加类hidden-md以及hidden-lg第一个和第三个shelfdiv.

对于book架子上的每个图像,您都希望为它们提供img-responsive类.这将使书籍与视口一起缩放,但绝不会超过图像实际尺寸的100%.你也想把书中心放在他们的div中,并在顶部给它们一点填充,这样它们就不会相互接触,所以给它们另一个课.我给了他们上课book.本book类具有top-padding的15px并margin设置为auto.

最后,您需要为您的架子设计样式.为了使图书显示在书架的顶部,您可以将其设置z-index为-1.它已经有了一个相对的位置因为col-xs-12.这将把shelfdiv放在其他一切的背后.在这一点上,你可以使用background image你的shelf.如果这样做,请确保还要height向shelf类添加一个,以便它不会崩溃.

相反,我只是用了一点css技巧.我用border bottom套装25px solid和transparent borders left and right.就像你在css中创建一个三角形一样,transparent left and right borders从它的侧面垂下来bottom border它会让人眼前一亮.我也搬了一下,top position to -15px这样架子就会延伸到书本下方.它看起来还不错,但我相信你可以把它打扮成更逼真的外观,或许可以pseudo elements在架子的前后增加一些尺寸以增加尺寸.