前端小白进阶Day5-优化卡片

最新推荐文章于 2024-06-20 16:57:03 发布

Ivy_ZW

最新推荐文章于 2024-06-20 16:57:03 发布

阅读量647

点赞数

分类专栏： html css 文章标签： html css

本文链接：https://blog.csdn.net/Ivy_ZW/article/details/70242650

版权

html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

结合盒子模型优化卡片

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