导航菜单

简介: 导航菜单主要是由列表做出来的。不同的导航菜单还需要与相结合来完成的。   一种菜单式横着的: 代码如下写: HTML:   业界   云计算   移动   研发   程序员     css: ul{ ...

   导航菜单主要是由列表做出来的。不同的导航菜单还需要与<div>相结合来完成的。  

一种菜单式横着的:

代码如下写:

HTML:

<ul>
  <li><a href="#">业界</a></li>
  <li><a href="#">云计算</a></li>
  <li><a href="#">移动</a></li>
  <li><a href="#">研发</a></li>
 </ul>

<li><a class="#">程序员 </a></li>

 

 

css:

ul{
  list-style:none;
  }
  li{
  width:80px;
  height:50px;
  background-color:#B6131B;
  float:left;
  line-height:50px;
  position: relative;
  top:2px;
  left:0px;
  text-align: center;
  }
  a{
  text-decoration:none;
  color:white;
  font-size:20px;
  font-weight:bold;
  font-family: "黑体";
  }
  li:hover{
  background-color:#9B0000 ;
  }

一种是竖着的与横着的都有的:

HTML:

<div class="nav1">
  <ul class="ul1">
  <li id="lione" style="width:220px; text-align: left">
  <a href="#">菜单一</a>
  <div class="nav2">
  <ul class="ul2">
  <li>
  <a href="#">菜单一</a>
  <div class="nav3">
  <a href="#"> 来点我!</a>
   
  </div>
  </li>
  <li>
  <a href="#">菜单二</a>
  <div class="nav3">菜单二</div>
  </li>
  <li>
  <a href="#">菜单三</a>
  <div class="nav3">菜单三</div>
  </li>
  </ul>
   
  </div>
   
  </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>
  </ul>
   
  </div>
   

CSS:

 div{
     border: 1px red solid;
 }

 ul{
     list-style:none
 }
a{
    text-decoration: none;
}
.nav1{
        width:960px;
        height:40px;
        margin: 0 auto;
        border-radius:0px 8px 8px 0px;
        background-color: orangered;
}

 .ul1 li{
       width:100px;
       height: 100%;
       float:left;
       text-align: center;
       line-height: 40px;
       }
.ul1 li a{
    color: #fff;
    display: block;
    width:100%;
    height: 100%;
}
.ul1 li a:hover{
   background-color: #FFA500;
 }

.nav2{
    width:220px;
    height: 300px;
    display: none;
    position: relative;
}


.ul2 li{
    float:none;
    background-color: #32CD32;
    width:100%;
    text-align: left;
}

#lione:hover .nav2{
     display: block;
}


.nav3{
    width:740px;
    height:300px;
    position: absolute;
    left:220px;
    top:0px;
    background-color: #7FFF00;
    border-radius:0px 8px 8px 0px ;
    display: none;
}

.ul2 li:hover .nav3{
    display: block;
}

相关文章
|
Web App开发 移动开发 小程序
扫普通链接二维码打开小程序的踩坑过程...
扫普通链接二维码打开小程序的踩坑过程...
3968 0
扫普通链接二维码打开小程序的踩坑过程...
|
6月前
|
设计模式 机器学习/深度学习 前端开发
Python 高级编程与实战:深入理解设计模式与软件架构
本文深入探讨了Python中的设计模式与软件架构,涵盖单例、工厂、观察者模式及MVC、微服务架构,并通过实战项目如插件系统和Web应用帮助读者掌握这些技术。文章提供了代码示例,便于理解和实践。最后推荐了进一步学习的资源,助力提升Python编程技能。
|
6月前
|
人工智能 Cloud Native 安全
销售易与纷享销客:中国CRM市场的未来格局分析
中国企业级SaaS市场近期因腾讯“接手”销售易而备受关注。销售易定位为“营销服一体化客户经营平台”,强调全场景覆盖和技术深度应用,与腾讯云深度融合;纷享销客则聚焦“移动社交化CRM”,注重销售过程管理。销售易凭借与腾讯的战略合作,在技术、市场和AI能力上占据优势,有望成为中国CRM市场的领导者。纷享销客面临资源劣势和生态孤岛挑战,需寻求战略转型。未来,中国CRM市场将呈现生态化趋势,科技巨头与专业SaaS厂商的合作模式将成为主流。企业用户应综合考虑产品功能、技术实力及生态整合能力,选择合适的CRM供应商。
|
11月前
|
机器学习/深度学习 自然语言处理 并行计算
多头注意力机制介绍
【10月更文挑战第4天】
|
前端开发
前端学习笔记202304学习笔记第八天-web前端架构学习笔记-1
前端学习笔记202304学习笔记第八天-web前端架构学习笔记-1
1079 0
|
8月前
|
人工智能 编解码 算法
全球顶级赛事实践:视频云制播在奥运赛事的关键技术与创新
本次分享主题为“全球顶级赛事实践:视频云制播在奥运等体育赛事的关键技术与创新”。内容涵盖视频云制播的整体技术框架、AI技术重构体育赛事全链路、视频云制播+AI的技术创新与应用、未来展望,以及央视频在奥运等赛事中的成功实践。通过阿里云和央视频的合作,展示了多语种解说、多视角同步、智能媒资管理等技术创新,提升了观众的观赛体验,并推动了体育赛事转播的智能化发展。
361 0
|
机器学习/深度学习 人工智能 算法
2024较火的软件宣传单页HTML源码
2024较火的软件宣传单页HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果
363 4
2024较火的软件宣传单页HTML源码
|
机器学习/深度学习 自然语言处理 监控
金融行业的大数据风控模型:构建安全高效的信用评估体系
金融机构借助大数据风控提升信贷效率,通过数据收集、清洗、特征工程、模型构建与评估来识别风险。关键技术涉及机器学习、深度学习、NLP和实时处理。以下是一个Python风控模型构建的简例,展示了从数据预处理到模型训练、评估的过程,并提及实时监控预警的重要性。该文旨在阐述大数据风控的核心要素和关键技术,并提供基础的代码实现概念。【6月更文挑战第23天】
1797 8
|
运维 关系型数据库 Java
实时计算 Flink版产品使用问题之如何设置白名单
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。