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