如何用CSS製作橫向選單?
我們先來看一個選單的例子,最終效果是:
然後我們來詳細講解步驟
第一步:建立一個無序列表
我們先建立一個無序列表,來建立選單的結構。程式碼是:
<ul><li><a href="1">首頁</a></li>
<li><a href="2">產品介紹</a></li>
<li><a href="3">服務介紹</a></li>
<li><a href="4">技術支援</a></li>
<li><a href="5">立刻購買</a></li>
<li><a href="6">聯絡我們</a></li>
</ul>
效果是:
第二步:隱藏li的預設樣式
因為看起來不是很好看,選單通常都不需要li預設的圓點,我們給UL定義一個樣式來消除這些圓點。
當然,為了更好的控制整個選單,我們把選單放在一個div裡。頁面程式碼變成:
<div class="test"> <ul><li><a href="1">首頁</a></li>
<li><a href="2">產品介紹</a></li>
<li><a href="3">服務介紹</a></li>
<li><a href="4">技術支援</a></li>
<li><a href="5">立刻購買</a></li>
<li><a href="6">聯絡我們</a></li>
</ul> </div>
CSS定義為:
.test ul{list-style:none;}說明:“.test ul”表示我要定義的樣式將作用在test的層裡的ul標籤上。
現在的效果是沒有圓點了:
第三步:關鍵的浮動
這裡是選單變成橫向的關鍵,我們給li元素加上一個“float:left;”屬性,讓每個li浮動在前面一個li的左面。
CSS定義為:
.test li{float:left;}效果是:
看,選單變橫向了。就這麼簡單!下面需要做的就是優化細節了。
第四步:調整寬度
選單都擠在一起不好看怎麼辦?我們來調節li的寬度。
在CSS中新增定義width:100px指定一個li的寬度是100px,當然你可以根據你的需要調整數值:
.test li{float:left;width:100px;}效果是:
如果我們同時定義外面div的寬度,li就會根據div的寬度自動換行,例如定義了div寬350px,6個li的總寬度是600px,一行排不下就自動變成兩行:
.test{width:350px;}效果是:
第五步:設定基本連結效果
接下來,我們通過CSS來設定連結的樣式,分別定義:link、:visited、:hover的狀態
.test a:link{color:#666;background:#CCC;text-decoration:none;}.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}
效果是:
第六步:將連結以塊級元素顯示
有朋友問,選單連結的背景色為什麼沒有填滿整個li的寬度?恩,解決的方法很簡單,在a的樣式定義中增加display:block,使連結以塊級元素顯示。
同時我們微調了如下細節:
- 用text-align:center將選單文字居中;
- 用height:30px增加背景的高度;
- 用margin-left:3px使每個選單之間空3px距離;
- 用line-height:30px;定義行高,使連結文字縱向居中;
CSS定義象這樣:
.test a{display:block;text-align:center;height:30px;}.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
效果變成:
這樣就漂亮多了吧。
第七步:定義背景圖片
我們通常都會在每個連結前加一個小圖示,這樣導航更清楚。CSS是採用定義li的背景圖片來實現的:
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}
說明:“background:url(arrow_off.gif) #CCC no-repeat 5px 12px;”這句程式碼是一個CSS縮寫,表示背景圖片是arrow_off.gif;背景顏色是#CCC;背景圖片不重複"no-repeat",背景圖片的位置是左邊距5px、上邊距12px;
預設狀態下,圖示為arrow.off.gif,當滑鼠移動到連結上,圖示變為arrow_on.gif
效果變成:
現在css的完整程式碼是:
.test ul{list-style:none;}.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}
頁面的完整程式碼是:
<div class="test"><ul>
<li><a href="1">首頁</a></li>
<li><a href="2">產品介紹</a></li>
<li><a href="3">服務介紹</a></li>
<li><a href="4">技術支援</a></li>
<li><a href="5">立刻購買</a></li>
<li><a href="6">聯絡我們</a></li>
</ul>
</div>
好了,主要步驟就是這7步,立刻拷貝和修改程式碼試試,你也可以用CSS做橫向選單了!
相關文章
- CSS製作橫向導航選單例項程式碼CSS單例
- css橫向導航欄製作流程詳解CSS
- CSS3橫向導航選單效果CSSS3
- 用 CSS3 和 JavaScript 製作徑向動畫選單CSSS3JavaScript動畫
- css實現立體效果橫向導航選單CSS
- 無需表格製作CSS選單CSS
- 用CSS製作隱藏選單CSS
- 純css製作導航下拉選單CSS
- CSS水平導航選單製作詳解CSS
- CSS 水平導航選單製作詳解CSS
- JavaScript橫向二級導航選單效果JavaScript
- 如何用CSS製作一個圓形放大鏡CSS
- 網頁橫幅製作網頁
- 使用 jQuery 和 CSS3 製作滑動導航選單jQueryCSSS3
- Vue之網易雲音樂橫向選單的實現Vue
- javascript底部具有跟隨效果的橫向導航選單JavaScript
- Axure 教程:製作摺疊選單
- html-製作導航選單HTML
- 純CSS製作單頁Web應用CSSWeb
- 滑鼠懸浮中英文切換橫向導航選單
- 推薦10個 CSS3 製作的創意下拉選單效果CSSS3
- 如何用CSS3製作一個漂亮的登入框CSSS3
- 直播平臺開發,伸縮式選單,隨意調整選單欄橫向的大小
- js橫向滑動摺疊導航選單程式碼例項JS
- 外賣橫幅設計教程,教你如何製作橫幅
- 10個優秀的 HTML5 & CSS3 下拉選單製作教程HTMLCSSS3
- 如何用Unity GUI製作HUDUnityGUI
- 公司網站橫幅素材,分享線上用橫幅模板,快速製作橫幅網站
- 利用純 CSS3 定製單選/多選框樣式CSSS3
- 二級下拉導航選單製作詳解
- 用Delphi製作個性化的選單 (轉)
- Toolbar製作選單條過程詳解 (轉)
- 如何用Python製作自己的遊戲Python遊戲
- ps技巧:如何用ps簡單製作一張創意封面(技巧分享)
- 製作CSS氣泡框CSS
- iOS開發: 使用UITableView製作N級下拉選單iOSUIView
- 在Excel中製作下拉選單的3種方法Excel
- Word文件如何實現單頁橫向設定