玩代碼| html+css自學第一站 拿到一張網(wǎng)頁效果圖應該如何分析，初試！

時間：2023-09-01 20:48:01 | 來源：網(wǎng)站運營

時間：2023-09-01 20:48:01 來源：網(wǎng)站運營

玩代碼| html+css自學第一站 拿到一張網(wǎng)頁效果圖應該如何分析，初試?。鹤髡撸焊咝「?br>
來源：高小高的學習日記（公眾號）

首先，UI設計師具備一定的前端代碼編寫能力，能夠在一定程度上提升自身的崗位競爭力，未來的發(fā)展空間也會更大。

UI設計師在互聯(lián)網(wǎng)時代，尤其是移動互聯(lián)網(wǎng)時代得到了廣泛的關注，一個重要的原因是互聯(lián)網(wǎng)產(chǎn)品對于用戶的使用體驗越來越關注，所以目前整個IT行業(yè)有大量的UI設計師，尤其是互聯(lián)網(wǎng)公司更是釋放出了大量的UI設計崗位。

什么是UI設計師？我們在團隊中擔任了是么角色？

UI設計師主要的崗位任務包括交互設計和視覺設計兩部分，通常在產(chǎn)品經(jīng)理和策劃完成方案設計之后，UI設計師就需要完成產(chǎn)品原型的構(gòu)建，包括交互原型和視覺方案。UI設計師在反復與產(chǎn)品經(jīng)理溝通并修改之后，最終把設計原型交由開發(fā)團隊進行開發(fā)，以后在每次版本迭代的時候，都離不開UI設計師的參與，以保障產(chǎn)品的使用體驗度不斷提升。所以，在崗位職責方面，UI設計師通常并不需要參與代碼的編寫。（ps：根據(jù)我同事說的，如果一個UI設計師能將自己設計的設計圖案和靜態(tài)頁面一起給前端的話還是很受歡迎的）。

在當前大數(shù)據(jù)、云計算等技術的推動下，UI設計師的崗位工作邊界在不斷得到拓展，一些UI設計工具也整合了一些程序設計的內(nèi)容，這些內(nèi)容大多都是基于前端代碼的，所以在這種情況下，UI設計師掌握前端編碼技術就變得有必要了。

目前在不少小型開發(fā)團隊中，UI設計師往往也會參與到前端開發(fā)任務中，包括Web前端開發(fā)、Android開發(fā)、iOS開發(fā)和各種小程序開發(fā)等，一部分UI設計師也需要掌握一定的大數(shù)據(jù)呈現(xiàn)端的開發(fā)知識。所以，在當前的職場環(huán)境下，要想具備更強的崗位競爭力，掌握一定的前端開發(fā)技術對于UI設計師來說，還是有必要的。

先放上本期的練習案例，花了3天的時間，實一天業(yè)余時間寫個幾小時。

我的做法與構(gòu)思：

我會對要做的網(wǎng)頁進行分割，如將要做的網(wǎng)頁從上到下分成三個大矩形；

<div class=“header"></div>

<div class=“center"></div>

<div class=“buttonr"></div>

用<div>元素將整個網(wǎng)頁分成三大塊，大塊里面分小塊，最后在小塊里面完善內(nèi)容：

如頂層欄里面的“設為首頁”、“收藏本頁”與右邊的日期和溫度用<div>框起來；

logo那一欄和導航一欄各自用<div>框起來；

然后再具體到“框中”寫各自的內(nèi)容，如有文字的用<span> ,帶鏈接的用<a>，圖片用<img src=“”/>等等等，需要注意的就是float浮動元素的應用了（回頭也是要多做一些浮動元素的練習）！中間還有間距，行寬什么的總之寫的時候蠻煩的，主要定義“小矩形”里面的樣式的時候?qū)挾炔荒艹^外面的“大矩形”，有時候?qū)懲暝跒g覽器上效果呈現(xiàn)不出來的時候返回去看代碼的時候就痛苦了O(∩_∩)O哈哈~！因為不知道哪里出了問題，會出現(xiàn)一些“連鎖”的反應。

具體的css樣式就不一一寫在這里了，在我個人實操下來有些樣式刻意記老是會忘記，拿具體的樣式寫就對了，不知道的去網(wǎng)上查好了，寫的多了，問題處理的多了自然就成為一個本能反應了（不推薦）。




來呀！來呀！關注我吧?。。靵黻P注一下我，一起學習吧?。?br>