用HTML语言制作一个非常浪漫的生日祝福网，手把手教你制作炫酷生日祝福网页
生活随笔
收集整理的這篇文章主要介紹了
用HTML语言制作一个非常浪漫的生日祝福网，手把手教你制作炫酷生日祝福网页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、📚網頁介紹
明天就是女朋友的生日了, 是時候展現專屬于程序員的浪漫了！你打算怎么給心愛的人表達愛意？鮮花禮物？代碼表白？還是創意DIY？或者…無論那種形式，快來秀我們一臉吧！
二、🎀網頁效果
??視頻演示
HTML生日祝福網頁制作（粉色主題）程序員專屬生日表白網站
🌈圖片演示
三、🏙?網頁代碼
💬注:以下代碼為部分演示,如需完整源碼請看文章末尾
🧱HTML代碼
<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>生日快樂</title><link rel="stylesheet" type="text/css" href="css/index.css" /></head><body><div class="htmleaf-container"><div class="wrapper"><div class="container"><h1>生日快樂</h1><form class="form"><inputid="userName"name="userName"type="text"value=""placeholder="姓名"/><input id="pwd" name="pwd" type="password" placeholder="密碼" /><button type="submit" id="login-button">進入</button></form></div><ul class="bg-bubbles"><li><img src="./img/timg.gif" style="width: 100%; height: 100%" /></li><li><img src="./img/timg.gif" style="width: 100%; height: 100%" /></li><li><img src="./img/timg.gif" style="width: 100%; height: 100%" /></li><li><img src="./img/timg.gif" style="width: 100%; height: 100%" /></li><li><img src="./img/timg.gif" style="width: 100%; height: 100%" /></li><li><img src="./img/timg.gif" style="width: 100%; height: 100%" /></li><li><img src="./img/timg.gif" style="width: 100%; height: 100%" /></li><li><img src="./img/timg.gif" style="width: 100%; height: 100%" /></li><li><img src="./img/timg.gif" style="width: 100%; height: 100%" /></li><li><img src="./img/timg.gif" style="width: 100%; height: 100%" /></li></ul></div></div><audio src="music/1.mp3" autoplay="autoplay" loop="loop"><script src="js/jquery-2.1.1.min.js" type="text/javascript"></script><script src="js/index.js" type="text/javascript"></script></body> </html>??CSS代碼
* {box-sizing: border-box;margin: 0;padding: 0;font-weight: 300; } body {font-family:"Microsoft YaHei";color: white;font-weight: 300; } body ::-webkit-input-placeholder {/* WebKit browsers */font-family:"Microsoft YaHei";color: white;font-weight: 300; } body :-moz-placeholder {/* Mozilla Firefox 4 to 18 */font-family:"Microsoft YaHei";color: white;opacity: 1;font-weight: 300; } body ::-moz-placeholder {/* Mozilla Firefox 19+ */font-family:"Microsoft YaHei";color: white;opacity: 1;font-weight: 300; } body :-ms-input-placeholder {/* Internet Explorer 10+ */font-family:"Microsoft YaHei";color: white;font-weight: 300; } .wrapper {background: #ee9ca7;background: -webkit-linear-gradient(top left, #ee9ca7 0%, #ee9ca7 100%);background: linear-gradient(to bottom right, #ee9ca7 0%, #ee9ca7 100%);background-color:rgba(255,255,255,0.9);position: absolute;top:0;left: 0;width: 100%;height: 100%;overflow: hidden;}.wrapper.form-success .container h1 {-webkit-transform: translateY(85px);-ms-transform: translateY(85px);transform: translateY(85px); } .container {max-width: 600px;margin: 0 auto;margin-top: 7%;padding: 80px 0;height: 400px;text-align: center; } .container h1 {font-size: 40px;-webkit-transition-duration: 1s;transition-duration: 1s;-webkit-transition-timing-function: ease-in-put;transition-timing-function: ease-in-put;font-weight: 200; } form {padding: 20px 0;position: relative;z-index: 2; } form input {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;border: 1px solid rgba(255, 255, 255, 0.4);background-color: rgba(255, 255, 255, 0.2);width: 250px;border-radius: 3px;padding: 10px 15px;margin: 0 auto 10px auto;display: block;text-align: center;font-family: "Microsoft YaHei";font-size: 18px;color: white;-webkit-transition-duration: 0.25s;transition-duration: 0.25s;font-weight: 300; } form input:hover {background-color: rgba(255, 255, 255, 0.4); } form input:focus {background-color: white;width: 300px;color: #ee9ca7; } form button {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;background-color: white;font-family: "Microsoft YaHei";border: 0;padding: 10px 15px;color: #ee9ca7;border-radius: 3px;width: 250px;cursor: pointer;font-size: 18px;-webkit-transition-duration: 0.25s;transition-duration: 0.25s; } form button:hover {background-color: #f5f7f9; } .bg-bubbles {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1; }@keyframes square {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-900px) rotate(600deg);transform: translateY(-900px) rotate(600deg);} }四、🎁獲取源碼
1.如果我的博客對你有幫助 請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻🉑關注我| 獲取更多源碼】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、等!
📣以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻
總結
以上是生活随笔為你收集整理的用HTML语言制作一个非常浪漫的生日祝福网，手把手教你制作炫酷生日祝福网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： .Net开发的两个小技巧
- 下一篇： JavaScript 监听手机端的tou