0
点赞
收藏
分享

微信扫一扫

利用CSS布局做一个简单的荣誉证书

秀儿2020 2022-07-12 阅读 71

<!DOCTYPE html>


<html>

<head>

   <meta charset="utf-8">

   <style type="text/css">

   body{

   background-image: url(../pic/125.jpg);

   background-repeat: no-repeat;

   background-size: 700px 500px;

   }

   .f1{

   font-family: sans-serif;

   font-size: 1.5em;

   }

   .f2{

   font-family: serif;

   font-size: 1.7em;

   }

   .f3{

   font-family: serif;

   font-size: 1.4em;

   }

   .div1{

   padding-left: 80px;

   padding-top: 160px;

   }

   .div2{

      padding-left: 130px;

    }

   .div3{

   padding-left: 80px;

   }

   .div4{

   padding-left: 380px;

   padding-top: 40px;

   }

   .div5{

   padding-left: 400px;

   }

   </style>

<title></title>

</head>

<body>

<p class="div1">

      <b class="f1">王登高</b>

      <b class="f2">同学:</b>

</p>

<p class="div2">

<b class="f3">

学习不认真,整天嘻嘻哈哈,无所事情。逗比指数

</p>

<p class="div3">

在班级中排列第一,特发此证书,以资鼓励。

</p>

<p class="div4">

<b>2015年8月19日</b>  

</p>

<p class="div5">

逗比学院

</p>

</body>

</html>


效果图:



举报

相关推荐

0 条评论