Question

在Android上有一个名为CardView的组件，它显示一个像卡片一样的盒子，有圆角，阴影等。我愿意在HTML中实现同样的东西，是否有任何库，CSS或样本来实现它？

Answer 1

以下链接提供与卡相关的各种示例

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>

Answer 2

有一个名为Materialize的库，它符合材料设计标准。

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>

CardView的网页

2 个答案: