静态Html/css+html制作用户协议书模板/请帖模板

本文链接：https://blog.csdn.net/qq_38992403/article/details/108827747

唔在网上找了很多快速制作出协议书的模板无果后自行摸索效果还行可复制粘贴代码达到本文截图效果

新建一个html页面
在这里插入图片描述
准备一张背景图片

在这里插入图片描述

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            font: 14px/1.5,normal,"-apple-system","Arial","sans-serif","宋体","Tahoma";
        }

        body {
            background-image: url('sucai1.jpg');
            background-repeat: no-repeat ;

        }

        .auto-style1 {
            left: 180px;
            position: absolute;
            top: 238px;
            width: 448px;
            height: 560px;
            margin-left: 0px;
          
        }

        p.MsoTitle {
            margin-top: 0cm;
            margin-right: 0cm;
            margin-bottom: 18.0pt;
            margin-left: 0cm;
            font-size: 10.0pt;
            font-family: "Calibri Light","sans-serif";
            color: #0D5672;
            text-transform: uppercase;
        }

        p.Licensekey {
            width: 400px;
            border: 1px;
            text-align: center;
            font-weight: bold;
            font-size: 25px;
        }
    </style>

</head>

<body>
    <form id="form1" runat="server">
        <div class="auto-style1" style="font-size:16px">

        <b><span style="font-size:16px">虹猫蓝兔7侠传黑小虎粉丝分部</span></b>
        <br />
        <br />
        鲟将军： 2015中国在S5上唯一的一位国产ADC，在一次讨论吃的时候，小孩说吃过”中华鲟“，当然这里的鲟是人工饲养的高档鱼类。“鲟将军”因此得名。当然后来也有用“鱼”（水分多，指打得不好）来调侃小孩的状态不好。


        <br />
        <br />
        <br />
        童传塔（EDG.Koro1)2014LPL夏季赛第二轮，EDG vs WE 第2场，同样是对阵WE战队，koro1丝血准备塔下反秀，一顿乱按原地传送到身旁的塔，导致自己这路爆炸，还害苦前来支援的卷毛和厂长。

        <br />
        <br />
        white，55开，卢本伟，这三个人就是所谓的“电竞三丑”。而事实上指的都是同一个人，前皇族的中单选手“white”。因为经常很自恋的说自己很帅，而且把ID改成了“吴彦祖”。但是很多粉丝觉得他本人并不是那么的帅，因此三个ID被很多粉丝戏称为“三丑”。<br />
        <br />
        <br>
        <p align="center" class="Licensekey" style="text-align:center">
          我黑小虎光明正大
        </p>
        <br />
        <br />
        厂长与猪仔： 厂长在国服排位的时候，匹配到职业选手v神，被厂长说打这么菜，不如回去养猪吧。因此粉丝们都赠他一个外号叫养猪厂厂长，而粉丝自称猪仔

        <br />

        <br />
        <br />
        别说了，先点菜吧：这是LOL的大部分社区最常使用的梗之一，经久不衰！之前在一段IG战队PDD饭桌上总结比赛失误的视频里，孩神最后一句总结，别说了，先点菜吧，喜感十足。

        后来，每次自己喜欢的战队输掉比赛，粉丝或者路人都会用“别打了，先点菜吧”之类的话语来调侃。


        <br />

        <br />
        <br />
       <br />
        <br />
        此致<br />
        <br />
        <br />
        <p align="right" class="MsoTitle" style="text-align:right">
            <b><span style="font-size:16px">别说了，先点菜吧
            </span></b>
        </p>
        &nbsp;
    </div>
</form>

</body>

在这里插入代码片

在这里插入图片描述
CSS部分通过调整left的大小来左右平移文字上下平移则是top
CSS部分背景图片可通过添加红圈代码居中

通过添加<p>标签来引用css 如   <p align="right" class="MsoTitle" style="text-align:right">
                <b><span style="font-size:16px">别说了，先点菜吧
                </span></b>
            </p>
            可以在css部分找到名为MsoTitle的样式