卡片

最新推荐文章于 2024-09-19 17:23:08 发布

青龙爸爸

最新推荐文章于 2024-09-19 17:23:08 发布

阅读量247

点赞数

分类专栏：今日任务文章标签： html

本文链接：https://blog.csdn.net/qq_38331740/article/details/70239892

版权

今日任务专栏收录该内容

5 篇文章 0 订阅

订阅专栏

小白的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;
}