DIV CSS 佈局教程網

從某種意義上來說，頁面設計(web設計)也就是用戶界面設計。有許多技巧可以幫助我們制作出漂亮、實用的界面，這裡收集的5個小技巧就會對你有所幫助的。這些技巧並不依賴於特定的主題或模板，所以會適用於多數情況下的設計。不羅嗦了，我們開始吧！

1.改善鏈接體驗
       網頁中的文字鏈接通常標有下劃線，表示文字是可以點擊的，但可點擊區域不會超過字符的寬、高范圍。設計類似這種帶有超鏈接的可點擊區域的時候，都可以通過一些小技巧來提高可用性，比如：增加間隔，有些情況下甚至可以把鏈接轉換為塊元素。如下圖，用高亮來區別可點擊區域。

       顯然，可點擊的區域越大，用戶點擊就容易。在沒有指定寬度的時候，將鏈接轉換為塊元素，可以使文字鏈接的可點擊區域擴大到為整個容器的寬度，這樣的設計尤其適用於側邊欄的鏈接。這個技巧可以通過如下CSS實現。

a {
　display: block;
　padding: 6px;
　} 　

注意：由於轉換為塊元素只對鏈接的寬度起作用，所以需要設置間隔(padding)來保證塊在縱向的間距。

      2.按鈕也需要排版！
      設計的每一個細節失誤都有可能把完美的產品變成平庸，比如按鈕、Tab這樣簡單的界面元素，由於用戶每天都會點擊無數次，也需要適當的進行排版。請看下面一些例子：

    乍看起來上圖沒有什麼問題，仔細觀察可以發現，按鈕和select的文字都偏上，原因就是將小寫字母作為了排版的基准，小寫字母居中時，整個文字的位置就會顯得偏上。如下圖：

      就像上圖中，如果按鈕上的文字包含大寫字母或一些較高的小寫字母，如”t,d,f,h,k,l”的時候，文字就會顯得偏上。所以，通常應該把大寫字母作為定位的基准，或者在小寫字母較多時，稍微將文字的位置向上移動。

      上面的文字排版使按鈕看起來更舒服，注重像這樣的小細節對界面設計大有幫助。
      大頭：雖然中文沒有大小寫字母的問題，但也有很多頁面設計時不注重按鈕的文字排版，導致錯位。

     3.利用對比來控制焦點
      與上面兩個技巧類似，我們也可以通過頁面元素間的對比來控制用戶關注的焦點。下面的例子關於文章標題與日期、作者等信息之間利用對比突出重點的例子。

    上圖中所有文本都是黑色，讓我們試著來調整一下日期和作者文字的顏色看看

      文章標題的對比度最高(顏色

12下一頁