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

教程管理员发布于2023-09-27 16:01 HTML教程 145

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

源码

<!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://ucc.alicdn.com/images/user-upload-01/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://ucc.alicdn.com/images/user-upload-01/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>

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

标签：#阿里 #春联 #开发者 #源码 #素材 #满意

上一篇：HTML5 Canvas 绘制五星红旗
下一篇：HTML元素文本溢出显示省略号(...)

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

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠