WEB設計技巧:網頁虛線制作方法剖析

2024-07-11 09:03:08

字體：大中小

來源：轉載

供稿：網友

武林網(m.survivalescaperooms.com)文章簡介：在設計和制作網頁過程中，常常需要加入虛線分割線，像騰訊、搜狐、新浪首頁都有灰色虛線的應用。但是虛線的實現，無論在設計中還是后面的制作中都不太容易。

在設計和制作網頁過程中，常常需要加入虛線分割線，像騰訊、搜狐、新浪首頁都有灰色虛線的應用。但是虛線的實現，無論在設計中還是后面的制作中都不太容易。

  （一）設計中實現虛線

    總結以下photoshop畫虛線的幾種方法（只討論直線）：

   （1）使用畫筆—點擊“畫筆筆尖形狀”，調整“間距”

WEB設計技巧:網頁虛線制作方法剖析

這種方法簡便，制作出的虛線點分布均勻，通過描邊路徑可以畫出任意形狀的虛線。

   （2）畫一條直線，截取等寬距離（麻煩）
   （3）文字工具輸入英文字符“....”調整文字間距。——我用這種方法，朋友說我變態，但是這種方法制作出來的效果我最滿意。
   （4）定義畫筆—描邊路徑，和第一種方法相似，但是控制虛線單元的長度。
   （5）直接從滿意的網頁上截取（汗..以前圖省事經常這么干..），因為只是出效果，具體在后面的制作中，你繪制的虛線再完美可能也用不上。

    （二）頁面制作中虛線實現
  效果圖設計的完美固然重要，但是最終還是要精確還原設計稿，css中的dotted（點線）在IE6下顯示和其它瀏覽器不同，而且點過于密集效果不是很理想。dashed（虛線），雖然瀏覽器表現相同，但是虛線單元寬，也不是我想要的效果。單獨使用圖片來完成虛線，又會產生多余標簽，這點讓人很糾結。看下面用css定義的虛線：

HTML代碼

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

WEB設計技巧:網頁虛線制作方法剖析