仿照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; }=======================================================================
效果图: