首頁 > 網際網路

web端 顏色編輯器教學

2019-12-18 14:15:42

在web網頁中,設定顏色是很常見的動作,除了在編輯器中設定外,還可以通過瀏覽器來快速設定,只是,瀏覽器中設定的僅當前可見,重新整理就沒有,所以,需要將設定好的顏色貼回程式碼中。本文以chrome瀏覽器為例說明

1

開啟chrome瀏覽器,進入百度首頁(此處在開發者模式中,去除了一些標籤,突出了搜尋方塊,用於演示)


2

在瀏覽器中按F12,進入開發者模式,演示修改「百度一下」四個字為紅色


3

點選F12出來的視窗中的左上角,箭頭圖示,然後,移到百度一下四個字上面,點選滑鼠。左下角就會選中這個標籤,右側顯示他的css樣式


4

在右側css樣式處,點選color後面的white,將其修改為red,在修改的過程中會有很多顏色供選中,選中任何一個,上面的字型都會跟著實時變化


5

點選color所在的大括號{}行的右側,會出現幾個圖示,點選Add Color圖示,會彈出一個取色器視窗


6

在取色器視窗中,可以點選上面的顏色,或者下方快速顏色格子,甚至像吸管一樣的東西,還可以從介面吸取顏色,都可以將顏色轉換為16進位制的顏色表示值


7

此時隨便使用一種方式,獲取一個16進位制的顏色值,此時介面的文字顏色也會跟著變化了。

注意:頁面重新整理後,在瀏覽器上修改的顏色都將還原,因此,此種方式僅用於快速修改顏色,達到理想的狀態,最終需要將顏色修改到專案中去,才會生效



IT145.com E-mail:sddin#qq.com