HTML春联(部分Vue)有源码_有素材_包满意

????前言????????博客主页：红目香薰_CSDN博客-大数据,计算机理论,MySQL领域博主????✍本文由在下【红目香薰】原创，首发于CSDN✍????2022年最大愿望：【服务百万技术人次】????????大过年的，挺喜庆啊，欢迎大家转载，纯原生我写的，奉献给大家啦????动态效果图片素材（PNG）静态效果源码：<!DOCTYPE html><html lang="e

红目香薰

3625人浏览 · 2022-01-30 12:37:50

红目香薰 · 2022-01-30 12:37:50 发布

📋前言📋

💝博客主页：红目香薰_CSDN博客-大数据,计算机理论,MySQL领域博主💝

✍本文由在下【红目香薰】原创，首发于CSDN✍

🤗2022年最大愿望：【服务百万技术人次】🤗

💝大过年的，挺喜庆啊，欢迎大家转载，纯原生我写的，奉献给大家啦💝

动态效果

图片素材（PNG）

静态效果

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年祝福</title>
    <style>
        * {
            margin: 0px auto;
            padding: 0px;
            font-family: '隶书';
            font-size: 2rem;
            border-radius: 12px;
        }
        
        .info {
            width: 100%;
        }
        
        .top {
            width: 20%;
            background-color: red;
            text-align: center;
            background-image: url("https://i-blog.csdnimg.cn/blog_migrate/2afb66aac6671fcb44689be98f2834dd.png");
            background-size: 95px 100%;
            background-repeat: repeat-x;
        }
        
        span {
            margin-left: 15px;
            margin-right: 15px;
        }
        
        .content {
            width: 35%;
        }
        
        .left {
            text-align: center;
            float: left;
        }
        
        .right {
            text-align: center;
            float: right;
        }
        
        .left,
        .right {
            width: 15%;
            height: 70%;
            background-color: red;
            background-image: url("https://i-blog.csdnimg.cn/blog_migrate/2afb66aac6671fcb44689be98f2834dd.png");
            background-size: 100%;
            background-repeat: repeat-y;
            line-height: 100px;
        }
        
        .inText {
            text-align: center;
            width: 100%;
        }
        
        input {
            width: 32%;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="info">
            <div class="top">
                <span>{{topText}}</span>
            </div>
            <div class="content">
                <div class="left">{{leftText}}</div>
                <div class="right">{{rightText}}</div>
            </div>
        </div>
        <div style="clear: both;"></div>
        <hr/>
        <div class="inText">
            <p><input type="text" v-model="leftText" placeholder="请输入上联七个字" />
                <input type="text" v-model="rightText" placeholder="请输入下联七个字" id="right" />
            </p>
        </div>
    </div>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                leftText: "博人博客写论文",
                rightText: "服务一亿技术人",
                topText: "恭 喜 发 财"
            }
        });
    </script>

</body>

</html>

就一个文件够了，啥也不需要：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^