Homework-02, Card弹性列表布局
基于Card设计模式,实现图片描述布局样式
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="card.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<!-- 1-->
<div class="card">
<div class="header">
<img src="https://picsum.photos/250?random=1" alt="face">
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
voluptatem voluptates, voluptatum!</p>
<a href="">Read More</a>
</div>
</div>
<!--2-->
<div class="card">
<div class="header">
<img src="https://picsum.photos/250?random=2" alt="face">
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
voluptatem voluptates, voluptatum!</p>
<a href="">Read More</a>
</div>
</div>
<!-- 3-->
<div class="card">
<div class="header">
<img src="https://picsum.photos/250?random=3" alt="face">
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
voluptatem voluptates, voluptatum!</p>
<a href="">Read More</a>
</div>
</div>
</div>
</body>
</html>
CSS
* {/*除去原始样式*/
padding: 0;
margin: 0;
box-sizing: border-box;
/*border: 1px solid red;*/
}
.container{
display:flex;
justify-content: center;
}
.card{
width: 20%;
padding:5px;
margin: 10px;
/*border: 2px solid lightcoral;*/
opacity:0.5;
}
.card:hover{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
opacity:0.9;
}
.header{
text-align:center;/*图片居中*/
/*border: 5px solid red;*/
}
div.header img{
border-radius: 50%;/*是图片呈圆形*/
}
.content{
text-align: justify;
}
div.content a{
display: inline-block;
background-color: red;
padding: 10px;
color: white;
text-decoration: none;
border-radius: 5px;
}