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

2017/05/05

剛開始研究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還是前端,都是必備技能。

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

@劉霞平

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

立即按讚,感謝大大無私地分享
寫了5860430篇文章,獲得22600
Line

熱門推薦

精彩推薦

被玩家暱稱為「愛心盒」的「啟動寶匣」(Innervating Locket)早在八年前就被移除,但它很有可能將在近期跟玩家再度見面啦!   圖:Riot Games 每次談起《英雄聯盟》中被移除的道具,許多老玩家必...
今(21)日上午6時40分的最新氣溫概況。   圖:中央氣象局 今(21)日臺灣南部地區及恆春半島有局部短暫陣雨或雷雨,並有局部較大雨勢,其他地區及澎湖、金門、馬祖大多為多雲到晴,午後有局部...
為什麼要在鬼月的時候 去玩鬼屋呢~~  洋姊真的很不怕死ㄟ   整晚幾乎沒睡十點就跑去做高鐵 然後就來玩鬼屋囉   不對 我們是先當吃貨 龍蝦堡跟扶旺號   龍蝦堡 也不是不好吃啦 就很普通   扶旺號是小洋台北最...
   每逢七、八月,就是腸病毒大流行的時期,因此都不太敢帶兒子到室內的親子餐廳或親子館玩,寧可帶他到戶外踏青,或是到附近公園散步、玩耍,曬曬太陽,跑跑步,除了運動外,開放式的空間比較不用擔心被傳染。...
萬豪本來預計昨天就完成系統完全合併,還有App更新。但是應該還存在很多的Bug和合併過程中遇到的一些新問題尚不能完全有很好的解決方案,所以估計要達到完全預想中的合併狀態, 估計還需要一些日子不停的補。   ...
美國總統川普(右)表示與朝鮮領導人金正恩私人關係良好,可能二度川金會。   圖:翻攝美國白宮臉書 美國總統川普(Donald Trump)與朝鮮最高領導人金正恩,可能再度會面?川普接受路透社專訪時,...
中國外交部長王毅(右)8月初出席東南亞國家協會外交部長會議,提議東協各國在南海聯合軍事演習,左為東協秘書長Dato Lim Jock Ho。   圖:翻攝東協臉書 無異請鬼拿藥單!本月初中國向東南亞國家...
谷歌遭控侵犯隱私,關閉「所在地點歷史紀錄」仍遭追蹤。   圖:翻攝自Flickr/ Carlos Luna開放權限 美國舊金山聯邦法院上週收到一起控告谷歌(Google)侵犯隱私權的訴訟案。谷歌遭控告即使用戶已...
人本教育基金會經常替學生權益發聲。   圖:翻攝人本教育基金會臉書/資料照片 高雄某國中日前發生導師及童軍老師對資源班的學生,體罰還有言語暴力等誇張行徑,人本基金會今(21)日指出,事發後,...
則回覆