模仿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=""w
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值