<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<div id="pagewrapper">
<div id="header">
<ul class="menu">
<li class="current_page_item">
<a href="">Home</a>
</li>
<li class="page_item">
<a href="">Home</a>
</li>
<li class="page_item">
<a href="">Home</a>
</li>
</ul>
</div>
</div>
样式如下：
#pagewrapper{width:980px;margin:0 auto;}
#header{background:url(img/header.png) no-repeat center bottom;padding:30px 10px 80px;position:relative;}
#header ul.menu{position:relative;top:23px;height:32px;left:30px;list-style:none;margin:0;padding:0;right:30px;}
#header ul.menu li{float:left;margin:0 5px 0 0;padding:0 0 5px 5px;background:none;list-style:none;position:relative;}
#header ul.menu li a,
#header ul.menu .current_page_item a{font:bold 95%/100% Arial, Helvetica, sans-serif;padding:9px 12px 10px 8px;display:block;text-decoration:none;color:#cbc3bb;text-shadow:0 1px 1px #1f1206;}
#header ul.menu .current_page_item,#header ul.menu li:hover,#header ul.menu li:focus{background:url(img/nav-bg.png) no-repeat;}
#header ul.menu .current_page_item a{background:url(img/nav-bg.png) no-repeat right -85px;color:#fff;}
#header ul.menu li:hover a, #header ul.menu li:focus a{background:url(img/nav-bg.png) no-repeat right -85px;}
看看效果：
- 大小: 68.3 KB
分享到：
相关推荐
本文将详细介绍纯JS实现的19种下拉菜单导航效果，这些效果不仅美观，而且实用，能够提升用户在网站上的浏览体验。 首先，下拉菜单的基本原理是利用JavaScript的事件监听和DOM操作来实现。当用户鼠标悬停在主菜单项...
当网站内容较长，需要滚动浏览时，定位滚动导航效果可以使导航菜单始终保持在屏幕顶部，提高用户体验。jQuery，一个广泛使用的JavaScript库，提供了丰富的功能来简化这种效果的实现。下面将详细介绍如何使用jQuery来...
《jQuery定位滚动导航效果代码详解》 在网页设计中，导航栏是不可或缺的一部分，它为用户提供了一种方便快捷的方式，使他们能够轻松地在网站的不同部分之间切换。jQuery定位滚动导航效果是一种流行的交互设计，它...
标题和描述提到的“滑动时切换页面,同时页面显示导航点进行导航,实现联动与导航效果”主要涉及的是`ViewPager`组件的使用，这是Android开发中的一个关键知识点。 `ViewPager`是Android SDK中的一个视图容器，它允许...
修改 support 包 TabLayout，实现新浪微博/即刻 APP 蚯蚓导航效果 用法 TabLayout 核心用法不变，新增一些自定义属性。 <!-- 导航条 indicator 渐变开始颜色 --> <!-- 导航条 indicator 渐变结束颜色 --&...
"动画按钮组成的Flash导航效果.rar"是一个压缩包，包含了一个使用Flash制作的导航菜单源码，该源码的特点是动画按钮和动态载入效果。下面将详细解析这个资源中的关键知识点： 1. **Flash技术**：Flash是由Adobe公司...
在IT行业中，导航效果是用户体验设计的一个重要组成部分，特别是在网页和应用程序中，良好的导航效果能够帮助用户更有效地理解和使用产品。"myFovus导航效果包"是一个专注于提供导航交互体验优化的资源集合，它可能...
"Javascript漂亮的导航效果"这个主题就是关于如何利用JavaScript和CSS创建吸引人的、用户体验优秀的导航菜单。 首先，我们要理解JavaScript在导航效果中的作用。JavaScript可以添加动态功能，如悬停效果、下拉菜单...
本文将深入探讨“CSS3图片导航效果”，以及如何通过CSS3实现这种导航效果。 首先，CSS3引入了新的选择器，如伪类（`:hover`, `:active`, `:focus`）和伪元素（`::before`, `::after`），这使得我们可以在不依赖...
至此，一个基本的jQuery动画垂直折叠导航效果就实现了。这个效果不仅可以应用于网站导航，也可以扩展到其他需要动态折叠展开的场景，如侧边栏、下拉菜单等。通过调整CSS样式和jQuery代码，可以进一步定制导航的外观...
QuickMenuCSS的导航效果是通过CSS3的新特性，如选择器、伪类、过渡和动画来实现的。其中，过渡（transition）用于平滑地改变元素的某个属性值，而动画（animation）则可以定义一个完整的状态变化过程。这些技术的...
"53种网站导航效果图"这个压缩包文件显然包含了多种创新和多样化的导航设计方案，这些设计可以为网页设计师提供灵感和参考。在这个压缩包中，用户可能会找到各种风格、布局和交互方式的导航栏实例，每一种都体现了...
本文将深入探讨“多种漂亮导航效果”的实现，主要聚焦于使用JavaScript这一强大的客户端脚本语言来创建美观且实用的导航栏。JavaScript允许我们实现动态交互，使网页导航更加吸引人，提高用户体验。 一、CSS基础与...
在iOS应用开发中，抽屉式导航效果，也被称为侧滑菜单或滑动抽屉，是一种常见的用户界面设计模式。这种效果通常用于提供一个隐藏的菜单，用户可以通过从屏幕边缘向内滑动来显示和隐藏它，从而实现更加便捷的导航。在...
"酷炫导航效果案例.zip"这个压缩包很可能包含了多种创新且吸引人的导航设计示例，旨在提升网站或应用的视觉吸引力和交互性。这些案例通常会展示如何通过动态效果、动画以及非传统布局来创建引人入胜的导航体验。 1....
在IT行业中，导航效果是用户界面（UI）设计的一个关键元素，特别是在移动应用和现代网页设计中。"导航效果划入划出"是指通过动画效果来实现导航菜单的展示和隐藏，这种效果能够提升用户体验，使得应用或网站更加互动...
项目中的“蓝色皮肤导航效果”很可能就是通过CSS实现的，包括颜色、字体、边框、阴影、过渡和动画效果等，以创建独特的视觉体验。 4. **动态刷新**：这通常指的是页面局部更新或者状态保持。在Web开发中，可以使用...
在IT界，尤其是在网页设计和前端开发中，"垂直折叠导航效果"是一种常见的交互设计模式。这种效果使得网站或应用程序的导航菜单在有限的空间内更有效地展示，通常用于响应式设计，以适应不同屏幕尺寸，如手机、平板...
这种控制器能够帮助开发者实现类似iOS设备上原生的导航效果，比如在屏幕底部固定的导航条，以及通过点击按钮在不同视图之间平滑过渡。然而，有时候我们可能需要自定义更复杂的导航效果，或者在非苹果原生控件的基础...
在Android开发中，"贝塞尔实现右侧字母导航效果"是一种常见的UI设计，它通常用于创建类似于通讯录那样的字母索引栏。这种效果可以帮助用户快速定位并跳转到目标内容，提高用户体验。贝塞尔曲线（Bezier Curve）是这...