HTML+CSS程式碼橙色導航選單

阿新 • • 發佈：2019-01-18

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title>超漂亮的HTML導航選單CSS程式碼 - 何問起</title>
  5     <style>
  6         #top {
  7             display: block;
  8             text-align: left;
  9             height: 105px;
 10 
             position: relative;
 11             z-index: 0;
 12         }
 13 
 14         .m {
 15             margin: 0 auto;
 16             width: 970px;
 17         }
 18 
 19         body {
 20             font-size: 12px;
 21         }
 22 
 23         a {
 24             color: #333 
;
 25             text-decoration: none;
 26         }
 27 
 28             a:link {
 29                 text-decoration: none;
 30             }
 31             /* Download by http://hovertree.com*/
 32             a.blue:link, a.blue:visited {
 33                 color: #014cc9;
 34                 text-decoration 
: none;
 35             }
 36 
 37             a.blue:hover, a.blue:active {
 38                 color: #014cc9;
 39                 text-decoration: underline;
 40             }
 41 
 42             a.org:link, a.org:visited {
 43                 color: #ff4e00;
 44                 text-decoration: none;
 45             }
 46 
 47             a:hover, a:active, a.org:hover, a.org:active {
 48                 color: #ff4e00;
 49                 text-decoration: underline;
 50             }
 51 
 52         #navpart {
 53             background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) repeat-x center top;
 54             height: 105px;
 55             width: 950px;
 56             z-index: 0;
 57             margin-top: 0;
 58             margin-right: auto;
 59             margin-bottom: 0;
 60             margin-left: auto;
 61             clear: both;
 62             position: relative;
 63         }
 64 
 65             #navpart .sideleft {
 66                 background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat left bottom;
 67                 float: left;
 68                 height: 105px;
 69                 width: 6px;
 70             }
 71 
 72             #navpart .sideright {
 73                 background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat right bottom;
 74                 float: right;
 75                 height: 105px;
 76                 width: 6px;
 77             }
 78 
 79         #navmenubar {
 80             height: 32px;
 81             float: left;
 82             display: inline;
 83             margin: 0 -6px;
 84             width: 100%;
 85             position: relative;
 86             z-index: 3;
 87             top: 0;
 88         }
 89 
 90         #hot {
 91             background: url(http://hovertree.com/hvtimg/201508/7qmwfe9p.png) no-repeat left top;
 92             height: 21px;
 93             width: 19px;
 94             position: absolute;
 95             top: -5px;
 96             right: 2px;
 97             z-index: 666;
 98             background:black;
 99         }
100 
101         #navmenubar .sideleft {
102             background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat left bottom;
103             float: left;
104             height: 32px;
105             width: 6px;
106             display: inline;
107             margin: 0 0 0 8px;
108         }
109 
110         #navmenubar .sideright {
111             background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat right bottom;
112             float: left;
113             height: 32px;
114             width: 6px;
115             display: inline;
116             margin: 0 4px 0 -2px;
117         }
118         /* NAVMENU */
119         #navmenubar .navmenu {
120             background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) repeat-x center top;
121             height: 32px;
122             padding: 0;
123             margin: 0;
124             float: left;
125             display: inline;
126         }
127 
128             #navmenubar .navmenu li {
129                 float: left;
130                 white-space: nowrap;
131                 margin: 0px;
132                 padding: 0px;
133                 display: inline;
134             }
135 
136                 #navmenubar .navmenu li a {
137                     background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 0;
138                     width: 80px;
139                     padding: 7px 2px 5px 0;
140                     float: left;
141                     line-height: 20px;
142                     height: 20px;
143                     text-align: center;
144                 }
145 
146                     #navmenubar .navmenu li a:hover {
147                         background-position: 0 -32px;
148                         color: #602800;
149                         text-decoration: none;
150                         padding: 8px 2px 4px 0;
151                     }
152 
153             #navmenubar .navmenu .current a, #navmenubar .navmenu .current a:hover {
154                 background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 -64px;
155                 font-weight: 600;
156                 color: #FFF;
157                 font-size: 14px;
158                 padding: 7px 2px 5px 0;
159             }
160 
161         #top #navpart .content {
162             margin-top: 40px;
163             margin-right: auto;
164             margin-bottom: 0px;
165             margin-left: auto;
166             width: 900px;
167             height: auto;
168             color: white;
169         }
170 
171             #top #navpart .content a {
172                 color: white;
173                 display: inline-block;
174                 margin-top: 0px;
175                 height: 30px;
176                 border: 0px solid white;
177                 line-height: 30px;
178                 padding: 10px;
179             }
180 
181         .clear {
182             clear: both;
183             display: block;
184             font: 0px/0 sans-serif;
185             height: 0px;
186             overflow: hidden;
187         }
188     </style>
189 
190 </head>
191 <body>
192     <div id="top" class="m">
193         <div id="navpart">
194             <div class="sideleft"></div>
195             <div class="sideright"></div>
196             <!--NavMenu-->
197             <div id="navmenubar">
198                 <div class="sideleft"></div>
199                 <ul class="navmenu">
200                     <li class="current"><a href="http://hovertree.com" target="_top" title="首頁">何問起</a></li>
201                     <li><a href="http://hovertree.com/"><span>程式設計資源</span></a></li>
202                     <li><a href="http://hovertree.com"><span>高質量原始碼</span></a></li>
203                 </ul>
204                 <div class="sideright"></div>
205                 <div class="sideleft"></div>
206                 <ul class="navmenu">
207                     <li><a href="http://tool.hovertree.com"><span>工具</span></a></li>
208                     <li><a href="http://hovertree.com/code/"><span>程式碼</span></a></li>
209                     <li><a href="http://keleyi.com"><span>jQuery教程</span></a></li>
210                     <li><a href="http://hovertree.com/tiku/"><span>線上題庫</span></a></li>
211                 </ul>
212                 <div class="sideright"></div>
213                 <div>
214                     <div class="content">
215                         <a href="http://hovertree.com/" target="_blank">特效程式碼</a> <a href="http://hovertree.com/ziyuan/js/" target="_blank">JS運算子優先順序</a>
216  <a href target="_blank">特效程式碼</a> <a href="http://hovertree.com/" target="_blank">特效程式碼</a> <a href="http://hovertree.com/" target="_blank">特效程式碼</a><a href="http://hovertree.com/hvtart/bjae/e4pya1x0.htm" target="_blank">.NET正則表示式</a>
217  <a href="http://hovertree.com/" target="_blank">特效程式碼</a> <a href="keleyi.com/ziliao/googlejavascriptstyle.htm" target="_blank">谷歌JS風格</a> <a href="http://hovertree.com/" target="_blank">特效程式碼</a> <a href="http://hovertree.com/" target="_blank">特效程式碼</a> <a href="http://hovertree.com/h/bjaf/nebj8df9.htm" target="_blank">js實現非同步迴圈</a>
218 
219                     </div>
220                 </div>
221             </div>
222         </div>
223     </div>
224     <div class="clear"></div>
225 </body>
226 </html>
227 
228

HTML+CSS程式碼橙色導航選單

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>超漂亮的HTML導航選單CSS程式碼 - 何問起</tit

純CSS程式碼實現翻轉選單的炫酷效果

1、思路分析滑鼠移入選單出現並翻轉滑鼠移出收回選單 2、完整程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta char

Zen Coding: 一種快速編寫HTML/CSS程式碼的方法

請尊重版權，轉載請註明來源！在本文中我們將展示一種新的使用仿CSS選擇器的語法來快速開發HTML和CSS的方法。它由Sergey Chikuyonok開發。你在寫HTML程式碼(包括所有標籤、屬性、引用、大括號等)上花費多少時間？如果你的編輯器有程式碼提示功能，你編寫的時候就

html + css + js 實現摺疊選單的方法

1. 套用模板，將選單的相關資訊直接放在指令碼資料中，使用迴圈生成 <script id="templateNavBar" type="text/html"> <div class="nav-bar-logo"> </div&

Emmet：HTML/CSS程式碼快速編寫神器

Emmet的前身是大名鼎鼎的Zen coding，如果你從事Web前端開發的話，對該外掛一定不會陌生。它使用仿CSS選擇器的語法來生成程式碼，大大提高了HTML/CSS程式碼編寫的速度，比如下面的演示： Zen coding下的編碼演示去年年底，該外掛已經改名為Em

web前端，html+css+jquery實現水平選單

用到的知識點： 1 列表,常用屬性 2 a元素，常用屬性 3 顯示隱藏 4 jquery點選事件，劃過事件 html: <!DOCTYPE html> <!--水平選單

HTML+CSS做二級導航

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>導航選單</title> &

網頁導航欄 html + css的程式碼實現

一般來講，我們的網頁導航欄是這麼個模式來構建在結構上：1.首先我們需要給導航欄的div 給個類名一般為nav2.然後就是一個無序表格 3.由於導航欄的文字一般都是連結用來跳轉頁面要在li裡面包含一個a <div class="nav"> <ul&

純HTML+CSS實戰之實現帶圖示的二級導航選單

效果圖如上程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純CSS實現帶圖示的二級導航選單</t

HTML/CSS導航選單-水平選單的製作

垂直選單改成水平菜單隻需要改幾個引數就可以了float:left; <!DOCTYPE html> <html> <head> <meta charse

純HTML+CSS帶說明的黃色導航選單

HoverTree帶說明的CSS選單:純HTML+CSS結構連結帶說明的黃色導航 <!DOCTYPE html > <html > <head> <title>HoverTree帶說明的CSS選單-hovertree.com</ti

[HTML/CSS]導航欄的下劃線跟隨效果

absolute .com p s back flex margin 下一個 bottom 100% 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta c

1.angular html+css+js導航條點選樣式修改，加跳轉頁面

1.html頁面程式碼如下： <div class="main-menu" id="L1" (click)="Tab(1)" style="color:#3bb9e2;"> 主頁 </div> <div class="main-menu

css ul li實現縱向導航選單效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

使用基於CSS導航選單的4個理由

　　導航結構在網站設計中是起到決定性作用的，導航選單/欄常常通過顏色、排版、形狀和一些圖片來幫助網站創造更好的視覺和感受，它是網頁設計的關鍵元素。　　雖然網站導航選單的外觀是網頁設計中關係到整個設計成敗與否的關鍵，但視覺效果也不能影響到網站可用性。最理想的設計是網站的導航既能比其他網站的導航外觀更吸引