CSS レイアウトを使用して簡単な名誉証明書を作成する (コード例)-htmlチュートリアル-php.cn

CSS レイアウトを使用して簡単な名誉証明書を作成する (コード例)

PHPz

リリース： 2019-03-29 11:31:50

オリジナル

3931 人が閲覧しました

この記事では、CSS レイアウトを使用して簡単な賞状を作成する方法を紹介します。これは興味深く実用的です。困っている友人に役立つことを願っています。！

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 レイアウトを使用して簡単な名誉証明書を作成する方法の紹介です。、シンプルで興味深いので、困っている友達に役立つことを願っています。

🎜🎜🎜🎜🎜🎜🎜🎜🎜