HTML新年许愿墙代码，网页版春节许愿墙代码，兔年许愿墙代码

HTML新年许愿墙代码，网页版春节许愿墙代码，兔年许愿墙代码
完整代码下载地址：网页版春节许愿墙代码，兔年许愿墙代码
运行效果

核心代码

<!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>Document</title><style>* {padding: 0;margin: 0;}body,html {/* height: 3000px; */background: url(./images/wall.png) no-repeat;background-size: 100%;}.wall {width: 1000px;margin: auto;padding-top: 20px;}.wall .title {width: 100%;height: 50px;font-size: 40px;color: black;line-height: 50px;/* border: 1px solid black; */text-align: center;background-color: rgba(247, 132, 132, 0.7);border-radius: 10px;box-shadow: 0px 0px 10px black;}.wall .wall_top {width: 100%;height: 400px;/* border: 1px solid black; */margin-top: 10px;background-color: rgba(247, 132, 132, 0.7);border-radius: 20px;box-shadow: 0px 0px 10px black;position: relative;overflow: hidden;background: url(./images/540f3973a764336480cff7952ed43027.png)no-repeat bottom left;background-size: 400px;}.wall .wall_bottom {width: 100%;height: 40px;font-size: 20px;display: flex;justify-content: left;box-sizing: border-box;margin-top: 10px;line-height: 30px;padding-left: 25px;background-color: rgba(247, 132, 132, 0.7);border-radius: 10px;padding-top: 4px;box-shadow: 0px 0px 10px black;}.wall .wall_bottom input {border-radius: 5px;border: 1px solid black;height: 30px;box-sizing: border-box;vertical-align: middle;padding-left: 5px;}.wall .inp1 {width: 100px;margin-right: 50px;}.wall .inp2 {width: 500px;margin-right: 25px;}.wall .btn {width: 100px;height: 30px;border-radius: 10px;border: 2px solid red;border-radius: 5px;background-color: salmon;cursor: pointer;opacity: .7;box-shadow: 0px 0px 10px black;font-size: 20px;vertical-align: middle;}.wall_top .wall_p {position: absolute;left: 1000px;top: 0;color: white;height: 30px;display: flex;flex-wrap: nowrap;z-index: 2;}.wall .wall_top img {height: 30px;width: 30px;border-radius: 50%;margin-right: 10px;}.wall .wall_top span {line-height: 30px;white-space: nowrap;margin-right: 5px;}.wall_top .memo {border: 1px solid black;width: 200px;min-height: 150px;background-color: rgba(247, 132, 132, 0.7);position: absolute;left: 100px;top: 100px;border-radius: 10px;box-sizing: border-box;padding: 10px;box-shadow: 0px 0px 10px black;}.wall_top .memo>.content {padding-left: 10px;}.wall_top .memo>.time {color: black;font-size: 12px;font-weight: bold;}.wall_top .memo>.name {position: absolute;bottom: 10px;right: 10px;font-size: 12px;font-weight: bold;}</style>
</head><body><div class="wall"><!-- 许愿墙的标题 --><p class="title">2023 新年许愿墙</p><div class="wall_top"><!-- 弹幕： --><!-- <p class="wall_p"><img src="./images/xiaoxin_4.jpg" alt=""><span></span></p> --><!-- 便签memo --><!-- <div class="memo"><p class="time">2022-1-17</p><p class="content">新年快乐</p><p class="name">陈小龙</p></div> --></div><!-- 输入祝福语 --><div class="wall_bottom"><p> <span>姓名：</span> <input type="text" placeholder="请留名" class="inp1"></p><p> <span>新年愿望：</span> <input type="text" placeholder="请输入祝福语" class="inp2"></p><p><button class="btn">发送</button></p></div></div>

完整代码下载地址：网页版春节许愿墙代码，兔年许愿墙代码

HTML新年许愿墙代码，网页版春节许愿墙代码，兔年许愿墙代码相关推荐

python网页版_经典python学习教程：20行代码打造一个微信群聊助手，解放双手
今天的Python学习教程教大家如何用20行Python代码实现微信群聊助手,可以用来活跃群气氛,好多群主创建完群后,拉完一群人,之后就一片寂静,有个群聊助手,就可以帮忙活跃群里气氛,通过今天在自己的 ...
有道云笔记桌面挂件android,有道云笔记网页版全面更新！更有Android，pc新版享不停！...
新年伊始,有道云笔记诸端都悄然发生了变化.各位笔记亲有木有注意到嘞. 快乐跟小编一起看看都有哪些新年贺礼吧~~bingogo. 新年第一弹:网页版全新升级,完善多级目录功能从现在开始,不用下载客户端 ...
手撸一个网页版看板(仿照板栗看板样式)
方案 vue+vuedraggable+Sortable+自定义css+elementui 业务繁琐后海量配置或者其他场景需要,仿照板栗看板写一个简单的网页版,这里贴出大概贴出部分代码 1.列表拖动插 ...
网页版“别踩白块”实战笔记
网页版"别踩白块"项目笔记 js重点代码详解所有完整代码如下: index.html index.css index.js 事件对象解释参考链接 js重点代码详解 //全局变 ...
【代码案例】网页版表白墙待办事项（包含完整源码）
网页版表白墙表白墙 1. 创建内容 2. 调整样式 3. 实现提交最终样式待办事项 1. 添加内容 2. 调整样式实现功能新增待办事项已完成事项删除任务最后嗨~~今天给大家分享分享两 ...
iOS关键代码遭泄露；Google正式抛弃HTTP；微博网页版出故障 | 一周业界事
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 本周,国内科技圈一场围绕春节假期营销活动蓄势待发,首先是以"腾讯.阿里两家为首的撒 ...
网页版的svn怎样同步代码_学会使用Hdlbits网页版Verilog代码仿真验证平台
大家推荐一款网页版的 Verilog代码编辑仿真验证平台,这个平台是国外的一家开源FPGA学习网站,通过 "https://hdlbits.01xz.net/wiki/Main_Page&q ...
html5仿网页版微信聊天界面代码
2019独角兽企业重金招聘Python工程师标准>>> html5仿网页版微信聊天界面代码转载于:https://my.oschina.net/u/1266171/blog/783 ...
无需翻墙，快速接入免费网页版 ChatGPT 到 Java 应用程序中
这几天用使用 Java 开发一个机器人,想接入 ChatGPT,但是自己又没钱用 key,又懒得搭梯子,自然地就想到去社区看看有没有逆向工程版本,这一看,社区的力量果然强大,成功找到一个逆向版框架 ...

HTML新年许愿墙代码，网页版春节许愿墙代码，兔年许愿墙代码

HTML新年许愿墙代码，网页版春节许愿墙代码，兔年许愿墙代码相关推荐

最新文章

热门文章