模仿bilibili登录页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>哔哩哔哩登录页面</title>
<!--外部样式-->
<link rel="stylesheet" href="哔哩哔哩样式.css">
</head>
<body>
<div class="blbl-zongti">
<!--哔哩哔哩开头部分-->
<div class="blbl-start">
<ul>
<li>
<img src="b_logo.png" alt="" width="80px" height="30px">
</li>
<li>
<a href="https://www.bilibili.com/?spm_id_from=333.130.b_696e7465726e6174696f6e616c486561646572.1" class="blbl-start-first">主站</a>
</li>
<li>
<a href="https://www.bilibili.com/anime/?spm_id_from=333.130.b_696e7465726e6174696f6e616c486561646572.27"class="blbl-start-first">番剧</a>
</li>
<li>
<a href="https://game.bilibili.com/platform/?spm_id_from=333.130.b_696e7465726e6174696f6e616c486561646572.28"class="blbl-start-first">游戏中心</a>
</li>
<li>
<a href="https://live.bilibili.com/?spm_id_from=333.130.b_696e7465726e6174696f6e616c486561646572.29"class="blbl-start-first">直播</a>
</li>
<li>
<a href="https://show.bilibili.com/platform/home.html?msource=pc_web&spm_id_from=333.130.b_696e7465726e6174696f6e616c486561646572.30"class="blbl-start-first">会员购</a>
</li>
<li>
<a href="https://manga.bilibili.com/?from=bill_top_mnav&spm_id_from=333.130.b_696e7465726e6174696f6e616c486561646572.6"class="blbl-start-first">漫画</a>
</li>
<li>
<a href="https://www.bilibili.com/v/game/match/?spm_id_from=333.130.b_696e7465726e6174696f6e616c486561646572.7"class="blbl-start-first">赛事</a>
</li>
<li>
<a href="https://manga.bilibili.com/?from=bill_top_mnav&spm_id_from=333.130.b_696e7465726e6174696f6e616c486561646572.6"class="blbl-start-first"><img src="phone.png" alt="">下载APP</a>
</li>
<li><input type="search" name="sousuo" id="blbl-1" value="震撼！在水下敲响s11战鼓"></li>
<li><img src="search.png" alt="" width="30px" height="25px"></li>
<li>
<a href="https://passport.bilibili.com/login?from_spm_id=333.130.top_bar.login" class="blbl-start-dlu">登录</a>
</li>
<li>
<a href="https://passport.bilibili.com/login?gourl=https%3A%2F%2Faccount.bilibili.com%2Faccount%2Fbig"class="blbl-start-first">大会员</a>
</li>
<li>
<a href="https://passport.bilibili.com/login?gourl=https%3A%2F%2Faccount.bilibili.com%2Faccount%2Fbig"class="blbl-start-first">消息</a>
</li>
<li>
<a href="https://passport.bilibili.com/login?gourl=https%3A%2F%2Faccount.bilibili.com%2Faccount%2Fbig"class="blbl-start-first">动态</a>
</li>
<li>
<a href="https://passport.bilibili.com/login?gourl=https%3A%2F%2Faccount.bilibili.com%2Faccount%2Fbig"class="blbl-start-first">收藏</a>
</li>
<li>
<a href="https://passport.bilibili.com/login?gourl=https%3A%2F%2Faccount.bilibili.com%2Faccount%2Fbig"class="blbl-start-first">历史记录</a>
</li>
<li>
<a href="https://passport.bilibili.com/login?gourl=https%3A%2F%2Faccount.bilibili.com%2Faccount%2Fbig"class="blbl-start-first">创作中心</a>
</li>
<li class="blbl-tougao">
<a href="https://passport.bilibili.com/login?gourl=https%3A%2F%2Faccount.bilibili.com%2Faccount%2Fbig"class="blbl-start-first">投稿</a>
</li>
</ul>
</div>
<!--哔哩哔哩中间部分中第一部分-图片部分-->
<div class="blbl-center-first">
<img src="banner.png" alt="" width="1500" height="106">
</div>
<!--哔哩哔哩中间部分中第二部分-登录部分-->
<div class="blbl-center-second">
——————————————————————————
<span style="font-size:30px;font-weight: 800">
登录
</span>
————————————————————————
</div>
<!--哔哩哔哩中间部分中第三部分-左边部分-->
<div class="blbl-center-third-left">
<img src="towhorse.png" alt=""width="" height="">
</div>
<div class="blbl-footers">
<p class="EWM-text">二维码已失效</p>
<p class="app-link">请使用
<a href="https://app.bilibili.com/" target="_blank" style="color:deepskyblue;">
哔哩哔哩客户端</a><br>扫码登录<br>或扫码下载APP</p>
</div>
<!--哔哩哔哩中间部分中第三部分-右边部分-->
<div class="blbl-center-third-right">
<form action="#" method="post">
<div class="blbl-center-third-right-first">
<span class="blbl-mm">密码登录</span>
</div>
<div class="blbl-center-third-right-second">
<span class="blbl-mm">短信登录</span>
</div>
<div class="blbl-center-third-right-third">
<p>
<input type="text" placeholder="你的手机号/邮箱" class="blbl-username" maxlength="50">
</p>
</div>
<div class="blbl-center-third-right-fourth">
<p>
<input type="password" placeholder="密码"class="blbl-username">
</p>
</div>
<div class="blbl-center-third-right-fifth">
<p>
<input type="checkbox"checked><span id="blbl-jzw">记住我</span>
<span id="blbl-bszjdnsbygxcx">不是自己的电脑上不要勾选此项</span>
<a href="https://www.bilibili.com/blackboard/help.html#/?qid=01c16d22f6bb44fd976e8874142b60b6"
style="font-size: 12px;color: deepskyblue">无法验证？</a>
<a href="https://passport.bilibili.com/register/findpassword.html#/verify?gourl=https%3A%2F%2Fwww.bilibili.com%2F"style="font-size: 12px;color: deepskyblue">忘记密码？</a>
</p>
</div>
<div class="blbl-center-third-right-sixth">
<input type="submit" value="登录" id="blbl-denglu">
<input type="submit" value="注册" id="blbl-zhuce">
</div>
<div class="blbl-center-third-right-seventh">
<img src="weixin1.png" alt="">
<a href="https://open.weixin.qq.com/connect/qrconnect?appid=wxafc256bf83583323&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Flogin%2Fsnsback%3Fsns%3Dwechat%26%26state%3D101371d025b911ec9bed0aa85f24a91a&response_type=code&scope=snsapi_login&state=authorize#wechat_redirect">微信账号登录</a>
<img src="qq1.png" alt="">
<a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=authorize&client_id=101135748&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Flogin%2Fsnsback%3Fsns%3Dqq%26%26state%3D101371d025b911ec9bed0aa85f24a91a&scope=do_like,get_user_info,get_simple_userinfo,get_vip_info,get_vip_rich_info,add_one_blog,list_album,upload_pic,add_album,list_photo,get_info,add_t,del_t,add_pic_t,get_repost_list,get_other_info,get_fanslist,get_idollist,add_idol,del_idol,get_tenpay_addr">QQ账号登录</a>
<img src="weibo1.png" alt="">
<a href="https://api.weibo.com/oauth2/authorize?client_id=2841902482&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Flogin%2Fsnsback%3Fsns%3Dweibo%26state%3D42883ea025bb11ec887cd6f078d7e152&scope=email###">微博账号登录</a>
</div>
</form>
</div>
<!--哔哩哔哩中间部分中第四部分-登录以及到隐私政策部分-->
<div class="blbl-center-fourth">
<p>
<span id="div-blbl-dl">登录即代表你同意</span>
<a href="https://www.bilibili.com/protocal/licence.html"style="color:deepskyblue;font-size: 12px">用户协议</a>
<span id="div-blbl-bl-bl">和</span>
<a href="https://www.bilibili.com/blackboard/privacy-pc.html" style="font-size: 12px;color: deepskyblue">隐私政策</a>
</p>
</div>
<!--哔哩哔哩中间部分中第五部分-哔哩哔哩传送门部分-->
<div class="blbl-center-fifth">
<div class="blbl-center-fifth-left">
<div class="blbl-center-fifth-left-first">
<p>
<span style="color:darkgrey;">bilibili</span>
</p>
</div>
<div class="blbl-center-fifth-left-second">
<p>
<a href="https://www.bilibili.com/blackboard/aboutUs.html" class="blbl-gywm">关于我们</a>
<a href="https://www.bilibili.com/blackboard/friends-links.html"class="blbl-gywm">友情链接</a>
</p>
</div>
<div class="blbl-center-fifth-left-second">
<p>
<a href="https://www.bilibili.com/blackboard/contact.html" class="blbl-gywm">联系我们</a>
<a href="https://www.bilibili.com/blackboard/privacy-pc.html"class="blbl-gywm">隐私政策</a>
</p>
</div>
<div class="blbl-center-fifth-left-second">
<p>
<a href="https://www.bilibili.com/protocal/licence.html" class="blbl-gywm">用户协议</a>
<a href="https://passport.bilibili.com/login?gourl=https%3A%2F%2Faccount.bilibili.com%2Faccount%2Fofficial%2Fhome"class="blbl-gywm">bilibi认证</a>
</p>
</div>
<div class="blbl-center-fifth-left-second">
<p>
<a href="https://www.bilibili.com/blackboard/join.html" class="blbl-gywm">加入我们</a>
<a href="https://ir.bilibili.com/"class="blbl-gywm">Investor Relations</a>
</p>
</div>
</div>
<div class="blbl-center-fifth-right">
<div class="blbl-center-fifth-right-first">
<p>
<span style="color:darkgrey;">传送门</span>
</p>
</div>
<div class="blbl-center-fifth-right-second">
<p>
<a href="https://www.bilibili.com/blackboard/topic/activity-cn8bxPLzz.html"class="blbl-gywm">协议汇总</a>
<a href="https://www.bilibili.com/blackboard/help.html#/?qid=01c16d22f6bb44fd976e8874142b60b6"class="blbl-gywm">帮助中心</a>
<a href="https://www.bilibili.com/blackboard/activity-S1jfy69Jz.html" class="blbl-gywm">名人堂</a>
</p>
</div>
<div class="blbl-center-fifth-right-second">
<p>
<a href="https://www.bilibili.com/blackboard/activity-list.html" class="blbl-gywm">活动中心</a>
<a href="https://t.bilibili.com/topic/name/%E7%94%A8%E6%88%B7%E5%8F%8D%E9%A6%88%E8%AE%BA%E5%9D%9B/feed"class="blbl-gywm">用户反馈论坛</a>
<a href=https://mcn.bilibili.com/studio/mcn/entry" class="blbl-gywm">MCN管理中心</a>
</p>
</div>
<div class="blbl-center-fifth-right-second">
<p>
<a href="https://www.bilibili.com/blackboard/topic_list.html#/" class="blbl-gywm">活动专题页</a>
<a href="https://space.bilibili.com/6823116#/album"class="blbl-gywm">壁纸站</a>
<a href="https://www.bilibili.com/video/BV1Xx411c7cH/"class="blbl-gywm">高级弹幕</a>
</p>
</div>
<div class="blbl-center-fifth-right-second">
<p>
<a href="https://www.bilibili.com/v/copyright/intro/" class="blbl-gywm">侵权申诉</a>
<a href="https://e.bilibili.com/"class="blbl-gywm">广告合作</a>
<a href="https://b.bilibili.com/#/login"class="blbl-gywm">企业号官网</a>
</p>
</div>
</div>
<div class="blbl-center-fifth-third">
<p><img src="xiazai.png" alt=""> <img src="weibo.png" alt=""> <img src="weixin.png" alt=""></p>
<p><a href="https://app.bilibili.com/" class="blbl-gywm">下载App</a>
<a href="https://passport.weibo.com/visitor/visitor?entry=miniblog&a=enter&url=https%3A%2F%2Fweibo.com%2Fbilibiliweb&domain=.weibo.com&sudaref=https%3A%2F%2Fpassport.bilibili.com%2Flogin%3Ffrom_spm_id%3D333.1007.top_bar.login&ua=php-sso_sdk_client-0.6.36&_rand=1633450078.2731" class="blbl-gywm">新浪微博</a>
<a href="" class="blbl-gywm">官方微信</a>
</p>
</div>
</div>
<!--哔哩哔哩结尾部分--合作机构-->
<div class="blbl-footer">
<!--合作机构左边图片-->
<div class="blbl-footer-left">
<img src="partner.png" alt="" width="96" height="75">
<img src="pic962110.png" alt="" width="96"height="35">
</div>
<!--合作机构右边的div-->
<div class="blbl-footer-right">
<p>
<span><a href="https://i0.hdslb.com/bfs/activity-plat/static/20210302/fd61576fc72dac89e5e7763dfd8d7bc7/JzUN7b8Ek.png" target="_blank">营业执照</a></span>
<span>信息网络传播视听节目许可证：0910417</span>
<span>网络文化经营许可证 沪网文【2019】3804-274号</span>
<span>广播电视节目制作经营许可证：（沪）字第01248号</span>
<span>增值电信业务经营许可证 沪B2-20100043</span>
<span>互联网ICP备案：<a href="http://beian.miit.gov.cn/" target="_blank">沪ICP备13002172号-3</a></span>
<span>出版物经营许可证 沪批字第U6699 号</span>
<span>互联网药品信息服务资格证 沪-非经营性-2016-0143</span>
<span>营业性演出许可证 沪市文演（经）00-2253</span>
</p>
<p>违法不良信息举报邮箱：help@bilibili.com |违法不良信息举报电话：4006262233转1</p>
<p><a href="http://www.shjbzx.cn/" target="_blank">
<img src="tu1.png"width="20"height="20" alt="">
上海互联网举报中心</a> | <a href="http://jbts.mct.gov.cn/" target="_blank">12318全国文化市场举报网站</a> |
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011002002436" target="_blank">
<img src="badge.png"width="20"height="20" alt="">
沪公网安备31011002002436号</a> | <a href="mailto:userreport@bilibili.com">儿童色情信息举报专区</a> | <a href="http://www.shdf.gov.cn/shdf/channels/740.html">扫黄打非举报</a></p>
<p>网上有害信息举报专区：<i class="sprite bg3"></i><a href="https://www.12377.cn/" target="_blank">
<img src="tu2.png"width="20"height="20" alt="">
中国互联网违法和不良信息举报中心</a></p>
<p>亲爱的市民朋友，上海警方反诈劝阻电话“96110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。</p>
<p>公司名称：上海宽娱数码科技有限公司|公司地址：上海市杨浦区政立路485号|电话：021-25099888</p>
</div>
</div>
</div>
</body>
</html>
/*start*/
.blbl-start-first{
font-size: 16px;
color: black;
}
.blbl-tougao{
position: relative;
color: #fff;
font-size: 14px;
display: block;
width: 100px;
height: 36px;
line-height: 36px;
text-align: center;
background: #fb7299;
border-radius: 2px;
margin-left: 14px;
}
.blbl-start-dlu{
width: 45px;
height: 45px;
border-radius: 50%;
/*line-height: 45px;*/
font-size: 14px;
color: deepskyblue;
letter-spacing: 0;
background: #e7e7e7;
text-align: center;
font-weight: 600;
}
/*center*/
.blbl-center-first{
}
.blbl-center-second{
margin-left: 222px;
}
/*.blbl-center-third-left*/
.blbl-center-third-left{
width: 210px;
height: 200px;
border: 0px solid red;
margin-left: 400px;
margin-top: 60px;
}
.blbl-footers{
width: 480px;
height: 155px;
background: url(//s1.hdslb.com/bfs/static/passport/static/img/2233login.af9c53d.png) 0 -7px no-repeat;
margin-left: 250px;
}
.EWM-text{
padding-top: 20px;
text-align: center;
color: #222;
font-size: 18px;
letter-spacing: 3px;
margin-bottom: 5px;
}
.app-link{
text-align: center;
color: #717171;
font-size: 14px
}
/*.blbl-center-third-right*/
.blbl-center-third-right{
width: 520px;
height:350px;
border: 0px solid red;
margin-left: 800px;
margin-top: -380px;
background-color: white;
}
.blbl-center-third-right-first{
font-size: 16px;
color: #00BFFF;
margin-left: 80px;
border: 0px solid pink;
}
#input01 {
width: 180px;
height: 30px;
border: 0px solid;
font-size: 15px;
color: #676767;
margin-left: 80px;
}
#input01:hover {
border: 0px;
color: deepskyblue;
}
.blbl-center-third-right-second{
font-size: 16px;
color: #000000;
margin-left: 200px;
border: 0px solid pink;
margin-top: -22px;
}
#input02 {
width: 180px;
height: 30px;
border: 0px solid;
font-size: 15px;
color: #676767;
float: right;
margin-top: -30px;
margin-right: 110px;
}
#input02:hover {
border: 0px;
color: deepskyblue;
}
.blbl-center-third-right-third{
margin-left: 80px;
margin-top: 20px;
}
.blbl-username{
width: 420px;
height: 40px;
border-radius: 3px;
border-color: gainsboro;
}
.blbl-center-third-right-fourth{
margin-left: 80px;
margin-top: 30px;
}
.blbl-username{
width: 420px;
height: 40px;
border-radius: 3px;
border-color: gainsboro;
}
.blbl-center-third-right-fifth{
margin-left: 80px;
margin-top: 30px;
}
#blbl-jzw{
font-size: 12px;
}
#blbl-bszjdnsbygxcx{
font-size: 12px;
color: darkgrey;
}
.blbl-center-third-right-sixth{
margin-left: 65px;
}
#blbl-denglu{
background-color: #00BFFF;
color: white;
font-size: 15px;
width: 200px;
height: 40px;
border-radius: 2px;
border: 0px;
}
#blbl-zhuce{
background-color: white;
color: darkgray;
font-size: 15px;
width: 200px;
height: 40px;
border-radius: 2px;
border: 1px solid darkgrey;
}
.blbl-center-third-right-seventh{
margin-left: 65px;
margin-top: 20px;
}
/*.blbl-center-fourth*/
.blbl-center-fourth{
width: 600px;
height: 30px;
border: 0px solid red;
font-size: 12px;
color: darkgray;
margin-left: 600px;
margin-top: 20px;
}
/*.blbl-center-fifth*/
.blbl-center-fifth {
width: 1500px;
height: 250px;
border: 0px solid red;
background-color: #dcdcdc;
margin-top: -10px;
}
/*.blbl-center-fifth-left*/
.blbl-center-fifth-left{
width: 350px;
height: 220px;
border: 0px solid red;
border-right-color:white ;
margin-left: 300px;
margin-top: 10px;
}
.blbl-center-fifth-left-first{
margin-left: 20px;
}
.blbl-center-fifth-left-second{
margin-left: 20px;
}
.blbl-gywm{
color: #000000;
font-size: 14px;
}.blbl-gywm:hover{
color: deepskyblue;
}
/*.blbl-center-fifth-right*/
.blbl-center-fifth-right{
width: 450px;
height: 220px;
border: 0px solid red;
border-right-color:white ;
margin-left: 660px;
margin-top: -230px;
}
.blbl-center-fifth-right-first{
margin-left: 20px;
}
.blbl-center-fifth-right-second{
margin-left: 20px;
}
.blbl-gywm{
color: #000000;
font-size: 14px;
}.blbl-gywm:hover{
color: deepskyblue;
}
.blbl-center-fifth-third{
width: 420px;
height: 200px;
border: 0px solid red;
border-right-color:white ;
margin-left: 1100px;
margin-top: -220px;
}
/*.blbl-footer*/
.blbl-footer{
width: 1500px;
height: 250px;
border: 0px solid red;
background-color: #dcdcdc;
margin-top: -31px;
}
/*.blbl-footer-left*/
.blbl-footer-left{
width: 100px;
height: 120px;
border: 0px solid red;
margin-left: 350px;
margin-top: 30px;
}
/*.bbl{*/
/* width: 20px;*/
/* height: 150px;*/
/* border-right:1px solid black ;*/
/* border-top:0px solid black;*/
/* border-bottom: 0px solid black;*/
/* border-left: 0px solid black;*/
/* margin-left:700px;*/
/* margin-top: -450px;*/
/*}*/
/*.blbl-footer-right*/
.blbl-footer-right{
width: 800px;
height: 200px;
border: 0px solid red;
color: darkgray;
font-size: 12px;
margin-left: 500px;
margin-top: -120px;
}
/*标签*/
a{
text-decoration: none;
color: darkgray;
font-size:12px;
}
img{
vertical-align: middle;
}
li{
float:left;
list-style:none;
padding:0 5px;
line-height: 30px;
color:#000000;
}
版权声明：本文为H3587005447原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。