书架需要HTML/CSS样式

有谁能为我提供这种书架的响应性html/CSS吗

不可靠的图像链接已删除

我试图在网上找到同样的货架，但它们不友好/不响应

这是查看更多/更少按钮

---

非常感谢，

给你一个概念：

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> 

.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;
}

工作原理：

<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> 

.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

且高于或低于您希望书架上有3本书时，您希望书架上有6本书

因此，首先将所有书籍包装在一行中，因为您希望它们在不同的视口大小之间流畅地移动。每本书都将被包装在一个div中，列类为：

col-xs-4

（12/4=3）和

col-md-2

（12/2=6）

接下来，需要为工具架添加一个div。您有一个非常简单的6-3设计，因此，在每组三列之后添加一个带有类shelf的div，并给它一个类名称shelf。搁板需要将

float

设置为

left

，以将其放入列div的其余部分，并且搁板的宽度需要设置为100%。因此，我们将把

col-xs-12

类也添加到

shelf

div中。这将确保工具架跨越整个容器，而不考虑视口的大小（即从xs到更高）

由于您希望书架上有六本视口尺寸较大的书，因此必须在

md

和

lg

视口中隐藏其他书架。您可以使用Bootstrap中内置的响应实用程序类来实现这一点。将类

hidden md

和

hidden lg

添加到第一个和第三个

shelf

div

对于书架上的每一本

书

图像，您都希望为它们提供img响应类。这将使书籍随视口缩放，但永远不会超过图像实际尺寸的100%。你还需要把书放在它们的div中间，并在顶部给它们一些填充物，这样它们就不会相互接触，所以给它们另一个类。我给了他们那本书。

book

类的

顶部填充
15px
和
margin
设置为
auto

最后，你需要给你的架子做样式。要使书籍显示在书架顶部，可以将
z-index
设置为
-1
。由于
col-xs-12
，它已经具有相对位置。这将把
工具架
div置于其他所有内容之后。此时，您可以将
背景图像
用于
工具架
。如果这样做，请确保还向
工具架
类添加一个
高度
，这样它就不会折叠

相反，我只是使用了一个小小的css技巧。我使用了
边框底部
设置为
25px实心
和
左右透明边框
。就像你在css中创建一个三角形一样，
透明的左边框和右边框
剪掉了
下边框的两侧
，这会让你的眼睛产生一些尺寸感。我还将
顶部位置移到了-15px
，这样书架就好像延伸到了书的下面。看起来不错，但我相信你可以把它打扮得更逼真，也许可以在架子的前后添加一些
伪元素来增加尺寸。
你能添加你尝试过的吗？在那之后，我不确定如何将这些书粘贴到书箱图像上，而且在ipad横向模式下，网格应该与桌面模式相同（图像大小较小），单击“查看更多”按钮可以显示6本以上的书这是HTML，但你要的是CSS，那么你尝试过什么CSS呢？太棒了，谢谢