制作B站直播简介

本文只用于个人总结备份，如果对你有帮助就更好了。

准备工作

• 准备好简介要用的的背景图、头像图，上传到图床生成图片链接。
• 简介的内容可分为主播简介、直播时间、直播内容、联系方式，内容根据实际需要修改，需要换行的用“<br>”隔开。

注：可在B站发一条有图片的动态，然后用图片的链接（原本是上传到博客园，但博客园有防盗链用不了）。

基础代码

准备一份基础代码上传到B站简介里面，根据需求进行调整,我用的是B站简介-自适应 -最新样式代码这个代码

<div style="width: 100%; height: 230px; background: url('https://www.51tuku.cn/images/2020/02/22/ZXi69.jpg') no-repeat 0px 0px; overflow: hidden; background-size: 100%;">
<div style="background: url('https://www.51tuku.cn/images/2020/02/22/ZXKqV.jpg') no-repeat; background-size: 100%; width: 150px; height: 150px; margin: 4% 0 0 2%; border-radius: 50%; float: left;">&nbsp;</div>
<div style="width: 35%; height: 220px; float: left; background: rgba(138, 186, 206, 0.26); margin: 6px 1% 0  3%; border-radius: 3px;">
<div style="width: 120px; height: 30px; border-radius: 3px; line-height: 30px; text-align: center; background: #FF6666; color: #fff; font-size: 16px; margin: 0 auto; margin-top: 3px;">主播简介</div>
<div style="width: 100%; height: 100px; font-size: 16px; color: #fff; padding: 0 0 0 7px;">一个失踪很久的UP主！<br />游戏玩的菜<br />望大大们勿怪！</div>
<div style="width: 120px; height: 30px; border-radius: 3px; line-height: 30px; text-align: center; background: #FF9966; color: #fff; font-size: 16px; margin: 0 auto;">直播时间</div>
<div style="width: 100%; height: 100px; font-size: 16px; color: #fff; padding: 0 0 0 7px;">随缘直播<br />因为主播也不知道啥时候直播！</div>
</div>
<div style="width: 35%; height: 220px; float: right; background: rgba(138, 186, 206, 0.26); margin: 6px 3% 0  3%; border-radius: 3px;">
<div style="width: 120px; height: 30px; border-radius: 3px; line-height: 30px; text-align: center; background: #AFDCE0; color: #fff; font-size: 16px; margin: 0 auto; margin-top: 3px;">直播内容</div>
<div style="width: 100%; height: 100px; font-size: 16px; color: #fff; padding: 0 0 0 7px;">主玩王者荣耀<br />其他游戏不太会，太菜了！</div>
<div style="width: 120px; height: 30px; border-radius: 3px; line-height: 30px; text-align: center; background: #0099CC; color: #fff; font-size: 16px; margin: 0 auto;">联系方式</div>
<div style="width: 400px; height: 100px; font-size: 16px; color: #fff; padding: 0 0 0 7px;">微博：<a style="color: #e6afc3;" title="点击关注微博" href="https://weibo.com/u/2991913825" target="_blank" rel="noopener noreferrer">我只是路过草丛</a><br />微信：xing1778401974</div>
</div>
<div style="background: url('https://www.51tuku.cn/images/2020/02/22/ZXn3i.jpg') no-repeat; background-size: 100%; width: 200px; height: 200px; margin: 13px 0 0 16px; border-radius: 5px; float: left;">&nbsp;</div>
<span style="position: absolute; bottom: 0px; right: 0px; font-size: 12px; background: rgba(181, 159, 159, 0.33); border-radius: 0px 3px 0px 0px;"> <a style="color: #270e14;" title="制作人员更多请关注https://www.blibili.cn B站简介制作" href="https://live.bilibili.com/49784" target="_blank" rel="noopener noreferrer">孤独木木制作</a> </span></div>

使用调试

最终结果如下：



代码如下：

<div style="width: 100%; height: 210px; background: url('https://i0.hdslb.com/bfs/album/827200ff54f7dcb62f6045f7626fd0abb16451ea.jpg') no-repeat 0px 0px; overflow: hidden; background-size: 100%;">
<div style="background: url('https://i0.hdslb.com/bfs/album/ad1da1f10dc1c888fb5e667c029864d5c20db500.jpg') no-repeat; background-size: 100%; width: 150px; height: 150px; margin: 4% 0 0 2%; border-radius: 50%; float: left;">&nbsp;</div>
<div style="width: 35%; height: 200px; float: left; background: rgba(138, 186, 206, 0.26); margin: 6px 1% 0  3%; border-radius: 3px;">
<div style="width: 120px; height: 30px; border-radius: 3px; line-height: 30px; text-align: center; background: #FF6666; color: #fff; font-size: 16px; margin: 0 auto; margin-top: 3px;">主播简介</div>
<div style="width: 100%; height: 70px; font-size: 16px; color: #fff; padding: 0 0 0 7px;">业余主播<br />未来可能、大概会直播的！</div>
<div style="width: 120px; height: 30px; border-radius: 3px; line-height: 30px; text-align: center; background: #FF9966; color: #fff; font-size: 16px; margin: 0 auto;">直播时间</div>
<div style="width: 100%; height: 70px; font-size: 16px; color: #fff; padding: 0 0 0 7px;">随缘直播<br />因为主播也不知道啥时候直播！</div>
</div>
<div style="width: 35%; height: 200px; float: right; background: rgba(138, 186, 206, 0.26); margin: 6px 3% 0  3%; border-radius: 3px;">
<div style="width: 120px; height: 30px; border-radius: 3px; line-height: 30px; text-align: center; background: #AFDCE0; color: #fff; font-size: 16px; margin: 0 auto; margin-top: 3px;">直播内容</div>
<div style="width: 100%; height: 70px; font-size: 16px; color: #fff; padding: 0 0 0 7px;">主玩守望先锋<br />其他游戏不太会，太菜了！</div>
<div style="width: 120px; height: 30px; border-radius: 3px; line-height: 30px; text-align: center; background: #0099CC; color: #fff; font-size: 16px; margin: 0 auto;">联系方式</div>
<div style="width: 400px; height: 70px; font-size: 16px; color: #fff; padding: 0 0 0 7px;">微博：<a style="color: #e6afc3;" title="点击关注微博" href="https://weibo.com/u/5972970593" target="_blank" rel="noopener noreferrer">时光荏苒-timeflies</a><br />QQ：保密</div>
</div>
</div>

参考资料

好看的B站直播间简介代码

B站简介-样式代码参考

B站简介-自适应 -最新样式代码

B站直播简介——简介常用的一些标签