 <!DOCTYPE html>
 <html>
  <head>
  <style>
  .card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
border-radius: 5px;
  }

 .card:hover {
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 }

   img {
    border-radius: 5px 5px 0 0;
   }

  .container {
padding: 2px 16px;
  }
</style>
</head>
<body>

<h2>Round Card</h2>

<div class="card">
<img src="img_avatar2.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Jane Doe</b></h4> 
<p>Interior Designer</p> 
</div>
</div>

 </body>
 </html>

票数 3

Stack Overflow用户

发布于 2017-05-23 08:20:54

有一个叫做物化的图书馆，它符合材料设计标准。

http://materializecss.com/cards.html

这是他们网站上的片段。

<div class="row">
    <div class="col s12 m6">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

您可以将库添加到站点中，方法是在head标记中添加以下内容

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44129350

复制

相似问题

问用于网页的CardView
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于网页的CardViewEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于网页的CardView
EN