NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

我們可以用CSS語法來控制超連結的形式、顏色變化。

  下面我們做一個這樣的連結:未被點選時超連結文字無下劃線,顯示為藍色;當滑鼠在連結上時有下劃線,連結文字顯示為紅色;當點選連結後,連結無下劃線,顯示為綠色。

  實現方法很簡單,在原始碼的<head>和<head>之間加上如下的CSS語法控制:

   <style type=”text/css”>
   <!–
   a:link { text-decoration: none;color: blue}
   a:active { text-decoration:blink}
   a:hover { text-decoration:underline;color: red}
   a:visited { text-decoration: none;color: green}
   -->
   </style>

  其中:
  a:link 指正常的未被訪問過的連結;
  a:active 指正在點的連結;
  a:hover 指滑鼠在連結上;
  a:visited 指已經訪問過的連結;
  text-decoration是文字修飾效果的意思;
  none參數列示超連結文字不顯示下劃線;
  underline參數列示超連結的文字有下劃線

<style>
A:visited{TEXT-DECORATION:none;COLOR:#009999}
A:link{text-decoration:none}
A:hover{TEXT-DECORATION:COLOR:#FF0000;FONT-WEIGHT:bold;FONT-STYLE:italic}
A.1:link{text-decoration:none}
A.1:visited{TEXT-DECORATION:none;COLOR:#000000}
A.1:hover{TEXT-DECORATION:none;COLOR:#FFffff;FONT-WEIGHT:bold;FONT-STYLE:italic}
//上面這句TEXT-DECORATION:沒有賦值
</style>

<a class=”1″ href=”…..”>adfadfas</a>

class引用自定義類時,要直接用類名,就是.後面的部分,儘管我不知道用純數字直接去定義會不會有bug,不過,用含有字母的字串去定義應該是個好的習慣。

定義的順序是link,visited,active,hover,為了頁面的美觀,一般只用link和hover就可以了

在訪問一個頁面的時候,我們會發現,當滑鼠移動到具有超級連線的文字上的時候,有的會產生相應的下劃線。然而有些網頁卻沒有。主頁超連結的下劃線是如何去掉的呢?

  我們在<HEAD>…</HEAD>之間插入下面的程式碼。

  <style>B {font-weight: 700; }
   P {padding: 5px 0px;
     margin: 0px;
     font-family: 宋體,黑體,宋體;
    }
   A {text-decoration: none}
   TD { font-family: 宋體,黑體,宋體; }
  </style>
  <script language=”javascript”>
   var contents = true;
  </script>

  更簡單的方法是:

   <style>
    <!–
     a {text-decoration:none}
     a:hover {color: red;text-decoration:none}
    –!>
   </style>

  下面我們在看一看效果,試著將滑鼠移動到下面的超級連結上去,是不是超級連結不會產生下劃線了。

3、有些網頁的連結,原先沒有下劃線,你把滑鼠指向連結處,才會出現下劃線,滑鼠移掉下劃線就又沒有了。如何實現這種效果呢?

  可用層疊樣式表(CSS)來實現的,在Dreamweaver3中編輯層疊樣式表不用編寫程式碼,具體操作方法如下:

  1)在快速啟動欄中點選層疊樣式表按鈕(就是把滑鼠放上去顯示“show css styles”的那個按鈕),在彈出的CSS Styles面板上雙擊(none);

  2)此時,可看到彈出的Edit Style Sheet 面板,在該面板上按New按鈕;

  3)再在彈出的New Style 面板上點取Redefine HTML Tag(重新定義HTML標記)再在Tag中選擇“a”(超級連結標記)標記後按OK按鈕;

  4)這時可看到彈出的Style dehinition for a
的對話方塊,在此對話方塊中可以設定超級連結的許多屬性,你可以按你的意願設定,但我們這裡主要是要去掉那討厭的下劃線,所以我們在decoration
屬性中選擇“none”,這樣就把下劃線去掉了;然後我們再選擇顏色為:#339966。按OK按鈕返回到Edit Style Sheet 面板;

  5)在Edit Style Sheet 面板上再按New按鈕;

  6)在彈出的New Style 面板上點取Use CSS Selector ,再在該面板上的selector選擇框中選擇“a:hover”(定義當滑鼠在超級連結上時連結的屬性),按OK按鈕;

  7)在彈出的Style dehinition for a:hover 的對話方塊中,我們在decoration
屬性中選擇“underline”,這樣就把下劃線又加上了;然後我們再選擇顏色為:#FF3300。按OK按鈕返回到Edit Style
Sheet 面板;

  8)在Edit Style Sheet 面板上再按Don按鈕,至此所有設定結束,你在Dreamweaver3的原始碼檢視窗中將看到在<head>與</head>之間如下所示的程式碼:

  <style type=”text/css”>

  <!–

  a { color: #339966; text-decoration: none}

  a:hover { color: #FF3300; text-decoration: underline}

  –>

  </style>

  有了這段程式碼,你在該網頁上的所有文字連結在瀏覽器中顯示時沒有下劃線,當你把滑鼠指向連結處,才會出現下劃線,滑鼠移掉下劃線就又沒有了。若你想在
其它網頁中也具有這種效果,你可以用上述方法設定或更簡單點,直接把這段程式碼複製,貼上到<head>與</head>之間即
可。注意:若不是在a 中定義除去下劃線而是在a: link中定義除去下劃線,在實際使用時不能除去下劃線,我是在IE4.0環境下測試的。

相關文章

程式語言 最新文章