ホームページ > 記事 > ウェブフロントエンド > CSS レイアウトを使用して簡単な名誉証明書を作成する (コード例)
CSS レイアウトを使用して簡単な名誉証明書を作成する (コード例)
- PHPzオリジナル
- 2016-06-24 11:38:303902ブラウズ
この記事では、CSS レイアウトを使用して簡単な賞状を作成する方法を紹介します。これは興味深く実用的です。困っている友人に役立つことを願っています。 ！
次に、CSS レイアウトを使用して単純な名誉証明書スタイルの効果を実現するのは非常に簡単です。主に次の基本属性が使用されます:
background-image: 背景画像を設定します。要素の場合。 background-image：为元素设置背景图像。
background-repeat： 设置是否及如何重复背景图像。
background-size： 规定背景图像的尺寸。
font-family： 规定元素的字体系列。
font-size 属性可设置字体的尺寸。
padding
background-repeat: 背景画像を繰り返すかどうか、および繰り返す方法を設定します。 background-size: 背景画像のサイズを指定します。 font-family: 要素のフォント ファミリを指定します。
font-size 属性はフォントのサイズを設定できます。 padding: 1 つの宣言ですべてのパディング プロパティを設定する短縮プロパティ。
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">
在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 レイアウトを使用して簡単な名誉証明書を作成する方法の紹介です。 、シンプルで興味深いので、困っている友達に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。