學CSS有啥用

自從我王去了熊貓之後，我也就從鬥魚轉戰了熊貓。有時候晚上寫代碼無聊，就開一會兒直播，直到最近突然發現，熊貓的全屏模式變成了這樣（後來發現鬥魚也是這樣了）：

我又沒錢送竹子，也不發彈幕，還要被佔掉將近一半的屏幕空間，感覺很是不爽。既然是程序員，不妨自己動手改造一下，方法很簡單，我盡量讓沒有學過前端的同學也能看懂。

首先要下載一個chrome插件：stylish

這個插件可以把一段css注入到頁面中，用來實現自己對網頁的樣式改造。

（安裝好之後，可以在地址欄右邊看到stylish的圖標，展開後可以看到這個列表）

點擊右上角的... 選擇「新建樣式」，可以打開一個這樣的頁面：

這裡就是我們寫代碼的地方了。

我們的目標是隱藏右側欄和底欄，所以要先找到這兩個元素是什麼。

在頁面右鍵點擊任意位置，選擇「檢查」，就可以打開一個，額，神奇的窗口：

注意左上角這個按鈕，就是我們用來找元素的工具。

點擊這個按鈕，然後把滑鼠移到網頁上的時候，就會有部分區域變藍

找到要隱藏的區域，點擊左鍵確定，就能看到你要找的DOM元素被標藍了

這個就是右邊的側欄，我們要通過代碼把它隱藏掉，所以還需要知道它的選擇器是什麼，就是右邊框起來的部分：

回來剛才打開的深藍色的編輯頁面，粘貼如下代碼：

.room-player-fullscreen .room-container .room-chat-box{n display: none;n}n

（display:none 表示不顯示）

注意填寫名字和生效域名，按ctrl+s就可以保存了。

然後你就會驚訝的發現... 什麼事都沒有發生...

回到DeveloperTools查看一下，發現確實多了一條屬性，但是被劃線去掉了

因為底下也有人聲明了display屬性，還加上了!important表示自己很重要，好吧，那我們也加上這個，表示我們更重要。

果然生效了對不對！

同樣的套路，我們可以找到底欄的選擇器，添加代碼：

.room-player-fullscreen .room-container .room-foot-box{n display: none;n}n

這一次不加important居然也可以了。

礙眼的東西都消失了，但是視頻還是沒佔滿全屏。

同樣的套路，找到視頻元素

注意看右邊，有一個可疑的right和bottom，我們把它改成0吧

視頻果然變成了全屏。

把這段代碼也貼過去，如下：

.room-player-fullscreen .room-container .room-player-swf-container{n bottom: 0;n right: 0;n}n

至此，我們通過10行代碼就實現了熊貓TV的全屏視頻顯示。

如果你真的懶得自己寫，也可以用我寫好的熊貓TV全屏這個插件。

所以，動手能力強的小盆友，你們可以試試去搞一下鬥魚，道理也是差不多的。

這是我寫的鬥魚插件鬥魚TV全屏

推薦閱讀：