本文主要是介绍12.9自制网页（Warma来喽）及周报，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这是我自个写的网页哦
虽然很多是抄袭参考b站的网页
但是怎么说代码还都是俺自个写的嘛，所以就当是我自己做的网页呗~
下面是实际效果参考图
大概是这样
想要实际体验的话那就自己把代码复制到vscode上运行看看吧
下面是代码
HTML部分
<!DOCTYPE html>
<html lang="cmn-hans">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Warma来喽</title><link rel="icon" href="./pictures/哔哩哔哩.ico"><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/mycss.css">
</head>
<body><div class="tou"><div class="left clearfix"><div class="character"><img src="./pictures/头像.webp" alt="就是沃沃头啦"><span>Warma</span></div><div class="dongtai"><i class="iconfont icon-dongtai"></i><span>动态</span></div><div class="tougao"><i class="iconfont icon-tougao"></i><span>投稿</span></div><div class="heji"><i class="iconfont icon-shipinheji"></i><span>合集和列表</span></div><div class="input none"><input type="text" placeholder="随便搜点什么吧，虽然什么也搜不出来（只是现在还不会做啦~）"><i class="iconfont icon-sousuo"></i></div></div><div class="right"><div title="才不是花心，只是兴趣广泛罢了"><p>关注数</p><p>1418</p></div><div title="这么多，厉害吧"><p>粉丝数</p><p>422.3万</p></div><div title="都要数不过来啦"><p>获赞数</p><p>3588.9万</p></div><div title="尖叫！！！"><p>播放数</p><p>3.7亿</p></div></div><div id="besides" title="免责说明">*本页面所有数据截止于2023.12.4</div></div><div class="container"><div class="left1"><span class="advertisement">广告位招租</span></div><div class="right1"><span class="advertisement">广告位招租</span></div><div class="main"><div class="content"><div class="top clearfix"><a href="https://www.bilibili.com/video/BV1Ex4y177xd/?spm_id_from=333.999.0.0" title="爆炸电台 会boom的电台" target="_blank"><img src="./pictures/爆炸电台.webp" alt="爆炸电台 会boom的电台"><div class="dark"></div><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div> </a><div class="word"><a href="https://www.bilibili.com/video/BV1Ex4y177xd/?spm_id_from=333.999.0.0" target="_blank"><h2>【warma爆炸电台】曾经性格阴沉的我正在分享创作心得与日常【第十一期】</h2></a><p><i class="iconfont icon-bofang"></i>214.3万<i class="iconfont icon-danmu" style="margin-left: 10px;"></i><span style="margin-right: 10px;">7.2万</span><span class="time">1-29</span></p><p title="你好~这是我的一期电台节目，现在也已经是第十一期啦，但是即便没看过前面几期也不会影响观看，因为这是个什么都聊聊看的日常电台嘛~这期电台内容非常友好、令人安心，只是偶尔有点“问题”，但好在目前还是处于能安全观看的水平，请来看看吧。录音/视频制作：warma我的微博：_warma_背景插画：认知Renz发光粒子素材：K_Lacid 【视频某处的曲子的staff】翻唱：Warma曲绘：不鱼PV：祈凉_&兽人苦工后期：白萝卜音乐工作室（感谢以上老师的帮助~）">"你好~这是我的一期电台节目，现在也已经是第十一期啦，但是即便没看过前面几期也不会影响观看，因为这是个什么都聊聊看的日常电台嘛~这期电台内容非常友好、令人安心，只是偶尔有点“问题”，但好在目前还是处于能安全观看的水平，请来看看吧。录音/视频制作：warma我的微博：_warma_背景插画：认知Renz发光粒子素材：K_Lacid 【视频某处的曲子的staff】翻唱：Warma曲绘：不鱼PV：祈凉_&兽人苦工后期：白萝卜音乐工作室（感谢以上老师的帮助~）"</p></div> </div><div class="video"><div class="xiaotou clearfix"><div class="left"><h1>TA的视频</h1><span>228</span><span class="checked">最新发布</span><div class="san"></div><span>最多播放</span><span>最多收藏</span></div><div class="right"><div><span><i class="iconfont icon-bofang"></i>播放全部</span></div><div><span>更多 ></span></div></div></div><div class="videos clearfix"><div class="img"><a href="https://www.bilibili.com/video/BV1FB4y1o7Bd/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v1.webp" alt="视频"><h2>【warma】我的工作是：创造BUG！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>164.2万</span><span>10-20</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1L34y1V7YP/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v2.webp" alt="视频"><h2>【warma】泛泛人类不会祈祷【人声本家】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>105.7万</span><span>10-4</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1bj411b7Ds/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v3.webp" alt="视频"><h2>【warma】不要被可爱的外表欺骗了！【游戏杂谈/第三期】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>215万</span><span>10-2</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1ku4y1X7gV/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v4.webp" alt="视频"><h2>【warma/怒九】去逛古怪的摆摊市集！【Vlog】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>167.8万</span><span>8-25</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1S44y1w7n7/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v5.webp" alt="视频"><h2>【warma】400万关注啦！来分享做UP主的心得吧</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>274.7万</span><span>8-8</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1dP411q7AC/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v6.webp" alt="视频"><h2>【warma】狗都要嫌我画画很烂了</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>441.1万</span><span>6-23</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1So4y1A7UM/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v7.webp" alt="视频"><h2>我们用1000多条粉丝评论写了一首歌！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>77.2万</span><span>6-18</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1ro4y1E7c3/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v8.webp" alt="视频"><h2>【warma】捣蛋！我偷走了怒九重要的东西！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>270.1万</span><span>6-9</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1dk4y1L77W/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v9.webp" alt="视频"><h2>【warma】我玩游戏太菜不要笑我！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>257.7万</span><span>5-19</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV12z4y1h72d/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v10.webp" alt="视频"><h2>【warma】这里的陌生人都热情过头了啊啊啊！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>227.4万</span><span>5-7</span></p></div></div></div><div class="video"><div class="xiaotou clearfix"><div class="left"><h1>TA的视频</h1><span>228</span><span class="checked">最新发布</span><div class="san"></div><span>最多播放</span><span>最多收藏</span></div><div class="right"><div><span><i class="iconfont icon-bofang"></i>播放全部</span></div><div><span>更多 ></span></div></div></div><div class="videos clearfix"><div class="img"><a href="https://www.bilibili.com/video/BV1FB4y1o7Bd/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v1.webp" alt="视频"><h2>【warma】我的工作是：创造BUG！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>164.2万</span><span>10-20</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1L34y1V7YP/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v2.webp" alt="视频"><h2>【warma】泛泛人类不会祈祷【人声本家】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>105.7万</span><span>10-4</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1bj411b7Ds/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v3.webp" alt="视频"><h2>【warma】不要被可爱的外表欺骗了！【游戏杂谈/第三期】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>215万</span><span>10-2</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1ku4y1X7gV/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v4.webp" alt="视频"><h2>【warma/怒九】去逛古怪的摆摊市集！【Vlog】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>167.8万</span><span>8-25</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1S44y1w7n7/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v5.webp" alt="视频"><h2>【warma】400万关注啦！来分享做UP主的心得吧</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>274.7万</span><span>8-8</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1dP411q7AC/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v6.webp" alt="视频"><h2>【warma】狗都要嫌我画画很烂了</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>441.1万</span><span>6-23</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1So4y1A7UM/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v7.webp" alt="视频"><h2>我们用1000多条粉丝评论写了一首歌！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>77.2万</span><span>6-18</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1ro4y1E7c3/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v8.webp" alt="视频"><h2>【warma】捣蛋！我偷走了怒九重要的东西！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>270.1万</span><span>6-9</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1dk4y1L77W/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v9.webp" alt="视频"><h2>【warma】我玩游戏太菜不要笑我！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>257.7万</span><span>5-19</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV12z4y1h72d/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v10.webp" alt="视频"><h2>【warma】这里的陌生人都热情过头了啊啊啊！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>227.4万</span><span>5-7</span></p></div></div></div><div class="video"><div class="xiaotou clearfix"><div class="left"><h1>TA的视频</h1><span>228</span><span class="checked">最新发布</span><div class="san"></div><span>最多播放</span><span>最多收藏</span></div><div class="right"><div><span><i class="iconfont icon-bofang"></i>播放全部</span></div><div><span>更多 ></span></div></div></div><div class="videos clearfix"><div class="img"><a href="https://www.bilibili.com/video/BV1FB4y1o7Bd/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v1.webp" alt="视频"><h2>【warma】我的工作是：创造BUG！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>164.2万</span><span>10-20</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1L34y1V7YP/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v2.webp" alt="视频"><h2>【warma】泛泛人类不会祈祷【人声本家】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>105.7万</span><span>10-4</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1bj411b7Ds/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v3.webp" alt="视频"><h2>【warma】不要被可爱的外表欺骗了！【游戏杂谈/第三期】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>215万</span><span>10-2</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1ku4y1X7gV/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v4.webp" alt="视频"><h2>【warma/怒九】去逛古怪的摆摊市集！【Vlog】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>167.8万</span><span>8-25</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1S44y1w7n7/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v5.webp" alt="视频"><h2>【warma】400万关注啦！来分享做UP主的心得吧</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>274.7万</span><span>8-8</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1dP411q7AC/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v6.webp" alt="视频"><h2>【warma】狗都要嫌我画画很烂了</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>441.1万</span><span>6-23</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1So4y1A7UM/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v7.webp" alt="视频"><h2>我们用1000多条粉丝评论写了一首歌！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>77.2万</span><span>6-18</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1ro4y1E7c3/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v8.webp" alt="视频"><h2>【warma】捣蛋！我偷走了怒九重要的东西！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>270.1万</span><span>6-9</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1dk4y1L77W/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v9.webp" alt="视频"><h2>【warma】我玩游戏太菜不要笑我！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>257.7万</span><span>5-19</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV12z4y1h72d/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v10.webp" alt="视频"><h2>【warma】这里的陌生人都热情过头了啊啊啊！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>227.4万</span><span>5-7</span></p></div></div></div><div class="video"><div class="xiaotou clearfix"><div class="left"><h1>TA的视频</h1><span>228</span><span class="checked">最新发布</span><div class="san"></div><span>最多播放</span><span>最多收藏</span></div><div class="right"><div><span><i class="iconfont icon-bofang"></i>播放全部</span></div><div><span>更多 ></span></div></div></div><div class="videos clearfix"><div class="img"><a href="https://www.bilibili.com/video/BV1FB4y1o7Bd/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v1.webp" alt="视频"><h2>【warma】我的工作是：创造BUG！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>164.2万</span><span>10-20</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1L34y1V7YP/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v2.webp" alt="视频"><h2>【warma】泛泛人类不会祈祷【人声本家】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>105.7万</span><span>10-4</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1bj411b7Ds/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v3.webp" alt="视频"><h2>【warma】不要被可爱的外表欺骗了！【游戏杂谈/第三期】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>215万</span><span>10-2</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1ku4y1X7gV/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v4.webp" alt="视频"><h2>【warma/怒九】去逛古怪的摆摊市集！【Vlog】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>167.8万</span><span>8-25</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1S44y1w7n7/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v5.webp" alt="视频"><h2>【warma】400万关注啦！来分享做UP主的心得吧</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>274.7万</span><span>8-8</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1dP411q7AC/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v6.webp" alt="视频"><h2>【warma】狗都要嫌我画画很烂了</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>441.1万</span><span>6-23</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1So4y1A7UM/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v7.webp" alt="视频"><h2>我们用1000多条粉丝评论写了一首歌！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>77.2万</span><span>6-18</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1ro4y1E7c3/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v8.webp" alt="视频"><h2>【warma】捣蛋！我偷走了怒九重要的东西！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>270.1万</span><span>6-9</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1dk4y1L77W/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v9.webp" alt="视频"><h2>【warma】我玩游戏太菜不要笑我！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>257.7万</span><span>5-19</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV12z4y1h72d/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v10.webp" alt="视频"><h2>【warma】这里的陌生人都热情过头了啊啊啊！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>227.4万</span><span>5-7</span></p></div></div></div><div class="video"><div class="xiaotou clearfix"><div class="left"><h1>TA的视频</h1><span>228</span><span class="checked">最新发布</span><div class="san"></div><span>最多播放</span><span>最多收藏</span></div><div class="right"><div><span><i class="iconfont icon-bofang"></i>播放全部</span></div><div><span>更多 ></span></div></div></div><div class="videos clearfix"><div class="img"><a href="https://www.bilibili.com/video/BV1FB4y1o7Bd/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v1.webp" alt="视频"><h2>【warma】我的工作是：创造BUG！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>164.2万</span><span>10-20</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1L34y1V7YP/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v2.webp" alt="视频"><h2>【warma】泛泛人类不会祈祷【人声本家】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>105.7万</span><span>10-4</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1bj411b7Ds/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v3.webp" alt="视频"><h2>【warma】不要被可爱的外表欺骗了！【游戏杂谈/第三期】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>215万</span><span>10-2</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1ku4y1X7gV/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v4.webp" alt="视频"><h2>【warma/怒九】去逛古怪的摆摊市集！【Vlog】</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>167.8万</span><span>8-25</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1S44y1w7n7/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v5.webp" alt="视频"><h2>【warma】400万关注啦！来分享做UP主的心得吧</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>274.7万</span><span>8-8</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1dP411q7AC/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v6.webp" alt="视频"><h2>【warma】狗都要嫌我画画很烂了</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>441.1万</span><span>6-23</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1So4y1A7UM/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v7.webp" alt="视频"><h2>我们用1000多条粉丝评论写了一首歌！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>77.2万</span><span>6-18</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1ro4y1E7c3/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v8.webp" alt="视频"><h2>【warma】捣蛋！我偷走了怒九重要的东西！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>270.1万</span><span>6-9</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV1dk4y1L77W/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v9.webp" alt="视频"><h2>【warma】我玩游戏太菜不要笑我！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>257.7万</span><span>5-19</span></p></div><div class="img"><a href="https://www.bilibili.com/video/BV12z4y1h72d/?spm_id_from=333.999.0.0" target="_blank"><div class="dark"></div><img src="./pictures/v10.webp" alt="视频"><h2>【warma】这里的陌生人都热情过头了啊啊啊！</h2><div class="shichang">01:17:24</div><div class="shaohou"><i class="iconfont icon-bofang"></i><span>稍后再看</span></div></a><p><i class="iconfont icon-bofang"></i><span>227.4万</span><span>5-7</span></p></div></div></div></div><div class="aside"><div class="renzheng"><i class="iconfont icon-equipment_peidian"></i><span>bilibili个人认证：bilibili 知名UP主</span></div><div class="announcement"><h1>公告</h1><p>我的微博 @_warma_</p><p>合作邮箱：chickenfish@vip.qq.com</p><p>淘宝店：沃玛养鸡场</p><p>日常小视频上传到：@warma养鸽场</p><p>头像画师：微博@Dr-H_喵_</p><p>横幅画师：@某黑轩</p></div><div class="live"><h1>直播间</h1><p>主播不在，开播的时候会在动态通知你哦~</p><a href=""><p>前往TA的直播间 ></p></a><div class="fans"><span>已关注</span><span>422.3万</span></div></div><div class="information"><h1>个人资料</h1><p><span class="id">UID</span><span class="number">53456</span></p></div></div></div></div>
</body>
</html>
CSS部分
记得自己加上重置样式表
@import url("//at.alicdn.com/t/c/font_4358371_rh8v9z03pg.css");
.clearfix::after{content: "";display: block;clear: both;
}
/* 公共代码↑ */
html{min-width: 1600px;
}
body{background: #eee;
}
.tou{position: fixed;width: 1300px;top: 0px;left: 0;right: 0;margin: auto;border-bottom: 1px solid #ddd;background: #fff;z-index: 100;
}
.tou img{display: inline-block;border-radius: 50%;width: 50px;height: 50px;
}
.tou .left{margin: 10px 20px;height: 50px;float: left;
}
.tou .right{float: right;margin: 10px 20px;height: 50px;box-sizing: border-box;padding-top: 10px;
}
.tou .left div{float: left;height: 50px;line-height: 50px;margin: 0 20px;cursor: pointer;
}
.tou .left input{border: 1px solid #ccc;border-radius: 15px;width: 400px;
}
.tou .left .input{position: relative;
}
.tou .left .input i{position: absolute;top: 2px;right: 5px;
}
.tou .left div:hover{color: #00a1d6;border-bottom: 2px solid #00a1d6;
}
.tou .left .input.none{border: none;
}
.tou .left .character img{vertical-align: middle;
}
.tou .right div{display: inline-block;text-align: center;font-size: 12px;cursor: pointer;
}.tou .right div p:first-child{color: #aaa;
}
.tou .right div:hover p{color: #00a1d6;
}
#besides{position: absolute;font-size: 8px;color: #ccc;bottom: 0px;right: 0px;cursor: pointer;
}
#besides:hover{color: #00a1d6;
}
.tou .left .dongtai i{color: #fb7299;
}
.tou .left .tougao i{color: #02b5da;
}
.tou .left .heji i{color: #23c9ed;
}
/* tou的样式↑ */
.container{margin-top: 80px;
}
.container .left{float: left;width: 150px;
}
.container .right{float: right;width: 150px;
}
.container .main{overflow: hidden;width: 1300px;margin: auto;position: relative;
}
.container .main .content{background: #fff;width: 1000px;position: relative;
}
.container .main .content .top,.container .main .content .video{margin: 30px;border-bottom: 1px solid #ccc;padding: 10px 0;
}
.container .main .content .top img{width: 300px;
}
.container .main .content .top a{float: left;margin-right: 20px;
}
.container .main .content .top .shichang,.container .main .content .top .shaohou{position: absolute;background: rgba(0, 0, 0, 0.5);top: 150px;right: 675px;color: #fff;font-size: 12px;padding: 2px;border-radius: 3px;
}
.container .main .content .top .shaohou{display: none;
}
.container .main .content .top a:hover .shaohou{display: block;
}
.container .main .content .top a:hover .shichang{display: none;
}
.container .main .content .top a:hover .shaohou span{position: absolute;background: #000;left: -20px;top: -40px;width: 50px;padding: 10px;text-align: center;border-radius: 10px;display: none;
}
.container .main .content .top a:hover .shaohou i:hover~span{display: block;
}
.container .main .content .top a .dark{background: rgba(0, 0, 0, 0.3);width: 300px;height: 168.75px;position: absolute;top: 10px;left: 30px;display: none;
}
.container .main .content .top a:hover .dark{display: block;
}
.container .main .content .top .word{overflow: hidden;
}
.container .main .content .top .word h2{margin: 10px 0;
}
.container .main .content .top .word h2:hover{color: #00a1d6;
}
.container .main .content .top .word p{margin: 10px 0px;
}
.container .main .content .top .word p:nth-of-type(1){color: #bbb;
}
.container .main .content .top .word p:nth-of-type(2){color: #ddd;height: 60px;overflow: hidden;
}
.container .main .content .video h1{font-size: 22px;display: inline-block;margin-right: 5px;cursor: pointer;
}
.container .main .content .video .left{width: 410px;height: 40px;position: relative;
}
.container .main .content .video .left .checked{border-bottom: 1px solid #00a1d6;padding-bottom: 10px;color: #00a1d6;
}
.container .main .content .video .right{width: 300px;height: 40px;
}
.container .main .content .video .left .san{position: absolute;width: 0;height: 0;border-left: 5px solid transparent;border-top: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 5px solid #00a1d6;left: 185px;bottom: 2px;
}
.container .main .content .video .left span{margin: 0 8px;cursor: pointer;
}
.container .main .content .video .right{text-align: right;line-height: 40px;
}
.container .main .content .video .right div{display: inline-block;margin: 0 2px;cursor: pointer;
}
.container .main .content .video .right div:hover span{color: #00a1d6;border-color: #00a1d6;
}
.container .main .content .video .right div span{border: 1px solid #ccc;border-radius: 5px;color: #888;padding: 4px;
}
.container .main .content .video .videos .img{float: left;padding: 10px;position: relative;
}
.container .main .content .video .videos .img img{width: 168px;height: 100px;
}
.container .main .content .video .videos .img h2{width: 168px;box-sizing: border-box;height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.container .main .content .video .videos .img h2:hover{color: #00a1d6;
}
.container .main .content .video .videos .img p{font-size: 12px;color: #aaa;
}
.container .main .content .video .videos .img p span:nth-child(2){margin-right: 20px;
}.container .main .content .video .shichang,.container .main .content .video .shaohou{position: absolute;background: rgba(0, 0, 0, 0.5);top: 85px;right: 15px;color: #fff;font-size: 12px;padding: 2px;border-radius: 3px;
}
.container .main .content .video .shaohou{display: none;
}
.container .main .content .video a:hover .shaohou{display: block;
}
.container .main .content .video a:hover .shichang{display: none;
}
.container .main .content .video a:hover .shaohou span{position: absolute;background: #000;left: -20px;top: -40px;width: 50px;padding: 10px;text-align: center;border-radius: 10px;display: none;
}
.container .main .content .video a:hover .shaohou i:hover~span{display: block;
}
.container .main .content .video a .dark{background: rgba(0, 0, 0, 0.3);width: 168px;height: 100px;position: absolute;top: 10px;left: 10px;display: none;
}
.container .main .content .video a:hover .dark{display: block;
}.container .main .aside{width: 290px;position: absolute;top: 30px;right: 0px;
}
.container .main .aside .renzheng,.container .main .aside .announcement,.container .main .aside .live,.information{height: 60px;background: #fff;box-sizing: border-box;padding: 10px;line-height: 40px;margin-bottom: 10px;
}
.icon-equipment_peidian{background: #e4d833;border-radius: 50%;
}
.container .main .aside .renzheng i{margin-right: 5px;
}
.container .main .aside .announcement{height: 190px;
}
.container .main .aside h1{font-size: 16px;font-weight: bold;border-bottom: 1px solid #ccc;
}
.container .main .aside p{font-size: 12px;line-height: 22px;
}
.container .main .aside .live{height: 150px;text-align: center;position: relative;
}
.container .main .aside .live h1{text-align: left;
}
.container .main .aside .live p{color: #aaa;
}
.container .main .aside .live p:nth-child(2){margin-top: 30px;
}
.container .main .aside .live a p{color: #00a1d6;
}
.container .main .aside .live .fans{position: absolute;font-size: 12px;color: #ccc;right: 20px;top: 20px;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 0 10px;border-radius: 5px;text-align: center;
}
.container .main .aside .live .fans span:first-child{border-right: 1px solid #ccc;padding: 3px 15px;cursor: pointer;
}
.information{height: 100px;
}
.container .main .aside .information h1{font-weight: normal;
}
.container .main .aside .information p{margin: 15px 0;
}
.container .main .aside .information .id{color: #bbb;margin-right: 10px;
}
.container .main .aside .information .number{color: #999;
}
/* container的样式↑ */.container .left1,.container .right1{background: #fff;position: fixed;padding: 10px;
}
.container .right1{right: 0px;
}
.container .left1 .advertisement,.container .right1 .advertisement{display: block;font-size: 50px;width: 50px;margin: auto;color: red;
}
好长的代码呀，是不是
因为是新手嘛，所以写的又长又臭又乱，勉强看看吧
谢谢(￣▽￣)*
这篇关于12.9自制网页（Warma来喽）及周报的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
