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期末作业课程设计期末大作业-腾讯官网 <!DOCTYPE html> <html lang="zh-CN"><head><meta ...
HTML期末大作业~大学生旅游官网设计作业成品(HTML+CSS+JavaScript)
HTML期末大作业 ~ 大学生旅游官网网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计~ 临近期末, 你还在为HTML网页设 ...
学生HTML个人网页作业作品 ~ 科技大学官网网页设计成品~ 学生网页设计作业源码
HTML5+CSS期末大作业:某科技大学官网设计 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计源码论文HTML 作品展示其他在线 ...
网页设计作业——仿oppo官网手机商城(1页) HTML+CSS+JavaScript 学大学生网页制作期末作业
HTML5期末大作业文章目录 HTML5期末大作业一.作品展示二.文件目录三.代码实现一.作品展示二.文件目录三.代码实现 <!doctype html> <html& ...
HTML/CSS大作业--仿联想官网
用到了一些图片跟轮播插件效果图如下唔~~有亿点点粗糙代码如下:忘记哪是哪了,就不分开了 <!DOCTYPE html> <html> <head><t ...
HTML5期末大作业：网站——仿游戏官网(龙之谷)HTML+CSS+JavaScript
HTML5期末大作业:网站--仿游戏官网(龙之谷)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网 ...
HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS)~个人设计web前端大作业...
HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS) ~个人设计web前端大作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS)~个人设计web前端大作业
HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS) ~个人设计web前端大作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
HTML5期末大作业：网站——卡通漫画游戏官方网页 (萌王) 13个页面 HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计
HTML5期末大作业:HTML5期末大作业:网站--卡通游戏官方网页 (萌王)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个 ...

HTML期末网页作业-仿QQ官网QQ注册网页

HTML期末作业-仿QQ官网QQ注册网页(HTML+CSS+JavaScript)

学生作业仿QQ官网部分代码截图

学生作业仿QQ官网部分截图

学生作业仿QQ注册部分源码

学生作业仿QQ注册部分截图

HTML期末网页作业-仿QQ官网QQ注册网页相关推荐

最新文章

热门文章