HTML+CSS实现导航条及下拉菜单[通俗易懂]

HTML+CSS实现导航条及下拉菜单[通俗易懂]html+css实现下拉菜单

大家好,又见面了,我是你们的朋友全栈君。

 

效果

代码中的图片可以自己换的
在这里插入图片描述
下拉菜单HTML代码



下拉菜单CSS代码

在写完上述代码的同时须加上css的重置代码,代码如下:

* { 
   
    margin: 0;
    padding: 0
}
em,i { 
   
    font-style: normal
}
li { 
   
    list-style: none
}
a{ 
   
    font: 14px/24px Microsoft YaHei,Arial,\B8BF53,Arial Narrow;
    letter-spacing: 1.2px;
    color: #666;
    text-decoration: none
}
a:hover { 
   
    color: #c81623 ;
}

img { 
   
    border: 0;
    vertical-align: middle
}
input{ 
   
    outline: none;
}
button { 
   
    cursor: pointer;
    border:none;
    outline: none;
}


<header class="header"> <div class="header_left"> <img src="img/logo.jpg"> </div> <div class="header_right"> <div class="number_right"> <img src="img/number.jpg"> </div> <ul> <a href="#"><li>首页</li></a> <a href="#"><li class="show_list"> <span>成功案例</span> <ul class="move_list"> <li>品牌设计</li> <li>网页设计</li> <li>平面设计</li> <li>电子商城</li> <li>空间/建筑</li> </ul> </li></a> <a href="#"><li>我要设计</li></a> <a href="#"><li>在线咨询</li></a> <a href="#"><li>会员注册</li></a> <a href="#"><li>会员登录</li></a> </ul> </div> </header>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/144804.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)
blank

相关推荐

  • java程序员简历范文大全_程序员简历

    java程序员简历范文大全_程序员简历求职意向 期望工作地区: 上海 期望月薪: 15000元/月 目前状况: 我目前处于离职状态,可立即上岗 期望工作性质: …

    2022年10月26日
  • Android程序员指南中文版[通俗易懂]

    Android程序员指南中文版[通俗易懂]给个链接,呵呵,前八章的都有,与大家分享http://wc0903.javaeye.com/category/95633

  • 如何运用LoadRunner进行http接口测试[通俗易懂]

    如何运用LoadRunner进行http接口测试[通俗易懂]目前自己有接触到的接口主要有三类:WCF、WebService及http接口,前两类是标准型的服务接口。这对于如何对接口进行功能测试,大家可以去网上查找下,有很多已有的测试工具,比如SoapUI、HttpClient等。在这里,我将主要针对如何运用LoadRunner进行接口的性能测试进行说明,其实LoadRunner也可以进行接口的功能测试。在这之前,我相信大家应该都清楚LoadRunner是

  • 面试java工程师的自我介绍_软件开发和程序员一样吗

    面试java工程师的自我介绍_软件开发和程序员一样吗程序员面试时一段短短的自我介绍,其实是为了揭开更深入的面谈而设计的。下面学习啦小编为你带来java程序员面试自我介绍范文的内容,希望你们喜欢。关于java程序员面试自我介绍范文篇一本人叫小冰,今年22岁,现在是吉林大学软件开发与信息管理专业方向的三年级学生,对软件开发怀有浓烈的兴趣,且对JAVA语言尤其熟悉,能熟练使用jsp、struts、struts2、sring2和hibernate3等流行的…

    2022年10月29日
  • Android程序员接私活完整攻略「建议收藏」

    Android程序员接私活完整攻略「建议收藏」接私活对程序员这个圈子来说是一个既公开又隐私的话题,不说全部,应该大多数程序员都有过想要接私活的想法,当然,也有部分得道成仙的不主张接私活。但是很少有人在公开场合讨论私活的问题,似乎都在避嫌。就跟有人下班后跑滴滴一样,程序员私有时间接点活挣点钱不也很正常么,不过不要在上班时间就行,就跟你上班期间出去跑滴滴一样。当你竭尽全力想要去接私活的时候一定做过这样的事,百度搜索“程序员如何接私活”或者…

  • 1、win10下的python3.5.4安装

    现在越来越多人入坑python了,当然我也不例外。作为一个java程序员的我,在空余时间就慢慢学习python了 。第一件事就是安装Python啦。(主要以Python 3.5.4为例)一、官网下载安装包官网地址:https://www.python.org/downloads/windows/ 都说越新越好嘛,其实我觉得都差不多,但是3.6跟3.5还是有点区别的嘛,所以我…

    2021年11月30日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号