结合盒子模型优化卡片
Day5任务:结合盒子模型,优化卡片,可考虑增加圆边角,颜色填充,阴影等效果。卡片需要包括图片、文字、边框。
HTML部分代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DAY5</title>
<link rel="stylesheet" type="text/css" href="05.css">
</head>
<body>
<!--第一个卡片-->
<div class="box1">
<h1>卡片1</h1>
<div class="card1">
<img src="sea.jpg" alt="大海" width="320" height="200">
<p>面朝大海,</p>
<p>春暖花开。</p>
</div>
</div>
<!--第二个卡片-->
<div class="box2">
<h1>卡片2</h1>
<div class="card2">
<div class="card2-image">
<img src="road.jpg" alt="公路">
</div>
<div class="card2-body">
<div class="card2-title">
<h3>随手记</h3>
</div>
<div class="card2-content">
<p>不忘初心,方得始终。</p>
<p>但行好事,莫问前程。</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS部分代码如下:
.box1, .box2{
float: left;/*将div放在一行*/
padding: 1px 4px 16px 10px;
border-radius: 18px;
border-style: solid;
border-width: 2px;
margin-right: 5px;
}
.box1{
width: 340px;
}
.card1 p{
font-size: 20px;
font-weight: bold;
font-family: "微软雅黑";
text-align: center;
}
.card1{
width: 320px;
height: 320px;
box-shadow: 3px 3px 3px black;
}
/*第二张卡片*/
.box2{
width: 350px;
}
.card2{
width:340px;
box-shadow: 3px 3px 8px #999;
}
.card2-image img{
width: 340px;
}
.card2-image{
height: 200px;
overflow: hidden;
}
.card2-body{
padding: 10px 20px;
}
.card2:hover .card2-image img{
width: 160%;
filter: grayscale(1);
}
.card2-title, .card2-content{
text-align: center;
}
效果如下: