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,\\5B8B\4F53,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)


相关推荐

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

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

  • 【22】进大厂必须掌握的面试题-30个Informatica面试

    在大数据时代,任何公司的成功都取决于数据驱动的决策和业务流程。在这种情况下,数据集成对于任何业务的成功秘诀都是至关重要的,并且掌握诸如Informatica Powercenter…

    2020年11月13日
  • 移动互联网寒冬,Android 程序员的出路在哪里?

    移动互联网寒冬,Android 程序员的出路在哪里?安卓行业主要问题是初级Android太多了,会写XML和Activity的程序员太多了,初中级程序员面临很大的竞争,现状也就偏于高级开发者。越来越多的初中级Android程序员找不到满意的工作,甚至根本找不到工作!所以很多人觉得Android要凉了,甚至不惜转行,从头学其它技术。现在的Android招聘要求,已经不是多年之前的要求了。Android应用开发发展到今天,已经成为…

  • 【16】进大厂必须掌握的面试题-100个python面试

    【16】进大厂必须掌握的面试题-100个python面试

    2020年10月29日
  • 给Android程序员的一些面试建议「建议收藏」

    给Android程序员的一些面试建议「建议收藏」前言应大家的邀请,写一篇关于Android面试相关的博客,需要说明的是本文只针对Android应用开发,不针对rom开发以及逆向工程。我想面试对于程序员来说是很重要的一件事件,面试结果的好坏直接决定了能否进入某个公司以及以什么级别和待遇进入某个公司。我参加面试的经验并不多,但是以面试官的身份面试别人倒是有很多次,所以我可以结合这些经验来介绍下如何更好地把握一个面试。什么是合适的候选者在介绍如何面试之

  • 关于 Android 程序员最近的状况

    关于 Android 程序员最近的状况-关于Android的近况大家都知道,今年移动开发不那么火热了,完全没有了前两年Android开发那种火热的势头,如此同时,AI热火朝天,很多言论都说Android不行了。其实不光是Android,iOS也有类似的言论。那么到底如何看待这一现象呢?我的答案是:Android还行,只是回归平淡了,没有了前些年的火热。-为什么Android还行?如何看待一个行业行不行?有两点:这个行业有没有死亡?…

发表回复

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

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