欢迎来到宝物袋网站,如果你有宝物想分享给大家的话,请联系我们。注册 | 登录

当前位置:首页 » HTML » 正文内容

利用li标签+css实现网页横排导航菜单的HTML源码

在网页布局时,少不了用到导航菜单,而在div+css标准网页布局时推崇的是合理的使用html标签,有些人直接用a标签实现导航菜单,而小编推荐用li标签里包含a标签的方式来实现导航菜单,这要代码更利于后期用css代码调整导航菜单的显示效果;下面给大家看看用li+css实现的导航菜单效果截图:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用li标签+css实现网页横排导航菜单的HTML源码</title>
<style type="text/css">
* {padding: 0px;	margin: 0px;}
a{text-decoration:none;color: #25aad6;}
ul {list-style-type: none;background:#25aad6;}
.nav li{color: #fff;height: 66px;line-height: 66px;width: auto;display:inline-block;margin-right: 5px;text-align: center;}
.nav li:hover{background: #51bbde;}
.nav li a{color:#FFF; font-size:16px; font-weight:bold; display:block;padding: 0 20px;}
.nav li a:hover{color:#FFF;}
</style>
</head>

<body>
<div id="bwd">
  <ul class="nav">
    <li><a href="http://www.baowudai.cn/ruanjian/">软件</a></li>
    <li><a href="http://www.baowudai.cn/jiaocheng/">教程</a></li>
    <li><a href="http://www.baowudai.cn/yuanma/">源码</a></li>
    <li><a href="http://www.baowudai.cn/moban/">模板</a></li>
    <li><a href="http://www.baowudai.cn/tuxiangsucai/">图像素材</a></li>
    <li><a href="http://www.baowudai.cn/shipinsucai/">视频素材</a></li>
    <li><a href="http://www.baowudai.cn/dianzishu/">电子书</a></li>
  </ul>
</div>
</body>
</html>

li标签做横排导航菜单的重点就在于给li标签的css样式添加了“display:inline-block;”,以前经常会有人使用float浮动来实现,小编不推荐这种方法。