用HTML+CSS简单仿制了一个bilibili电脑界面⚆_⚆（做着玩的）
**
效果圖
**：兩邊的的標簽是因為長截圖滑動時，它會跟著一起動，實際并沒有那么長(?･?-･??)，截圖對跟著跑的東西默認截圖成這樣，這頁面里沒有js和輪播，本身想加上去，還是太懶了…
下面上代碼，真的很簡單，沒有一點技術(shù)含量，更像是在拼圖 ( ?˙o?˙? )???，不過代碼超級無敵多，有4000+行，不過大部分都是重復(fù)的。
首先是主體HTML
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>嗶哩嗶哩 (゜-゜)つロ 干杯~-bilibili</title><meta name="description" content="bilibili是國內(nèi)知名的視頻彈幕網(wǎng)站，這里有最及時的動漫新番，最棒的ACG氛圍，最有創(chuàng)意的Up主。大家可以在這里找到許多歡樂。" /><meta name="keywords" content="Bilibili,嗶哩嗶哩,嗶哩嗶哩動畫,嗶哩嗶哩彈幕網(wǎng),彈幕視頻,B站,彈幕,字幕,AMV,MAD,MTV,ANIME,動漫,動漫音樂,游戲,游戲解說,二次元,游戲視頻,ACG,galgame,動畫,番組,新番,初音,洛天依,vocaloid,日本動漫,國產(chǎn)動漫,手機游戲,網(wǎng)絡(luò)游戲,電子競技,ACG燃曲,ACG神曲,追新番,新番動漫,新番吐槽,巡音,鏡音雙子,千本櫻,初音MIKU,舞蹈MMD,MIKUMIKUDANCE,洛天依原創(chuàng)曲,洛天依翻唱曲,洛天依投食歌,洛天依MMD,vocaloid家族,OST,BGM,動漫歌曲,日本動漫音樂,宮崎駿動漫音樂,動漫音樂推薦,燃系mad,治愈系mad,MAD MOVIE,MAD高燃" /><link rel="stylesheet" href="css/detail-description.css" type="text/css" /><link rel="stylesheet" href="css/main-part.css" type="text/css" /></head><body><header><div class="header-Layout"><div class="header-Layout-left"><ul><li><a href="https://www.bilibili.com/">主站</a></li><li><a href="https://www.bilibili.com/anime/?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.2" target="_blank">番劇</a></li><li><a href="https://game.bilibili.com/?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.3" target="_blank">游戲中心</a></li><li><a href="https://live.bilibili.com/?spm_id_from=555.43.b_696e7465726e6174696f6e616c486561646572.26" target="_blank">直播</a></li><li><a href="https://show.bilibili.com/platform/home.html?msource=pc_web&spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.5" target="_blank">會員購</a></li><li><a href="https://manga.bilibili.com/?from=bill_top_mnav&spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.6" target="_blank">漫畫</a></li><li><a href="https://app.bilibili.com/?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.8" target="_blank">下載APP</a></li></ul></div><div class="header-Layout-middle"><form action=""><input class="input-11" type="text" name="the-input" value="" placeholder="歪嘴戰(zhàn)神在b站恰飯的日子" /><input type="submit" value="" class="submit-11" /></form></div><div class="header-Layout-right"><ul><li><a href=""><img src="img/ada.jpg" /></a></li><li><a href="https://account.bilibili.com/account/big" target="_blank">大會員</a></li><li><a href="https://message.bilibili.com/#/reply" target="_blank">消息</a></li><li><a href="https://t.bilibili.com/?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.11" target="_blank">動態(tài)</a></li><li><a href="https://space.bilibili.com/369769759/favlist" target="_blank">收藏</a></li><li><a href="https://www.bilibili.com/account/history" target="_blank">歷史</a></li><li><a href="https://member.bilibili.com/v2?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.12#/home" target="_blank">創(chuàng)作中心</a></li><button><a href="https://member.bilibili.com/v2#/upload/video/frame">投稿</a></button></ul></div></div></header><nav><div class="nav-left"><ul><li><a href="https://www.bilibili.com/v/channel/218245?spm_id_from=333.851.b_7072696d61727950616765546162.4&tab=multiple" target="_blank"><div class="navleft-images-D">頻道</div></a></li><li><a href="https://www.bilibili.com/ranking?spm_id_from=333.851.b_7072696d61727950616765546162.3" target="_blank"><div class="navleft-images-C">排行榜</div></a></li><li><a href="https://t.bilibili.com/?spm_id_from=333.851.b_7072696d61727950616765546162.2" target="_blank"><div class="navleft-images-B">動態(tài)</div></a></li><li><a href="https://www.bilibili.com/" target="_blank"><div class="navleft-images-A">首頁</div></a></li></ul></div><div class="nav-middle"><ul><li><a href="https://www.bilibili.com/v/douga/?spm_id_from=333.851.b_7072696d6172794368616e6e656c4d656e75.1" target="_blank"><span>動畫</span><span class="nav-middle-number">999+</span></a></li><li><a href="https://www.bilibili.com/v/music/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.9" target="_blank"><span>音樂</span><span class="nav-middle-number">999+</span></a></li><li><a href="https://www.bilibili.com/v/dance/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.24" target="_blank"><span>舞蹈</span><span class="nav-middle-number">999+</span></a></li><li><a href="https://www.bilibili.com/v/technology/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.45" target="_blank"><span>知識</span><span class="nav-middle-number">999+</span></a></li><li><a href="https://www.bilibili.com/v/life/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.57" target="_blank"><span>生活</span><span class="nav-middle-number">999+</span></a></li><li><a href="https://www.bilibili.com/v/fashion/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.77" target="_blank"><span>時尚</span><span class="nav-middle-number">999+</span></a></li><li><a href="https://www.bilibili.com/v/ent/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.83" target="_blank"><span>娛樂</span><span class="nav-middle-number">999+</span></a></li><li><a href="https://www.bilibili.com/cinema/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.96" target="_blank"><span>放映廳</span><span class="nav-middle-number">112</span></a></li><li><a href="https://www.bilibili.com/v/life/animal#/" target="_blank"><span>動物圈</span><span class="nav-middle-number">999+</span></a></li><!--<li><a href="https://www.bilibili.com/v/game/stand_alone#/"target="_blank"><span>單機游戲</span><span class="nav-middle-number">999+</span></a></li>--><li><a href="https://www.bilibili.com/anime/?spm_id_from=333.6.b_7072696d6172794368616e6e656c4d656e75.8" target="_blank"><span>番劇</span><span class="nav-middle-number">107</span></a></li><li><a href="https://www.bilibili.com/guochuang/?spm_id_from=666.4.b_7072696d6172794368616e6e656c4d656e75.26" target="_blank"></a><span>國創(chuàng)</span><span class="nav-middle-number">304</span></li><li><a href="https://www.bilibili.com/v/game/?spm_id_from=666.5.b_7072696d6172794368616e6e656c4d656e75.34" target="_blank"><span>游戲</span><span class="nav-middle-number">999+</span></a></li><!--<li><a href="https://www.bilibili.com/v/digital/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.49"target="_blank"><span>數(shù)碼</span><span class="nav-middle-number">939</span></a></li>--><li><a href="https://www.bilibili.com/v/kichiku/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.68" target="_blank"><span>鬼畜</span><span class="nav-middle-number">105</span></a></li><li><a href="https://www.bilibili.com/v/information/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.83" target="_blank"><span>資訊</span><span class="nav-middle-number">332</span></a></li><li><a href="https://www.bilibili.com/v/cinephile/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.87" target="_blank"><span>影視</span><span class="nav-middle-number">999+</span></a></li><li><a href="https://www.bilibili.com/v/life/funny#/" target="_blank"><span>搞笑</span><span class="nav-middle-number">999+</span></a></li><li><a href="https://www.bilibili.com/v/food" target="_blank"><span>美食</span><span class="nav-middle-number">999+</span></a></li><li><a href="https://www.bilibili.com/v/life/daily/#/530003" target="_blank"><span>VLOG</span></a></li></ul></div><div class="nav-right"><ul><li><a href=""><div class="navright-image-A">專欄</div></a></li><li><a href=""><div class="navright-image-B">活動</div></a></li><li><a href=""><div class="navright-image-C">小黑屋</div></a></li><li><a href=""><div class="navright-image-D">直播</div></a></li><li><a href=""><div class="navright-image-E">課堂</div></a></li><li><a href=""><div class="navright-image-F">音樂PLUS</div></a></li></ul></div></nav><article><div class="article-left"><div><a href="https://www.bilibili.com/v/customer-service">聯(lián)系客服</a></div></div><div class="article-middle"><div class="article-middle-00"><div class="articlemiddle-00-left"></div><div class="articlemiddle-00-right"><ul><li><a href="https://www.bilibili.com/video/BV1Sf4y1D7H1"><p><span>【圍爐夜話】魯迅是被吹捧出來的嗎？（談魯迅1）<br><span style="border: 1px solid white;border-radius: 3px">up</span>智能路障<br>42.9w播放</span></p></a></li><li><a href="https://www.bilibili.com/video/BV1Sf4y1D7H1"><p><span>【圍爐夜話】魯迅是被吹捧出來的嗎？（談魯迅1）<br><span style="border: 1px solid white;border-radius: 3px">up</span>智能路障<br>42.9w播放</span></p></a></li><li><a href="https://www.bilibili.com/video/BV1Sf4y1D7H1"><p><span>【圍爐夜話】魯迅是被吹捧出來的嗎？（談魯迅1）<br><span style="border: 1px solid white;border-radius: 3px">up</span>智能路障<br>42.9w播放</span></p></a></li><li><a href="https://www.bilibili.com/video/BV1Sf4y1D7H1"><p><span>【圍爐夜話】魯迅是被吹捧出來的嗎？（談魯迅1）<br><span style="border: 1px solid white;border-radius: 3px">up</span>智能路障<br>42.9w播放</span></p></a></li><li><a href="https://www.bilibili.com/video/BV1Sf4y1D7H1"><p><span>【圍爐夜話】魯迅是被吹捧出來的嗎？（談魯迅1）<br><span style="border: 1px solid white;border-radius: 3px">up</span>智能路障<br>42.9w播放</span></p></a></li><li><a href="https://www.bilibili.com/video/BV1Sf4y1D7H1"><p><span>【圍爐夜話】魯迅是被吹捧出來的嗎？（談魯迅1）<br><span style="border: 1px solid white;border-radius: 3px">up</span>智能路障<br>42.9w播放</span></p></a></li></ul></div></div><div class="article-middle-01"><div class="article-middle-01-A"><ul><li class="article-middle01-Aleft">推廣</li><li class="article-middle01-Amid"><a href="">每逢開學(xué)胖10斤</a></li><li class="article-middle01-Amid"><a href="">配音還能這樣玩？</a></li></ul><div class="article-middle01-Aright"><button>在線列表</button></div></div><div class="article-middle-01-B"><div class="article-middle-01-B-left"><ul><li><a href="https://www.bilibili.com/video/BV1yi4y177vY?spm_id_from=333.851.b_7265706f7274466972737432.6"><img src="img/小貓咪.jpg" /><div class="article-middle-01-B-left--top">【張超】清早起來 旁邊圍著一群貓是什么感受？</div><div class="article-middle-01-B-left--bottom"><a href="https://space.bilibili.com/491671795/?spm_id_from=333.851.b_7265706f7274466972737432.7"><span>up</span>張超_baritone</a></div></a></li><li><a href="https://www.bilibili.com/video/BV1yi4y177vY?spm_id_from=333.851.b_7265706f7274466972737432.6"><img src="img/小貓咪.jpg" /><div class="article-middle-01-B-left--top">【張超】清早起來 旁邊圍著一群貓是什么感受？</div><div class="article-middle-01-B-left--bottom"><a href="https://space.bilibili.com/491671795/?spm_id_from=333.851.b_7265706f7274466972737432.7"><span>up</span>張超_baritone</a></div></a></li><li><a href="https://www.bilibili.com/video/BV1yi4y177vY?spm_id_from=333.851.b_7265706f7274466972737432.6"><img src="img/小貓咪.jpg" /><div class="article-middle-01-B-left--top">【張超】清早起來 旁邊圍著一群貓是什么感受？</div><div class="article-middle-01-B-left--bottom"><a href="https://space.bilibili.com/491671795/?spm_id_from=333.851.b_7265706f7274466972737432.7"><span>up</span>張超_baritone</a></div></a></li><li><a href="https://www.bilibili.com/video/BV1yi4y177vY?spm_id_from=333.851.b_7265706f7274466972737432.6"><img src="img/小貓咪.jpg" /><div class="article-middle-01-B-left--top">【張超】清早起來 旁邊圍著一群貓是什么感受？</div><div class="article-middle-01-B-left--bottom"><a href="https://space.bilibili.com/491671795/?spm_id_from=333.851.b_7265706f7274466972737432.7"><span>up</span>張超_baritone</a></div></a></li></ul></div><a href="https://www.bilibili.com/read/cv7529071?from=1002&spm_id_from=333.851.b_7265706f7274466972737432.17"><div class="article-middle-01-B-right"></div></a></div></div><!--橫條廣告1--><a href="https://pro.jd.com/mall/active/SiW9ix69AMqDQ9tVFcYZQntcSvP/index.html"><div class="article-middle-advertisementA"></div></a><!--直播板塊--><div class="article-middle-LivingStream"><div class="articlemiddle-LivingStream-left"><div class="articlemiddle-LivingStream-leftTop"><ul><li class="LivingStream-A1-left">正在直播</li><li><p>當(dāng)前共有 4468 個在線直播</p></li><li><a><button class="button-1">換一換</button></a><a href="https://live.bilibili.com/?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.2" target="_blank"><button class="button-2">更多 ></button></a></li></ul></div><!--第一行圖片--><div class="articlemiddle-LivingStream-leftBottom"><ul><li><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><img src="img/豹貓研究所.png" /><div class="articlemiddle-LivingStream-leftBottom--top">一袋名貓研究所?(? ?? ??)?，人類！顫抖吧！！</div><div class="articlemiddle-LivingStream-leftBottom--bottom"><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><span>up</span>豹貓的日常生活~<br><p>萌寵</p></a></div></a></li><li><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><img src="img/豹貓研究所.png" /><div class="articlemiddle-LivingStream-leftBottom--top">一袋名貓研究所?(? ?? ??)?，人類！顫抖吧！！</div><div class="articlemiddle-LivingStream-leftBottom--bottom"><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><span>up</span>豹貓的日常生活~<br><p>萌寵</p></a></div></a></li><li><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><img src="img/豹貓研究所.png" /><div class="articlemiddle-LivingStream-leftBottom--top">一袋名貓研究所?(? ?? ??)?，人類！顫抖吧！！</div><div class="articlemiddle-LivingStream-leftBottom--bottom"><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><span>up</span>豹貓的日常生活~<br><p>萌寵</p></a></div></a></li><li><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><img src="img/豹貓研究所.png" /><div class="articlemiddle-LivingStream-leftBottom--top">一袋名貓研究所?(? ?? ??)?，人類！顫抖吧！！</div><div class="articlemiddle-LivingStream-leftBottom--bottom"><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><span>up</span>豹貓的日常生活~<br><p>萌寵</p></a></div></a></li></ul></div><!--第二行圖片,直接復(fù)制上面一段代碼--><div class="articlemiddle-LivingStream-leftBottom"><ul><li><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><img src="img/豹貓研究所.png" /><div class="articlemiddle-LivingStream-leftBottom--top">一袋名貓研究所?(? ?? ??)?，人類！顫抖吧！！</div><div class="articlemiddle-LivingStream-leftBottom--bottom"><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><span>up</span>豹貓的日常生活~<br><p>萌寵</p></a></div></a></li><li><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><img src="img/豹貓研究所.png" /><div class="articlemiddle-LivingStream-leftBottom--top">一袋名貓研究所?(? ?? ??)?，人類！顫抖吧！！</div><div class="articlemiddle-LivingStream-leftBottom--bottom"><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><span>up</span>豹貓的日常生活~<br><p>萌寵</p></a></div></a></li><li><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><img src="img/豹貓研究所.png" /><div class="articlemiddle-LivingStream-leftBottom--top">一袋名貓研究所?(? ?? ??)?，人類！顫抖吧！！</div><div class="articlemiddle-LivingStream-leftBottom--bottom"><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><span>up</span>豹貓的日常生活~<br><p>萌寵</p></a></div></a></li><li><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><img src="img/豹貓研究所.png" /><div class="articlemiddle-LivingStream-leftBottom--top">一袋名貓研究所?(? ?? ??)?，人類！顫抖吧！！</div><div class="articlemiddle-LivingStream-leftBottom--bottom"><a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank"><span>up</span>豹貓的日常生活~<br><p>萌寵</p></a></div></a></li></ul></div></div><div class="article-middle-LivingStream-A1right"><div class="articlemiddle-LivingStream-A1right-top"><span><a>直播排行</a></span><span><a>關(guān)注的主播</a></span><span style="border-bottom: solid 1px dodgerblue;color: dodgerblue;padding-bottom: 5px;"><a>為你推薦</a></span></div><div class="articlemiddle-LivingStream-A1right-bottom"><a href="https://www.bilibili.com/blackboard/live/activity-gwKxu9qvU.html?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.23"><img src="img/CSGO擂臺挑戰(zhàn)賽.jpg" /></a></div></div></div><!--動畫板塊--><div class="article-middle-Animation"><div class="articlemiddle-Animation-left"><div class="articlemiddle-Animation-leftTop"><ul><li class="Animation-A1-left">動畫</li><li><!-- <p >當(dāng)前共有 4468 個在線直播</p>--></li><li><a><button class="Animation-button-1">換一換</button></a><a href="https://live.bilibili.com/?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.2" target="_blank"><button class="Animation-button-2">更多 ></button></a></li></ul></div><!--第一行圖片--><div class="articlemiddle-Animation-leftBottom"><ul><li><a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank"><img src="img/前方核能.png" /><div class="articlemiddle-Animation-leftBottom--top">轟動全網(wǎng)！當(dāng)初看過這片的人都說了句臥槽！</div><div class="articlemiddle-Animation-leftBottom--bottom"><a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.26" target="_blank"><span>up</span>LexBurner<br><!--<p>萌寵</p>--></a></div></a></li><li><a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank"><img src="img/前方核能.png" /><div class="articlemiddle-Animation-leftBottom--top">轟動全網(wǎng)！當(dāng)初看過這片的人都說了句臥槽！</div><div class="articlemiddle-Animation-leftBottom--bottom"><a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.26" target="_blank"><span>up</span>LexBurner<br><!--<p>萌寵</p>--></a></div></a></li><li><a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank"><img src="img/前方核能.png" /><div class="articlemiddle-Animation-leftBottom--top">轟動全網(wǎng)！當(dāng)初看過這片的人都說了句臥槽！</div><div class="articlemiddle-Animation-leftBottom--bottom"><a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.26" target="_blank"><span>up</span>LexBurner<br><!--<p>萌寵</p>--></a></div></a></li><li><a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank"><img src="img/前方核能.png" /><div class="articlemiddle-Animation-leftBottom--top">轟動全網(wǎng)！當(dāng)初看過這片的人都說了句臥槽！</div><div class="articlemiddle-Animation-leftBottom--bottom"><a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.26" target="_blank"><span>up</span>LexBurner<br><!--<p>萌寵</p>--></a></div></a></li></ul></div><!--第二行圖片,直接復(fù)制上面一段代碼--><div class="articlemiddle-Animation-leftBottom"><ul><li><a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank"><img src="img/前方核能.png" /><div class="articlemiddle-Animation-leftBottom--top">轟動全網(wǎng)！當(dāng)初看過這片的人都說了句臥槽！</div><div class="articlemiddle-Animation-leftBottom--bottom"><a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.26" target="_blank"><span>up</span>LexBurner<br><!--<p>萌寵</p>--></a></div></a></li><li><a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank"><img src="img/前方核能.png" /><div class="articlemiddle-Animation-leftBottom--top">轟動全網(wǎng)！當(dāng)初看過這片的人都說了句臥槽！</div><div class="articlemiddle-Animation-leftBottom--bottom"><a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.26" target="_blank"><span>up</span>LexBurner<br><!--<p>萌寵</p>--></a></div></a></li><li><a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank"><img src="img/前方核能.png" /><div class="articlemiddle-Animation-leftBottom--top">轟動全網(wǎng)！當(dāng)初看過這片的人都說了句臥槽！</div><div class="articlemiddle-Animation-leftBottom--bottom"><a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.26" target="_blank"><span>up</span>LexBurner<br><!--<p>萌寵</p>--></a></div></a></li><li><a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank"><img src="img/前方核能.png" /><div class="articlemiddle-Animation-leftBottom--top">轟動全網(wǎng)！當(dāng)初看過這片的人都說了句臥槽！</div><div class="articlemiddle-Animation-leftBottom--bottom"><a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.26" target="_blank"><span>up</span>LexBurner<br><!--<p>萌寵</p>--></a></div></a></li></ul></div></div><div class="article-middle-Animation-A1right"><div class="articlemiddle-Animation-A1right-top">排行榜<a href=" https://www.bilibili.com/ranking/all/1/0/3?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.39"><button style="margin-left: 10px;">更多 ></button></a></div><div class="articlemiddle-Animation-A1right-bottom"><ul><li><div class="Animation-ranklistNumber-topthree">1</div><div class="Animation-ranklistNumber-Topest"><div class="Animation-ranklistNumber-TopestLeft"><a target="_blank" href="https://www.bilibili.com/video/BV1Dz4y1Q7pi"><img src="img/布加拉提.png"/></a></div><div class="Animation-ranklistNumber-TopestRight"><div class="TopestRight-A"><a href="https://www.bilibili.com/video/BV1Dz4y1Q7pi">【跨次元】布 加 拉 提</a></div><div class="TopestRight-B">綜合得分：406.2萬</div></div></div></li><li><div class="Animation-ranklistNumber-topthree">2</div><a target="_blank" href="https://www.bilibili.com/video/BV1d5411b745?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.42">學(xué)到了！柯南竟推理出小蘭內(nèi)衣情況【閱片無數(shù)動漫篇10】</a></li><li><div class="Animation-ranklistNumber-topthree">3</div><a target="_blank" href="https://www.bilibili.com/video/BV1J541187uD?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.43">評分6.5! 爛俗之極的動畫！卻改變了整個業(yè)界！【誠實吐槽】</a></li><li><div class="Animation-ranklistNumber-extra">4</div><a target="_blank" href="https://www.bilibili.com/video/BV1di4y177n1?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.44">蝙蝠俠：這個可比貓女帶勁多了！</a></li><li><div class="Animation-ranklistNumber-extra">5</div><a target="_blank" href="https://www.bilibili.com/video/BV16i4y177Uc?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.45">克蘇魯神話入門，“陰樂”鬼才，死后拉琴《埃里奇·贊之曲》</a></li><li><div class="Animation-ranklistNumber-extra">6</div><a target="_blank" href="https://www.bilibili.com/video/BV1554y1y7hw?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.46">艦長身份終于揭秘？！崩壞3新劇情福利全梳理！「崩壞3劇情講堂#08」</a></li><li><div class="Animation-ranklistNumber-extra">7</div><a target="_blank" href="https://www.bilibili.com/video/BV1pK4y1a7Gu?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.47">前方核能！讓傲慢的神明徹底失業(yè)，她是象征惡魔的少女</a></li><li><div class="Animation-ranklistNumber-extra">8</div><a target="_blank" href="https://www.bilibili.com/video/BV1Vz4y1Z7LL?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.48">當(dāng)代大學(xué)生畢業(yè)現(xiàn)狀</a></li><li><div class="Animation-ranklistNumber-extra">9</div><a target="_blank" href="https://www.bilibili.com/video/BV1Ak4y1C7gK?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.50">dio你這瓜保熟嗎</a></li></ul></div></div></div><!--橫條廣告2--><a href="https://mz.tanzhouedu.com/?s=a88c93826434d765&track_id=HlKGoGdqtyuBhQYQ1WDD5gPPpiRBsVAS2nm0iD90Mrhg4CDd4_VfEcfyguwLi5l7Nh9PjyeCpiewP0HtENxSn2Y1TKY-PQMI92w78UORTh0IxjACOoctJeVzgfRZxdV49N2k_cuzVjVyo5zEJ023dKCu2qrbr5KlqHiUKLnRwwEviaGIOBGx5U4P-6Djy3HG"><div class="article-middle-advertisementB"></div></a><!--國漫原創(chuàng)相關(guān)--><div class="article-middle-Domestic"><div class="articlemiddle-Domestic-left"><div class="articlemiddle-Domestic-leftTop"><ul><li class="Domestic-A1-left">國產(chǎn)原創(chuàng)相關(guān)</li><li><!--<p>當(dāng)前共有 4468 個在線直播</p>--></li><li><a><button class="Domestic-button-1">換一換</button></a><a href="https://live.bilibili.com/?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.2" target="_blank"><button class="Domestic-button-2">更多 ></button></a></li></ul></div><!--第一行圖片--><div class="articlemiddle-Domestic-leftBottom"><ul><li><a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank"><img src="img/與君共勉.jpg" /><div class="articlemiddle-Domestic-leftBottom--top">與 君 共 勉，覺 化 成 仙</div><div class="articlemiddle-Domestic-leftBottom--bottom"><a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank"><span>up</span>萊落ii<br><!--<p>萌寵</p>--></a></div></a></li><li><a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank"><img src="img/與君共勉.jpg" /><div class="articlemiddle-Domestic-leftBottom--top">與 君 共 勉，覺 化 成 仙</div><div class="articlemiddle-Domestic-leftBottom--bottom"><a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank"><span>up</span>萊落ii<br><!--<p>萌寵</p>--></a></div></a></li><li><a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank"><img src="img/與君共勉.jpg" /><div class="articlemiddle-Domestic-leftBottom--top">與 君 共 勉，覺 化 成 仙</div><div class="articlemiddle-Domestic-leftBottom--bottom"><a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank"><span>up</span>萊落ii<br><!--<p>萌寵</p>--></a></div></a></li><li><a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank"><img src="img/與君共勉.jpg" /><div class="articlemiddle-Domestic-leftBottom--top">與 君 共 勉，覺 化 成 仙</div><div class="articlemiddle-Domestic-leftBottom--bottom"><a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank"><span>up</span>萊落ii<br><!--<p>萌寵</p>--></a></div></a></li></ul></div><!--第二行圖片,直接復(fù)制上面一段代碼--><div class="articlemiddle-Domestic-leftBottom"><ul><li><a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank"><img src="img/與君共勉.jpg" /><div class="articlemiddle-Domestic-leftBottom--top">與 君 共 勉，覺 化 成 仙</div><div class="articlemiddle-Domestic-leftBottom--bottom"><a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank"><span>up</span>萊落ii<br><!--<p>萌寵</p>--></a></div></a></li><li><a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank"><img src="img/與君共勉.jpg" /><div class="articlemiddle-Domestic-leftBottom--top">與 君 共 勉，覺 化 成 仙</div><div class="articlemiddle-Domestic-leftBottom--bottom"><a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank"><span>up</span>萊落ii<br><!--<p>萌寵</p>--></a></div></a></li><li><a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank"><img src="img/與君共勉.jpg" /><div class="articlemiddle-Domestic-leftBottom--top">與 君 共 勉，覺 化 成 仙</div><div class="articlemiddle-Domestic-leftBottom--bottom"><a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank"><span>up</span>萊落ii<br><!--<p>萌寵</p>--></a></div></a></li><li><a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank"><img src="img/與君共勉.jpg" /><div class="articlemiddle-Domestic-leftBottom--top">與 君 共 勉，覺 化 成 仙</div><div class="articlemiddle-Domestic-leftBottom--bottom"><a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank"><span>up</span>萊落ii<br><!--<p>萌寵</p>--></a></div></a></li></ul></div></div><div class="article-middle-Domestic-A1right"><div class="articlemiddle-Domestic-A1right-top">排行榜<a target="_blank" href=" https://www.bilibili.com/ranking/all/168/0/3?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.85"><button style="margin-left: 10px;">更多 ></button></a></div><div class="articlemiddle-Domestic-A1right-bottom"><ul><li><div class="Domestic-ranklistNumber-topthree">1</div><div class="Domestic-ranklistNumber-Topest"><div class="Domestic-ranklistNumber-TopestLeft"><a target="_blank" href="https://www.bilibili.com/video/BV1rZ4y1N7gt"><img src="img/王也.png"/></a></div><div class="Domestic-ranklistNumber-TopestRight"><div class="TopestRight-A"><a href="https://www.bilibili.com/video/BV1rZ4y1N7gt">【高燃/踩點】當(dāng)國產(chǎn)動畫遇上嗩吶，瞬間燃爆"</a></div><div class="TopestRight-B">綜合得分：212.6萬</div></div></div></li><li><div class="Domestic-ranklistNumber-topthree">2</div><a target="_blank" href="https://www.bilibili.com/video/BV1d5411b745?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.42">修仙界的扛把子，凡人流的開山鼻祖，讓粉絲苦等多年的《凡人修仙傳》</a></li><li><div class="Domestic-ranklistNumber-topthree">3</div><a target="_blank" href="https://www.bilibili.com/video/BV1J541187uD?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.43">瀟灑哥辣評《凡人修仙傳》【國動萬象】</a></li><li><div class="Domestic-ranklistNumber-extra">4</div><a target="_blank" href="https://www.bilibili.com/video/BV1di4y177n1?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.44">《神探威威貓》這部神作不是我吹，幾乎一集死一個劇情太大膽了</a></li><li><div class="Domestic-ranklistNumber-extra">5</div><a target="_blank" href="https://www.bilibili.com/video/BV16i4y177Uc?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.45">同人VS正版，這部國漫從3.8到9.8經(jīng)歷了什么？異常生物見聞錄的神級逆轉(zhuǎn)</a></li><li><div class="Domestic-ranklistNumber-extra">6</div><a target="_blank" href="https://www.bilibili.com/video/BV1554y1y7hw?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.46">【斗羅大陸】122集！小舞回歸！5年后的小舞竟如此驚艷！</a></li><li><div class="Domestic-ranklistNumber-extra">7</div><a target="_blank" href="https://www.bilibili.com/video/BV1pK4y1a7Gu?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.47">用核爆神曲來打開喜羊羊！！</a></li><li><div class="Domestic-ranklistNumber-extra">8</div><a target="_blank" href="https://www.bilibili.com/video/BV1Vz4y1Z7LL?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.48">【斗羅大陸】沒看錯。就是一集封神！播放破億</a></li><li><div class="Domestic-ranklistNumber-extra">9</div><a target="_blank" href="https://www.bilibili.com/video/BV1Ak4y1C7gK?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.50">解析絕活爺陸瑾的逆生三重，含三化一 順人逆仙！</a></li></ul></div></div></div><!--音樂版塊--><div class="article-middle-Music"><div class="articlemiddle-Music-left"><div class="articlemiddle-Music-leftTop"><ul><li class="Music-A1-left">音樂</li><li><!--<p>當(dāng)前共有 4468 個在線直播</p>--></li><li><a><button class="Music-button-1">換一換</button></a><a href="https://www.bilibili.com/v/music?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.2" target="_blank"><button class="Music-button-2">更多 ></button></a></li></ul></div><!--第一行圖片--><div class="articlemiddle-Music-leftBottom"><ul><li><a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank"><img src="img/耳機超享受.png" /><div class="articlemiddle-Music-leftBottom--top">【聽歌向】戴上耳機，享受世界 12個小時超<!--級大滿足作業(yè)BGM 前二十期大合集！！！！！！"--></div><div class="articlemiddle-Music-leftBottom--bottom"><a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank"><span>up</span>佻-丞<br></a></div></a></li><li><a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank"><img src="img/耳機超享受.png" /><div class="articlemiddle-Music-leftBottom--top">【聽歌向】戴上耳機，享受世界 12個小時超<!--級大滿足作業(yè)BGM 前二十期大合集！！！！！！"--></div><div class="articlemiddle-Music-leftBottom--bottom"><a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank"><span>up</span>佻-丞<br></a></div></a></li><li><a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank"><img src="img/耳機超享受.png" /><div class="articlemiddle-Music-leftBottom--top">【聽歌向】戴上耳機，享受世界 12個小時超<!--級大滿足作業(yè)BGM 前二十期大合集！！！！！！"--></div><div class="articlemiddle-Music-leftBottom--bottom"><a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank"><span>up</span>佻-丞<br></a></div></a></li><li><a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank"><img src="img/耳機超享受.png" /><div class="articlemiddle-Music-leftBottom--top">【聽歌向】戴上耳機，享受世界 12個小時超<!--級大滿足作業(yè)BGM 前二十期大合集！！！！！！"--></div><div class="articlemiddle-Music-leftBottom--bottom"><a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank"><span>up</span>佻-丞<br></a></div></a></li></ul></div><!--第二行圖片,直接復(fù)制上面一段代碼--><div class="articlemiddle-Music-leftBottom"><ul><li><a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank"><img src="img/耳機超享受.png" /><div class="articlemiddle-Music-leftBottom--top">【聽歌向】戴上耳機，享受世界 12個小時超<!--級大滿足作業(yè)BGM 前二十期大合集！！！！！！"--></div><div class="articlemiddle-Music-leftBottom--bottom"><a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank"><span>up</span>佻-丞<br></a></div></a></li><li><a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank"><img src="img/耳機超享受.png" /><div class="articlemiddle-Music-leftBottom--top">【聽歌向】戴上耳機，享受世界 12個小時超<!--級大滿足作業(yè)BGM 前二十期大合集！！！！！！"--></div><div class="articlemiddle-Music-leftBottom--bottom"><a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank"><span>up</span>佻-丞<br></a></div></a></li><li><a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank"><img src="img/耳機超享受.png" /><div class="articlemiddle-Music-leftBottom--top">【聽歌向】戴上耳機，享受世界 12個小時超<!--級大滿足作業(yè)BGM 前二十期大合集！！！！！！"--></div><div class="articlemiddle-Music-leftBottom--bottom"><a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank"><span>up</span>佻-丞<br></a></div></a></li><li><a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank"><img src="img/耳機超享受.png" /><div class="articlemiddle-Music-leftBottom--top">【聽歌向】戴上耳機，享受世界 12個小時超<!--級大滿足作業(yè)BGM 前二十期大合集！！！！！！"--></div><div class="articlemiddle-Music-leftBottom--bottom"><a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank"><span>up</span>佻-丞<br></a></div></a></li></ul></div></div><div class="article-middle-Domestic-A1right"><div class="articlemiddle-Domestic-A1right-top">排行榜<a target="_blank" href="https://www.bilibili.com/ranking/all/3/0/3?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.39"><button style="margin-left: 10px;">更多 ></button></a></div><div class="articlemiddle-Domestic-A1right-bottom"><ul><li><div class="Domestic-ranklistNumber-topthree">1</div><div class="Domestic-ranklistNumber-Topest"><div class="Domestic-ranklistNumber-TopestLeft"><a target="_blank" href="https://www.bilibili.com/video/BV1rZ4y1N7gt"><img src="img/挑戰(zhàn)書.png"/></a></div><div class="Domestic-ranklistNumber-TopestRight"><div class="TopestRight-A"><a href="https://www.bilibili.com/video/BV1Cf4y1D79d?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.41">現(xiàn)在報名說唱新時代還來得及嗎</a></div><div class="TopestRight-B">綜合得分：120.1萬</div></div></div></li><li><div class="Domestic-ranklistNumber-topthree">2</div><a target="_blank" href="https://www.bilibili.com/video/BV1d5411b745?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.42">修仙界的扛把子，凡人流的開山鼻祖，讓粉絲苦等多年的《凡人修仙傳》</a></li><li><div class="Domestic-ranklistNumber-topthree">3</div><a target="_blank" href="https://www.bilibili.com/video/BV1J541187uD?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.43">瀟灑哥辣評《凡人修仙傳》【國動萬象】</a></li><li><div class="Domestic-ranklistNumber-extra">4</div><a target="_blank" href="https://www.bilibili.com/video/BV1di4y177n1?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.44">《神探威威貓》這部神作不是我吹，幾乎一集死一個劇情太大膽了</a></li><li><div class="Domestic-ranklistNumber-extra">5</div><a target="_blank" href="https://www.bilibili.com/video/BV16i4y177Uc?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.45">同人VS正版，這部國漫從3.8到9.8經(jīng)歷了什么？異常生物見聞錄的神級逆轉(zhuǎn)</a></li><li><div class="Domestic-ranklistNumber-extra">6</div><a target="_blank" href="https://www.bilibili.com/video/BV1554y1y7hw?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.46">【斗羅大陸】122集！小舞回歸！5年后的小舞竟如此驚艷！</a></li><li><div class="Domestic-ranklistNumber-extra">7</div><a target="_blank" href="https://www.bilibili.com/video/BV1pK4y1a7Gu?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.47">用核爆神曲來打開喜羊羊！！</a></li><li><div class="Domestic-ranklistNumber-extra">8</div><a target="_blank" href="https://www.bilibili.com/video/BV1Vz4y1Z7LL?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.48">【斗羅大陸】沒看錯。就是一集封神！播放破億</a></li><li><div class="Domestic-ranklistNumber-extra">9</div><a target="_blank" href="https://www.bilibili.com/video/BV1Ak4y1C7gK?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.50">解析絕活爺陸瑾的逆生三重，含三化一 順人逆仙！</a></li></ul></div></div></div></div><div class="article-right"><div><img src="img/邊框耳朵11.png" /><ul><li><a href="">直播</a></li><li><a href="">動畫</a></li><li><a href="">番劇</a></li><li><a href="">國創(chuàng)</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="">數(shù)碼</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="">Tv劇</a></li><li><a href="">影視</a></li><li><a href="">紀錄片</a></li></ul></div></div></article><footer><div class="footer-top"><ul><li><div class="footer-top-A" style=" margin-left: 150px;">bilibili</div><div class="footer-top-B" style=" margin-left: 150px;"><ul><li><a href="">關(guān)于我們</a></li><li><a href="">聯(lián)系我們</a></li><li><a href="">用戶協(xié)議</a></li><li><a href="">加入我們</a></li></ul><ul class="footer-top-B-ul2"><li><a href="">友情鏈接</a></li><li><a href="">隱私政策</a></li><li><a href="">bilibili認證</a></li><li><a href="">Investor Relations</a></li></ul></div></li><li><div class="footer-top-A">傳送門</div><div class="footer-top-B"><ul><li><a href="">幫助中心</a></li><li><a href="">高級彈幕</a></li><li><a href="">活動專題頁</a></li><li><a href="">侵權(quán)申訴</a></li></ul><ul class="footer-top-B-ul2"><li><a href="">活動中心</a></li><li><a href="">用戶反饋論壇</a></li><li><a href="">壁紙站</a></li><li><a href="">廣告合作</a></li></ul><ul class="footer-top-B-ul2"><li><a href="">名人堂</a></li><li><a href="">MCN管理中心</a></li></ul></div></li><li><ul class="footer-top-left"><li ><a href=""><img src="img/下載.png" /><p>下載APP</p></a></li><li ><a href=""><img src="img/微博.png" /><p>新浪微博</p></a></li><li ><a href=""><img src="img/微信.png" /><p>官方微信</p></a></li></ul></li></ul></div><div class="footer-bottom"><div class="footer-bottom-left"><a href="https://webcert.cnmstl.net/cert/grade?sn=d3ec53ae63a84350945198bab0251d59"><img src="img/底部廣告.png" /></a></div><div class="footer-bottom-right"><span> <a href="//static.hdslb.com/images/yyzz.png">營業(yè)執(zhí)照</a></span><span> 信息網(wǎng)絡(luò)傳播視聽節(jié)目許可證：0910417</span><span> 網(wǎng)絡(luò)文化經(jīng)營許可證 滬網(wǎng)文【2019】3804-274號</span><span> 廣播電視節(jié)目制作經(jīng)營許可證：（滬）字第01248號</span><br /><span> 增值電信業(yè)務(wù)經(jīng)營許可證 滬B2-20100043</span><span> <a href="http://beian.miit.gov.cn/">滬ICP備13002172號-3</a></span><span> 出版物經(jīng)營許可證 滬批字第U6699 號</span><span> 互聯(lián)網(wǎng)藥品信息服務(wù)資格證 滬-非經(jīng)營性-2016-0143</span><br /><span> 營業(yè)性演出許可證 滬市文演（經(jīng)）00-2253</span><br /><span> 違法不良信息舉報郵箱：help@bilibili.com |違法不良信息舉報電話：4000233233轉(zhuǎn)3</span><br /><span><a href="http://www.shjbzx.cn">上海互聯(lián)網(wǎng)舉報中心 |</a></span><span><a href="http://jbts.mct.gov.cn/">12318全國文化市場舉報網(wǎng)站 |</a></span><span><a href="http://jbts.mct.gov.cn/">滬公網(wǎng)安備31011002002436號 |</a></span><span><a href="http://jbts.mct.gov.cn/">兒童色情信息舉報專區(qū) |</a></span><span><a href="href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011002002436"">掃黃打非舉報 |</a></span><br /><span><a href="http://jbts.mct.gov.cn/">|網(wǎng)上有害信息舉報專區(qū)：</a></span><span><a href="http://jbts.mct.gov.cn/">中國互聯(lián)網(wǎng)違法和不良信息舉報中心</a></span><br /><span>親愛的市民朋友，上海警方反詐勸阻電話“962110”系專門針對避免您財產(chǎn)被騙受損而設(shè)，請您一旦收到來電，立即接聽。</span><br /><span> 公司名稱：上海寬娛數(shù)碼科技有限公司|公司地址：上海市楊浦區(qū)政立路485號|電話：021-25099888</span></div></div></footer></body></html>**
第一張CSS main-part.css
**
- {
margin: 0;
padding: 0;
}
header {
position: relative;
width: 100%;
min-width: 1300px;
height: 170px;
margin: 0px;
padding: 0px;
/background-color: aquamarine;/
background-image: url(…/img/header-background-1.png);
background-repeat: no-repeat;
/* background-position:center;/
background-size: 100%;
}
nav{
width: 100%;
min-width: 1300px;
height: 90px;
/background-color: rosybrown;/
}
article{
width: 100%;
height: 3000px;
/background-color:pink;/
}
.article-left div{
position: fixed;
top: 400px;
left: 0px;
width: 30px;
height: 80px;
font-size: 16px;
text-align: center;
border: solid 1px gainsboro;
border-radius: 2px;
background-color: whitesmoke;
/ box-shadow: #000000;/
}
.article-left a{
text-decoration: none;
color: black;
}
.article-right img{
width: 70px;
position: fixed;
right: 80px;
top: 235px;
}
.article-right ul{
position: fixed;
right: 80px;
top: 250px;
width: 70px;
height: 500px;
/ background-color: darkcyan;/
list-style-type: none;
border: 2px solid gainsboro;
border-radius: 5px;
}
.article-right li{
width: 70px;
height: 25px;
/ background-color: darkorange;*/
font-size: 12px;
color: #000000;
text-align: center;
line-height: 20px;
}
article-right a:hover{
color: dodgerblue;
}
.article-right a{
text-decoration: none;
color: #000000;
}
footer{
width: 100%;
height: 450px;
background-color: whitesmoke;
}
**
接下來是第二張CSS detail-description.css
**
/=頭部/
.header-Layout {
width: 100%;
min-width: 1300px;
height: 70px;
/background-color: bisque;/
}
.header-Layout div {
/width: 33%;/
/min-width:33%;/
height: 56px;
/* min-width: 500px;*/
/border: 1px solid red;/
float: left;
display: block;
margin: 6px auto;
line-height: 56px;
}
.header-Layout div:after {
clear: both;
}
.header-Layout-left ul {
list-style-type: none;
margin: 0 auto;
position: relative;
/height: 56px;
line-height: 56px;/
/* ling*/
min-width: 500px;
/* width: 40%;/
/ background-color: goldenrod;/
/ position: relative;*/
}
.header-Layout-left li {
height: 30px;
width: 53px;
margin-top: 13px;
/* border: 1px solid purple;*/
float: left;
text-align: center;
line-height: 30px;
overflow: hidden;
/padding-left: 10px;/
}
.header-Layout-left a,
.header-Layout-right a {
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0px 0px 5px black;
}
.header-Layout-left li:nth-child(3) {
width: 75px;
}
.header-Layout-left li:first-child {
width: 65px;
text-align: end;
/text-align:-moz-center;/
/padding-right: 20px;/
/position: absolute;
right: 10px;/
background-image: url(…/img/TV.png);
background-size: 65%;
background-repeat: no-repeat;
background-position-x: -5px;
background-position-y: -10px;
}
.header-Layout-left li:last-child {
width: 85px;
text-align: end;
background-image: url(…/img/phone.png);
background-size: 43%;
background-repeat: no-repeat;
background-position-x: -5px;
background-position-y: -3px;
}
#game-center {
position: absolute;
left: 400px;
top: 400px;
/* display: block;*/
width: 400px;
height: 300px;
/background-color: cornflowerblue;/
}
#sharp-corner {
position: absolute;
height: 0px;
width: 0px;
line-height: 0px;
border-bottom: 20px solid gold;
border-left: 20px solid gold;
border-right: 20px solid gold;
/* z-index: 2;*/
left: 400px;
top: 500px top: -30px;
}
.input-11 {
width: 450px;
height: 40px;
border: 1px solid darkgray;
border-radius: 2px;
margin-left: 5px;
/background-color: yellowgreen;/
}
.submit-11 {
width: 40px;
height: 40px;
margin-left: -5px;
/* background-color: gainsboro;*/
background-image: url(…/img/search-black.png);
background-position: center;
background-size: 90%;
background-repeat: no-repeat;
/background-position-x: -5px;
background-position-y: -3px;/
border: none;
}
.submit-11:hover {
background-image: url(…/img/search-blue.png);
background-position: center;
background-size: 90%;
background-repeat: no-repeat;
}
.header-Layout-right {
min-width: 450px;
height: 50px;
/* background-color: fuchsia;*/
}
.header-Layout-right ul {
list-style-type: none;
}
.header-Layout-right li {
width: 52px;
height: 40px;
margin-top: 6px;
/background-color: darkorange;/
float: left;
/* border: solid grey 1px;*/
text-align: center;
line-height: 40px;
}
.header-Layout-right li:nth-child(7) {
width: 60px;
}
/*.header-Layout-right li:last-child{
}*/
.header-Layout-right button {
width: 100px;
height: 40px;
margin-left: 10px;
background-color: #FB7299;
border-radius: 2px;
border: 0px;
/margin: auto;/
}
.header-Layout-right button a {
text-decoration: none;
color: white;
line-height: 40px;
text-align: center;
text-shadow: none;
}
.header-Layout-right button:hover {}
.header-Layout-right li img {
border-radius: 50%;
overflow: hidden;
height: 50px;
}
/.header-Layout-right a{
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0px 0px 5px black;
}/
/===nav=/
.nav-left {
width: 26%;
height: 70px;
/* border: solid 1px black;*/
/background-color: tomato;/
display: block;
float: left;
}
.nav-left:after {
clear: both;
}
.nav-left ul {
list-style-type: none;
/* background-color: royalblue;*/
/margin-right: px;/
}
.nav-left li {
width: 55px;
height: 70px;
/background-color: chartreuse;/
/* border: solid 1px black;*/
margin-right: 5px;
float: right;
text-align: center;
line-height: 120px;
}
.nav-left li a {
text-decoration: none;
font-size: 15px;
color: black;
}
.nav-left li a:hover {
color: royalblue;
}
.navleft-images-A {
width: 60px;
height: 60px;
/* background-color: hotpink;*/
background-image: url(…/img/home.png);
background-position: top;
background-size: 85%;
background-repeat: no-repeat;
}
.navleft-images-B {
width: 60px;
height: 60px;
/background-color: hotpink;/
background-image: url(…/img/dynamic.png);
background-position: top;
background-size: 85%;
background-repeat: no-repeat;
}
.navleft-images-C {
width: 60px;
height: 60px;
/background-color: hotpink;/
background-image: url(…/img/ranking-list.png);
background-position: top;
background-size: 85%;
background-repeat: no-repeat;
}
.navleft-images-D {
width: 60px;
height: 60px;
/background-color: hotpink;/
background-image: url(…/img/channel.png);
background-position: top;
background-size: 85%;
background-repeat: no-repeat;
}
.nav-middle {
width: 49%;
height: 70px;
/border: solid 1px red;/
/background-color: palegreen;/
display: block;
float: left;
border-left-color: #E7E7E7 solid 1px;
border-right-color: #E7E7E7 solid 1px;
}
.nav-middle:after {
clear: both;
}
.nav-middle ul {
list-style-type: none;
background-color: #FB7299;
/* margin-left: 14px;*/
}
.nav-middle li {
width: 79px;
height: 30px;
margin-bottom: 5px;
/padding-left: 5px;/
/* background-color: thistle;/
/ border: solid 1px black;*/
float: left;
line-height: 30px;
text-align: left;
}
.nav-middle li:nth-child(9) {
width: 85px;
}
.nav-middle li:nth-child(10) {
width: 98px;
}
.nav-middle a {
text-decoration: none;
font-size: 14px;
color: #000000;
}
.nav-middle a:hover {
color: cornflowerblue;
}
.nav-middle-number {
font-size: 14px;
background-color: #73C9E5;
border-radius: 3px;
line-height: 30px;
color: white;
}
.nav-middle li:after {
clear: both;
}
.nav-right {
width: 19%;
height: 70px;
/border: solid 1px teal;/
/background-color: deeppink;/
display: block;
float: left;
}
.nav-right ul {
list-style-type: none;
background-color: yellow;
/* margin-left: 10px;*/
width: 87%;
}
.nav-right li {
width: 58px;
height: 30px;
margin-bottom: 5px;
margin-right: 2px;
/background-color: thistle;
border: solid 1px black;/
float: left;
line-height: 30px;
text-align: right;
}
.nav-right li:nth-child(3) {
width: 88px;
}
.nav-right li:nth-child(6) {
width: 120px;
}
.navright-image-A {
background-image: url(…/img/spical-column.png);
background-position: left;
background-size: 48%;
background-repeat: no-repeat;
}
.navright-image-B {
background-image: url(…/img/activities.png);
background-position: left;
background-size: 48%;
background-repeat: no-repeat;
}
.navright-image-C {
background-image: url(…/img/small-dark-room.png);
background-position: left;
background-size: 48%;
background-repeat: no-repeat;
text-align: right;
}
.navright-image-D {
background-image: url(…/img/direct-seeding.png);
background-position: left;
background-size: 48%;
background-repeat: no-repeat;
text-align: right;
}
.navright-image-E {
background-image: url(…/img/classroom.png);
background-position: left;
background-size: 48%;
background-repeat: no-repeat;
text-align: right;
}
.navright-image-F {
background-image: url(…/img/music-plus.png);
background-position: left;
background-size: 48%;
background-repeat: no-repeat;
text-align: right;
}
.nav-right li a {
text-decoration: none;
font-size: 15px;
color: black;
}
.nav-left li a:hover {
color: royalblue;
}
.nav-right li a:hover {
color: royalblue;
}
.nav-right:after {
clear: both;
}
/===article=/
.article-left {
width: 10%;
height: 3000px;
/background-color: paleturquoise;/
float: left;
display: block;
}
.article-left:after {
clear: both;
}
.article-middle {
width: 80%;
height: 3000px;
/background-color: #6495ED;/
float: left;
display: block;
margin-top: 10px;
}
.article-middle:after {
clear: both;
}
.article-right {
width: 10%;
height: 3000px;
/background-color: paleturquoise;/
float: left;
display: block;
}
.article-right:after {
clear: both;
}
.article-middle-00 {
width: 100%;
height: 335px;
/background-color: chartreuse;/
}
.articlemiddle-00-left {
width: 45%;
height: 300px;
/background-color: red;/
background-image: url(…/img/動物成精.png);
background-size: 120%;
background-repeat: no-repeat;
background-position: top;
float: left;
}
.articlemiddle-00-left:after {
clear: both;
}
.articlemiddle-00-right {
width: 55%;
height: 300px;
/background-color: plum;/
float: left;
}
.articlemiddle-00-right:after {
clear: both;
}
.articlemiddle-00-right ul {
width: 100%;
height: 300px;
list-style-type: none;
/* background-color: #6495ED;*/
}
.articlemiddle-00-right li {
width: 210px;
height: 140px;
float: left;
margin-left: 10px;
margin-bottom: 10px;
/background-color: gold;/
background-image: url(…/img/魯迅到底有多強.jpg);
background-position: center;
background-size: 115%;
background-repeat: no-repeat;
/background: no-repeat 100% center;/
overflow: hidden;
}
.articlemiddle-00-right ul a {
width: 210px;
height: 130px;
position: relative;
}
.articlemiddle-00-right ul p {
position: absolute;
/* top: 27px;left: 0px;*/
top: 133px;
left: 0px;
width: 210px;
height: 140px;
/background-color: black;/
/opacity: 0.5;/
background: rgba(0, 0, 0, 0.5);
}
.articlemiddle-00-right ul span {
color: white;
}
@keyframes uphill {
from {
top: 133px;
}
to {
top: 17px;
}
}
.articlemiddle-00-right li:hover p {
animation: uphill 1s;
top: 17px;
}
.article-middle-01 {
width: 100%;
height: 285px;
/background-color: navajowhite;/
}
.article-middle-01-A {
width: 100%;
height: 50px;
/background-color: #98FB98;/
/margin-bottom: 10px;/
}
.article-middle-01-A ul {
list-style-type: none;
}
.article-middle-01-A li {
float: left;
width: 165px;
height: 50px;
margin-left: 10px;
/background-color: darkorange;/
line-height: 50px;
text-align: right;
}
.article-middle-01-A li a {
text-decoration: none;
color: black;
}
.article-middle-01-A li a:hover {
color: deepskyblue;
}
.article-middle-01-A li:first-child {
width: 100px;
}
.article-middle-01-A li:last-child {
width: 180px;
}
.article-middle-01-A li:after {
clear: both;
}
.article-middle01-Aleft {
background-image: url(…/img/大喇叭.png);
background-size: 50%;
background-position: left;
background-repeat: no-repeat;
font-size: 25px;
font-weight: 500;
}
.article-middle01-Amid {
background-image: url(…/img/火苗.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
}
.article-middle01-Aright {
float: right;
width: 350px;
height: 50px;
/* background-color: hotpink;*/
}
.article-middle01-Aright button {
width: 350px;
height: 40px;
margin-top: 5px;
background-color: #F4F4F4;
border-radius: 3px;
border: 1px solid gainsboro;
font-size: 17px;
}
.article-middle01-Aright button:hover {
color: dodgerblue;
}
.article-middle01-Aright:after {
clear: both;
}
.article-middle-01-B {
width: 100%;
height: 235px;
/* background-color: lightcoral;*/
/**/
margin: 0;
padding: 0;
}
.article-middle-01-B-left {
width: 70%;
height: 200px;
margin-top: 15px;
/background-color: cyan;/
float: left;
}
.article-middle-01-B-left:after {
clear: both;
}
.article-middle-01-B-left ul {
list-style-type: none;
}
.article-middle-01-B-left li {
width: 202px;
height: 200px;
margin-right: 10px;
/background-color: tomato;/
float: left;
}
.article-middle-01-B-left li img {
width: 202px;
/* height: 200px;*/
z-index: -1;
}
.article-middle-01-B-left a {
font-size: 17px;
text-decoration: none;
color: #000000;
}
.article-middle-01-B-left–top {
height: 50px;
width: 202px;
margin-top: -5px;
/* background-color: thistle;*/
font-size: 17px;
}
.article-middle-01-B-left ul a:hover {
color: dodgerblue;
}
.article-middle-01-B-left–bottom {
height: 38px;
width: 202px;
/margin-top: 165px;/
/background-color: palevioletred;/
color: darkgray;
font-size: 16px;
}
.article-middle-01-B-left–bottom span {
border: solid 1px darkgray;
border-radius: 3px;
margin-left: 10px;
margin-right: 5px;
/padding-top: -3px;/
}
.article-middle-01-B-left–bottom a {
text-decoration: none;
color: darkgrey;
}
.article-middle-01-B-left–bottom a:hover {
color: dodgerblue;
}
.article-middle-01-B-right {
width: 28%;
height: 200px;
margin-top: 15px;
/background-color: yellowgreen;/
background-image: url(…/img/時空幻境.png);
background-size: 100%;
background-position: top;
background-repeat: no-repeat;
float: right;
}
.article-middle-01-B-right:after {
clear: both;
}
.article-middle-advertisementA {
width: 100%;
height: 100px;
/background-color: fuchsia;/
background-image: url(…/img/筆記本電腦廣告.jpg);
background-size: 100%;
background-position: top;
background-repeat: no-repeat;
}
/直播板塊/
.article-middle-LivingStream {
width: 100%;
height: 520px;
/* background-color: rosybrown;*/
}
.articlemiddle-LivingStream-left {
width: 70%;
height: 520px;
/background-color: gold;/
float: left;
}
.articlemiddle-LivingStream-left:after {
clear: both;
}
.articlemiddle-LivingStream-leftTop {
width: 100%;
height: 50px;
/* background-color: #98FB98;*/
/margin-bottom: 10px;/
}
.articlemiddle-LivingStream-leftTop ul {
list-style-type: none;
}
.articlemiddle-LivingStream-leftTop li {
float: left;
/width: 165px;/
height: 50px;
margin-left: 10px;
/background-color: darkorange;/
line-height: 50px;
text-align: right;
}
.articlemiddle-LivingStream-leftTop li a {
text-decoration: none;
color: black;
}
.articlemiddle-LivingStream-leftTop li a:hover {
color: deepskyblue;
}
.articlemiddle-LivingStream-leftTop li:first-child {
width: 150px;
}
.articlemiddle-LivingStream-leftTop li:nth-child(2) {
font-size: 14px;
color: black;
width: 450px;
text-align: left;
line-height: 50px;
/background-color: turquoise;/
}
.articlemiddle-LivingStream-leftTop li:last-child {
width: 180px;
text-align: right;
margin-left: 40px;
}
.articlemiddle-LivingStream-leftTop li:after {
clear: both;
}
.LivingStream-A1-left {
background-image: url(…/img/direct-seeding.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
font-size: 25px;
font-weight: 500;
}
.articlemiddle-LivingStream-leftTop li {
float: left;
}
.articlemiddle-LivingStream-leftTop .button-1 {
width: 70px;
height: 30px;
margin-top: 10px;
/margin-right: 40px;/
background-image: url(…/img/刷新.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
text-align: right;
border-radius: 2px;
border: 1px solid gainsboro;
color: black;
}
.button-1:hover {
background-color: gainsboro;
}
.button-2 {
width: 70px;
height: 30px;
margin-top: 10px;
text-align: center;
border-radius: 2px;
border: 1px solid gainsboro;
}
.button-2:hover {
background-color: gainsboro;
}
.articlemiddle-LivingStream-leftBottom {
width: 100%;
height: 200px;
margin-top: 15px;
/background-color: red;/
float: left;
}
.articlemiddle-LivingStream-leftBottom:after {
clear: both;
}
.articlemiddle-LivingStream-leftBottom ul {
list-style-type: none;
}
.articlemiddle-LivingStream-leftBottom li {
width: 202px;
height: 200px;
margin-right: 10px;
/background-color: tomato;/
float: left;
}
.articlemiddle-LivingStream-leftBottom li img {
width: 202px;
/* height: 200px;*/
z-index: -1;
}
.articlemiddle-LivingStream-leftBottom a {
font-size: 17px;
text-decoration: none;
color: #000000;
}
.articlemiddle-LivingStream-leftBottom–top {
height: 50px;
width: 202px;
margin-top: -5px;
/* background-color: thistle;*/
font-size: 17px;
}
.articlemiddle-LivingStream-leftBottom ul a:hover {
color: dodgerblue;
}
.articlemiddle-LivingStream-leftBottom–bottom {
height: 38px;
width: 202px;
/margin-top: 165px;/
/* background-color: palevioletred;*/
color: darkgray;
}
.articlemiddle-LivingStream-leftBottom–bottom span {
border: solid 1px darkgray;
border-radius: 3px;
margin-left: 10px;
margin-right: 5px;
font-size: 16px;
/* line-height: ;*/
/padding-top: -3px;/
}
.articlemiddle-LivingStream-leftBottom–bottom p {
font-size: 14px;
color: lightgray;
margin-left: 10px;
/margin-right: 5px;/
}
.articlemiddle-LivingStream-leftBottom–bottom a {
text-decoration: none;
color: darkgrey;
}
.articlemiddle-LivingStream-leftBottom–bottom a:hover {
color: dodgerblue;
}
.article-middle-LivingStream-A1right {
width: 30%;
height: 520px;
/background-color: yellowgreen;/
float: left;
}
.article-middle-LivingStream-A1right:after {
clear: both;
}
.articlemiddle-LivingStream-A1right-top {
width: 100%;
height: 50px;
/* background-color: thistle;*/
}
.articlemiddle-LivingStream-A1right-top span {
margin-right: 20px;
font-size: 13px;
line-height: 50px;
text-align: center;
}
.articlemiddle-LivingStream-A1right-top a {
list-style-type: none;
}
.articlemiddle-LivingStream-A1right-bottom {
width: 100%;
height: 470px;
}
.articlemiddle-LivingStream-A1right-bottom img {
margin-top: 15px;
width: 102%;
}
/動畫板塊/
.article-middle-Animation {
width: 100%;
height: 520px;
/* background-color: rosybrown;*/
}
.articlemiddle-Animation-left {
width: 70%;
height: 520px;
/background-color: gold;/
float: left;
}
.articlemiddle-Animation-left:after {
clear: both;
}
.articlemiddle-Animation-leftTop {
width: 100%;
height: 50px;
/background-color: #98FB98;/
/margin-bottom: 10px;/
}
.articlemiddle-Animation-leftTop ul {
list-style-type: none;
}
.articlemiddle-Animation-leftTop li {
float: left;
/width: 165px;/
height: 50px;
margin-left: 10px;
/* background-color: darkorange;*/
line-height: 50px;
text-align: center;
}
.articlemiddle-Animation-leftTop li a {
text-decoration: none;
color: black;
}
.articlemiddle-Animation-leftTop li a:hover {
color: deepskyblue;
}
.articlemiddle-Animation-leftTop li:first-child {
width: 150px;
}
.articlemiddle-Animation-leftTop li:nth-child(2) {
font-size: 14px;
color: black;
width: 450px;
text-align: left;
line-height: 50px;
/* background-color: turquoise;*/
}
.articlemiddle-Animation-leftTop li:last-child {
width: 180px;
text-align: right;
margin-left: 40px;
}
.articlemiddle-Animation-leftTop li:after {
clear: both;
}
.Animation-A1-left {
background-image: url(…/img/動畫圖標.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
font-size: 25px;
font-weight: 500;
}
.articlemiddle-Animation-leftTop li {
float: left;
}
.articlemiddle-Animation-leftTop .Animation-button-1 {
width: 70px;
height: 30px;
margin-top: 10px;
/margin-right: 40px;/
background-image: url(…/img/刷新.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
text-align: right;
border-radius: 2px;
border: 1px solid gainsboro;
color: black;
}
.Animation-button-1:hover {
background-color: gainsboro;
}
.Animation-button-2 {
width: 70px;
height: 30px;
margin-top: 10px;
text-align: center;
border-radius: 2px;
border: 1px solid gainsboro;
}
.Animation-button-2:hover {
background-color: gainsboro;
}
.articlemiddle-Animation-leftBottom {
width: 100%;
height: 200px;
margin-top: 15px;
/background-color: red;/
float: left;
}
.articlemiddle-Animation-leftBottom:after {
clear: both;
}
.articlemiddle-Animation-leftBottom ul {
list-style-type: none;
}
.articlemiddle-Animation-leftBottom li {
width: 202px;
height: 200px;
margin-right: 10px;
/* background-color: tomato;*/
float: left;
}
.articlemiddle-Animation-leftBottom li img {
width: 202px;
/* height: 200px;*/
z-index: -1;
}
.articlemiddle-Animation-leftBottom a {
font-size: 17px;
text-decoration: none;
color: #000000;
}
.articlemiddle-Animation-leftBottom–top {
height: 50px;
width: 202px;
margin-top: -5px;
/background-color: thistle;/
font-size: 17px;
}
.articlemiddle-Animation-leftBottom ul a:hover {
color: dodgerblue;
}
.articlemiddle-Animation-leftBottom–bottom {
height: 38px;
width: 202px;
/margin-top: 165px;/
/background-color: palevioletred;/
color: darkgray;
}
.articlemiddle-Animation-leftBottom–bottom span {
border: solid 1px darkgray;
border-radius: 3px;
margin-left: 10px;
margin-right: 5px;
font-size: 16px;
/* line-height: ;*/
/padding-top: -3px;/
}
.articlemiddle-Animation-leftBottom–bottom p {
font-size: 14px;
color: lightgray;
margin-left: 10px;
/margin-right: 5px;/
}
.articlemiddle-Animation-leftBottom–bottom a {
text-decoration: none;
color: darkgrey;
}
.articlemiddle-Animation-leftBottom–bottom a:hover {
color: dodgerblue;
}
.article-middle-Animation-A1right {
width: 30%;
height: 520px;
/background-color: yellowgreen;/
float: left;
}
.article-middle-Animation-A1right:after {
clear: both;
}
.articlemiddle-Animation-A1right-top {
width: 100%;
height: 50px;
/background-color: thistle;/
font-size: 25px;
line-height: 50px;
display: block;
position: relative;
}
.articlemiddle-Animation-A1right-top button{
position: absolute;
right: 0px;
width: 70px;
height: 30px;
margin-top: 10px;
/* margin-left: 100px;/
border: 1px solid darkgray;
/ text-align: right;*/
border-radius: 2px;
}
.articlemiddle-Animation-A1right-top button:hover{
background-color: gainsboro;
}
.articlemiddle-Animation-A1right-top a {
list-style-type: none;
}
.articlemiddle-Animation-A1right-bottom {
width: 100%;
height: 470px;
}
/.articlemiddle-Animation-A1right-bottom img {
margin-top: 15px;
width: 102%;
}/
.articlemiddle-Animation-A1right-bottom ul{
list-style-type: none;
}
.articlemiddle-Animation-A1right-bottom li{
/float: left;/
width: 100%;
height: 40px;
margin-bottom: 5px;
/* background-color: orchid;/
font-size: 16px;
line-height: 40px;
text-align: left;
overflow: hidden;
}
.articlemiddle-Animation-A1right-bottom li a{
text-decoration: none;
color: #000000;
}
.articlemiddle-Animation-A1right-bottom a:hover{
color: dodgerblue;
}
.articlemiddle-Animation-A1right-bottom li:first-child{
width: 100%;
height: 100px;
/background-color: sandybrown;/
}
.Animation-ranklistNumber-topthree{
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
/ background-color: dodgerblue;/
color: white;
float: left;
line-height: 30px;
text-align: center;
font-weight: bold;
border-radius: 2px;
}
.Animation-ranklistNumber-topthree:after{
clear: both;
}
.Animation-ranklistNumber-Topest{
width: 100%;
height: 100px;
/background-color: #F79909;/
}
.Animation-ranklistNumber-TopestLeft{
float: left;
width: 45%;
height: 100px;
/ background-color: #FFC0CB;*/
}
.Animation-ranklistNumber-TopestLeft img{
width: 100%;
}
.Animation-ranklistNumber-TopestLeft:after{
clear: both;
}
.Animation-ranklistNumber-TopestRight{
float: right;
width: 45%;
height: 100px;
/background-color: teal;/
}
.Animation-ranklistNumber-TopestRight:after{
clear: both;
}
.TopestRight-A{
width: 100%;
height: 70px;
font-size: 16px;
}
.TopestRight-A a{
list-style-type: none;
}
.TopestRight-A:hover{
color: dodgerblue;
}
.TopestRight-B{
width: 100%;
height: 70px;
}
.Animation-ranklistNumber-extra{
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
/background-color: transparent;/
color: darkgray;
float: left;
line-height: 30px;
text-align: center;
font-weight: bold;
border-radius: 2px;
}
//
.article-middle-advertisementB{
width: 100%;
height: 100px;
/* background-color: fuchsia;*/
background-image: url(…/img/橫條廣告2.jpg);
background-size: 100%;
background-position: top;
background-repeat: no-repeat;
}
/國漫相關(guān)板塊/
.article-middle-Domestic {
width: 100%;
height: 520px;
/* background-color: rosybrown;*/
}
.articlemiddle-Domestic-left {
width: 70%;
height: 520px;
/* background-color: gold;*/
float: left;
}
.articlemiddle-Domestic-left:after {
clear: both;
}
.articlemiddle-Domestic-leftTop {
width: 100%;
height: 50px;
/* background-color: #98FB98;*/
/margin-bottom: 10px;/
}
.articlemiddle-Domestic-leftTop ul {
list-style-type: none;
}
.articlemiddle-Domestic-leftTop li {
float: left;
/width: 165px;/
height: 50px;
margin-left: 10px;
/* background-color: darkorange;*/
line-height: 50px;
text-align: right;
}
.articlemiddle-Domestic-leftTop li a {
text-decoration: none;
color: black;
}
.articlemiddle-Domestic-leftTop li a:hover {
color: deepskyblue;
}
.articlemiddle-Domestic-leftTop li:first-child {
width: 200px;
}
.articlemiddle-Domestic-leftTop li:nth-child(2) {
font-size: 14px;
color: black;
width: 400px;
text-align: left;
line-height: 50px;
/* background-color: turquoise;*/
}
.articlemiddle-Domestic-leftTop li:last-child {
width: 180px;
text-align: right;
margin-left: 40px;
}
.articlemiddle-Domestic-leftTop li:after {
clear: both;
}
.Domestic-A1-left {
/width: 500px;/
background-image: url(…/img/國漫.png);
background-size: 20%;
background-position: left;
background-repeat: no-repeat;
font-size: 25px;
font-weight: 500;
}
.articlemiddle-Domestic-leftTop li {
float: left;
}
.articlemiddle-Domestic-leftTop .Domestic-button-1 {
width: 70px;
height: 30px;
margin-top: 10px;
/margin-right: 40px;/
background-image: url(…/img/刷新.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
text-align: right;
border-radius: 2px;
border: 1px solid gainsboro;
color: black;
}
.Domestic-button-1:hover {
background-color: gainsboro;
}
.Domestic-button-2 {
width: 70px;
height: 30px;
margin-top: 10px;
text-align: center;
border-radius: 2px;
border: 1px solid gainsboro;
}
.Domestic-button-2:hover {
background-color: gainsboro;
}
.articlemiddle-Domestic-leftBottom {
width: 100%;
height: 200px;
margin-top: 15px;
/background-color: red;/
float: left;
}
.articlemiddle-Domestic-leftBottom:after {
clear: both;
}
.articlemiddle-Domestic-leftBottom ul {
list-style-type: none;
}
.articlemiddle-Domestic-leftBottom li {
width: 202px;
height: 200px;
margin-right: 10px;
/* background-color: tomato;*/
float: left;
}
.articlemiddle-Domestic-leftBottom li img {
width: 202px;
/* height: 200px;*/
z-index: -1;
}
.articlemiddle-Domestic-leftBottom a {
font-size: 17px;
text-decoration: none;
color: #000000;
}
.articlemiddle-Domestic-leftBottom–top {
height: 50px;
width: 202px;
margin-top: -5px;
/* background-color: thistle;*/
font-size: 17px;
}
.articlemiddle-Domestic-leftBottom ul a:hover {
color: dodgerblue;
}
.articlemiddle-Domestic-leftBottom–bottom {
height: 38px;
width: 202px;
/margin-top: 165px;/
/background-color: palevioletred;/
color: darkgray;
}
.articlemiddle-Domestic-leftBottom–bottom span {
border: solid 1px darkgray;
border-radius: 3px;
margin-left: 10px;
margin-right: 5px;
font-size: 16px;
/* line-height: ;*/
/padding-top: -3px;/
}
.articlemiddle-Domestic-leftBottom–bottom p {
font-size: 14px;
color: lightgray;
margin-left: 10px;
/margin-right: 5px;/
}
.articlemiddle-Domestic-leftBottom–bottom a {
text-decoration: none;
color: darkgrey;
}
.articlemiddle-Domestic-leftBottom–bottom a:hover {
color: dodgerblue;
}
.article-middle-Domestic-A1right {
width: 30%;
height: 520px;
/background-color: yellowgreen;/
float: left;
}
.article-middle-Domestic-A1right:after {
clear: both;
}
.articlemiddle-Domestic-A1right-top {
width: 100%;
height: 50px;
/* background-color: thistle;*/
font-size: 25px;
line-height: 50px;
display: block;
position: relative;
}
.articlemiddle-Domestic-A1right-top button{
position: absolute;
right: 0px;
width: 70px;
height: 30px;
margin-top: 10px;
/* margin-left: 100px;/
border: 1px solid darkgray;
/ text-align: right;*/
border-radius: 2px;
}
.articlemiddle-Domestic-A1right-top button:hover{
background-color: gainsboro;
}
.articlemiddle-Domestic-A1right-top a {
list-style-type: none;
}
.articlemiddle-Domestic-A1right-bottom {
width: 100%;
height: 470px;
}
.articlemiddle-Domestic-A1right-bottom ul{
list-style-type: none;
}
.articlemiddle-Domestic-A1right-bottom li{
/float: left;/
width: 100%;
height: 40px;
margin-bottom: 5px;
/* background-color: orchid;/
font-size: 16px;
line-height: 40px;
text-align: left;
overflow: hidden;
}
.articlemiddle-Domestic-A1right-bottom li a{
text-decoration: none;
color: #000000;
}
.articlemiddle-Domestic-A1right-bottom a:hover{
color: dodgerblue;
}
.articlemiddle-Domestic-A1right-bottom li:first-child{
width: 100%;
height: 100px;
/ background-color: sandybrown;*/
}
.Domestic-ranklistNumber-topthree{
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
/background-color: dodgerblue;/
color: white;
float: left;
line-height: 30px;
text-align: center;
font-weight: bold;
border-radius: 2px;
}
.Domestic-ranklistNumber-topthree:after{
clear: both;
}
.Domestic-ranklistNumber-Topest{
width: 100%;
height: 100px;
/background-color: #F79909;/
}
.Domestic-ranklistNumber-TopestLeft{
float: left;
width: 45%;
height: 100px;
/background-color: #FFC0CB;/
}
.Domestic-ranklistNumber-TopestLeft img{
width: 100%;
}
.Domestic-ranklistNumber-TopestLeft:after{
clear: both;
}
.Domestic-ranklistNumber-TopestRight{
float: right;
width: 45%;
height: 100px;
/background-color: teal;/
}
.Domestic-ranklistNumber-TopestRight:after{
clear: both;
}
.TopestRight-A{
width: 100%;
height: 70px;
/* background-color: royalblue;/
font-size: 16px;
}
.TopestRight-A a{
list-style-type: none;
}
.TopestRight-A:hover{
color: dodgerblue;
}
.TopestRight-B{
width: 100%;
height: 70px;
/ background-color: #7B68EE;/
font-size: 14px;
color: gainsboro;
}
.Domestic-ranklistNumber-extra{
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
/ background-color: transparent;*/
color: darkgray;
float: left;
line-height: 30px;
text-align: center;
font-weight: bold;
border-radius: 2px;
}
//
.article-middle-Music {
width: 100%;
height: 520px;
/* background-color: rosybrown;*/
}
.articlemiddle-Music-left {
width: 70%;
height: 520px;
/background-color: gold;/
float: left;
}
.articlemiddle-Music-left:after {
clear: both;
}
.articlemiddle-Music-leftTop {
width: 100%;
height: 50px;
/* background-color: #98FB98;*/
/margin-bottom: 10px;/
}
.articlemiddle-Music-leftTop ul {
list-style-type: none;
}
.articlemiddle-Music-leftTop li {
float: left;
/width: 165px;/
height: 50px;
margin-left: 10px;
/* background-color: darkorange;*/
line-height: 50px;
text-align: right;
}
.articlemiddle-Music-leftTop li a {
text-decoration: none;
color: black;
}
.articlemiddle-Music-leftTop li a:hover {
color: deepskyblue;
}
.articlemiddle-Music-leftTop li:first-child {
width: 100px;
}
.articlemiddle-Music-leftTop li:nth-child(2) {
font-size: 14px;
color: black;
width: 500px;
text-align: left;
line-height: 50px;
/* background-color: turquoise;*/
}
.articlemiddle-Music-leftTop li:last-child {
width: 180px;
text-align: right;
margin-left: 40px;
}
.articlemiddle-Music-leftTop li:after {
clear: both;
}
.Music-A1-left {
/width: 500px;/
background-image: url(…/img/音樂.png);
background-size: 50%;
background-position: left;
background-repeat: no-repeat;
font-size: 25px;
font-weight: 500;
}
.articlemiddle-Music-leftTop li {
float: left;
}
.articlemiddle-Music-leftTop .Music-button-1 {
width: 70px;
height: 30px;
margin-top: 10px;
/margin-right: 40px;/
background-image: url(…/img/刷新.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
text-align: right;
border-radius: 2px;
border: 1px solid gainsboro;
color: black;
}
.Music-button-1:hover {
background-color: gainsboro;
}
.Music-button-2 {
width: 70px;
height: 30px;
margin-top: 10px;
text-align: center;
border-radius: 2px;
border: 1px solid gainsboro;
}
.Music-button-2:hover {
background-color: gainsboro;
}
.articlemiddle-Music-leftBottom {
width: 100%;
height: 200px;
margin-top: 15px;
/background-color: red;/
float: left;
}
.articlemiddle-Music-leftBottom:after {
clear: both;
}
.articlemiddle-Music-leftBottom ul {
list-style-type: none;
}
.articlemiddle-Music-leftBottom li {
width: 202px;
height: 200px;
margin-right: 10px;
/* background-color: tomato;*/
float: left;
}
.articlemiddle-Music-leftBottom li img {
width: 202px;
/* height: 200px;*/
z-index: -1;
}
.articlemiddle-Music-leftBottom a {
font-size: 17px;
text-decoration: none;
color: #000000;
}
.articlemiddle-Music-leftBottom–top {
height: 50px;
width: 202px;
margin-top: -5px;
/background-color: thistle;/
font-size: 17px;
}
.articlemiddle-Music-leftBottom ul a:hover {
color: dodgerblue;
}
.articlemiddle-Music-leftBottom–bottom {
height: 38px;
width: 202px;
/margin-top: 165px;/
/background-color: palevioletred;/
color: darkgray;
}
.articlemiddle-Music-leftBottom–bottom span {
border: solid 1px darkgray;
border-radius: 3px;
margin-left: 10px;
margin-right: 5px;
font-size: 16px;
/* line-height: ;*/
/padding-top: -3px;/
}
.articlemiddle-Music-leftBottom–bottom p {
font-size: 14px;
color: lightgray;
margin-left: 10px;
/margin-right: 5px;/
}
.articlemiddle-Music-leftBottom–bottom a {
text-decoration: none;
color: darkgrey;
}
.articlemiddle-Music-leftBottom–bottom a:hover {
color: dodgerblue;
}
.article-middle-Music-A1right {
width: 30%;
height: 520px;
/* background-color: yellowgreen;*/
float: left;
}
.article-middle-Music-A1right:after {
clear: both;
}
.articlemiddle-Music-A1right-top {
width: 100%;
height: 50px;
/background-color: thistle;/
font-size: 25px;
line-height: 50px;
display: block;
position: relative;
}
.articlemiddle-Music-A1right-top button{
position: absolute;
right: 0px;
width: 70px;
height: 30px;
margin-top: 10px;
/* margin-left: 100px;/
border: 1px solid darkgray;
/ text-align: right;*/
border-radius: 2px;
}
.articlemiddle-Music-A1right-top button:hover{
background-color: gainsboro;
}
.articlemiddle-Music-A1right-top a {
list-style-type: none;
}
.articlemiddle-Music-A1right-bottom {
width: 100%;
height: 470px;
}
.articlemiddle-Music-A1right-bottom ul{
list-style-type: none;
}
.articlemiddle-Music-A1right-bottom li{
/float: left;/
width: 100%;
height: 40px;
margin-bottom: 5px;
/background-color: orchid;/
font-size: 16px;
line-height: 40px;
text-align: left;
overflow: hidden;
}
.articlemiddle-Music-A1right-bottom li a{
text-decoration: none;
color: #000000;
}
.articlemiddle-Music-A1right-bottom a:hover{
color: dodgerblue;
}
.articlemiddle-Music-A1right-bottom li:first-child{
width: 100%;
height: 100px;
/* background-color: sandybrown;/
}
.Music-ranklistNumber-topthree{
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
/background-color: dodgerblue;/
color: white;
float: left;
line-height: 30px;
text-align: center;
font-weight: bold;
border-radius: 2px;
}
.Music-ranklistNumber-topthree:after{
clear: both;
}
.Music-ranklistNumber-Topest{
width: 100%;
height: 100px;
/ background-color: #F79909;*/
}
.Music-ranklistNumber-TopestLeft{
float: left;
width: 45%;
height: 100px;
/background-color: #FFC0CB;/
}
.Music-ranklistNumber-TopestLeft img{
width: 100%;
}
.Music-ranklistNumber-TopestLeft:after{
clear: both;
}
.Music-ranklistNumber-TopestRight{
float: right;
width: 45%;
height: 100px;
/background-color: teal;/
}
.Music-ranklistNumber-TopestRight:after{
clear: both;
}
.TopestRight-A{
width: 100%;
height: 70px;
/* background-color: royalblue;/
font-size: 16px;
}
.TopestRight-A a{
list-style-type: none;
}
.TopestRight-A:hover{
color: dodgerblue;
}
.TopestRight-B{
width: 100%;
height: 70px;
/background-color: #7B68EE;/
font-size: 14px;
color: gainsboro;
}
.Music-ranklistNumber-extra{
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
/background-color: transparent;/
color: darkgray;
float: left;
line-height: 30px;
text-align: center;
font-weight: bold;
border-radius: 2px;
}
.footer-top{
width: 100%;
height: 225px;
/background-color: tomato;/
}
.footer-top ul{
list-style-type: none;
}
.footer-top li{
float: left;
width: 33%;
height: 225px;
/background-color: hotpink;/
/ border: 1px solid gold;/
/border-right: 1px solid lightgray;/
}
.footer-top li:after{
clear: both;
}
.footer-top li:last-child{
border:none;
}
.footer-top-A{
width: 100%;
height: 50px;
/ border: 1px solid gold;/
/ background-color:peachpuff;*/
}
.footer-top-B{
width: 100%;
height: 175px;
/* background-color: red;*/
}
.footer-top-B ul{
list-style-type: none;
float: left;
width: 150px;
height: 175px;
/* background-color: teal;*/
}
.footer-top-B ul:after{
clear: both;
}
.footer-top-B li{
width: 140px;
height: 30px;
/background-color: antiquewhite;/
margin-bottom: 5px;
line-height: 30px;
}
.footer-top-B a{
text-decoration: none;
color: black;
}
.footer-top-B a:hover{
color: dodgerblue;
}
.footer-top-B-ul2{
float: left;
}
.footer-top-B-ul2:after{
clear: both;
}
.footer-top-left{
list-style-type: none;
width: 450px;
height: 70px;
border: none;
margin-left: 50px;
}
.footer-top-left li{
width: 80px;
height: 225px;
margin-left: 10px;
border: none;
/* background-color: rosybrown;/
}
.footer-top-left img{
width: 100%;
margin-top: 50px;
}
.footer-top-left p{
font-size: 17px;
color: #000000;
font-weight: 400;
text-align: center;
}
.footer-top-left p:hover{
color: dodgerblue;
}
.footer-top-left a{
text-decoration: none;
}
.footer-bottom{
width: 100%;
height: 225px;
/ background-color: gray;/
/line-height: 50px;/
color: gray;
}
.footer-bottom-left{
width: 7%;
height: 225px;
/background-color: thistle;/
margin-left: 150px;
float: left;
}
.footer-bottom-left:after{
clear: both;
}
.footer-bottom-left img{
width: 100%;
}
.footer-bottom-right{
width: 83%;
height: 225px;
/background-color: orchid;/
font-size: 13px;
color: gray;
float: right;
}
.footer-bottom-right:after{
clear: both;
}
.footer-bottom-right span{
height: 20px;
/ background-color: white;*/
margin-bottom: 10px;
margin-right: 5px;
display: inline-block;
}
.footer-bottom-right a{
text-decoration: none;
color: gray;
}
.footer-bottom-right a:hover{
color: dodgerblue;
}
**
最后是圖片：
**
總結(jié)
以上是生活随笔為你收集整理的用HTML+CSS简单仿制了一个bilibili电脑界面⚆_⚆（做着玩的）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： matlab中的clc命令和clear命
- 下一篇： 2、用Keil新建TM4C123G工程步