要想讓代碼出來得很有邏輯而簡約。而這是要從設計開始的。非常符合盒子式的設計模式，一拿到就覺得特別專業和省力。

?

首先來說下作為前端我拿到設計稿先看哪些部分：

?

1.整個網站的底色,觀察設計規律，主要找具有統一性的設計

　　　　比如按鈕button的 寬、高、底色、所用文字、文字大小、文字顏色都是一樣的，這樣我們寫代碼的時候就可以把這些寫進一個class，以方便后面復用。

?

2.將網頁橫豎向開始分區，這時候心里大概知道了內容content，大概在第幾層，第幾列（x,y），這樣我們在寫代碼的時候就非常有層次感

?

3.讓后看(x,y)里面的內容，而內容我們看什么呢，主要有內容A區域的底色（background）/ 邊框（border）/ 內邊距（padding）/ 外邊距（margin）/ 陰影 （shadow） / 圓角 （border-radius）

?

4.看一些細節，如 特色圖標，專有標簽，這是網頁設計師最考驗設計師的地方，在千萬網站中，要想一眼難以忘記，靠的就是獨特的風格。

?

5.這時候我們開始考慮交互性的效果，不僅僅是網頁上的一些動態效果，等多的是用戶在使用過程中的呈現方式。

?

6.網頁的性能，比如壓縮代碼和圖片，加載方式。

?

7.數據的交互

?

轉載于:https://www.cnblogs.com/cynthia-wuqian/p/5001281.html

總結

以上是生活随笔為你收集整理的从前端角度来看网页设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。