家人们，我把B站首页写出来了！！！

在学习HTML5和CSS3的过程中，总是感觉没有一个完全自己做出来的页面，一直在各大网站上面寻找合适的适合自己去仿写的页面代码，奈何找了很久都没有找到，在CSDN上找的各种什么电商页面，小米商城页面之类的，点进去发现博主给出的代码只有一部分的，很多其他的代码都没有给出，这样仿写就完全没办法进行，而在博客园中找到的可以仿写的页面，有些太过于简单，只有一个很基础的页面展示，实在是想找到一个页面稍微长一点的，适合尝试自己写页面的人看的，没找到就没有办法了，只好硬着豆皮自己去尝试写一下了。

因为比较喜欢b站，就决定尝试一下将b站的首页布局页面写一下，没有犹豫就直接开写了，也打算将这个作为自己真正完全独立写页面的第一次，话不多说，直接上代码吧。

<!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="zijixie.css" type="text/css">
</head>
<body>
  <div class="head">
    <!-- 外侧div -->
    <div class="cont1">
        <!-- 左上超链接 -->
        <ul class="menu">
          <li><a href="#">首页</a></li>
          <li><a href="#">番剧</a></li>
          <li><a href="#">直播</a></li>
          <li><a href="#">游戏中心</a></li>
          <li><a href="#">会员购</a></li>
          <li><a href="#">漫画</a></li>
          <li><a href="#">赛事</a></li>
          <li><a href="#">周年庆</a></li>
          <li><a href="#">下载客户端</a></li>
        </ul>
        <!-- 搜索框 -->
        <div class="search">
          <form action="">
            <input class="biaodan" type="text" name="search" placeholder="搜索...">
          </form>
        </div>
        <!-- touxiang -->
        <div class="touxiang">
            <img src="https://i2.hdslb.com/bfs/face/a3f06b22bcaaae794b6711a93a0e29dc2fcfef91.jpg@240w_240h_1c_1s_!web-avatar-nav.avif" alt="touxiang">
        </div>
        <!-- 右边超链接 -->
        <ul class="menuright">
          <li>
            <a href="#"> <img src="./zijixie/member line.svg" alt="小图标"><br><span class="sp1">大会员</span></a>
          </li>
          <li>
            <a href="#"> <img src="./zijixie/wechat line.svg" alt="小图标"><br><span class="sp">消息</span></a>
          </li>
          <li>
            <a href="#"> <img src="./zijixie/wechat channel line.svg" alt="小图标"><br><span class="sp">动态</span></a>
          </li>
          <li>
            <a href="#"> <img src="./zijixie/favorite line.svg" alt="小图标"><br><span class="sp">收藏</span></a>
          </li>
          <li>
            <a href="#"> <img src="./zijixie/cart line.svg" alt="小图标"><br><span class="sp">历史</span></a>
          </li>
          <li>
            <a href="#"> <img src="./zijixie/like line.svg" alt="小图标"><br><span class="sp2">创作中心</span></a>
          </li>
        </ul>
        <!-- 投稿 -->
        <a class="tougao" href="#"><span class="tougao1">投稿</span></a>
        <!-- logo -->
        <a class="logo" href="https://www.bilibili.com/" target="_blank">
          <img src="./zijixie/bilibili.webp" alt="2233">
          <img src="./zijixie/2233.jpg" alt="bilibili">
        </a>
    </div>
  </div>

  <!-- 内容一 -->
  <div class="bozi">
      <!-- 外侧div -->
    <div class="cont2">

        <!-- 左边三个按钮 -->
      <div class="zuosan">

          <a class="zuoa1" href="#">
            <div class="zuo1">
              <img src="./zijixie/menu菜单3.svg">
            </div>
            <div class="zuo11">动态</div>
          </a>

          <a class="zuoa1" href="#">
            <div class="zhong1">
              <img src="./zijixie/star收藏-星.svg">
            </div>
            <div class="zhong11">热门</div>
          </a>

          <a class="zuoa1" href="#">
            <div class="you1">
              <img src="./zijixie/send发送.svg">
            </div>
            <div class="you11">频道</div>
          </a>
      </div>

        <!-- 中间全部按钮 -->
      <div class="zhongjian">
          <ul>
            <li>
              <a href="#">番剧</a>
            </li>
            <li>
              <a href="#">国创</a>
            </li>
            <li>
              <a href="#">综艺</a>
            </li>
            <li>
              <a href="#">动画</a>
            </li>
            <li>
              <a href="#">鬼畜</a>
            </li>
            <li>
              <a href="#">舞蹈</a>
            </li>
            <li>
              <a href="#">娱乐</a>
            </li>
            <li>
              <a href="#">科技</a>
            </li>
            <li>
              <a href="#">美食</a>
            </li>
            <li>
              <a href="#">电影</a>
            </li>
            <li>
              <a href="#">电视剧</a>
            </li>
            <li>
              <a href="#">纪录片</a>
            </li>
            <li>
              <a href="#">游戏</a>
            </li>
            <li>
              <a href="#">音乐</a>
            </li>
            <li>
              <a href="#">影视</a>
            </li>
            <li>
              <a href="#">知识</a>
            </li>
            <li>
              <a href="#">咨询</a>
            </li>
            <li>
              <a href="#">生活</a>
            </li>
            <li>
              <a href="#">时尚</a>
            </li>
            <li>
              <a href="#">更多</a>
            </li>
          </ul>
      </div>

        <!-- 竖直线 -->
      <div class="shuxian"></div>

        <!-- 右边六个按钮 -->
      <div class="youliu">
          <ul>
            <li>
              <a href="#"><img src="./zijixie/报告.svg">
                <div class="wenzi">专栏</div>
              </a>
            </li>
            <li>
              <a href="#"><img src="./zijixie/活动.svg">
                <div class="wenzi">活动</div>
              </a>
            </li>
            <li>
              <a href="#"><img src="./zijixie/社区中心.svg">
                <div class="wenzi">社区</div>
              </a>
            </li>
            <li>
              <a href="#"><img src="./zijixie/直播.svg">
                <div class="wenzi">直播</div>
              </a>
            </li>
            <li>
              <a href="#"><img src="./zijixie/课堂.svg">
                <div class="wenzi">课堂</div>
              </a>
            </li>
            <li>
              <a href="#"><img src="./zijixie/新歌热榜.svg">
                <div class="wenzi">热榜</div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- banner -->
    <div class="banner">
      <ul>
        <li><img src="http://img.netbian.com/file/2023/0705/232649Zh1mG.jpg"></li>
        <li><img src="http://img.netbian.com/file/2023/0707/235106Yxqlc.jpg"></li>
        <li><img src="http://img.netbian.com/file/2023/0704/163037oy7Cf.jpg"></li>
        <li><img src="http://img.netbian.com/file/2023/0522/235702c1FPG.jpg"></li>
        <li><img src="http://img.netbian.com/file/2023/0705/232649Zh1mG.jpg"></li>
      </ul>
    </div>

    <!-- youdaliu -->
    <div class="youdaliu">
      <ul>
        <li>
          <a href="#"><img src="https://i0.hdslb.com/bfs/archive/5a0cdfa6b546fe7a44f3074cd7b0b0ce0b4b62d6.jpg@672w_378h_1c_!web-home-common-cover.avif">
            <br>【鸡你太美】级不要笑挑战！吃饭喝<br>&nbsp水慎入！笑喷了
          </a>
        </li>
        <li>
          <a href="#"><img src="https://i0.hdslb.com/bfs/archive/ed3da4db21439cbc6bc87316e17aea2f310a9fe8.jpg@672w_378h_1c_!web-home-common-cover.avif">
            <br>【罗翔】村民修桥收费被判处寻衅滋<br>&nbsp事，这件事应该如何看？
          </a>
        </li>
        <li>
          <a href="#"><img src="https://i0.hdslb.com/bfs/archive/2abf09944636bba41ef10bd1b5c4cee21e4d19bd.jpg@672w_378h_1c_!web-home-common-cover.avif">
            <br>【全球经典纯音乐】全站最全纯音乐<br>&nbsp合集！直击你的灵魂深处！
          </a>
        </li>
        <li>
          <a href="#"><img src="https://i2.hdslb.com/bfs/archive/76b76c832a0283feccf7ba64993fae7dee5a5cbe.jpg@672w_378h_1c_!web-home-common-cover.avif">
            <br>27年前，4个高中女生随口一唱，竟<br>&nbsp成了几代人的“毕业神曲”
          </a>
        </li>
        <li>
          <a href="#"><img src="https://i2.hdslb.com/bfs/archive/b7ebe00d0106c68267606a87389c82f7b4d0aceb.jpg@672w_378h_1c_!web-home-common-cover.avif">
            <br>【四大名著最燃版】速度与激情pro <br>&nbsp群英战吕布
          </a>
        </li>
        <li>
          <a href="#"><img src="https://i2.hdslb.com/bfs/archive/412701ccffa2602e0038bb30d2ebb216116ed01d.jpg@672w_378h_1c_!web-home-common-cover.avif">
            <br>网易云超火古风歌曲TOP30，开口跪<br>&nbsp系列，戏腔太惊艳了！！
          </a>
        </li>
      </ul>
    </div>

    <!-- xiashi -->
    <div class="xiashi">
      <ul>
        <li>
          <a href="#">
            <img src="https://i1.hdslb.com/bfs/archive/e1ecac877a1475104534d9bc46d94f769e19ac31.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="tu">
            <br>【海芋恋】就得蹦～出110斤的震感⚡⚡
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://i1.hdslb.com/bfs/archive/a495bec4a385934c11aedb750d3a299e135bd044.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="tu">
            <br>一次看完【100部】经典高分港片，开局高能香港经典诡片
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://i0.hdslb.com/bfs/archive/0f43161d81d6105cd0c19ce64f76dd862c710792.png@672w_378h_1c_!web-home-common-cover.avif" alt="tu">
            <br>史上著名的轻音乐~听听有没有你熟悉的
            <br>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://i0.hdslb.com/bfs/live/new_room_cover/f6f203ed6f3851337af6e38204e27eb7f5acc320.jpg@412w_232h_1c.avif" alt="tu">
            <br>砂糖苹果童话故事 银砂糖师与黑妖精
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://i0.hdslb.com/bfs/archive/6cb2a51a3a2f49b263b3632e69fd3832e022e525.jpg@412w_232h_1c.avif" alt="tu">
            <br>爱一定是相互的
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://i0.hdslb.com/bfs/archive/33ca184f631524c1124cde5c5fd095e7c4a6b6c9.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="tu">
            <br>完整版！一口气看完《泰囧》全集解说，天使与魔鬼的灵魂爱恋
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://i0.hdslb.com/bfs/archive/41e9c562be052197a1f008f16f2284706b4a7342.png@412w_232h_1c.avif" alt="tu">
            <br>死的时候，还在这条路上就对了！
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://i0.hdslb.com/bfs/archive/0413d02fe83849d8b51b527479a01c44bd1846a2.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="tu">
            <br>全长133分钟，全程高能！一口气看完沙雕视频《遮天》
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://i0.hdslb.com/bfs/archive/3546473ce856a6bf043ca163af7e74b694a4bf64.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="tu">
            <br>【动画短片】小城车站
          </a>
        </li>
        <li>
          <a href="#">
            <img src="https://i0.hdslb.com/bfs/archive/c390ef7a1201bc9a06ab30ee8e8c84b48951d730.jpg@412w_232h_1c.avif" alt="tu">
            <br>逆天战纪
          </a>
        </li>
      </ul>
    </div>
    <div class="foot">
        <p>页面作者：Mickeybo<br>
        联系方式：16730229302
        &nbsp&nbsp邮箱：mingnaibo@126.com</p>
    </div>
</body>
</html>

以上就是html的代码，图片资源都是直接复制的b站上的图片的资源链接，代码结构比较烂，但是好在终于是实现了页面。

CSS代码如下，样式中可能比较要学习的点就是轮播图这个了，花了很多时间去找如何不使用js,仅用h5和css3就实现轮播图的效果，（其实是自己js学的很烂，还不会用）,终于是找到了用动画的功能可以实现图片轮播的效果，最终效果感觉上也还不错。

*{
    margin: 0;
    padding: 0;
}

.head{
    margin: 0;
    padding: 0;
}
.cont1{
    width: auto;
    height: 160px;
    background-image: url("./zijixie/bilibili14.avif");
    background-position: center;
}
.menu{
    width: 480px;
    height: 30px;
    padding-top: 20px;
    margin-left: 50px;
    float: left;
}
.menu>li{
    list-style-type: none;
    float: left;
    margin-left: 12px;
}
.menu>li>a{
    text-decoration: none;
    color: white;
    font-size: small;
}
.menu>li>a:hover{
    color: red;
    font-size: medium;
}
.search{
    width: 310px;
    height: 50px;
    padding-top: 10px;
    margin-left: 80px;
    overflow: hidden;
    float: left;
}
.search>form>input{
    padding: 15px 120px 10px 5px;
    margin-left: 10px;
    border-radius: 8px;
}
.touxiang{
    width: 40px;
    height: 40px;
    margin: 15px 0 0 50px;
    float: left;
}
.touxiang>img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.menuright{
    width: 360px;
    height: 30px;
    float: left;
    margin-left: 20px;
    margin-top: 15px;
}
.menuright>li{
    margin-left: 30px;
    list-style-type: none;
    float: left;
}
.menuright>li>a{
    font-size: small;
    color: white;
    text-decoration: none;
}
.menuright>li>a:hover{
    color: red;
}
.menuright>li>a>img{
    width: 25px;
    height: 25px;
}
.sp1{
    margin-left: -8px;
}
.sp2{
    margin-left: -12px;
}
.tougao{
    display: block;
    width: 80px;
    height: 30px;
    background-color:#FB7299;
    float: right;
    border-radius: 8px;
    margin-right: 30px;
    margin-top:15px;
    text-decoration: none;
    color: white;
}
.tougao:hover{
    background-color: #e99eb2;
}
.tougao1{
    margin-left: 23px;
    line-height: 30px;
}
.logo{
    display: block;
    width: 220px;
    height: 70px;
    clear: both;
    margin-left: 100px;
}
.logo>img{
    width: 100px;
    height: 70px;
    border-radius: 50%;
}

.bozi{
    margin: 0;
    padding: 0;
}
.cont2{
    width: auto;
    height: 110px;
    background-color: #FFFFFF;
}
.zuosan{
    width: 200px;
    height: 80px;
    float: left;
    margin-left: 60px;
    margin-top: 13px;
}
.zuoa1{
    display: block;
    text-decoration: none;
    margin-top: 8px;
    float: left;
}
.zuo1{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid white;
    background-color: #FF9314;
}
.zuo1>img{
    width: 30px;
    height: 30px;
    margin-left: 10px;
    margin-top: 10px;
}
.zuo11{
    width: 35px;
    height: 20px;
    margin-left: 10px;
}
.zhong1{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-left: 20px;
    border: 1px solid white;
    background-color: #F07775;
}
.zhong1>img{
    width: 30px;
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
}
.zhong11{
    width: 35px;
    height: 20px;
    margin-left: 28px;
}
.you1{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-left: 20px;
    border: 1px solid white;
    background-color: #59CA73;
}
.you1>img{
    width: 30px;
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
}
.you11{
    width: 35px;
    height: 20px;
    margin-left: 30px;
}
.zuo1:hover,.zhong1:hover,.you1:hover{
    background-color: #F5F5F5;
}
.zuo11:hover,.zhong11:hover,.you11:hover{
    color: red;
}

.zhongjian{
    width: 900px;
    height: 80px;
    float: left;
    margin-top: 20px;
    margin-left: 60px;
}
.zhongjian>ul{
    width: 899px;
    height: 79px;
    border: 1px solid white;
}
.zhongjian>ul>li{
    list-style-type: none;
    width: 75px;
    height: 28px;
    border-radius: 7px;
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;
}
.zhongjian>ul>li>a{
    width: 75px;
    text-decoration: none;
    display: inline-block;
    line-height: 28px;
    text-align: center;
    background-color: #E8E9EB;
    border-radius: 7px;
    font-size: small;
    letter-spacing: 3px;
}
.zhongjian>ul>li>a:hover{
    background-color: #F5F5F5;
}
.shuxian{
    width: auto;
    height: 70px;
    margin-top: 20px;
    border-left: 2px solid #E3E5E7;
    float: left;
}
.youliu{
    width: 250px;
    height: 80px;
    margin-top: 13px;
    margin-right: 50px;
    float: right;
}
.youliu>ul{
    width: 250px;
    height: 80px;
}
.youliu>ul>li{
    width: 70px;
    height: 25px;
    list-style-type: none;
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
}
.youliu>ul>li>a{
    text-decoration: none;
}
.youliu>ul>li>a>img{
    width: 35px;
    height: 25px;
    float: left;
}
.wenzi{
    width: 30px;
    height: 20px;
    float: left;
    font-size: small;
    margin-top: 3px;
}
.banner{
    width: 525px;
    height: 380px;
    clear: both;
    margin-left: 65px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    float: left;
}
.banner>ul{
    width: 2625px;
    height: 379px;
    position: absolute;
    animation: myani 18s infinite normal;
}
.banner>ul>li{
    float: left;
}
.banner>ul>li>img{
    width: 525px;
    height: 380px;
}
@keyframes myani{
    0%{
        left: 0;
    }
    25%{
        left: -525px;
    }
    50%{
        left: -1050px;
    }
    75%{
        left: -1575px;
    }
    100%{
        left: -2100px;
    }
}

.youdaliu{
    width: 840px;
    height: 420px;
    float: right;
    margin-right: 70px;
}
.youdaliu>ul{
    width: 839px;
    height: 419px;
}
.youdaliu>ul>li{
    list-style-type: none;
    margin-right: 25px;
    margin-bottom: 10px;
    float: left;
}
.youdaliu>ul li:nth-child(3),.youdaliu>ul li:nth-child(6){
    margin-right: 0;
}
.youdaliu>ul>li>a{
    text-decoration: none;
    color: #3A535E;
    font-size: small;
    font-weight: bold;
}
.youdaliu>ul>li>a:hover{
    color: #02AFEC;
}
.youdaliu>ul>li>a>img{
    width: 260px;
    height: 160px;
    border-radius: 5px;
}

.xiashi{
    width: 1520px;
    height: 550px;
    clear: both;
}
.xiashi>ul{
    width: 1455px;
    height: 499px;
    padding-top: 50px;
    padding-left: 65px;
}
.xiashi>ul>li{
    width: 250px;
    height: 180px;
    list-style-type: none;
    float: left;
    margin-right: 25px;
    margin-bottom: 60px;
}
.xiashi>ul>li>a{
    text-decoration: none;
    color: #3A535E;
    font-size: small;
    font-weight: bold;
}
.xiashi>ul>li>a:hover{
    color: #02AFEC;
}
.xiashi>ul>li>a>img{
    width: 250px;
    height: 160px;
    border-radius: 5px;
}
.foot{
    width: auto;
    height: 80px;
    background-color: #C1C1C1;
    text-align: center;
}
.foot>p{
    display: inline-block;
    line-height: 30px;
    text-align: center;
    margin-top: 15px;
}

页面所有代码就是这些了，html和css的代码没啥结构，看起来比较乱，而且有很多的代码是重复性的，需要优化的地方肯定是还有很多的

这些就放在之后有时间慢慢学习吧。

总体的展示效果，使用录屏软件，录制成gif动图了，放在下面

以上就是制作B站首页面的全部内容了，以后要更加努力才可以，完毕。

posted @ 2023-07-19 15:54 Mickeybo 阅读(357) 评论(0) 编辑收藏举报

刷新页面返回顶部

Mickeybo101

家人们，我把B站首页写出来了！！！

公告