代码 html夫妻约定

2024-11-19 01:24:21 +0800 CST views 966
<!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 情感 家庭 约定

推荐文章

从Go开发者的视角看Rust
2024-11-18 11:49:49 +0800 CST
Rust开发笔记 | Rust的交互式Shell
2024-11-18 19:55:44 +0800 CST
ElasticSearch集群搭建指南
2024-11-19 02:31:21 +0800 CST
jQuery中向DOM添加元素的多种方法
2024-11-18 23:19:46 +0800 CST
php客服服务管理系统
2024-11-19 06:48:35 +0800 CST
Vue中的异步更新是如何实现的?
2024-11-18 19:24:29 +0800 CST
前端如何一次性渲染十万条数据?
2024-11-19 05:08:27 +0800 CST
纯CSS实现3D云动画效果
2024-11-18 18:48:05 +0800 CST
XSS攻击是什么?
2024-11-19 02:10:07 +0800 CST
JavaScript设计模式:桥接模式
2024-11-18 19:03:40 +0800 CST
PHP openssl 生成公私钥匙
2024-11-17 05:00:37 +0800 CST
markdown语法
2024-11-18 18:38:43 +0800 CST
2025年,小程序开发到底多少钱?
2025-01-20 10:59:05 +0800 CST
vue打包后如何进行调试错误
2024-11-17 18:20:37 +0800 CST
支付页面html收银台
2025-03-06 14:59:20 +0800 CST
使用 Go Embed
2024-11-19 02:54:20 +0800 CST
SQL常用优化的技巧
2024-11-18 15:56:06 +0800 CST
Vue 3 中的 Fragments 是什么?
2024-11-17 17:05:46 +0800 CST
如何优化网页的 SEO 架构
2024-11-18 14:32:08 +0800 CST
Vue3中如何实现状态管理?
2024-11-19 09:40:30 +0800 CST
最全面的 `history` 命令指南
2024-11-18 21:32:45 +0800 CST
快速提升Vue3开发者的效率和界面
2025-05-11 23:37:03 +0800 CST
使用 sync.Pool 优化 Go 程序性能
2024-11-19 05:56:51 +0800 CST
向满屏的 Import 语句说再见!
2024-11-18 12:20:51 +0800 CST
程序员茄子在线接单