利用html和CSS3實現導航欄

來源：懂視網責編：小采時間：2020-11-27 18:48:23

利用html和CSS3實現導航欄

利用html和CSS3實現導航欄:本篇文章給大家分享基于html和CSS3制作酷炫的導航欄，效果非常美觀，需要的朋友可以從參考下主要亮點: 1 ul 水平顯示 2 li 去掉圓點 3 li中字體水平、豎直居中 4 li控制邊框樣式 5 使用html + css3 漸變畫圖制作背景圖片 6 更改顏色透明度 7 p制作

推薦度：

點擊下載本文 文檔為doc格式

導讀利用html和CSS3實現導航欄:本篇文章給大家分享基于html和CSS3制作酷炫的導航欄，效果非常美觀，需要的朋友可以從參考下主要亮點: 1 ul 水平顯示 2 li 去掉圓點 3 li中字體水平、豎直居中 4 li控制邊框樣式 5 使用html + css3 漸變畫圖制作背景圖片 6 更改顏色透明度 7 p制作

本篇文章給大家分享基于html和CSS3制作酷炫的導航欄，效果非常美觀，需要的朋友可以從參考下

主要亮點:

1 ul 水平顯示

2 li 去掉圓點

3 li中字體水平、豎直居中

4 li控制邊框樣式

5 使用html + css3 漸變畫圖制作背景圖片

6 更改顏色透明度

7 p制作邊框陰影

先看效果圖:

<!doctype html> 
html lang="en"> 
<head> 
 <meta charset="UTF-8"> <!----編碼-----> 
 <meta name="Generator" content="EditPlus?"> 
 <meta name="Author" content="黃濤"> 
 <meta name="Keywords" content="關鍵字，搜索引擎"> 
 <meta name="Description" content="描述語言"> 
 <title>案例</title> 
 <style type="text/css"> 
 *{ margin:0;padding:0; } 
 body{background:url("images/bg_title.jpg") repeat-x,url("images/bg.jpg");} 
 #Logo{ 
 width:5px;height:45px; 
 /*margin:上下 左右*/ 
 margin:50px auto; 
 border-radius:10px; 
 /*html + css3 漸變畫圖 */ 
 background-image:-webkit-linear-gradient(rgba(41,41,41,0.75) 0% ,rgba(,,,0.72) 50%,rgba(24,23,23,0.94) 51%); 
 box-shadow:1px 1px 33px #fff;/*設計陰影的*/ 
 } 
 #Logo ul li 
 { 
 width:127px; height:45px; 
 list-style:none;/*去掉圓點*/ 
 float:left;/*水平顯示*/ 
 color:white;/* #fff */ 
 font-size:18px; 
 font-family:"微軟雅黑"; 
 text-align:center; 
 line-height:45px;/* 行高跟 高度一致時，豎直居中*/ 
 border-right:1px solid #000;/*右邊框*/ 
 } 
 #Logo ul li a 
 { 
 color:white;/* #fff */ 
 font-size:18px; 
 font-family:"微軟雅黑"; 
 text-decoration:none; 
 } 
 #Logo ul li:hover 
 { 
 background:rgba(10,5,5,0.45); 
 } 
 #Logo ul li.first:hover 
 { 
 border-radius:10px 0px 0px 10px;/*左上 左下 圓弧顯示 */ 
 } 
 #Logo ul li.last:hover 
 { 
 border-radius:0px 10px 10px 0px;/*右上 右下 圓弧顯示 */ 
 } 
 #Logo ul li ul li 
 { 
 border:none; 
 border-top:1px solid #98; 
 background:rgba(10,5,5,0.45);/*顏色透明度 */ 
 border-radius:10px; 
 } 
 #Logo ul li ul 
 { 
 display:none;/*不顯示*/ 
 } 
 #Logo ul li ul li:hover 
 { 
 background:rgba(10,5,5,0.8);/*顏色透明度 */ 
 border-radius:10px; 
 } 
 #Logo ul li:hover ul 
 { 
 display:block; 
 -webkit-animation:roll 1s ease;/*roll 旋轉名稱，1s旋轉效果 */ 
 } 
 @-webkit-keyframes roll /*roll旋轉名稱與上面一致*/ 
 { 
 0% {-webkit-transform:rotate(0deg);} 
 100% {-webkit-transform:rotate(360deg);} 
 } 
 </style> 
</head> 
<body> 
 <p id="Logo"> 
 <ul> 
 <li class="first"> 
 <a href="#">網址<a> 
 <ul> 
 <li> 
 <a href="http://www.baidu.com">百度</a> 
 </li> 
 <li> 
 <a href="http://www.sina.com">新浪</a> 
 </li> 
 </ul> 
 </li> 
 <li> 
 <a href="#">新聞<a> 
 </li> 
 <li> 
 <a href="#">視頻<a> 
 </li> 
 <li> 
 <a href="#">音樂<a> 
 </li> 
 <li> 
 <a href="#">地圖<a> 
 </li> 
 <li> 
 <a href="#">問問<a> 
 </li> 
 <li class="last" style="border:none;"> 
 <a href="#">關于<a> 
 </li> 
 </ul> 
 </p> 
</body> 
/html>

代碼超簡單，希望對大家學習制作html和css3制作超酷導航欄有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

利用html和CSS3實現導航欄

推薦度：

點擊下載本文 文檔為doc格式

標簽：導航實現導航欄

熱門焦點

利用html和CSS3實現導航欄

利用html和CSS3實現導航欄

利用html和CSS3實現導航欄

最新推薦

猜你喜歡

熱門推薦