代码 html夫妻约定

2024-11-19 01:24:21 +0800 CST views 921
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约定书</title>
    <style>
         html{
             font-size: 20px;
         }
    
        body {
            font-family: "Microsoft YaHei", sans-serif;
            padding: 2rem;
            margin: 0;
            box-sizing: border-box;
            width: 30rem;
            text-align: center;
            margin: 0 auto;
        }
        h1 {
            color: red;
            text-align: center;
            font-size: 2rem;
        }
        .subtitle {
            text-align: center;
            font-size: 1.2rem;
        }
        p {
            text-indent: 2em;
            font-size: 1rem;
            line-height: 1.8;
            text-align: justify;
            margin: 20px 0;
        }
        .highlight {
            color: red;
            font-weight: bold;
            text-align: center;
        }
        .signature {
            text-align: right;
            margin-top: 40px;
        }
        .signature div {
            display: inline-block;
            margin: 0 30px;
        }
        .editable {
            cursor: pointer;
            outline: none;
            /*border-bottom: 1px dashed #ccc;*/
            display: inline-block;
        }
        .date {
            text-align: right;
            margin-top: 20px;
            float: right;
        }
        hr{
            border: none;
            border-top: 2px solid red;
            margin: 20px 0;
        }
        .flex{
                display: flex !important;
                align-items: center;
                justify-content: center;
        }
        .sy{
                position: relative;
        }
        .sy .sy1{
                width: 3rem;
                transform: rotate(15deg);
        }
        .sy-text{
            position: absolute;
            top:50%;
            left: 50%;
        }
        @font-face {
    font-family: 'MyCustomFont'; /* 定义字体的名称 */
    src: 
         url('段宁毛笔精美行书.ttf') format('truetype'); /* 引用 .ttf 文件 */
    font-weight: normal; /* 字体粗细 */
    font-style: normal; /* 字体样式 */
}
        .sybg,.sybg2{
                background-image: url(sy1.png);
                background-size: 3rem auto;
                background-repeat: no-repeat;
                /* width: 300px; */
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-position: center;
                font-family: 'MyCustomFont';
                    font-size: 2rem;
        min-width: 100px;
        }
        .sybg2{
            background-image: url(sy2.png);
        }
        .data-text{
            font-family: 'MyCustomFont';
            font-weight:bold;
        }
    </style>
</head>
<body>
    <h1 contenteditable="true" class="editable">约定书</h1>
    <div class="subtitle editable" contenteditable="true"  style="display:block">约字[2024] 001号</div>
    <hr>
    <p contenteditable="true" class="editable">
        我们可以吵架,但不能记仇,更不能分开,这是约定。因为夫妻就是一双筷子,有苦一起吃,有甜一起享,有难一起扛,有累一起忙。
    </p>
    <p contenteditable="true" class="editable">
        融入了同一个家庭,不说感谢,不分彼此,最好的感情不是一辈子不吵架,而是吵了还能一辈子,闹了一辈子,还想风雨同舟,携手此生!
    </p>
    <p class="highlight" contenteditable="true" class="editable">
        特此约定,遇你、与你、予你、余你!
    </p>

    <div class="signature flex" style="justify-content: flex-end;">
        <div contenteditable="true" class="editable flex" >
            老公:
            <span class="sybg">
                茄子
            </span>
        </div>
        <div contenteditable="true" class="editable flex">
            老婆:
            <span class="sybg2">
                茄子
            </span>
        </div>
    </div>

    <div class="date editable" contenteditable="true" >
        签发日期:<span class="data-text">2024.10.23</span>
    </div>

    <script>
        document.querySelectorAll('.editable').forEach(function(element) {
            element.addEventListener('click', function() {
                this.focus();
            });
        });
    </script>
</body>
</html>

images

复制全文 生成海报 HTML 情感 家庭 约定

推荐文章

随机分数html
2025-01-25 10:56:34 +0800 CST
php机器学习神经网络库
2024-11-19 09:03:47 +0800 CST
markdowns滚动事件
2024-11-19 10:07:32 +0800 CST
Go语言SQL操作实战
2024-11-18 19:30:51 +0800 CST
一个数字时钟的HTML
2024-11-19 07:46:53 +0800 CST
联系我们
2024-11-19 02:17:12 +0800 CST
Plyr.js 播放器介绍
2024-11-18 12:39:35 +0800 CST
LangChain快速上手
2025-03-09 22:30:10 +0800 CST
Golang - 使用 GoFakeIt 生成 Mock 数据
2024-11-18 15:51:22 +0800 CST
JavaScript设计模式:发布订阅模式
2024-11-18 01:52:39 +0800 CST
Vue3中如何进行性能优化?
2024-11-17 22:52:59 +0800 CST
使用 sync.Pool 优化 Go 程序性能
2024-11-19 05:56:51 +0800 CST
地图标注管理系统
2024-11-19 09:14:52 +0800 CST
404错误页面的HTML代码
2024-11-19 06:55:51 +0800 CST
10个几乎无人使用的罕见HTML标签
2024-11-18 21:44:46 +0800 CST
浏览器自动播放策略
2024-11-19 08:54:41 +0800 CST
Web 端 Office 文件预览工具库
2024-11-18 22:19:16 +0800 CST
Python 基于 SSE 实现流式模式
2025-02-16 17:21:01 +0800 CST
ElasticSearch集群搭建指南
2024-11-19 02:31:21 +0800 CST
Nginx 防止IP伪造,绕过IP限制
2025-01-15 09:44:42 +0800 CST
程序员茄子在线接单