本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助!
那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性:
background-image:为元素设置背景图像。
background-repeat: 设置是否及如何重复背景图像。
background-size: 规定背景图像的尺寸。
font-family: 规定元素的字体系列。
font-size 属性可设置字体的尺寸。
padding: 简写属性在一个声明中设置所有内边距属性。
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中文网,转载请注明出处,感谢您的尊重!