HTML新年许愿墙代码，网页版春节许愿墙代码，兔年许愿墙代码
生活随笔
收集整理的這篇文章主要介紹了
HTML新年许愿墙代码，网页版春节许愿墙代码，兔年许愿墙代码
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
HTML新年許愿墻代碼，網(wǎng)頁版春節(jié)許愿墻代碼，兔年許愿墻代碼
完整代碼下載地址：網(wǎng)頁版春節(jié)許愿墻代碼，兔年許愿墻代碼
運行效果
核心代碼
<!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"><!-- 許愿墻的標(biāo)題 --><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">發(fā)送</button></p></div></div>
完整代碼下載地址：網(wǎng)頁版春節(jié)許愿墻代碼，兔年許愿墻代碼
總結(jié)
以上是生活随笔為你收集整理的HTML新年许愿墙代码，网页版春节许愿墙代码，兔年许愿墙代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 升级Ubuntu 13.04 有感
- 下一篇： 使用iTunes制作iPhone6s p