WebViewのCardView

AndroidのCardViewというコンポーネントがあり、カードのような丸い角や影などが表示されます。HTMLでも同じことを実現したい場合は、ライブラリ、CSS、サンプルがありますそれが起こるようにするには？以下WebViewのCardView

出典

2017-05-23 iMobaio

以下

でのスニペットカード

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

またはUに関連する様々な例を提供するリンクはULLは、コードを備えること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>

出典

2017-05-23 08:18:17 Pradeep

の内側にこれを追加することによって、あなたのサイトにライブラリを追加することができますか？ – Adam

@ Adam..didnt ur質問を理解する...あなたはbootsnippへのリンクが必要なのですか？ – Pradeep

マテリアライズと呼ばれるライブラリは、マテリアルデザインの基準に準拠しています。

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>

あなたがbootsnippへのリンクで編集できるヘッドタグ

<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>

出典

2017-05-23 08:20:54 Adam

答えて

関連する問題