公司类网站喜欢用的纯CSS菜单

最新推荐文章于 2025-06-03 11:49:39 发布

原创最新推荐文章于 2025-06-03 11:49:39 发布 · 743 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #class #html #float #xhtml #url

HTML/CSS/JS 专栏收录该内容

35 篇文章

订阅专栏

本文详细介绍了网页导航设计的关键元素，包括布局、样式和交互，旨在提升用户体验和网站可用性。通过实例展示如何使用HTML、CSS和JavaScript实现响应式、易用且美观的导航条。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-hasFlash" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Merix-download by http://www.codefans.net</title>
<style>
*{margin:0;padding:0;}
html{height:100%;margin-bottom:1px;background:#48494d;}
body{margin:0;padding:0 0 10px;background:#48494d;font-size:62.5%;}
body,td,input,textarea,select{color:#666;font-family:Arial,Tahoma,sans-serif;}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;height:0;margin:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
a{color:#666;text-decoration:none;outline:none;}
a:active{outline:none;}
a:hover,a:active,a:focus{color:#333;}
#t3{background:url(http://www.codefans.net/jscss/demoimg/200908/m_bg_nav.gif) #fff 0 100% repeat-x;border-top:0.1em solid #dedede;}
#t3a{width:750px;margin:0 auto;}
#t3n{width:750px;margin:0 50px;padding:0;list-style:none;}
#t3n li{display:block;padding:0 0 3px;background:url(http://www.codefans.net/jscss/demoimg/200908/m_e_menu.gif) 50% -1000% no-repeat;position:relative;float:left;}
#t3n li.x a{border-left:none;}
#t3n li.home{border-left:none;float:right;background:transparent !important;}
#t3n li:hover,#t3n li.over{background-position:50% 100%;}
#t3n li a{float:left;display:block;padding:0.9em 10px 0.73em;border-left:0.1em solid #dedede;border-bottom:0.27em solid #fff;font-size:1.1em;color:#70540f;font-weight:700;}
#t3n li:hover a,#t3n li.over a,#t3n li a:hover,#t3n li a:focus,#t3n li a:active{color:#000;border-bottom:0.27em solid #ff378c;}
#t3n li.home{padding:0;}
#t3n li.home a{border-left:none;padding:0.9em 10px 0.73em 0;color:#333;}
#t3n li.home a:hover{padding:0.9em 10px 0.73em 0;color:#000;border-color:#fff !important;}
#t3n li a span{position:absolute;left:47%;top:3.2em;visibility:hidden;width:5px;height:3px;background:url(http://www.codefans.net/jscss/demoimg/200908/m_e_menu.gif) no-repeat;}
#t3n li a:hover span,#t3n li a:focus span,#t3n li a:active span{visibility:visible;}
</style>
</head>
<body>
<div id="t3">
<ul id="t3n" class="clearfix">
  <li class="x"><a href="/">公司主页</a></li>
  <li class=""><a href="#">产品天地</a></li>
  <li class=""><a href="#">新闻纵横</a></li>
  <li class=""><a href="#">服务专区</a></li>
  <li class=""><a href="#">联系我们</a></li>
  <li class=""><a href="#">企业博客</a></li>
</ul>
</div>
</body>
</html>