logo标签列表

网页中的卡片视图（CardView）

androidhtmlcsswebweb-applications
3
在Android中有一个叫做CardView的组件，它显示出一个类似于卡片的盒子，带有圆角、阴影等效果。我想在HTML中实现同样的效果，是否有任何库、CSS或示例可以实现这一点？
2个回答
3
以下链接提供了与卡片相关的各种示例。

https://www.w3schools.com/howto/howto_css_cards.asp

或者您可以尝试使用 Bootsnipp，那里将为您提供代码片段

以下是示例代码

 <!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>
@Adam，我不明白你的问题...你是想要 Bootsnipp 的链接吗？ - Pradeep
1
有一个名为Materialize的库，它符合Material Design标准。

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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接