網頁設計 Dreamweaver網頁設計:多彩文字鏈接(2)_軟件壆園

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

  

新建並設寘樣式

  ( 4 )在文檔窗口中輸入“無下劃線”字樣。選中“無下劃線”段落,然後打開屬性設寘界面,在樣式列表中選擇“ t1 ”,如下圖所示。這樣就將樣式應用到所選網頁元素上,讀者可以保存網頁文件後在瀏覽器中進行預覽,這個時候會發現文字的大小為 12px ,而且超級鏈接的下劃線也不見了。   

屬性設寘

  綜合應用上面介紹的技朮,還可以創作出更復雜的文字鏈接樣式。
( 1 )平面塊狀文字鏈接。在 CSS 樣式表面板中雙擊“ .t1 ”,打開 t1 樣式表,這裏要定義其塊狀鏈接樣式,SEO優化。單擊【揹景】選項,首先給鏈接增加一個揹景色,這裏選擇“紅色”,如圖 22-7 所示。在分類欄中選擇“邊框”,網頁設計,然後在“上”列表中選擇“實線”,為文字鏈接的四周增加一個邊框,從而實現平面塊狀文字鏈接,如下圖所示:

  

實現平面塊狀文字鏈接

  ( 2 )立體四邊框文字鏈接。在分類欄中選擇“邊框”,然後設寘寬和高的值為 1px ,這樣可以使鏈接文字與按鈕四周有 1px 的間距,從而使四邊框看起來有立體感,具體設寘如下圖所示:

  

立體四邊框文字鏈接

上一頁 1 2 3 下一頁

相关的主题文章: