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

全栈程序员站长

发布于 2022-08-30 19:53:28

4.7K0

文章被收录于专栏：全栈程序员必看全栈程序员必看

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

效果

代码中的图片可以自己换的

下拉菜单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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/144804.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月1，如有侵权请联系 cloudcommunity@tencent.com 删除

java