html5初学day5[作业]

来源：互联网发布：安卓版游戏制作软件编辑：程序博客网时间：2024/06/08 10:52

仿照http://www.loveo.cc/using-css-to-make-cards-ui.html进行编写

========================================================

html文档

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>心情日记</title>    <link href="day5.css" type="text/css" rel="stylesheet"></head><body><div class="card">    <div class="img">    <img src="../img/day5.jpg">    </div>    <div class="p">        <p class="p1">纵有千百个理由放弃</p>        <p class="p2">也总会找一个理由坚持下去</p>    </div></div></body></html>

=============================================================================

css文档

.card{    margin: 0px auto;    width: 600px;    background-color: white;    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}.img{    height: 300px;    position: relative;    overflow: hidden;}.img img{    width: 100%;    position: absolute;    top:45%;    left: 50%;    transform: translate(-50%,-50%);    filter: grayscale(1);    transition-property: filter width;    transition: 3s;    transition-timing-function: ease;}.p{    text-align: center;    padding: 15px 20px;    box-sizing: border-box;}.p .p1{    font-family: fantasy;    font-size: 16px;    color:darkolivegreen;}.p .p2{    font-family: fantasy;    font-size: 18px;    color:darkslateblue;}

=======================================================================

效果图：

0 0