ul制作横向导航菜单

来源：互联网发布：武汉网络环购网诈骗编辑：程序博客网时间：2024/06/11 21:47

<!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> <title>首页</title> <link href="css/index.css" mce_href="css/index.css" rel="stylesheet" type="text/css" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #div_menu { margin: 0px 12px; height: 37px; background-image: url(../images/navbg.png); display: block; padding: 0px; background-repeat: repeat-x; } #menu { font: 12px verdana, arial, sans-serif; /*设置文字大小和字体样式*/ } #menu, #menu li { list-style: none; /*将默认的列表符号去掉*/ padding: 0; /*将默认的内边距去掉*/ margin: 0; /*将默认的外边距去掉*/ } #menu li { float: left; /* 往左浮动 */ } #menu li a { display: block; /*将超链接设置成按块显示*/ /*padding: 8px 10px;*/ /*设置内边距*/ /*background: #3A4953;*/ /*设置背景色*/ background-image: url(images/navbg.png); /*设置背景图片*/ background-repeat: repeat-x; color: #fff; /*设置文字颜色*/ text-decoration: none; /* 去掉下划线 */ /*border-right: 1px solid #000;*/ /* 在左侧加上分隔线 */ /* 如果是中英文混排的文字，建议设置以下属性 */ width: 92px; /* 设置宽度 */ height: 37px; /* 设置高度 */ line-height: 37px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */ text-align: center; /* 居中对齐文字 */ } #menu li a:hover { /*background: #146C9C;*/ /* 变换背景色 */ background-image: url(images/header_hover.png); /*变化背景图片*/ color: #fff; /* 变换文字颜色 */ text-decoration: none; /* border-right: 1px solid #000;*/ } #menu li a.last { border-right: 0; /* 去掉左侧边框 */ } /*两个菜单之间的分割图片样式*/.split { display: block; background-image: url(images/header_interval.png); width: 2px; height: 37px; background-position: center; background-repeat: no-repeat; } </style></head><body> <div id="box">  <div id="div_top"> </div>  <div id="div_menu"> <ul id="menu"> <li><a href="#" mce_href="#">网站首页</a></li> <li class="split"></li> <li><a href="#" mce_href="#">德育天地</a></li> <li class="split"></li> <li><a href="#" mce_href="#">优秀教案</a></li> <li class="split"></li> <li><a href="#" mce_href="#">教育科研</a></li> <li class="split"></li> <li><a href="#" mce_href="#">计划总结</a></li> <li class="split"></li> <li><a href="#" mce_href="#">经典试卷</a></li> <li class="split"></li> <li><a href="#" mce_href="#">课件下载</a></li> <li class="split"></li> <li><a href="#" mce_href="#">师德活动</a></li> <li class="split"></li> <li><a href="#" mce_href="#">家教平台</a></li> <li class="split"></li> <li><a href="#" mce_href="#">IT技术</a></li> </ul> </div> </div></body></html>