<!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 type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
font-size: 12px;
line-height: 150%;
}
.box {
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
}
a.white:link,a.white:visited{
text-decoration:none;
}
a.white:hover,a.white:active{
color:#6600FF;
}
.tab{
margin:0;
height:29px;
background-image:url(img/m_level.gif);
padding:0px 0px 0px 20px;
}
.tab li{
float:left;
height:29px;
margin-right:1px;
background:url(img/gray_l.gif) left top no-repeat;
}
.tab li a{
display:block;
line-height:29px;
padding:0 10px;
color:#333;
background:url(img/gray_r.gif) right top no-repeat;
text-decoration:none;
}
.tab .sel{
background:url(img/m_l.gif) left top no-repeat;
}
.tab .sel a{
background:url(img/m_r.gif) right top no-repeat;
}
.sel a:link,.sel a:visited{
color:#fff;
}
.sel a:hover,.sel a:active{
color:#fff;
text-decoration:underline;
}
-->
</style>
</head>
<body>
<div class="box">
<ul class="tab">
<li class="sel"><a href="#">首页</a></li>
<li><a href="#" class="white">文章中心</a></li>
<li><a href="#" class="white">下载中心</a></li>
<li><a href="#" class="white">div+css</a></li>
<li><a href="#" class="white">动易模板</a></li>
<li><a href="#" class="white">博客</a></li>
<li><a href="#" class="white">论坛</a></li>
<li><a href="#" class="white">虚拟主机</a></li>
<li><a href="#" class="white">平面设计</a></li>
<li><a href="#" class="white">flash动画</a></li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
在本项目中，“HTML5全屏菜单自适应手机jquery全屏背景图随机切换”是一个专为移动端优化的网页设计方案，它利用了HTML5的新特性与CSS3的动画效果，以及jQuery库来实现动态交互。 首先，HTML5提供了更强大的标签...
modernizr html5响应式网站滑动下拉导航菜单自适应屏幕 modernizr html5响应式网站滑动下拉导航菜单自适应屏幕 modernizr html5响应式网站滑动下拉导航菜单自适应屏幕
在移动应用设计中，"手机滑屏tab菜单自适应高度，菜单内容级联滑动（tab超过屏幕宽度可自动滑动）"是一个重要的交互模式，主要用于优化用户在小屏幕上浏览和操作多分类内容的体验。这种设计允许用户通过水平滑动来...
"jQuery自适应横排下拉菜单导航代码"提供了一个高效且美观的解决方案，尤其适合那些希望提升用户体验的开发者。这个代码利用jQuery库实现，能够根据屏幕尺寸自动调整布局，确保在各种设备上都能良好地展示。 首先，...
本篇文章将详细讲解如何利用jQuery实现一个自适应窗口大小的导航菜单，以及与之相关的技术点。 首先，自适应导航菜单是网页设计中的一个重要组成部分，尤其在响应式网页设计中更为关键。它确保了无论用户是在桌面...
4. **响应式设计**：纯CSS下拉菜单也可以适应不同设备的屏幕尺寸，实现宽度自适应。利用媒体查询（`@media`）可以针对不同屏幕大小调整菜单的布局和样式，确保在移动设备上也有良好的用户体验。 5. **固定高度与...
在iOS开发中，实现一个自动上下拉菜单并具备自适应宽高的功能是一项常见的需求，尤其在设计用户界面时。这个功能通常用于创建更加灵活且友好的交互体验，使得用户能够轻松浏览和选择不同层次的数据。以下是一些关于...
在IT领域，尤其是在网页设计和用户体验优化中，"自适应长度菜单切换"和"选项卡切换"是两个关键概念，它们极大地提升了用户界面的交互性和可用性。下面将详细阐述这两个概念及其应用。 首先，"自适应长度菜单切换"是...
DIV+CSS+JS二级树型菜单，二级菜单展开后刷新无影响
在网页设计中，创建一个自适应的左侧下拉菜单是提升用户体验的重要环节。"js自适应左侧下拉菜单代码.zip" 提供了实现这一功能的完整资源，包括HTML、CSS和JavaScript代码。以下是对这些文件及其相关知识点的详细解释...
自适应左侧手风琴下拉菜单是网页设计中常见的交互元素，主要用于节省页面空间并提供良好的导航体验。这种设计模式通常应用于网站的侧边栏，允许用户展开或折叠菜单项，展示子菜单内容。在本案例中，我们将讨论如何...
要使菜单自适应屏幕高度，我们可以监听窗口的`resize`事件，当窗口尺寸变化时重新计算并设置菜单的高度。此外，可以使用CSS3的媒体查询(`media queries`)来实现响应式设计，确保在不同设备上都能良好展示。 5. **...
js+css3实现响应式导航菜单代码是一款类似bootstrap导航菜单，它通过media query制作760像素断点，当视口小于760像素时，菜单会收缩为隐藏的汉堡包菜单，根据浏览窗口大小自适应手机电脑平板端。
本主题聚焦于"div+css菜单导航布局自适应宽度"，这是一种确保导航栏在不同屏幕尺寸下都能良好展示的技术。这种技术在响应式网页设计中尤为重要，因为现代网站需要在手机、平板电脑和桌面电脑等不同设备上提供一致的...
作者imqiuhang，源码QHNavSliderMenuView，可以灵活定制的滑动自适应菜单，具体效果，种 类型 图文和文字，4种排列方式 普通 居中 适应 居左，可以设置很多自定义的style，当然因为 自己项目的需求变更过快 里面的...
总的来说，"大小可调整的导航菜单JS代码"提供了实现网页导航菜单自适应布局的解决方案。开发者可以学习并利用这段代码，结合自己的项目需求进行定制，以创建更加用户友好的网站。同时，这也是一种提高网页适应性和...
**二级导航菜单** 是多级菜单结构，通常用于展示复杂的信息层级。在HTML5中，可以通过标签下的和元素创建，然后通过CSS3的:hover伪类和display属性来实现鼠标悬停时展开或收起二级菜单的效果。这种交互设计提高了...
【免费】自适应简约网站菜单源码是一种网页设计中的重要元素，主要体现在其对网站导航功能的优化和用户体验的提升。这种源码以其简洁的设计风格和强大的功能性吸引着许多开发者和设计师。首先，我们来详细解析一下这...
**jQuery顶部悬浮多级自适应屏幕导航菜单** 在网页设计中，导航菜单是不可或缺的部分，它帮助用户在网站中快速定位并浏览各个页面。本文将详细介绍如何使用jQuery技术创建一个功能丰富的顶部悬浮、多级、自适应屏幕...
"jQuery自适应窗口大小导航菜单.zip" 文件提供了一种解决方案，通过使用jQuery库来实现导航菜单的响应式功能，特别针对窗口大小变化时的适应性。 首先，jQuery是一个轻量级的JavaScript库，简化了JavaScript编程，...