html5 - 需要书架的HTML/CSS样式

Closed. This question needs to be more focused. It is not currently accepting answers. Learn more。
想改进这个问题吗？更新问题，使其只关注一个问题editing this post。
5年前关闭。
有谁能给我提供这种书架的响应html/CSS吗。
删除了不可靠的图像链接
我试图在网上找到同样的书架，但它们不友好/不响应
这是“查看更多/更少”按钮。
非常感谢，

最佳答案

这里有一个概念给你：
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中，列类为：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类添加到shelfdiv。这将确保工具架跨越整个容器，而不考虑视区的大小（即，从xs到上）。
因为您希望在较大的视窗大小下书架上有六本书，所以必须在md和lg视窗上隐藏其他书架。您可以使用Bootstrap中内置的响应实用程序类来执行此操作。将类hidden-md和hidden-lg添加到第一个和第三个shelfdiv。
对于工具架上的每个book图像，您需要为它们提供img响应类。这将使书本随视区缩放，但永远不会超过图像实际尺寸的100%。你还需要把书放在书桌中间，在书桌的顶部加上一点垫子，这样他们就不会互相碰了，所以再给他们上一节课。我给他们上课。book类将book的top-padding和15px设置为margin。
最后，你需要设计你的架子。要使书籍看起来位于书架顶部，可以将auto设置为z-index。它已经有了一个相对位置，因为-1。这将把col-xs-12div放在其他东西后面。此时，您可以使用shelf来表示您的background image。如果这样做了，请确保也将shelf添加到height类中，以便它不会折叠。
相反，我只是用了一些css技巧。我使用shelf设置为border bottom和25px solid。就像你在css中创建一个三角形一样，transparent borders left and right会从transparent left and right borders的边上去掉，它会让你的眼睛产生一些维度。我还移动了bottom border，使书架看起来延伸到书的下面。它看起来不错，但我相信你可以把它打扮得更逼真，也许可以在架子的前后增加一些top position to -15px来增加尺寸。