本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书，有趣且实用，希望对需要的朋友有所帮助！
那么利用css布局实现简单荣誉证书样式的效果是非常简单的，主要用到以下几个基础属性：
background-image：为元素设置背景图像。
background-repeat： 设置是否及如何重复背景图像。
background-size： 规定背景图像的尺寸。
font-family： 规定元素的字体系列。
font-size 属性可设置字体的尺寸。
padding： 简写属性在一个声明中设置所有内边距属性。
相关推荐：《html教程》《css教程》
html/css代码如下：
<!doctype html><html><head> <meta charset="utf-8"> <style type="text/css"> body{ background-image: url(/test/img/11.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"> 在学习刻苦认真，成绩优异，聪慧过人！ </b></p><p class="div3"> 在班级中排列第一，特发此证书，以资鼓励。</p><p class="div4"> <b>2019年3月29日</b></p><p class="div5"> </p></body></html>
本篇文章就是关于利用css布局做一个简单的荣誉证书的方法介绍，简单有趣，希望对需要的朋友有所帮助！