横向导航菜单-用图片美化的横向列表导航菜单

最新推荐文章于 2023-04-10 20:30:18 发布

养有道

最新推荐文章于 2023-04-10 20:30:18 发布

阅读量1.3k

点赞数

分类专栏： div+css

本文链接：https://blog.csdn.net/ysydao/article/details/9083445

版权

本文展示了两个使用HTML和CSS创建的横向导航菜单示例，通过背景图片美化了菜单项。第一个示例包括首页和其他四个链接，第二个示例包含八个链接，且有当前选中状态的高亮效果。这些例子有助于提升网站的视觉吸引力和用户体验。

摘要由CSDN通过智能技术生成

例子一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }

#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a {
dis