CSS網頁版面入門教學11：目前標示的標籤式橫向導覽圖片美化版

首頁

web前端

css教學

CSS網頁版面入門教學11：目前標示的標籤式橫向導覽圖片美化版_基礎教學課程

PHP中文网

May 16, 2016 pm 12:07 PM

雖然完成了標籤式導航，但是廣場狀的導航似乎並不能夠順應現在的設計潮流，其實導航不僅可以使用css的顏色來定義，同樣可以採用精心設計的圖片或其它元素來構建導航，在這裡我們將開始改善導航的設計，使它成為更出色的標籤效果。
　　我們將考慮去掉單一的方塊狀背景元素，使用帶有色彩的圓角標籤來完成我們的設計。不過從這個改進中能夠體會到css設計的另一個優勢，就是可以不需要修改結構代碼，只需要修改樣式，便可以完成改進，所以這裡可以直接看看css代碼的設計：

<style> 
body { background-color:#000000;} 
#nav { height:30px; list-style:none;} 
#nav li { float:left;} 
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;} 
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif ) left 84px; ; color:#ffffff;} 
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;} 
</style>

登入後複製

從以上程式碼可以看出，我們去掉了背景色的設定，給頁面的body標籤加上了黑色的背景，a物件被我們放置了重新製作的gif圖片，包含普通、滑鼠移上、當前頁三種交互狀態。但你們會現，這三種狀態的圖片在一張上。為什麼呢？這裡採用軟體裡的一種設計方式，一方面使用圖片管理，另一方面在網頁下載的時候只用下載一個圖片就行了。而把這張圖片設定為背景圖片時只需要用css控制圖片的位置就可以了，看來css功能真是太強大了。
　　僅僅透過修改css程式碼，就更換了導航的外觀，試想一下在大型網站的應用當中，如果我們對某一個通用模組不太滿意，也不必再去修改所有的頁面了，只能改動樣式就實現了。 css真正讓您的設計變得輕鬆！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
body { background-color:#000000;} 
#nav { height:30px; list-style:none;} 
#nav li { float:left;} 
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;} 
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 84px; ; color:#ffffff;} 
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;} 
</style> 
</head> 
<body> 
  <ul id="nav"> 
    <li><a href="/index.asp">主页</a></li> 
    <li><a id="current" href="/Sort/List_4.html">DIV+CSS教程</a></li> 
    <li><a href="/Sort/List_5.html">常用代码</a></li> 
    <li><a href="/Sort/List_6.html">水晶图标</a></li> 
    <li><a href="/Sort/List_7.html">幻灯图片</a></li> 
    <li><a href="/Sort/List_10.html">软件下载</a></li> 
    <li><a href="/css2/">CSS2.0实用手册</a></li> 
  </ul> 
</body> 
</html>

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn