卡片

小白的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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值