HTML期末网页作业-仿QQ官网QQ注册网页
生活随笔
收集整理的這篇文章主要介紹了
HTML期末网页作业-仿QQ官网QQ注册网页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?HTML期末作業-仿QQ官網QQ注冊網頁(HTML+CSS+JavaScript)
學生作業仿QQ官網部分代碼截圖
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/index.css"> </head><body><div id="header"><div class="wrap"><div id="logo"><a></a></div><ul class="menu"><li><a class="apply_qq">申請QQ</a></li><li><a class="qq_index">QQ官網首頁</a></li><li><a class="qq_index">更新日志</a></li></ul></div></div><div class="main"><section class="section-01"><div class="banner"><div class="imgBox"><img class="img-slide img1" src="img/1.png" alt="1" style="height: 560px; width: 309px;"><img class="img-slide img2" src="img/2.png" alt="2"></div></div><div class="img-triangle"></div><div class="wrap"><div class="message"><h2>QQ PC版<span class="new-version">9.3.3<i class="icon-new"></i></span><span class="release-date">發布時間：6月2日</span></h2><h1>從心出發·趣無止境</h1><ul class="features"><li>- 新增消息草稿實時保存功能，不再擔心草稿消息丟失；</li><li>- 群通話支持展示發言人昵稱，輕松確認發言成員。</li></ul><div class="button-container"><a class="download"></a><div class="btn-mask">立即下載</div></div></div></div></div></section><section class="section-02"><div class="section-02-container"><div class="img-triangle"></div><div class="wrap"><div class="feature feature-0 active j-new-feature"><div class="feature-txt"><h1>未讀消息氣泡</h1><h3>聊天窗口支持快速定位到未讀消息</h3></div><div class="feature-img" style="background-image: url(./img/20191204100642_6c96a1.png);"></div></div></div><div class="feature feature-1 j-new-feature" style="opacity: 0;"><div class="feature-txt"><h1>消息錄制</h1><h3>截圖可一鍵高清錄制，信息完整傳達</h3></div><div class="feature-img" style="background-image: url(./img/20191204100642_6c96a1.png);"></div></div><div class="feature feature-2 j-new-feature" style="opacity: 0;"><div class="feature-txt"><h1>自定義截圖</h1><h3>截圖時長按右鍵，自由勾畫截圖區域</h3></div><div class="feature-img" style="background-image: url(./img/20191204100642_6c96a1.png);"></div></div></div><div class="feature feature-3 j-new-feature" style="opacity: 0;"><div class="feature-txt"><h1>消息記錄升級</h1><h3>清晰分類，豐富篩選能力</h3></div><div class="feature-img" style="background-image: url(./img/20191204100642_6c96a1.png);"></div></div></div></div></section><section class="section-03"><div class="section-03-container"><div class="img-triangle"></div><div class="wrap"><div class="message"><h1>趣·享內容</h1><h3>接入騰訊視頻、QQ看點，樂享好內容。</h3></div><div class="advert-content"><img class="advert-01" src="./img/advert01.png"><img class="advert-02" src="./img/advert02.png"><img class="advert-03" src="./img/advert03.png"></div></div></div></section><section class="section-04"><div class="section-04-container"><div class="img-triangle"></div><div class="wrap"><div class="message"><h1>趣·識好友</h1><h3>共同好友讓我們相識，分享樂趣使我們相知。</h3></div><div class="friendNet-container"><div class="friendNet"><div class="face-container face01"><div class="face"></div><div class="dynamic"></div></div><div class="face-container face02"><div class="face"></div><div class="dynamic"></div></div><div class="face-container face03"><div class="face"></div><div class="dynamic"></div></div></div></div></div><div class="footer"><img src="./img/4-pd.png" alt="" class="footer-img"><h2 class="copyright">Copyright ? 1998- Tencent. All Rights Reserved. 騰訊公司 版權所有</h2></div></div></section></div> <script src="./js/index.js"></script> </body></html>學生作業仿QQ官網部分截圖
?學生作業仿QQ注冊部分源碼
<html><head><title>首頁</title> <link rel="stylesheet" href="./css/style.css"></head><body><div class="nav"><div class="nav-left"><img src="img/logo.png" alt="" style="margin-top: 15px; margin-left: 20px;"><h3 style="display: inline-block;">QQ</h3></div><div class="nav-right"><img src="img/logo3.png" alt=""><span>QQ靚號</span><select name="" id="" style="border: none;"><option>簡體中文</option><option>繁體中文</option><option>English</option></select><p class="fankui">意見反饋</p></div></div><div class="main"><div class="left"><img src="img/01-4.jpg" alt=""></div><div class="right"><h1>歡迎注冊QQ</h1><h3>每一天，樂在溝通<a class="free">免費靚號</a></h3><p> <input type="text" class="txt username" placeholder="昵稱"> </p><p class="error" style="display: none;"><img src="./img/error.png" alt=""> 昵稱不可以為空</p><p> <input type="password" class="txt password" placeholder="密碼"></p><p class="error" style="display: none;"><img src="./img/error.png" alt=""> 密碼不可以為空</p><div class="tishi" style="display:none;"><p><img src="./img/green.png" alt="">不能包括空格</p><p><img src="./img/info.png" alt="">長度為8-16個字符</p><p><img src="./img/info.png" alt="">必須包含字母、數字、符號中至少2種</p></div><select class="phone"><option >+86</option><option>+12</option><option>+34</option></select><input type="tel" class="tel"><br><input type="button" value="立即注冊" class=" btn "><br /><input type="checkbox" class="box"><span class="span">我已閱讀并同意相關服務條款和隱私政策</span><p style="margin-left: 180px;margin-top: 34px; font-size: 12px; color: #999;">Copyright ? 1998-2020Tencent All Rights Reserved</p></div></div><script src="./js/index.js"></script> </body></html>?學生作業仿QQ注冊部分截圖
新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！總結
以上是生活随笔為你收集整理的HTML期末网页作业-仿QQ官网QQ注册网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML期末作业-旅游网页作业Html+
- 下一篇： HTML期末作业-汽车奔驰4s店