之前看到过好多人问关于更换导航背景这个问题，今天在这里现出代码：
<!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=utf-8" />
<title>navigation</title>
<style>
#nav{
width:500px;
font-size:9pt;
}
#nav ul{
list-style:none;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
float:left;
width:90px;
height:30px;
line-height:30px;
text-align:center;
margin:0 2px;
}
a{ text-decoration:none;}
#nav a{
width:90px;
height:30px;
background:url(images/nav6.gif) no-repeat;
float:left;
text-align:center;
}
#nav a:link{
color:#000;
}
#nav a:visited{
color:#000;
}
#nav_1 a:hover{
background:url(images/nav1.gif) no-repeat;
color:#FFF;
}
#nav_2 a:hover{
background:url(images/nav3.gif) no-repeat;
color:#FFF;
}
#nav_3 a:hover{
background:url(images/nav4.gif) no-repeat;
color:#FFF;
}
#nav_4 a:hover{
background:url(images/nav5.gif) no-repeat;
color:#FFF;
}
#nav_5 a:hover{
background:url(images/nav2.gif) no-repeat;
color:#FFF;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li id="nav_1"><a href="#">我要祝福</a></li>
<li id="nav_2"><a href="#">我的心愿</a></li>
<li id="nav_3"><a href="#">我的告白</a></li>
<li id="nav_4"><a href="#">我要感谢</a></li>
<li id="nav_5"><a href="#">我要道歉</a></li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
CSS则负责定义这些div元素的外观和交互效果，如字体、背景、边框和动画效果。使用div+css布局的优点是代码结构清晰，易于维护，且支持响应式设计，使得网页能在不同设备上良好显示。 粉红与时尚元素的结合，表明这...
在 DIV+CSS 中实现鼠标悬停效果，可以实现在鼠标悬停时背景图片和颜色的变化。这是交互设计中非常重要的一部分，能够提高用户体验和网站的整体美观度。 在 HTML 中，我们使用了无序列表 `<ul>` 和列表项 `<li> `来...
在本文中，我们将深入探讨如何使用Div和CSS来创建一个Win8风格的导航模板。 Div（Division）是HTML中的一个区块元素，常用来对网页内容进行布局和分组。CSS（Cascading Style Sheets）则是用于控制网页样式并实现...
之后本书又着重讨论如何使用DIV结合CSS来搭建网站，同时也介绍了CSS在Dreamweaver中的应用。并且对于在CSS制作过程中遇到的Bug进行了详细的分析。 本书适合初、中级网页设计爱好者阅读参考。 第1篇 新手上路 第1章 ...
在这个表白网页中，CSS主要被用来实现DIV+CSS布局，确保整个页面具有良好的视觉效果和易读性。例如，通过设置不同的`background-color`属性，可以让网页的顶部导航栏和底部区域呈现出一致且醒目的颜色，提高用户体验...
- **整体布局设计**: 通过`div`和`css`实现网页的布局设计，如顶部导航栏和底部信息区，这些是网页的基本框架。 - **个性化定制**: 根据需求调整网页的内容和样式，比如更换背景音乐、修改文字内容和图片等，使得每...
本文将深入探讨如何使用CSS和jQuery创建一个具有漂亮大背景图片的动态导航栏，同时实现滚动翻页效果和幻灯片功能。 首先，我们要了解CSS（Cascading Style Sheets）在构建导航栏中的作用。CSS是一种样式表语言，...
5. **DIV+CSS布局**：使用DIV元素进行内容划分，配合CSS实现灵活的布局，使页面结构清晰，易于维护和扩展。 6. **响应式设计**：模板应具有响应式特性，意味着它能自动适应不同屏幕尺寸的设备，无论是手机、平板还是...
这个容器通常是一个`div`元素，我们可以设置它的宽高，例如960像素宽，35像素高，并通过CSS的`margin: 0 auto;`使其水平居中，同时设置`top: 30px;`来调整与浏览器顶部的距离。为了调试和查看效果，可以给容器添加...
它利用了CSS的背景定位和伪类选择器来实现单张图片的不同部分在鼠标悬停时显示不同的效果，从而达到看似更换图片的效果。这种技术在早期网页设计中非常流行，因为它可以节省网络带宽，提高页面加载速度。 首先，...
中的“用html+css写个盒子”是指开发者将使用HTML（超文本标记语言）来构建页面的基本结构，如相册的布局、导航链接等元素，而CSS（层叠样式表）则用于定义这些元素的外观和布局，包括图片的展示方式、背景的星空...
1.全站采用DIV+CSS布局，符合WEB2.0标准，您自己设计独特风格非常方便。 2.兼容IE、火狐各大常用浏览器，打开网页不变形。 3.采用UTF-8编码，全球打开网站不乱码。 4.所有信息内容在线完成编辑，就象WORD一样简单、...
例如，你可以预先准备两组或更多的背景图片，然后在鼠标事件中通过设置`background-image`属性来更换图片。 请注意，上述代码中的`mouseover`和`mouseout`事件可能导致连续快速移动鼠标时产生闪烁的效果，因为这两...
30 提示帮助(CSS动态DIV) 提示帮助(CSS动态DIV) 31 正则表达式 验证电话,URL,邮箱地址 32 导航选项卡 导航选项卡 33 动态更换样式表 动态更换样式表 34 天气预报代码ANDiframe 天气预报代码ANDiframe 35 添加...
1.全站采用DIV+CSS布局，符合WEB2.0标准，您自己设计独特风格非常方便。 2.兼容IE、火狐各大常用浏览器，打开网页不变形。 3.采用UTF-8编码，全球打开网站不乱码。 4.所有信息内容在线完成编辑，就象WORD一样简单、...
总结来说，通过CSS的伪类选择器，我们可以实现鼠标悬停图片时更换图片的效果，这对于创建动态按钮、导航栏或其他交互元素非常实用。理解并熟练运用这些CSS技巧，能够使我们的网页设计更加生动且吸引人。
discuz 模板 Comeing_Go 商业版 配4个颜色 GBK+UTF8 带4DIV 无二级导航名称和连接插件，应用中心有配左侧导航，本站对此模板的二级导航做了修改,直接做到前台DIV方便更改 版本介绍 应用中心标价不包含演示站的...
在布局阶段，你可以利用CSS的定位（positioning）、浮动（floating）、Flexbox或Grid布局等方法，将这些内容块放置在页面的合适位置，并通过CSS控制它们的颜色、字体、边框、背景和对齐方式等样式属性。例如，可以...
在网页开发中，导航菜单是不可或缺的一部分，而二级菜单更是增强了用户体验，使用户能够更快速地找到所需的信息或功能。本篇文章将详细介绍如何使用纯JavaScript（不依赖任何库）来实现一个简单的二级菜单效果。 ##...