您現在的位置是:電腦技術吧?>? 編程技術 ??>??怎么做文字生成鏈接,怎么把鏈接變成文字??>??正文詳情

怎么做文字生成鏈接,怎么把鏈接變成文字

楚訪文2019-11-18 15:00:45 人圍觀
簡介怎么轉發文字加鏈接文本鏈接是網頁中最常見的頁面元素。默認情況下,文本鏈接的樣式為下劃線,這使得網頁無法突出個性和滿足布局的需要。為了使文本鏈接符合頁面的整體效果,

文字鏈接是網頁中最常見的頁面元素,在默認狀態下,文字鏈接樣式都是帶下劃線的,這種一陳不變的外觀使網頁無法凸現個性和滿足布局的需要。

為了使文字鏈接符合頁面的整體效果,可以采用 CSS (樣式)來實現多樣的文字鏈接。

  效果說明  將鼠標置于文本上時,文本樣式會發生改變,比如不會出現下劃線,文字會閃動等。

結合其他樣式屬性,還可以實現按鈕式文字鏈接,效果如圖 22-1 所示。

  創作構思  Text-decoration 屬性用來控制超級鏈接,結合 Border-Style 屬性,還可以實現更加復雜的樣式。

  操作步驟  步驟一初級鏈接樣式  在 CSS 樣式定義設置對話框中的類型子選項中有 5 種修飾類型。

點選不同的修飾項,可以輕易設置不同的初級鏈接樣式,如圖 22-2 所示。

下面以無下劃線設置為例進行講解,其他樣式的設置跟本例類似。

  ( 1 )創建一個 CSS 樣式表文件。

按下 Shift F11 鍵打開 CSS 樣式面板,單擊【新建樣式】按鈕,在彈出的【新建 CSS 樣式】對話框中點選【高級( ID ,上下文選擇器等)】選項,然后在選擇器下拉菜單中選擇【 a:link 】,單擊【確定】按鈕,如圖 22-3 所示。

  ( 2 )編輯樣式。

保存樣式表文件(文件名為 css.css )后,開始編輯樣式。

設定默認鏈接樣式為無下劃線,字體為宋體 12pt ,其他色彩等參數都不設置,如圖 22-4 所示。

  ( 3 )新建并設置樣式 .t1 。

再次單擊【新建樣式】按鈕,在【新建 CSS 樣式】對話框中點選【類(可應用于任何標簽)】選項,定義自己的樣式類,然后設置名稱為 .t1 (【名稱】文本框是用來指定類的,用戶可以根據需要任意填寫,其格式是 .* ),最后點選【定義在 css.css 】,一切設置完畢后單擊【確定】。

接下來的設置跟第二步操作一樣,然后單擊【確定】,如圖 22-5 所示。

  ( 4 )在文檔窗口中輸入無下劃線字樣。

選中無下劃線段落,然后打開屬性設置界面,在樣式列表中選擇 t1 ,如圖 22-6 所示。

這樣就將樣式應用到所選網頁元素上,讀者可以保存網頁文件后在瀏覽器中進行預覽,這個時候會發現文字的大小為 12px ,而且超級鏈接的下劃線也不見了。

  步驟二進階樣式鏈接  綜合應用上面介紹的技術,還可以創作出更復雜的文字鏈接樣式。

  ( 1 )平面塊狀文字鏈接。

在 CSS 樣式表面板中雙擊 .t1 ,打開 t1 樣式表,這里要定義其塊狀鏈接樣式。

單擊【背景】選項,首先給鏈接增加一個背景色,這里選擇紅色,如圖 22-7 所示。

在分類欄中選擇邊框,然后在上列表中選擇實線,為文字鏈接的四周增加一個邊框,從而實現平面塊狀文字鏈接,如圖 22-8 所示。

  圖 22-7 設置顏色 圖 22-8 設置 4 個邊框  ( 2 )立體四邊框文字鏈接。

在分類欄中選擇邊框,然后設置寬和高的值為 1px ,這樣可以使鏈接文字與按鈕四周有 1px 的間距,從而使四邊框看起來有立體感,具體設置如圖 22-9 所示。

  ( 3 )定義特效文字鏈接。

CSS 樣式表中還包含了一組特效濾鏡。

這里創建一個使用 Blur 濾鏡的文字鏈接,并且該鏈接還帶有邊框效果。

在【過濾器】下拉菜單中選擇【 Blur ( Add=?,Direction=?,Strength=? )】選項,然后更改濾鏡參數設置為 Blur ( Add=ture,Direction=45,Strength=1 ),如圖 22-10 所示。

  提示: Blur 濾鏡有 3 個參數,分別為 Add 、 Direction 和 Strength 。

  Add 參數有兩個參數值,即 True 和 False ,其作用是設定是否為圖片添加模糊效果。

Direction 參數用來設置模糊的方向。

模糊操作是按照順時針方向進行的,其中 0 代表垂直向上,每 45 一個單位,默認值是向左 270 。

角度和方向的對應關系見表 22-1

  Strength 參數值只能使用整數來指定,它代表有多少像素的寬度將受到模糊影響。

默認值是 5 像素。

  至此,本實例操作完畢,用戶可以根據需要改變 CSS 樣式,以實現不同的文字鏈接特性。

CSS 樣式的應用非常廣泛,通過熟練掌握 CSS 樣式的使用,可以快速的來格式化和控制網頁元素,從而實現美化頁面和提高工作效率的效果。

版權聲明:本文由 楚訪文 整理編輯。

原標題:文字轉鏈接,把文字生成鏈接

轉載注明出處:http://www.dn9ww09s.icu/program/13537.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦跑分17萬什么檔次,新版魯大師跑分多少算好

    電腦跑分17萬什么檔次,新版魯大師跑分多少算好 相關圖片跑分28萬算高端嗎作為一個強大的系統工具,魯大師最關心的是魯大師能跑多少分?呂師傅怎么能跑積分?現在,超人軟件編輯將為您帶來陸大師的跑步積分介紹,希望您喜歡陸大師跑多...

  • 色板,發色斑

    色板,發色斑 相關圖片玫麗盼色斑用戶界面專用色板,用戶界面設計師必備!染頭色斑...

  • 酷騎單車押金還能退不,酷騎單車押金一直沒退

    酷騎單車押金還能退不,酷騎單車押金一直沒退 相關圖片2019酷騎還能退押金嗎由于管理不善,庫奇自行車決定終止共享單車業務,但仍有許多小伙伴的存款和余額沒有退還。如何退還冷騎押金?如何退還自行車的余額?現在,讓我們跟隨超人...

  • 垂直水平,水平和垂直是什么

    垂直水平,水平和垂直是什么 相關圖片水平結構和垂直結構最后介紹了用焰火制作馬賽克網格背景的方法和實例。事實上,水平或垂直漸變的彩條背景也很不錯,有點透明的背景和添加前景的效果如下圖所示:圖片中的彩條...

  • 抖音突然不顯示位置了,抖音一會顯示位置一會不顯示

    抖音突然不顯示位置了,抖音一會顯示位置一會不顯示 相關圖片抖音位置怎么不顯示省份自助餐作為一種有趣的短視頻軟件,受到許多年輕人的喜愛。最近,有很多合伙人想知道如何隱藏顫音的位置,以及如何從顫音中賺錢。然后,超人軟件會向您...

  • 什么是模態對話框,模態與非模態對話框

    什么是模態對話框,模態與非模態對話框 相關圖片qt模態對話框本文詳細總結了HTML 5頁面切換和模式對話框使用的效果。與您分享以供參考。具體分析如下:頁面動畫:數據轉換屬性可以定義頁面切換的動畫效果。例如:a href=qt非模態對...

  • 釘釘名片,釘釘名片在哪

    釘釘名片,釘釘名片在哪 相關圖片釘釘名片認證如今,越來越多的企業選擇使用美甲辦公室。我相信有很多人不知道如何發送名片和信息。接下來,超人軟件為大家帶來指甲相關介紹,希望大家喜歡。釘釘發送名片是干...

  • 鼠標懸停,無鼠標懸停

    鼠標懸停,無鼠標懸停 相關圖片鼠標懸停變色本文的例子描述了在純CSS中實現鼠標懸停提示的方法。與您分享以供參考。具體分析如下:這是一個更漂亮的鼠標懸停提示效果,是用純CSS代碼實現的。當你把鼠標放在圖...

  • 各種幣的符號怎么打,人民幣的符號在電腦上怎么打

    各種幣的符號怎么打,人民幣的符號在電腦上怎么打 相關圖片如何打人民幣符號有時我們需要輸入人民幣符號,但很多人不知道如何操作。事實上,這是鍵盤上的美元符號。在中文輸入法狀態下,按shift鍵和數字鍵4(注意,不是鍵盤的4)輸入成功...

  • 倒計時器,倒計時器怎么用

    倒計時器,倒計時器怎么用 相關圖片倒計時器程序當我們做一些任務或專注于一些活動時,倒計時可以有效地提醒我們。大多數人使用倒計時大多是在手機或電腦上。實際上,我們的計算機上有一些功能可以用來制作倒計...

熱評文章

  • 獵豹瀏覽器打不開網頁,獵豹瀏覽器官方網站

    獵豹瀏覽器打不開網頁,獵豹瀏覽器官方網站 相關圖片獵豹極輕瀏覽器作為一款功能強大的網頁瀏覽器,獵豹瀏覽器獲得了大量用戶,你知道如何設置獵豹瀏覽器的默認網頁嗎如何翻譯cheetah瀏覽器的網頁?接下來,超人軟件編輯就為大家介...

  • 內存修改器有什么用,怎么用內存修改器修改內購

    內存修改器有什么用,怎么用內存修改器修改內購 相關圖片怎么用gg修改器修改內購這里的內存修改不是指計算機的物理內存,而是使用內存修改器來修改游戲內存數據,達到游戲作弊的目的。通用內存修飾符是CE。因此,本文主要介紹CE內存修...

  • 鋪底,鋪底什么意思

    鋪底,鋪底什么意思 相關圖片陶粒可以當魚缸鋪底嗎最近在做一個項目-口袋收藏夾。簡言之,我想在布袋頁上收集我最喜歡的圖片,它使用了iframe的許多方面,如下所示:1。作為一個覆蓋底部的彈出層,如果你已經...

  • 菜鳥裹裹的運費是怎么支付,菜鳥裹裹怎么給運費啊

    菜鳥裹裹的運費是怎么支付,菜鳥裹裹怎么給運費啊 相關圖片菜鳥裹裹他人能代付運費嗎新手包裝是一款實用的快遞軟件,您可以通過它輕松完成郵件服務。那新秀包裝的運費怎么付?新秀包裝快遞怎么寄?接下來,讓超人軟件編輯為您解答。希...

  • 為什么頭條換頭像換不了,頭條多多怎么換頭像

    為什么頭條換頭像換不了,頭條多多怎么換頭像 相關圖片東方頭條怎么換頭像今天的頭條作為一個人人都可以成為作者的自媒體平臺,相信很多小伙伴都想在上面發表自己的文章。那么,你知道今天在哪里改標題嗎?今天的標題貼在哪里?現...

  • 畫面放大縮小,視頻放大縮小效果

    畫面放大縮小,視頻放大縮小效果 相關圖片ppt放大縮小步驟1:我們創建一個新的flash文檔,幀速率設置為40。我們在主場景中導入圖片或繪制某些內容,然后右鍵單擊將其轉換為組件電影剪輯組件步驟2:庫中是否有組件1?pr局部放...

  • buzz桌面怎么用,buzz桌面怎么用不了

    buzz桌面怎么用,buzz桌面怎么用不了 相關圖片buzz桌面停運buzz桌面作為一款功能強大的桌面美化軟件,深受眾多Android用戶的喜愛。很多用戶不知道如何將buzz桌面設置為默認桌面,以及如何切換中文。現在,我要學習超buzz桌面圖片...

  • 電視上那些炫麗的效果是怎么制作的,ps制作炫麗效果閃電字

    電視上那些炫麗的效果是怎么制作的,ps制作炫麗效果閃電字 相關圖片七色光教育怎么樣這個例子向朋友介紹了如何使用焰火來產生美麗的眩光效果。主要研究了刷子、濾料、復印、變形、梯度填充、混合模式和筆路徑工具的應用。希望朋友喜歡!最終效...

  • 瀏覽器怎么導入書簽,瀏覽器書簽怎么導出

    瀏覽器怎么導入書簽,瀏覽器書簽怎么導出 相關圖片QQ瀏覽器書簽導出我相信我的很多朋友都在使用奧本瀏覽器。你知道如何從Auburn瀏覽器導入書簽嗎?如何從Auburn瀏覽器導出書簽?現在,超人軟件編輯想向您介紹奧本瀏覽器的相關內瀏覽...

  • 怎么在站內搜索,如何做一個站內搜索

    怎么在站內搜索,如何做一個站內搜索 相關圖片九息站內搜索Frontpage不僅可以幫助我們快速開始網頁制作,還可以為網站制作一個簡單的搜索引擎,可以說是網頁制作和網頁搜索的結合。當然,在創建信息搜索平臺之前,你應該先搜...

關注微信

变脸官网查询