卡片

来源：互联网发布：淘宝网乌梢蛇木瓜丸编辑：程序博客网时间：2024/04/27 17:25

小白的DAY5

误打误撞的做出来的居然还不错
参考的助教给的案例去操作，虽然有点不太懂里面的代码。不过做出来真的很有成就感哈哈哈，好像说的太夸张了

这里写图片描述

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="卡片.css" type="text/css" rel="stylesheet" /></head><body><div class="h1"><pre><time>2017 / 04 / 19 </time></pre></div><div class="title">对流层，地球</div><br><div class="card img"><img src="11.png" width="550" height="618" alt="对流层，地球" /><p>我们的生活层层叠叠，下一层紧挨着上一层，以至于我们老是在新鲜的遭际中碰触到过去的旧痕，而过去既非完美无缺也不功成身退，而是活生生地存在于眼前的现实中。</p><p align="center">《朗读者》</p></div><h1>by KATHY</h1><div class="card"></body></html>

css

body{    background:#FFF;    padding:40px 10px;}.title{    text-align:center;    font-family:"微软雅黑";    font-size:16px;    color:#666;    font-weight:200;}.h1{    font-family:"微软雅黑";    font-size:24px;    text-align:center;    font-weight:800;    color:#666}.card img{    padding:10px 10px 15px 10px;}p{    padding:1px 30px 20px 30px;    font-family:"微软雅黑";    font-size:16px;    line-height:35px;    color:#666;    font-weight:200;}.card{    width:570px;    align:center;    margin:0px auto;    background-color:#FFF;    box-shadow:0px 5px 10px #555;}h1{    text-align:center;    font-family:"微软雅黑";    font-size:12px;    color:#CCC;}

效果图

这里写图片描述

0 0