html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）

本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书，有趣且实用，希望对需要的朋友有所帮助！

那么利用css布局实现简单荣誉证书样式的效果是非常简单的，主要用到以下几个基础属性：

background-image：为元素设置背景图像。

background-repeat： 设置是否及如何重复背景图像。

background-size： 规定背景图像的尺寸。

font-family： 规定元素的字体系列。

font-size 属性可设置字体的尺寸。

padding： 简写属性在一个声明中设置所有内边距属性。

相关推荐：《HTML教程》《CSS教程》

HTML/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;

}

龙傲天

同学:

在PHP中文网学习刻苦认真，成绩优异，聪慧过人！

在PHP中文网班级中排列第一，特发此证书，以资鼓励。

2019年3月29日

PHP中文网

本篇文章就是关于利用CSS布局做一个简单的荣誉证书的方法介绍，简单有趣，希望对需要的朋友有所帮助！

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网