利用html和CSS3实现导航栏-css教程-PHP中文网

首页

web前端

css教程

利用html和CSS3实现导航栏

不言

Jun 20, 2018 pm 04:44 PM

css3html5

本篇文章给大家分享基于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: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>

代码超简单，希望对大家学习制作html和css3制作超酷导航栏有所帮助。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何使用CSS3实现瀑布流布局

如何使用CSS3配合IE滤镜实现渐变和投影的效果

关于css过渡和3D效果的简单实现

以上是利用html和CSS3实现导航栏的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

这不应该发生：对不可能进行故障排除May 15, 2025 am 10:32 AM

解决这些不可能的问题之一，这是您从未想过的其他问题的问题。

@KeyFrames vs CSS过渡：有什么区别？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用页面CMS进行静态站点内容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的内容管理系统选项可用，而我进行了几个测试，但实际上没有一个是一个，y＆＃039;知道吗？怪异的定价模型，艰难的自定义，有些甚至最终成为整个＆

链接HTML中CSS文件的最终指南May 13, 2025 am 12:02 AM

链接CSS文件到HTML可以通过在HTML的部分使用元素实现。1)使用标签链接本地CSS文件。2)多个CSS文件可通过添加多个标签实现。3)外部CSS文件使用绝对URL链接，如。4)确保正确使用文件路径和CSS文件加载顺序，优化性能可使用CSS预处理器合并文件。

CSS Flexbox与网格：全面评论May 12, 2025 am 12:01 AM

选择Flexbox还是Grid取决于布局需求：1)Flexbox适用于一维布局，如导航栏；2)Grid适合二维布局，如杂志式布局。两者在项目中可结合使用，提升布局效果。

如何包括CSS文件：方法和最佳实践May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用标签在HTML的部分引入外部CSS文件。1.使用标签引入外部CSS文件，如。2.对于小型调整，可以使用内联CSS，但应谨慎使用。3.大型项目可使用CSS预处理器如Sass或Less，通过@import导入其他CSS文件。4.为了性能，应合并CSS文件并使用CDN，同时使用工具如CSSNano进行压缩。

Flexbox vs Grid：我应该学习两者吗？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction