Dreamweaver打造多彩文字鏈接

2024-09-12 12:31:08

字體：大中小

供稿：網(wǎng)友

文字鏈接可以說是網(wǎng)頁(yè)中最常見的頁(yè)面元素了，默認(rèn)的文字鏈接樣式都是帶下劃線的效果，這種一陳不變的外觀可能使很多朋友都想改變它，以使之符合頁(yè)面的整體效果，自從樣式表得到廣泛的應(yīng)用后，這個(gè)愿望現(xiàn)在可以非常方便的實(shí)現(xiàn)。今天我給大家介紹利用樣式表打造多彩的文字鏈接效果。我將分為初級(jí)篇、進(jìn)階篇和高級(jí)篇給大家作介紹，所有的鏈接樣式效果我們都將在樣式編輯器中完成，關(guān)于Dreamweaver中的樣式編輯器的用法請(qǐng)參考以前的介紹。鏈接樣式瀏覽效果如下圖。
　　

　　一、預(yù)備工作

　　我們將首先創(chuàng)建一個(gè)基本的鏈接樣式，其他的樣式將在此基礎(chǔ)上添加一個(gè)自定義的Class類。

　　1、 Shift F11打開樣式面板，點(diǎn)擊新建樣式按鈕，如圖一；
　　

　　2、在Type選項(xiàng)中選擇Use CSS Selector，創(chuàng)建默認(rèn)鏈接樣式，如圖二；
　　

　　　3、按照?qǐng)D三中所示設(shè)定默認(rèn)鏈接的樣式為無下劃線，字體為宋體9pt，其他色彩等等都不設(shè)置，我們將在后面為每一個(gè)Class類分別設(shè)置。
　　

4、定義樣式類Class。我們下面的每一個(gè)樣式風(fēng)格都是定義了一個(gè)單獨(dú)的類，并將其賦予鏈接文字。步驟如下：點(diǎn)擊添加打開新定義樣式面板，選擇Make Custom Style（class）定義自己的樣式類。如圖四；
　　

　　5、為鏈接文字添加樣式類。選擇一項(xiàng)鏈接文字，在窗口最下端的快速標(biāo)簽選擇條上選擇標(biāo)簽，右鍵點(diǎn)擊此標(biāo)簽，選擇Set Class將自定義的樣式賦予此鏈接文字即可，如圖五；
　　

　　6、其它鏈接文字樣式的做法與此相同，后面我將不再作介紹。在本教程中有關(guān)定義hover狀態(tài)的鏈接樣式辦法，朋友們可以自己制作。我也不再作介紹，只是提示定義時(shí)直接輸入[.t1:hover]即可。

本新聞共3頁(yè),當(dāng)前在第1頁(yè) 1 2 3

上一篇：用Dreamweaver設(shè)計(jì)自動(dòng)關(guān)閉的網(wǎng)頁(yè)

下一篇：Dreamweaver滑動(dòng)菜單的制作

學(xué)習(xí)交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關(guān)注