在学习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> 水慎入！笑喷了 </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> 事，这件事应该如何看？ </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> 合集！直击你的灵魂深处！ </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> 成了几代人的“毕业神曲” </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> 群英战吕布 </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> 系列，戏腔太惊艳了！！ </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   邮箱：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站首页面的全部内容了，以后要更加努力才可以，完毕。