制作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站直播簡介——簡介常用的一些標簽