本文介绍了一个使用HTML和CSS实现的带有搜索功能的导航栏设计案例。该导航栏具备鼠标悬停效果和活动页面高亮显示功能，同时集成了简洁的搜索框。
<!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" />
<title>无标题文档</title>
<style>
#tray {position:relative; width:1200px; height:48px; background:yellow; overflow:hidden; font:bold 90%/1 "tahoma",sans-serif;}
#tray ul {margin:0 10px; list-style:none;}
#tray li {display:inline;}
#tray li a {float:left; padding:18px 21px 17px 18px; text-decoration:none;}
#tray li a:hover {background:red;padding-top:10px;padding-bottom:25px;}
#tray li#tray-active a {background:url("../design/tray-active.gif");}
.noscreen{display:none}
#search {position:absolute; top:8px; right:20px; background:red}
#search div {position:relative; width:185px;}
#search #search-input {position:absolute; top:0; left:0; width:150px; height:30px; background:url("../design/search-input.gif") 0 0 no-repeat; overflow:hidden;}
#search #search-input input {width:136px; margin:8px; border:0; font:100%/1 "arial",sans-serif;}
#search #search-submit {position:absolute; top:0; right:0; width:30px;}
</style>
</head>
<body>
<div id="tray">
<ul>
<li id="tray-active"><a href="#">Homepage</a></li> <!-- Active page -->
<li><a href="#">Live demo</a></li>
<li><a href="#">About product</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Purchase</a></li>
</ul>
<!-- Search -->
<div id="search" class="box">
<form action="#" method="get">
<div class="box">
<div id="search-input"><span class="noscreen">Search:</span><input type="text" size="30" name="" value="Search" /></div>
<div id="search-submit"></div>
</div>
</form>
</div> <!-- /search -->
<hr class="noscreen" />
</div> <!-- /tray -->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#tray {position:relative; width:1200px; height:48px; background:yellow; overflow:hidden; font:bold 90%/1 "tahoma",sans-serif;}
#tray ul {margin:0 10px; list-style:none;}
#tray li {display:inline;}
#tray li a {float:left; padding:18px 21px 17px 18px; text-decoration:none;}
#tray li a:hover {background:red;padding-top:10px;padding-bottom:25px;}
#tray li#tray-active a {background:url("../design/tray-active.gif");}
.noscreen{display:none}
#search {position:absolute; top:8px; right:20px; background:red}
#search div {position:relative; width:185px;}
#search #search-input {position:absolute; top:0; left:0; width:150px; height:30px; background:url("../design/search-input.gif") 0 0 no-repeat; overflow:hidden;}
#search #search-input input {width:136px; margin:8px; border:0; font:100%/1 "arial",sans-serif;}
#search #search-submit {position:absolute; top:0; right:0; width:30px;}
</style>
</head>
<body>
<div id="tray">
<ul>
<li id="tray-active"><a href="#">Homepage</a></li> <!-- Active page -->
<li><a href="#">Live demo</a></li>
<li><a href="#">About product</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Purchase</a></li>
</ul>
<!-- Search -->
<div id="search" class="box">
<form action="#" method="get">
<div class="box">
<div id="search-input"><span class="noscreen">Search:</span><input type="text" size="30" name="" value="Search" /></div>
<div id="search-submit"></div>
</div>
</form>
</div> <!-- /search -->
<hr class="noscreen" />
</div> <!-- /tray -->
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
