本文只用于個人總結備份，如果對你有幫助就更好了，

準備作業

• 準備好簡介要用的的背景圖、頭像圖，上傳到圖床生成圖片鏈接，
• 簡介的內容可分為主播簡介、直播時間、直播內容、聯系方式，內容根據實際需要修改，需要換行的用“<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> 

使用除錯

最終結果如下：

代碼如下：

<!--url后面跟的是背景圖片的地址，width設定背景圖片的寬度，100%為全鋪滿的寬度，height設定背景圖片的高度，如果簡介字很多，230px高度不夠的話可以自己隨便改，改到滿意為止，-->
<div style="width: 100%; height: 210px; background: url('https://i0.hdslb.com/bfs/album/a06561594b26e64db78788ea7512ce65a4ab27dc.jpg') no-repeat 0px 0px; overflow: hidden; background-size: 100%;">
<!--url后面跟的是頭像圖片的地址-->
<div style="background: url('https://i0.hdslb.com/bfs/album/7cc12cb27a9ae2a2fb79a1a0208db7c1e1be7819.png') 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 />在舞臺上握手、打滾、kira~kira！</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/7079069131" target="_blank" rel="noopener noreferrer">汪的一聲嗷</a><br />網易云：<a style="color: #e6afc3;" title="點擊關注網易云" href="https://music.163.com/#/user/home?id=1306304320" target="_blank" rel="noopener noreferrer">嗚米嗷嗷嗷</a><br />QQ：1136102684</div>
</div>  

參考資料

好看的B站直播間簡介代碼
B站簡介-自適應 -最新樣式代碼
B站直播簡介——簡介常用的一些標簽

標籤：其他

上一篇：【內推面試分享】普通本科的螞蟻金服校招面試經驗分享，內附答案

下一篇：Microsoft 365：如何在Word檔案中插入另一個不同檔案內容或者鏈接