【问题标题】:Google Plus type cards layout in HTMLHTML 中的 Google Plus 类型卡片布局
【发布时间】:2014-04-13 14:43:52
【问题描述】:

在 Google Plus 中,他们使用看起来非常酷的卡片式布局。 Facebook 的时间线使用相同的布局。我想为我的网站实现这样的布局。但我不知道如何开始。以下是我需要知道的事情:

  1. 这种特殊布局类型的名称是什么?
  2. 如何在我的网页中实现此布局?

谢谢...

(这里有几张图片可以帮助您了解我在说什么)

Facebook Timeline Layout http://www.formicmedia.com/wp-content/uploads/2011/09/Capture2.jpg

【问题讨论】:

    标签: html css google-plus facebook-timeline cardlayout


    【解决方案1】:

    这是一个使用 Bootstrap 的 Google plus 模板示例。它基本上是一种卡片布局,顶部有双导航栏。

    代码:http://www.bootply.com/90113
    预览:http://www.bootply.com/render/90113

    <nav></nav>
    <nav></nav>
    <div class="container">
       <div class="row">
         <div class="col-md-4 col-sm-6">
            <!-- 1 or more panel/cards inside col -->
         </div>
         <div class="col-md-4 col-sm-6">
            <!-- 1 or more panel/cards inside col -->
         </div>
         <div class="col-md-4 col-sm-6">
            <!-- 1 or more panel/cards inside col -->
         </div>
       </div>
    </div>
    

    【讨论】:

    • 谢谢,但我不需要所有这些。你能告诉我基本的布局吗,例如只拿空白卡片(空方块或
      )。如何实现这样的基本布局?
    • 一般来说,它是使用浮动 DIV 完成的,但有很多变化。检查 HTML 代码和 CSS 以了解它是如何完成的。
    • bootstrapzero 是一个损坏的链接。
    【解决方案2】:

    如果您想要 google 的卡片(用于 google keep、drive 等等),您可能需要使用材料设计。

    Material CSS 是一个非常好的方法。它在 CSS 和 javascript 中实现 Material Design:

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
    
    
    <body>
      <div class="container">
        <div class="card">
          <div class="card-image waves-effect waves-block waves-light">
            <img class="activator" src="http://placeimg.com/320/240/any">
          </div>
          <div class="card-content">
            <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">Some information</i></span>
            <p><a href="#">This is a link</a>
            </p>
          </div>
          <div class="card-reveal">
            <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
            <p>Here is some more information about this product that is only revealed once clicked on.</p>
          </div>
        </div>
      </div>
    </body>

    它是 GitHub 上一个非常流行的库,并为包括 Sass 在内的许多框架/库提供了端口。我将此库用作 ruby​​ gem。

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签