基于html和CSS3制作酷炫的导航栏

前端技术 2023/09/04 CSS

 主要亮点:

  1 ul 水平显示

  2 li 去掉圆点

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

  4 li控制边框样式

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

  6 更改颜色透明度

  7 DIV制作边框阴影

先看效果图:

 




CSS Code复制内容到剪贴板
  1. <!doctype html>     
  2. html lang=\"en\">     
  3. <head>     
  4.  <meta charset=\"UTF-8\"> <!----编码----->     
  5.  <meta name=\"Generator\" content=\"EditPlus®\">     
  6.  <meta name=\"Author\" content=\"黄涛\">     
  7.  <meta name=\"Keywords\" content=\"关键字，搜索引擎\">     
  8.  <meta name=\"Description\" content=\"描述语言\">     
  9.  <title>案例</title>     
  10.    <style type=\"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.        {     
  47.            border-radius:10px 0px 0px 10px;/*左上 左下 圆弧显示 */     
  48.        }     
  49.        #Logo ul li.last:hover     
  50.        {     
  51.            border-radius:0px 10px 10px 0px;/*右上 右下 圆弧显示 */     
  52.        }     
  53.        #Logo ul li ul li      
  54.        {     
  55.            border:none;     
  56.            border-top:1px solid #989898;     
  57.            background:rgba(10,5,5,0.45);/*颜色透明度 */     
  58.            border-radius:10px;     
  59.        }     
  60.        #Logo ul li ul     
  61.        {     
  62.            display:none;/*不显示*/     
  63.        }     
  64.        #Logo ul li ul li:hover     
  65.        {     
  66.            background:rgba(10,5,5,0.8);/*颜色透明度 */     
  67.            border-radius:10px;     
  68.        }     
  69.        #Logo ul li:hover ul     
  70.        {     
  71.            display:block;     
  72.            -webkit-animation:roll 1s ease;/*roll 旋转名称，1s旋转效果 */     
  73.        }     
  74.        @-webkit-keyframes roll /*roll旋转名称与上面一致*/     
  75.        {     
  76.            0% {-webkit-transform:rotate(0deg);}     
  77.            100% {-webkit-transform:rotate(360deg);}     
  78.        }     
  79.    </style>     
  80. </head>     
  81. <body>     
  82.    <div id=\"Logo\">     
  83.        <ul>     
  84.            <li class=\"first\">      
  85.                <a href=\"#\">网址<a>     
  86.                <ul>     
  87.                    <li>     
  88.                        <a href=\"http://www.baidu.com\">百度</a>     
  89.                    </li>     
  90.                    <li>     
  91.                        <a href=\"http://www.sina.com\">新浪</a>     
  92.                    </li>     
  93.                </ul>     
  94.            </li>     
  95.            <li>      
  96.                <a href=\"#\">新闻<a>     
  97.            </li>     
  98.            <li>      
  99.                <a href=\"#\">视频<a>     
  100.            </li>     
  101.            <li>      
  102.                <a href=\"#\">音乐<a>     
  103.            </li>     
  104.            <li>      
  105.                <a href=\"#\">地图<a>     
  106.            </li>     
  107.            <li>      
  108.                <a href=\"#\">问问<a>     
  109.            </li>     
  110.            <li class=\"last\" style=\"border:none;\">      
  111.                <a href=\"#\">关于<a>     
  112.            </li>     
  113.        </ul>     
  114.    </div>     
  115. </body>     
  116. /html>  

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

本文地址：https://www.stayed.cn/item/10689

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案