DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver入門 >> dreamweaver技巧之設計彩色文字鏈接示例
dreamweaver技巧之設計彩色文字鏈接示例
編輯:Dreamweaver入門     

   效果說明

  將鼠標置於文本上時,文本樣式會發生改變,比如不會出現下劃線,文字會閃動等。結合其他樣式屬性,還可以實現按鈕式文字鏈接,效果如圖所示。

dreamweaver技巧之設計彩色文字鏈接示例

  具體操作步驟:

  步驟一初級鏈接樣式

  在 CSS 樣式定義設置對話框中的“類型”子選項中有 5 種修飾類型。點選不同的修飾項,可以輕易設置不同的初級鏈接樣式,如圖1所示。下面以“無”下劃線設置為例進行講解,其他樣式的設置跟本例類似。

  1、創建一個 CSS 樣式表文件。按下 Shift+F11 鍵打開 CSS 樣式面板,單擊【新建樣式】按鈕,在彈出的【新建 CSS 樣式】對話框中點選【高級( ID ,上下文選擇器等)】選項,然後在選擇器下拉菜單中選擇【 a:link 】,單擊【確定】按鈕,如圖2所示。

  2、編輯樣式。保存樣式表文件(文件名為 css.css )後,開始編輯樣式。設定默認鏈接樣式為無下劃線,字體為宋體 12pt ,其他色彩等參數都不設置,如圖3所示。

  3、新建並設置樣式“ .t1 ”。再次單擊【新建樣式】按鈕,在【新建 CSS 樣式】對話框中點選【類(可應用於任何標簽)】選項,定義自己的樣式類,然後設置名稱為“ .t1 ”(【名稱】文本框是用來指定類的,用戶可以根據需要任意填寫,其格式是“ .* ”),最後點選【定義在 css.css 】,一切設置完畢後單擊【確定】。接下來的設置跟第二步操作一樣,然後單擊【確定】,如圖4所示。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved