1. IT分享知识网首页
  2. 未分类

【UI设计+静态页面】ailiaili页面——仿bilibili页面(完整代码)

老牧童 • • 未分类

【UI设计+静态页面】ailiaili页面——仿bilibili页面(完整代码)代码 UI 设计 静态页面 ailiaili 页面 仿 bilibili 页面

大家好，欢迎来到IT知识分享网。

1、登录页面：
在这里插入图片描述

html代码：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ailiaili登录页面</title> <link href="css/login.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/login.js" ></script> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function () { 
    // 请将jQuery代码书写在这里 ... // alert('Hello,ailiaili!'); }); </script> </head> <body> <div class="A"> <div class="Bbox"> <div class="login_box"> <div class="context"> <div class="box1"> <h1>扫描二维码登录</h1> <div class="twod"> <img src="img/二维码.png"/> </div> <p>请使用ailiaili客户端</p> </div> <div class="boxs"></div> <div class="box2"> <h1><a id="pwds" onclick="logpwd()">密码登录</a> |<a id="msgs" onclick="logmsg()">短信登录</a> </h1> <form class="log_form" action="http://127.0.0.1:8088/logUser" method="post" id="loginform_pwd"> <div class="input_sty"> <label for="username">账号</label> <input name="name_u" id="user_id" class="input_context" type="text" placeholder="请输入账号" /> </div> <hr /> <div class="input_sty"> <label for="userpwd">密码</label> <input id="user_pwd" name='pwd_u' class="input_context2" type="password" placeholder="请输入密码" /> </div><a href="index.html">忘记密码</a> <input class="btn" id="submit2" type="submit" value="登录" onmouseover="over2()" onmouseout="out2()"/> <input class="btn" id="submit1" value="注册" onclick="regs()" onmouseover="over1()" onmouseout="out1()"/> </form> <form class="log_form" action="http://127.0.0.1:8088/logUser" method="post" id="loginform_msg"> <div class="input_sty"> <label for="username">手机号</label> <input name="name_u" id="user_id" class="input_context" type="text" placeholder="请输入手机号" /> </div> <hr /> <div class="input_sty"> <label for="userpwd">验证码</label> <input id="user_pwd" name='pwd_u' class="input_context2" type="password" placeholder="请输入验证码" /> </div> <div id="msg_but" type="button" onclick="msgis()">点击发送验证码</div> <input class="btn" id="submit3" type="submit" value="登录" onmouseover="over2()" onmouseout="out2()"/> <input class="btn" id="submit4" value="注册" onclick="regs()" onmouseover="over1()" onmouseout="out1()"/> </form> <div class="other"> <p>其他方式登录</p> <div class="other_context"><img src="img/微博图标2-2.jpg" /> <a class="a_sty" href="">微博登录</a> </div> <div class="other_context"> <img src="img/微信图标2-2.jpg"/> <a class="a_sty" href="">微信登录</a></div> <div class="other_context"> <img src="img/图标2-2.jpg" /> <a class="a_sty" href="">登录</a></div> </div> <div class="ps"> <p>未注册过<span>ailiaili</span>的手机号，我们将主动帮您注册账号</p> <p>登录或完成注册即代表您同意<span>用户协定和隐私政策</span></p> </div> </div> </div> </div> <div class="photo" > <img src="img/画板 1.png" id="img1" /> <img src="img/画板 2.png" id="img2"/> </div> <!--<div class="photo" id="img2"> <img src="img/画板 1.png" id="img1" /> <img src="img/画板 2.png" /> </div>--> </div> <div id="regform" class="reg"> <form class="res_form" action="http://127.0.0.1:8088/addUser" method="post" id="regform_msg"> <div class="input_sty"> <label for="username">账号</label> <input name="name_u" id="user_id" class="input_context" type="text" placeholder="请输入手机号" /> </div> <hr /> <div class="input_sty"> <label for="userpwd">密码</label> <input id="user_pwd" name='pwd_u' class="input_context2" type="password" placeholder="请输入密码" /> <input class="btn" id="submit1" type="submit" value="确定"/> <!--<button onclick="regx()">X</button>--> </form> </div> </div> <!--<button onclick="test()">sadfsadfgds</button>--> </body> </html>

2、首页页面：
html代码：
在这里插入图片描述

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ailiaili首页</title> <link rel="stylesheet" href="css/index.css" /> <script type="text/javascript" src="js/index.js" ></script> </head> <body> <div class="head_sty"> <nav> <div class="nav_1"> <div class="nav1"><a>首页</a></div> <div class="nav1"><a>番剧</a></div> <div class="nav1"><a>直播</a></div> <div class="nav1"><a>游戏中心</a></div> <div class="nav1"><a>会员购</a></div> <div class="nav1"><a>漫画</a></div> <div class="nav1"><a>赛事</a></div> </div> <div class="nav_3"> <a class="look"></a> <input /> </div> <div class="nav_2"> <div class="nav2" id="logs" onclick="log()">登录</div> <div class="nav2" onclick="my()">空间</div> <div class="nav2">消息</div> <div class="nav2">动态</div> <div class="nav2">收藏</div> <div class="nav2" id="tougao"> <img src="img/投稿图标.png" style="border-radius: 5px;" /> </div> </div> </nav> <div class="logo"> <img src="img/ailiaili_logo.png" /> </div> </div> <div class="body_1"> <div class="a1"> <div id="a11_1" class="a11"> <img class="a11s" src="img/动态图标.png" /> </div> <div id="a11_2" class="a11"> <img class="a11s" src="img/热门图标.png" /> </div> <div id="a11_3"class="a11"> <img class="a11s" src="img/频道图标.png" /> </div> <p>动态</p> <p>&nbsp;&nbsp;热门</p> <p>&nbsp;&nbsp;&nbsp;频道</p> </div> <div id="a22" class="a2"> </div> <div class="a3"> <div class="a31"> <div class="a31_1"><img src="img/1.png"/>专栏</div> <div class="a31_1"><img src="img/2.png" />活动</div> <div class="a31_1"><img src="img/3.png"/>社区</div> </div> <div class="a31"> <div class="a31_1"><img src="img/4.png"/>直播</div> <div class="a31_1"><img src="img/5.png"/>课堂</div> <div class="a31_1"><img src="img/6.png"/>热榜</div> </div> </div> </div> <div class="body_2"> <div class="lunbo"> <img src="img/a1.png" style="border-radius: 25px;"/> </div> <div class="vido"> <a href="video.html"> <div class="video_boxs"> <img class="video_boxs_img" src="img/s1.png" /> <p>放到整个csgo圈子都是相当炸裂的存在！</p> <p>热心市民王大爷乀</p> </div> </a> <a href=""> <div class="video_boxs"> <img class="video_boxs_img" src="img/s2.png" /> <p>让绫华大小姐穿上JK~这么可爱真是抱歉啦✧~</p> <p>卡卡Orange</p> </div> </a> <a href=""> <div class="video_boxs"> <img class="video_boxs_img" src="img/s3.png" /> <p>【B站首发】Lost (Alternate Reality Version) - Linkin Park 林肯公</p> <p>LinkinPark</p> </div> </a> <a href=""> <div class="video_boxs"> <img class="video_boxs_img" src="img/s4.png" /> <p>伊朗沙特为何复交？为什么在中国？美国怕了吗？</p> <p>小王Albert</p> </div> </a> </div> </div> </body> </html>

3、视频页面：
html代码：
在这里插入图片描述

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>视频页面</title> <link rel="stylesheet" href="css/video.css" /> </head> <body> <div class="B"> <div class="z_box"> <h1>【Vox Akuma/熟】有用的英音知识增加了！Vox老师在线教学时态</h1> <br /> <p>2023-03-19 12:32:33</p> <br /> <div class="video_box"> <img src="img/视频0.png" /> </div> <div class="buts"> <div class="but"> <img src='img/点赞.png' /> </div> <div class="but"> <img src='img/投币.png' /> </div> <div class="but"> <img src="img/收藏.png" /> </div> <div class="but"> <img src="img/转发.png" /> </div> </div> </div> <div class="y_box"> <div class="y_boxs" id="b1"> <div class="touxiang1"> <img src="img/视频头像.png" /> </div> <p class="p_name">Wuvvvv</p> <div class="gz">关注</div> </div> <div class="y_boxs" id="b2"> 弹幕列表 </div> <div class="y_boxs"> <div class="vidos"> <img src="img/视频2.png" /> </div> <p>【Vox Akuma/短切熟】一秒惹怒英国人</p> <br /> <p>臭豆腐馅小汉堡</p> </div> <div class="y_boxs"> <div class="vidos"> <img src="img/视频1.png" /> </div> <p>400岁老爹兼职被扒！！！点开看老爹在线劝学</p> <br /> <p>鱼戏荷叶everywhere</p> </div> </div> </div> </body> </html>

4、个人中心：
html代码：
在这里插入图片描述

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>个人空间</title> <link rel="stylesheet" href="css/myself.css" /> </head> <body> <!--<div class="mine" id="mine_back"> <img src="img/vox.jpg" /> </div>--> <div class="mine"> <!--<div id="mine_back"> <img id="mine_back" src="img/vox.jpg" /> </div>--> <div class="touxiang"> <img src="img/vox4.jpg" /> </div> <div class="mine_context"> <p class="u_name">宇宙超级无敌帅iii</p> <input placeholder="编辑个人签名" type="text" name="text" value="vox akuma" onfocus="if(this.value == 'name')this.value='';" onblur="if(this.value == '')this.value='name';" /> </div> </div> <div class="dao"> <div class="dao_context">动态</div> <div class="dao_context">收藏</div> <div class="dao_context">设置</div> <div class="dao_context" id="concert">关注</div> <div class="dao_context" id="fan">粉丝</div> </div> <div class="myself_context"> <div class="left_context"> <div class="touxiang"> <img src="img/vox4.jpg" /> </div> <p class="u_name">宇宙超级无敌帅iii</p> <div class="my_context"> <img src="img/vox1.jpg" /> </div> <!--<div class="my_context_but"> <div></div> </div>--> </div> <div class="right_context"> <p>个人资料</p> <button>修改</button> <hr /> <ul> <li>UID</li> <li>生日</li> </ul> </div> </div> </body> </html>

代码下载

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/149918.html

赞 (0)
老牧童老牧童
0
上一篇 2025-03-21 18:15
下一篇 2025-03-21 18:26

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信