温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用html和CSS3制作好看的导航栏

发布时间:2021-08-05 09:12:51 来源:亿速云 阅读:222 作者:chen 栏目:web开发

这篇文章主要介绍“怎么用html和CSS3制作好看的导航栏”,在日常操作中,相信很多人在怎么用html和CSS3制作好看的导航栏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用html和CSS3制作好看的导航栏”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

 主要亮点:

  1 ul 水平显示

  2 li 去掉圆点

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

  4 li控制边框样式

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

  6 更改颜色透明度

  7 DIV制作边框阴影

先看效果图:

怎么用html和CSS3制作好看的导航栏

怎么用html和CSS3制作好看的导航栏

怎么用html和CSS3制作好看的导航栏

CSS Code复制内容到剪贴板

  1. <!doctype html>     

  2. html lang="en">     

  3. <head>     

  4.  <meta charset="UTF-8"> <!----编码----->     

  5.  <meta name="Generator" content="EditPlus&reg;">     

  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:127pxheight: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制作好看的导航栏”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI