search
一個F12讓UI和前端難分難解,到底是不需前端還是有F12就可以?

一個F12讓UI和前端難分難解,到底是不需前端還是有F12就可以?

剛開始研究TMHL+CSS的時候就知道有F12鍵的存在,最近做商城項目的時候偶然發現了它的神奇之處,於是總結了下來

這幾年UI好像特別火,滿大街的都是UI。為什麼呢?這就要得益於互聯網的推波助瀾。無論是大公司還是小企業,都在做網站,做app, 所以他們需要UI啊,所以全民UI啊。

然而,最近我發現了一個神奇的東西,那就是F12鍵。功能簡直不能更強大,可以直接copy別人家的設計,別人家的圖片,別人家的... ...

有了F12,前端開發可以跳過設計,直接敲代碼,而且做出來的效果還會比初級UI設計出來的東東,好上個十倍、百倍。

當我們正常的打開網頁,比如打開「小米商城」,它是長這樣的。

然後當我們按下F12鍵,調出調試器,你就會發現網頁的右側就出現HTML和CSS樣式,

如果公司沒有UI,那麼前端就可以直接根據調試器里的樣式,來編寫自己的網頁代碼,複製出一個跟小米商城類似的網站,那麼也就沒有UI的什麼事了。

你不失業,誰失業。

但是如果很不幸,你就是UI,看不懂代碼沒關係,F12鍵也將是提高你的工作效率的神器。

提高你的PC端找圖效率

如果你要設計一個商城,商品圖片的質量直接關係到了網頁設計的質量。那麼找圖將會花費掉你很大一部分時間和精力。但是現在,F12可以幫你解決這個問題。

打開淘寶,天貓,京東等商城購物網站,找到自己需要的商品圖片或者banner,然後按下F12鍵,通過簡單幾個操作就可以得到你所需要的圖片。

同樣的以小米商城為例,紅色矩形框住的部分就是我們需要划重點的部分。

通過5個步驟,我們就能得到自己想要的banner圖片。

1.讓帶有箭頭的那個圖標處於選中狀態 → 2.滑鼠點擊你所需要的圖片,調試器里相對應的代碼就會被選中 → 3.滑鼠右鍵帶下劃線的圖片鏈接 → 4.選擇在新的標籤頁中打開鏈接 → 5.把新頁面中的圖片另存為到自己的文件夾

用一張圖簡單歸納出來就是,

就這樣,別人的圖片就變成你的了,而且同一個網頁上的商品圖片的尺寸和風格都是一致的,你不僅節省了找圖的時間,同時也節省了處理圖片的時間。

通過這種方式所得到的圖片通常都是高清大圖,網站的檔次和逼格一下子就上去了。

節省你的APP項目找圖時間

在用F12調出調試器的情況下,我們可以在PC模式和H5模式下切換自如。同樣,紅色矩形框住的部分需要我們重點掌握。

用滑鼠點擊兩個大小不一樣的矩形所組成的圖標后,把它網址中的「www」改為「m」,它就進入到了正常的H5頁面。然後,在iPhone6處,點擊下拉圖標,你可以切換到任何你需要的、不同屏幕尺寸的手機模式

用一張圖歸納如下:

在H5模式下,你也可以像之前一樣「偷」別人家移動端的圖片了。

如果你稍微懂一點代碼,你不用再像之前一樣,看到好的樣式設計,先在手機里下載app,然後手機截圖,然後傳到電腦上,然後導進PS里,然後手動測量,然後再設計實施... ... 這樣不僅麻煩,而且還會存在一定的誤差。

通過H5模式,你可以直接查看別人家的版式間距,文字屬性等等,簡直不能更方便了。

神奇的F12鍵,無論是UI還是前端,都是必備技能。

寫在最後,只有不斷學習,才能永不失業。

@劉霞平

本文由 一點資訊 提供 原文連結

寫了5858696篇文章,獲得23200次喜歡
留言回覆
回覆
熱門推薦
精彩推薦