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

红目香薰

发布于 2022-11-29 19:45:21

6650

发布于 2022-11-29 19:45:21

文章被收录于专栏：CSDNToQQCode

📋前言📋 💝博客主页：红目香薰_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://img-blog.csdnimg.cn/3c28d29c11ee4f4db76d2c48da7f0343.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA57qi55uu6aaZ6Jaw,size_20,color_FFFFFF,t_70,g_se,x_16");
            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://img-blog.csdnimg.cn/3c28d29c11ee4f4db76d2c48da7f0343.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA57qi55uu6aaZ6Jaw,size_20,color_FFFFFF,t_70,g_se,x_16");
            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>

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