css設置網頁導航欄

原創 zhaobest 2018-09-11 03:17

 

  1. html頁面：
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN"> 
  4. <head profile="http://gmpg.org/xfn/11"> 
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  6.     <title>FreeBSD</title>       
  7.     <link rel="stylesheet" type="text/css" media="all" href="./css/style.css"> 
  8.     <link rel="stylesheet" id="superfish-css" href="./css/superfish.css" type="text/css" media="all">    
  9. </head> 
  10. <body> 
  11.     <div class="menu-header"> 
  12.         <ul id="menu-%e5%af%bc%e8%88%aa" class="nav sf-js-enabled"> 
  13.             <div id="home_btn"> 
  14.                 <a href="#">首頁</a> 
  15.             </div> 
  16.             <li> 
  17.                 <a href="#">風雨</a> 
  18.             </li>        
  19.             <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"> 
  20.                 <a href="#">飄</a> 
  21.             </li> 
  22.         </ul> 
  23.     </div>  
  24. </body> 
  25. </html> 

 

 

  1. css文件： 
  2. /*** ESSENTIAL STYLES ***/ 
  3. .nav, .nav * { 
  4.     margin:         0; 
  5.     padding:        0; 
  6.     list-style:     none; 
  7. } 
  8. .nav { 
  9.     line-height:    1.0; 
  10. } 
  11. .nav ul { 
  12.     position:       absolute; 
  13.     top:            -999em; 
  14.     width:          13em; /* left offset of submenus need to match (see below) */ 
  15. } 
  16. .nav ul li { 
  17.     width:          100%; 
  18. } 
  19. .nav li:hover { 
  20.     visibility:     inherit; /* fixes IE7 'sticky bug' */ 
  21. } 
  22. .nav li { 
  23.     float:          left; 
  24.     position:       relative; 
  25. } 
  26. .nav a { 
  27.     display:        block; 
  28.     position:       relative; 
  29. } 
  30. .nav li:hover ul, 
  31. .nav li.sfHover ul { 
  32.     left:           0; 
  33.     top:            36px; /* match top ul list item height */ 
  34.     z-index:        99; 
  35. } 
  36. ul.nav li:hover li ul, 
  37. ul.nav li.sfHover li ul { 
  38.     top:            -999em; 
  39. } 
  40. ul.nav li li:hover ul, 
  41. ul.nav li li.sfHover ul { 
  42.     left:           13em; /* match ul width */ 
  43.     top:            0; 
  44. } 
  45. ul.nav li li:hover li ul, 
  46. ul.nav li li.sfHover li ul { 
  47.     top:            -999em; 
  48. } 
  49. ul.nav li li li:hover ul, 
  50. ul.nav li li li.sfHover ul { 
  51.     left:           13em; /* match ul width */ 
  52.     top:            0px; 
  53. } 
  54.  
  55. /*** DEMO SKIN ***/ 
  56. .nav { 
  57.     float:  left; 
  58.     font-family: Verdana, Arial, Helvetica, sans-serif; 
  59.     font-size: 14px; 
  60. } 
  61. .nav a { 
  62.     padding: 1em 1.1em 1em 1.1em; 
  63.     text-decoration:none; 
  64.     background: url("22.png") no-repeat -1px 0px; 
  65. } 
  66.  
  67.  
  68. .nav a, .nav a:visited  { /* visited pseudo selector so IE6 applies text colour*/ 
  69.     color: #333; 
  70.     font-weight: 800; 
  71. } 
  72.  
  73. .nav li { 
  74.     /*background: url("../images/menu_divider.png") no-repeat -1px 0px;*/ 
  75.     /*background: url("11.png") no-repeat -1px 0px;*/ 
  76. } 
  77.  
  78. .nav li:hover a { 
  79.     color: #eee; 
  80. } 
  81.  
  82. .nav li li a { 
  83.     background: #333; 
  84.      
  85. } 
  86. .nav li li a:hover { 
  87.     text-decoration: underline; 
  88. } 
  89. .nav li ul { 
  90.     background: #000; 
  91. } 
  92.  
  93. .nav li:hover, .nav li.sfHover, 
  94. .nav a:focus, .nav a:hover, .nav a:active { 
  95.     outline: 0; 
  96.     color: #fff; 
  97.     background: #0088ff;/*鼠標劃過或者激活*/ 
  98. } 
  99.  
  100. .nav li ul li:hover, .nav li ul li.sfHover, 
  101. .nav li ul li a:focus, .nav li ul li a:hover, .nav li ul li a:active { 
  102.     outline: 0; 
  103.     color: #fff; 
  104. } 
  105.  
  106. .nav li.current_page_item, 
  107. .nav li.current-cat { 
  108.     background: #333; 
  109. } 
  110.  
  111. .nav li.current_page_item a, 
  112. .nav li.current-cat a { 
  113.     color: #fff; 
  114. } 

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

部分網站打不開

179390988 2019-02-23 14:05:54

註冊個博來保存一些文章

zinejo 2019-02-23 13:50:47

菜鳥創建優秀網頁的6個好習慣.

verytt 2019-02-23 13:40:45

502錯誤詳解

心碎小胖子 2019-02-23 13:34:47

學習隨筆--網頁（表單框架模板等）

瓦蘭 2019-02-23 13:19:08

IE無法打開網頁的常見原因及解決！

zorro8106 2019-02-23 12:52:59

JavaScript五十問——對比來說CSS的Grid與FlexBox（下篇）

藺相如如 2019-02-23 14:14:16

css選擇器

zleaves 2019-02-23 13:49:29

Web頁面中png jpg gif webp svg的區別和使用

songxianling1992 2019-02-23 13:44:50

手機H5 web調試利器——WEINRE (WEb INspector REmote) 安卓手機

songxianling1992 2019-02-23 13:44:50

給新手程序員的一些建議

緣來你在這 2019-02-23 13:22:59

CSS忍者：安全的CSS hacks祕籍

zhouyi05404 2019-02-23 13:11:32

表單密碼自動填充hack

陳其文 2019-02-23 12:04:58

文字滾動效果

53856943 2019-02-23 00:35:21

當前標籤dede[field:**]標籤調用說明

410502505 2019-02-23 13:09:08