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"> 新年许愿墙</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">-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新年许愿墙代码 网页版春节许愿墙代码 兔年许愿墙代码》对你有帮助，请点赞、收藏，并留下你的观点哦！
