當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

模仿blblblbl登录页面

發布時間：2024/1/8 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了模仿blblblbl登录页面小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

css樣式

/*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;}

HTML部分

<!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 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="">上?；ヂ摼W舉報中心</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>

總結

以上是生活随笔為你收集整理的模仿blblblbl登录页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：印度市场救不了苹果手机，也救不了库克
下一篇： 64马8赛道取前4问题