您现在的位置是：网站首页> 编程资料编程资料

基于html和CSS3制作酷炫的导航栏使用HTML+Css+transform实现3D导航栏的示例代码html+css+js实现导航栏滚动渐变效果Html5导航栏吸顶方案原理与对比实现html5 横向滑动导航栏的方法示例html+css 实现简易导航栏功能基于html和CSS3制作简单侧边导航栏使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)

2023-10-23 327人已围观

简介 本篇文章给大家分享基于html和CSS3制作酷炫的导航栏，效果非常美观，需要的朋友可以从参考下

 主要亮点:

  1 ul 水平显示

  2 li 去掉圆点

  3 li中字体水平、竖直居中

  4 li控制边框样式

  5 使用html + css3 渐变画图 制作背景图片

  6 更改颜色透明度

  7 DIV制作边框阴影

先看效果图:

 




CSS Code复制内容到剪贴板
  1.      
  2. html lang="en">     
  3.      
  4.  "UTF-8">      
  5.  "Generator" content="EditPlus®">     
  6.  "Author" content="黄涛">     
  7.  "Keywords" content="关键字，搜索引擎">     
  8.  "Description" content="描述语言">     
  9.  案例     
  10.    "text/css">     
  11.        *{ margin:0;padding:0; }     
  12.        body{background:url("images/bg_title.jpg") repeat-x,url("images/bg.jpg");}     
  13.        #Logo{     
  14.            width:895px;height:45px;     
  15.            /*margin:上下 左右*/     
  16.            margin:50px auto;     
  17.            border-radius:10px;     
  18.            /*html + css3 渐变画图 */     
  19.                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%);     
  20.            box-shadow:1px 1px 33px #fff;/*设计阴影的*/     
  21.        }     
  22.        #Logo ul li     
  23.        {     
  24.            width:127px; height:45px;     
  25.            list-style:none;/*去掉圆点*/     
  26.            float:left;/*水平显示*/     
  27.            color:white;/* #fff */     
  28.            font-size:18px;     
  29.            font-family:"微软雅黑";     
  30.            text-align:center;     
  31.            line-height:45px;/* 行高跟 高度一致时，竖直居中*/     
  32.            border-right:1px solid #000;/*右边框*/     
  33.        }     
  34.        #Logo ul li a     
  35.        {     
  36.            color:white;/* #fff */     
  37.            font-size:18px;     
  38.            font-family:"微软雅黑";     
  39.            text-decoration:none;     
  40.        }     
  41.        #Logo ul li:hover     
  42.        {     
  43.            background:rgba(10,5,5,0.45);     
  44.        }     
  45.        #Logo ul li.first:hover     
  46.        {     

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网