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

举报
红目香薰 发表于 2022/01/30 13:56:01 2022/01/30
【摘要】 ​ 📋前言📋💝博客主页:红目香薰_CSDN博客-大数据,计算机理论,MySQL领域博主💝✍本文由在下【红目香薰】原创✍🤗2022年最大愿望:【服务百万技术人次】🤗💝大过年的,挺喜庆啊,欢迎大家转载,纯原生我写的,奉献给大家啦💝动态效果​图片素材(PNG)​静态效果​​源码:<!DOCTYPE html><html lang="en"><head> <meta chars...

 📋前言📋

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

✍本文由在下【红目香薰】原创✍

🤗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>

 就一个文件够了,啥也不需要:

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。