Implementieren Sie die Navigationsleiste mit HTML und CSS3-CSS-Tutorial-php.cn

Implementieren Sie die Navigationsleiste mit HTML und CSS3

不言

Freigeben： 2018-06-20 16:44:39

Original

1658 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie eine coole Navigationsleiste basierend auf HTML und CSS3 erstellen. Der Effekt ist sehr schön.

Wichtigste Highlights:

1 ul horizontale Anzeige

2 li Punkte entfernen

3 li Schrift horizontal und vertikal zentrieren

4 li Rahmenstil steuern

5 Verwenden Sie HTML + CSS3-Verlaufsmalerei, um Hintergrundbilder zu erstellen

6 Ändern Sie die Farbtransparenz

7 p Erstellen Sie Randschatten

Sehen Sie sich zuerst die Darstellungen an:

<!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:895px;height:45px;     
           /*margin:上下 左右*/     
           margin:50px auto;     
           border-radius:10px;     
           /*html + css3 渐变画图 */     
               background-image:-webkit-linear-gradient(rgba(41,41,41,0.75) 0% ,rgba(54,54,54,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 #989898;     
           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>

Nach dem Login kopieren

Der Code ist super einfach, ich hoffe, er wird für alle hilfreich sein Erfahren Sie, wie Sie mithilfe von HTML und CSS3 eine coole Navigationsleiste erstellen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie CSS3, um das Wasserfall-Flow-Layout zu implementieren

So verwenden Sie CSS3 mit IE-Filtern Farbverläufe und Projektionseffekte erzielen

Über die einfache Implementierung von CSS-Übergängen und 3D-Effekten

Das obige ist der detaillierte Inhalt vonImplementieren Sie die Navigationsleiste mit HTML und CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!