利用CSS布局做一个简单的荣誉证书(代码示例)

PHPz
풀어 주다: 2019-03-29 11:31:50
원래의
3901명이 탐색했습니다.





本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助!

利用CSS布局做一个简单的荣誉证书(代码示例)

那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性:

background-image:为元素设置背景图像。

background-repeat: 设置是否及如何重复背景图像。

background-size: 规定背景图像的尺寸。

font-family: 规定元素的字体系列。

font-size 属性可设置字体的尺寸。

padding: 简写属性在一个声明中设置所有内边距属性。

相关推荐:《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布局做一个简单的荣誉证书的方法介绍,简单有趣,希望对需要的朋友有所帮助!





관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿