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

结合盒子模型优化卡片

Day5任务:结合盒子模型,优化卡片,可考虑增加圆边角,颜色填充,阴影等效果。卡片需要包括图片、文字、边框。


HTML部分代码如下:


<html>
<head>
<meta charset="utf-8">
    <title>DAY5title>
    <link rel="stylesheet" type="text/css" href="05.css">
head>
<body>

<div class="box1">
    <h1>卡片1h1>
    <div class="card1">
        <img src="sea.jpg" alt="大海" width="320" height="200">
        <p>面朝大海,p>
        <p>春暖花开。p>
    div>
div>

<div class="box2">
    <h1>卡片2h1>
    <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;
}

效果如下:
前端小白进阶Day5-优化卡片_第1张图片

你可能感兴趣的:(html,css)