前端案例：蓝色CSS3二级导航菜单

最新推荐文章于 2024-03-08 09:33:17 发布
最新推荐文章于 2024-03-08 09:33:17 发布
阅读量5.7k 收藏 1
点赞数 1
分类专栏： 前端案例 文章标签： 前端 div+css 菜单栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/python1001/article/details/90177275
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 导航 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    body {
        background: #eee;
        margin: 0;
        padding: 0; 
    }

    #nav {
        width: 1000px;
        margin: 20px auto;
        height: 50px;
        background:cornflowerblue;
        border-radius: 15px;
        padding-top: 10px;
        box-shadow: 0 2px 2px 1px #000;
    }

    #nav li {
        float: left;
        list-style: none;
        text-align: center;
        height: 40px;
        width: 80px;
        padding: 8px 10px;
    }

    #nav a {
        font-weight: bold;
        color: #f4f4f4;
        text-decoration: none;
        display: block;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        text-shadow: 0 1px 1px #000;
    }

    #nav li:hover > a {
        background:#f4f4f4 repeat-x 0 -20px;
        color: #000;
        border-top: 1px solid #f8f8f8;
        box-shadow: 0 2px 2px rgba(0,0,0, .7);
        -moz-box-shadow: 0 2px 2px rgba(0,0, .7);
        -webkit-box-shadow: 0 2px 2px rgba(0,0, .7);
        text-shadow: 0 2px 2px  rgb(255,255,255, 0.7);
    }

    #nav ul li:hover a, #nav li:hover li a {
        background: none;
        border: none;
        color:#000;
    }

    #nav ul li a:hover {
        background:#335599 repeat-x 0 -100px;
        color:#fff;
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        text-shadow:0 2px 2px rgba(0,0,0, 0.7);
    }

    #nav ul li:first-child > a {
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright:10px;
        -webkit-border-top-left-radius:10px;
        -webkit-border-top-right-radius:10px;
    }

    #nav ul li:last-child > a {
        -moz-border-radius-buttomleft:10px;
        -moz-border-radius-buttomright:10px;
        -webkit-border-bottom-left-radius:10px;
        -webkit-border-bottom-right-radius:10px;
    }

    #nav li:hover > ul {
        opacity:1;
        visibility:visible;
    }

    #nav ul {
        opacity:0;/*opacity 属性设置元素的不透明级别。*/
        visibility:hidden;/*visibility 属性规定元素是否可见。hidden元素是不可见的。*/
        padding:0;
        width:120px;
        position:absolute;
        background:#aabbcc repeat-x 0 0;
        border:1px solid #7788aa;

        border-radius:10px;
        -moz-border-radius:10px;
        -web-border-radius:10px;
        box-shadow:0 2px 2px rgba(0,0,0, .5);
        -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
        -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

        -moz-transiton:opacity .25 linear, visibility .1s linear .1s;
        -webkit-transiton:opacity .25s linear, visibility .1s linear .1s;
        -o-transition:opacity .25s linear, visibility .1s linear .1s;
        transition:opacity .25s linear, visibility .1s linear .1s;

    }

    #nav ul li {
        float:none;
        margin:0;
    }

    #nav ul a {
        font-weight:normal;
        text-shadow:0 2px 2px rgba(255,255,255, 0.7);
    }

    #nav ul ul {
        left:160px;
        top:0px;
    }

    #bottom {
        width:100%;
        text-align: center;
    }


  </style>
 </head>

 <body>
     <nav>
        <ul id="nav">
              <li><a href="#">首页</a></li>
      <li><a href="#">个人作品</a>
           <ul>
              <li><a href="#">个人作品</a></li>
              <li><a href="#">个人作品</a></li>
              <li><a href="#">个人作品</a></li>
          </ul>
      </li>

     <li><a href="#">公司介绍</a></li>
     <li><a href="#">公司简介</a></li>
     <li><a href="#">联系我们</a></li>
     <li><a href="#">加盟伙伴</a></li>
   
   </ul>
</nav>
  
 </body>
</html>

案例效果图：

 

鸿蒙开发才大官人
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
--仿蓝色理想网站的导航菜单--
『天道酬勤』
03-14 5476
网页特效||---仿蓝色理想网站的导航菜单#dNavBar{background-color:#ffffff;}#dNavBar li{list-style-type:none;float:left;width:84px;height:28px;line-height:28px;font-size:12px;color:#FFFFFF
VSCode 底部蓝色导航栏介绍以及导航不见了解决
pleaseprintf的博客
06-21 5010
Visual Studio Code（简称 VSCode）是一款功能强大的开源代码编辑器，而其底部蓝色导航栏是一项特性，可以大大提升开发者的编辑器效率。本文将深入探讨 VSCode 底部蓝色导航栏的功能和用法，帮助您更好地利用这个工具，提高编码速度和工作流程。VSCode 的底部蓝色导航栏是编辑器界面底部的一个水平栏，以蓝色背景突出显示。它提供了一系列快速导航和功能按钮，让您可以更快速地浏览和操作代码文件，提高开发效率。
203种网页配色方案59种导航条方案
11-23
这是我搜集的网页配色以及导航条设计的一些资料,网页配色方案来源于"新锐网页配色设计与案例分析"和另外一个网页,59种导航条设计方案来源于一个网页制作软件,喜欢的拿去,可以作为参考
分享86个Html经典模板，总有一款适合您
最新发布
zy0412326的专栏
03-08 923
知识付费甚欢喜，为咱码农谋福利。陆地生态环境BLOG网页模板。电子流行音乐BLOG网页模板。黑色出版信息BLOG网页模板。夏威夷芙蓉花BLOG网页模板。简洁焦点信息BLOG网页模板。绿色植物研究BLOG网页模板。海洋生物保护BLOG网页模板。蓝色导航BLOG信息网页模板。勤劳的蜜蜂BLOG网页模板。拉斯维加斯BLOG网页模板。花椰菜信息BLOG网页模板。蓝黑设计BLOG网页模板。长滩夜景BLOG网页模板。黑色整体BLOG网页模板。色彩研究BLOG网页模板。黄色装饰BLOG网页模板。
黑色二级导航菜单
奋斗的小能能的博客
07-30 835
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3黑色二级导航菜单</t.
Web App - 响应超级菜单 手机菜单 20种配色方案
ICode联盟
12-15 180
下载地址 响应式的导航菜单，包括windows8风格，兼容电脑和手机网站，完全支持所有触摸设备，提供20种颜色方案。 dd:
多色Bootstrap3网站导航菜单jQuery插件
ICode联盟
02-20 697
下载地址 FH大型菜单是一个基于jQuery的Bootstrap3兼容所有移动设备和现代web浏览器。 自定义6配色方案(橙色,蓝色,红色,逆,默认和绿色。你也可以建立自己的配色方案非常简单，100%响应布局设计和视网膜显示屏可以很棒的字体图标。 dd: ...
Delphi蓝色顶部导航代码
01-01
Delphi顶部导航; Delphi分类菜单; 直接挂载本地路径; 适合Delphi新手,成手老将勿喷~!
蓝色导航CSS实现
热门推荐
拓
03-19 14万+
代码 New Document <!--/***********************************************//* 快速连接导航栏 *//***********************************************/ #nav {
vscode底部蓝色导航不见了，vue less报错
you200282的博客
06-16 1万+
vscode底部蓝色导航不见了，vue less报错
zblog导航收录网导航模板
爱酷码的博客
06-28 937
本模板是基于ZBLOG PHP制作独立页面网站目录主题。 模板演示比较简化，外观可能也不是那么好看，喜欢的朋友可下载！ 1、修复分类页面站点直达问题，修复后点击站点正确跳转到内页。 2、分页页面添加分页功能，具体可以到"列表页显示文章的数量"设置翻页数量。 3、将上传缩略图修改成二维码自动获取，省时省力。 4、详细网站页面增加随机网站，增加页面互动和权重传递。 下载地址：https://pan.baidu.com/s/1Gbdmcw5O71MghkYpXIa2ew提取码：...
蓝色CSS3二级导航菜单特效代码
03-20
蓝色CSS3二级导航菜单，纯CSS3制作，圆形导航栏，适用于企业网站、个人网站等使用。
蓝色CSS3二级导航菜单
05-01
蓝色CSS3二级导航菜单，纯CSS3制作，圆形导航栏，适用于企业网站、个人网站等使用。
CSS3 二级导航菜单的制作的示例
09-24
主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
蓝色CSS3二级导航菜单.zip
07-05
蓝色CSS3二级导航菜单，纯CSS3制作，圆形导航栏，适用于企业网站、个人网站等使用。
CSS3二级下拉动画滑动菜单特效代码
03-20
CSS3二级下拉动画滑动菜单是一款CSS3二级下拉动画菜单，这款CSS3菜单的特点是在菜单展开时，菜单的背景会出现滑动的动画效果。
Bootstrap——导航栏
xun__xing的博客
07-31 1776
导航栏一、导航栏1.基本2.表单3.文本处理4.配色方案5.居中容器6.定位7.响应式8.拓展 一、导航栏 1.基本 导航栏需要使用.navbar 来定义，并使用 .navbar-expand{-sm|-md|-lg|-xl} 用于响应式布局以及使用配色方案Class 。 <nav class="navbar navbar-expand-lg bg-light"> <a href="#" class="navbar-brand"> <img src="http://
经验传承：谈色彩设计方法
周红伟讲AI
12-02 1021
 经验传承：谈色彩设计方法       摘要：在色彩设计应用中，我们对颜色不同程度的理解，影响到设计页面的表现，熟练地运用色彩搭配，设计时岂不事半功倍。一张优秀的设计作品，它的色彩搭配必定和谐得体，令人赏心悦目。 为什么要整理设计色彩方法？ 在色彩设计应用中，我们对颜色不同程度的理解，影响到设计页面的表现，熟练地运用色彩搭配，设计时岂不事半功倍。一张优秀的设计作
蓝色导航dove.cf页面_PPT侧边目录导航制作
weixin_39926103的博客
10-29 5万+
很多小伙伴私信我怎么做侧边目录导航，在这里我就出个教程ヾ(≧▽≦*)o我用的WPS，大家用office也一样。office被我用的经常崩溃，所以改用国产软件了。不喜WPS的，勿喷谢谢！╰(￣▽￣)╭1、首先添加个空白页添加空白页2、添加“形状”，选择矩形添加形状3、画框下图我共画了5个框。左边四个小框我进行了颜色填充，右边白色的大框是论文内容，此篇教程中不包括内容的制作、排版。画矩形4、添加文字。...
css二级导航栏下拉菜单
06-09
好的，你可以按照以下步骤实现CSS二级导航栏下拉菜单： 1. 在HTML文件中，用列表实现导航栏，子列表实现下拉菜单，如下所示： ```html <li><a href="#">首页</a></li> 产品 <li><a href="#">产品1</a></li...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值