Home >Web Front-end >HTML Tutorial >Use CSS layout to make a simple certificate of honor (code example)
Use CSS layout to make a simple certificate of honor (code example)
- PHPzOriginal
- 2016-06-24 11:38:303931browse
This article will give We will introduce how to use css layout to create a simple certificate of honor. It is interesting and practical. I hope it will be helpful to friends in need!
It is very simple to use css layout to achieve the effect of a simple honor certificate style. The following basic attributes are mainly used:
background-image: Sets a background image for the element.
background-repeat: Set whether and how to repeat the background image.
background-size: Specifies the size of the background image.
font-family: Specifies the font family of the element. The
font-size attribute sets the font size.
padding: Shorthand property that sets all padding properties in one declaration.
Related recommendations: "HTML Tutorial" "CSS Tutorial"
HTML/CSS code is as follows:
<!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>This article is about how to use CSS layout to make a simple certificate of honor. It is simple and interesting. I hope it will be helpful to friends in need!