横向导航条

本文介绍了一个使用HTML和CSS实现的带有搜索功能的导航栏设计案例。该导航栏具备鼠标悬停效果和活动页面高亮显示功能,同时集成了简洁的搜索框。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值