<!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>
分享到：
相关推荐
本文将深入探讨如何使用JavaScript实现一个二级横向导航条，并分析其功能特点。 首先，"JS做的二级横向导航条"是一种交互式的网页组件，通常由HTML、CSS和JavaScript三者共同构建。在本实例中，当鼠标悬停在一级...
"CSS横向导航条-3"这个主题聚焦于使用纯CSS来创建美观且功能强大的水平导航菜单。下面我们将深入探讨CSS在构建横向导航条时的关键知识点。 1. **CSS盒模型**：理解CSS盒模型是制作任何网页元素的基础，包括导航条。...
本文将深入探讨如何创建一个完美的二级CSS横向导航条，结合实际案例“完美的二级css横向导航条”进行详细讲解。 首先，我们来理解一下二级导航条的概念。一级导航条通常位于页面顶部，包含网站的主要分类；二级导航...
在网页设计中，二级CSS横向导航条是一种常见的交互元素，用于提供清晰的网站结构和方便的用户导航。这种导航条通常包含一级菜单项，当用户悬停在一级菜单上时，会显示对应的二级子菜单。在本文中，我们将深入探讨...
横向导航条是网页设计中的重要元素，它提供了一种用户友好的方式来浏览网站的不同部分。在本主题中，我们将深入探讨如何使用JavaScript技术来创建一个动态、交互式的横向导航条。JavaScript是一种强大的客户端脚本...
【标题】中的“纯css打造漂亮蓝白色横向导航条代码”揭示了这个压缩包内容的核心：它包含了一组使用纯CSS编写的代码，用于创建一个美观的蓝白色横置的导航条。在网页设计中，导航条是必不可少的元素，它帮助用户在...
在网页设计中，CSS（Cascading Style Sheets）横向导航条是不可或缺的元素，它能够帮助用户方便地在网站的不同页面之间切换。本教程将深入探讨如何创建美观且功能完善的CSS横向导航条。 首先，我们需要了解HTML基础...
用纯div+css布局，来制作的一个比较简单实用的下拉横向的导航条
NULL 博文链接：https://virgoooos.iteye.com/blog/274358
本文将详细探讨标题“五款漂亮的CSS横向下拉菜单导航条”所涵盖的知识点，以及如何利用CSS来创建这样的效果。 一、CSS基础 CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、XHTML等）文档样式的语言。通过CSS...
本文将深入探讨五款利用CSS实现的横向下拉菜单导航条设计，它们不仅功能实用，而且美观大方，能为你的网站增添专业且吸引人的视觉效果。 首先，我们要了解CSS（Cascading Style Sheets）在网页设计中的作用。CSS是...
DWZ RIA 1.4.4 (20121016 修正了横向导航js报错问题) 修复使用xheditor插件IE下兼容问题：IE下打开一个含有编辑器的页面，然后关闭，再打开不能录入问题 修复多文件上传插件uploadify 的html扩展方式，java读取不...
在Android开发中，创建一个可横向滚动的导航条是一个常见的需求，这通常涉及到自定义...同时，也可以探索其他的实现方式，比如使用`RecyclerView`配合自定义的`LayoutManager`，来实现更高效且可定制化的横向导航条。
这个压缩包包含了一系列不同样式的横向导航条示例，适用于那些希望为自己的网站或应用增添个性化导航功能的开发者。 首先，我们来详细了解一下“横向导航条”。在网页设计中，横向导航条通常位于页面顶部，沿着宽度...
在网页设计中，导航条是页面布局的重要组成部分，它帮助用户快速访问网站的不同部分。"带各种效果的导航条"通常指的是使用了多种交互效果和动态视觉设计的导航菜单。这些效果可以提升用户体验，使网站更具吸引力。在...
"变色效果蓝色横向二级导航条代码"是一个专门设计的、具有动态变色效果的蓝色横向二级导航菜单，旨在提升用户体验并增加网站的视觉吸引力。 这个导航条的主要特点在于其颜色变化效果和二级菜单结构。在用户鼠标悬停...
本文将详细介绍如何在MetInfo系统中制作各种类型的导航条，包括头部导航条、尾部导航条、横向导航条以及边栏导航条。 #### 二、头部导航条制作 头部导航条通常位于网站顶部，是用户最常接触到的部分之一。下面我们...
在本示例中，我们将探讨如何使用JavaScript实现这种“鼠标滑过显示横向二级导航菜单”的功能。 首先，我们需要创建HTML结构来定义一级和二级导航菜单。一级菜单通常包含几个链接，每个链接下面都有一个对应的二级...
在"顶部横向导航栏的效果"中，ViewPager经常被用作实现这种效果的主要工具。通常，顶部的导航栏会包含一系列的图标或文字，每个代表一个可滑动的页面。当用户点击某个导航项时，ViewPager会自动滑动到相应的页面，...