HTML春联(部分Vue)有源码_有素材_包满意
【摘要】 📋前言📋💝博客主页：红目香薰_CSDN博客-大数据,计算机理论,MySQL领域博主💝✍本文由在下【红目香薰】原创✍🤗2022年最大愿望：【服务百万技术人次】🤗💝大过年的，挺喜庆啊，欢迎大家转载，纯原生我写的，奉献给大家啦💝动态效果图片素材（PNG）静态效果源码：<!DOCTYPE html><html lang="en"><head> <meta chars...
📋前言📋
💝博客主页：💝
✍本文由在下【红目香薰】原创✍
🤗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）