一個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還是前端,都是必備技能。

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

@劉霞平

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

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

熱門推薦

精彩推薦

記憶枕推薦,防水保潔墊推薦,人體工學枕推薦,o’rest舒眠生活,防螨,健康,睡眠,高透氣性,瑞士SGS認證,抗菌 ,德國TUV認證,高密度記憶綿,太空記憶綿,紓壓 這次的分享算是貝貝自開箱文以來最慢的一次了!因為跟我們每天...
什麼是牙菌斑? 牙菌斑是一種嚴重的牙科疾病的假設是不正確的。牙菌斑只是我們牙齒的一種自然狀況,並且在整個過程中,我們大多數人都會在他們的生活中體驗牙菌斑。發生這種情況是因為我們口中的一些不明確的化學...
如何進行聲沙食療? 聲音嘶啞是由於長時間的說話,喊叫或唱歌的習慣。它指的是聲音的音高或音量發生變化的情況。基本上,聲音嘶啞意味著你的聲音出現異常,使你無法產生平滑的正常人聲。你可能會用低聲或低沉的聲...
這本書在台灣正體中文版上市前,就未演先轟動,獲得的好評遍及各領域,從品牌行銷、企業經營、投資理財、職場工作、心靈成長,到傳播媒體、科技公司、學術界等無不推薦本書。為何瑞.達利歐(Ray Dalio)的著作有...
新聞中心/整理 奶油麵包烘焙坊,在頭城火車站前的民鋒路上,是早午餐也是烘焙坊,推薦必點法式早午餐,煎過的歐包搭配上培根蜂蜜,味道多層次且美味,咖哩飯味道也很棒,選用優質的香料食材,以咖哩飯為主角,吃...
想要當個小說家,首先要先懂得什麼呢?是文筆要很好?是懂得把寫作書故事架構,牢牢的記在腦海?還是從解剖暢銷書的故事結構來構築自己的小說結構?還是光憑自己的直覺,想寫什麼小說就寫什麼小說?如果你是想要...
什麼導致細紋? 常可以從30歲左右看到。原因是由於衰老引起的彈性蛋白和膠原蛋白產量下降,這不僅導致魚尾紋,而且導致其他問題,如褐色斑點或下垂的乳房。除了年齡之外,還有其他一些因素可以導致細紋的形成,例...
母親節禮物推薦,乾唐軒,隨身杯,活瓷隨身杯,大分子化小分子,質感禮物 五月的第二個禮拜就是母親節了!我成為媽寶是嫁給老公後,才因為婆婆的疼愛而變成媽寶der(≧ω≦)/所以婆婆就是我的媽媽 因此我希望送的母親節禮...
腳後跟疼痛概述 足部疼痛可能是由於長時間的步行或站立造成的。伴隨著疼痛,你可能會注意到這些區域的紅腫。通常,腳後跟疼痛會自然消失。然而,當它持續的時間更長,痛苦只會變得更糟,那麼你應該檢查一下,弄清...
則回覆