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

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

@劉霞平

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

點擊愛心,感謝大大無私地分享
喜歡
寫了5859424篇文章,獲得1605次喜歡
Line
則回覆

熱門推薦

精彩推薦

記者陳建輝/宜蘭報導   宜蘭縣政府環境保護局副局長郭峯志昨(9)日帶隊視察台二線、台九線、頭城火車站、四城火車站、礁溪火車站及礁溪轉運站等地區的環境清潔維護和公廁清潔衛生管理情形,查核維護情況良好,針對...
   藍島,漫畫,搞笑,幽默,同居,休閒,趣味,創作 完全不聽人話           ................      
  記者翁正杉/宜蘭報導 柯姓男子與另一友人上南湖大山拍雪景下山途中,因體力不支向台中市消防局求救,宜蘭消防局接獲轉報,於中午12點25分由大同分隊搜救人員及林務局人員出發前往,今晚先夜宿多加屯山屋,俟明...
年前家中總會來個大掃除,掃除過往堆積的灰塵,那經過一年的歲月摧殘,專屬臉部的無痕保養你開始準備了嗎?年過25後因為代謝變差,隨著年齡的增長以及工作與家中事務的奔波總是容易讓媽咪過度操勞,一個不小心就...
RP OUTLET潮流暢貨中心位於桃園八德大湳商圈,每次下班經過廣福路,僅知道這邊有一家衣服販售的店面,殊不知,店裏販售的衣服配件都是知名的潮牌(STAGE、OUTERSPACE、THEONE、TOPHOOD、熱血等等)。而且店家是長...
新聞中心/整理 張女士因子宮肌腺症和肌瘤長期為經痛、經血多貧血所苦,曾經接受過藥物治療無效,近日到宜蘭陽明大學附設醫院就醫,婦產科龐渂醛醫師診察評估後以單孔腹腔鏡微創手術的方式為張女士做子宮頸韌帶保...
記者翁譽玹/ 羅東報導 農曆年再過5天就到了,團圓飯是台灣家人重要聚餐的時刻,大魚大肉美食滿桌,可是現代人平常就營養超過,加上化學加工食品充斥,人的身體健康態況也就不是那麼好,因此年夜飯菜餚可是處處潛...
     藍島,漫畫,搞笑,幽默,四格,趣味,諷刺,創作               眼角已泛成水災              
新聞中心/整理 WAmazing一年前在成田機場(NRT)開始服務,現在在日本的10個主要機場提供服務。只要下載App併申請,就可在日本旅行中免費上網(15天之内,500 MB免費,也可以額外購買)。WAmazing正在舉辦春節前...