`

css 有弹动效果的网页导航

    博客分类:
  • CSS
阅读更多
<!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">
#nav{
list-style:none;
margin:0;
padding:5px 0 0 0;
background:red;
}
#nav li{
float:left;
display:inline;
margin-right:2px;
}
#nav a{
float:left;
width:81px;
height:28px;
text-align:center;
background:lightblue;
font:12px/24px '宋体';
color:#FFF;
text-decoration:none;
}
#nav a:hover{
line-height:28px;
background-position:0;
font-weight:bold;
color:yellow;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.jb51.net/web/">网页制作</a></li>
<li><a href="http://www.jb51.net/flash/">Flash教程</a></li>
<li><a href="http://www.jb51.net/photoshop/">PS教程</a></li>
<li><a href="http://www.jb51.net/">脚本之家</a></li>
</ul>
</body>
</html>
分享到:
评论

相关推荐

    css 有弹动效果的网页导航.docx

    在网页设计中,导航栏是...总之,创建一个有弹动效果的CSS网页导航栏需要理解HTML结构、CSS选择器、浮动布局以及背景图像的应用。通过不断的实践和优化,你可以创造出更加精致和交互丰富的导航栏,提升网站的整体品质。

    jquery和CSS3带弹性动画效果的工具栏菜单

    在弹性动画效果的工具栏菜单中,CSS3可以用于创建平滑的展开和折叠效果,使得菜单项在打开和关闭时有动态的视觉反馈。 具体实现时,可能的步骤包括: 1. **HTML结构**:首先,我们需要构建工具栏菜单的基本HTML...

    CSS3弹性展开网站动画导航菜单特效.zip

    随着技术的发展,CSS3已经成为了实现各种丰富且动态效果的首选工具,尤其是在创建导航菜单方面。本教程将深入探讨如何利用CSS3的特性来制作一款具有弹性和动画效果的网站导航菜单。 首先,我们需要理解CSS3中的关键...

    黑色css3导航栏下拉菜单动画特效

    首先,CSS3的下拉菜单是一种常见的网页交互元素,常用于网站顶部导航,用于展示多层次的链接结构。下拉菜单通常在鼠标悬停在主菜单项上时显示,为用户提供了一个简洁的方式来浏览和访问网站的多个子页面或分类。 ...

    CSS3弹性展开动画导航菜单代码.zip

    在这个特定的导航菜单中,可能应用了`transform: scale()`来实现菜单项在被选中时的放大效果,以及`transition: all duration ease-in-out`来控制这个变化的速度和缓动函数。 其次,菜单导航的响应式设计也很关键。...

    纯css弹出导航,仿京东商城商品导航效果

    总的来说,实现“纯CSS弹出导航,仿京东商城商品导航效果”需要对CSS有深入的理解,包括布局、定位、状态切换、动画和响应式设计等多个方面。通过这样的实践,不仅可以提升你的CSS技能,还能为你的网站带来更吸引人...

    9种html5+css3隐藏侧边栏导航菜单动画效果

    总之,掌握这9种隐藏侧边栏导航菜单的动画效果,不仅可以提升你的网页设计技能,还能让你的作品在视觉和交互性上脱颖而出,吸引更多的用户。同时,这也是一种对新技术持续学习和探索的过程,对于任何IT从业者来说,...

    CSS3弹性展开网站动画导航菜单特效

    【CSS3弹性展开网站动画导航菜单特效】是一种利用CSS3技术实现的动态导航菜单设计,它为用户提供了吸引人的交互体验。在网页设计中,导航菜单是至关重要的元素,它帮助用户快速找到所需的信息或页面。这个特效通过...

    jq+css3弹动下拉菜单 jquery+css3弹动渐变下拉菜单代码下载.zip

    通过这两个属性,我们可以实现下拉菜单在展开和收起时的弹动效果,增强视觉吸引力。 在HTML5中,`&lt;nav&gt;`标签被用来定义导航区域,`&lt;ul&gt;`和`&lt;li&gt;`用于构建列表结构,这些构成了下拉菜单的基本骨架。同时,HTML5的...

    jquery和CSS3带弹性动画效果的工具栏菜单.zip

    这款"jquery和CSS3带弹性动画效果的工具栏菜单"就是这样一个实现方式,它结合了JavaScript库jQuery与CSS3的强大功能,为用户提供了一种新颖且吸引人的导航体验。 首先,jQuery是一个广泛使用的JavaScript库,它简化...

    jq css3弹动下拉菜单.zip

    通过以上步骤,我们可以创建一个具有弹动效果的CSS3下拉菜单。当然,实际应用中可能还需要考虑浏览器兼容性、响应式设计等问题,以确保在各种设备上都能正常工作。 总结,CSS3弹动下拉菜单是利用了CSS3的先进特性,...

    漂亮的CSS3弹性导航下拉菜单代码

    在网页设计中,导航菜单是不可或缺的一部分,它帮助用户快速浏览和访问网站的不同部分。CSS3的引入为创建动态、交互式的导航菜单提供了强大的工具。本篇将详细讲解"漂亮的CSS3弹性导航下拉菜单代码"所涉及的知识点。...

    18种炫酷CSS3动画效果库Mimic.css

    Mimic.css是一个专为前端开发者设计的CSS3动画效果库,它集合了18种独特的、引人注目的动画效果,旨在提升网页的交互性和视觉吸引力。与知名的animate.css类似,Mimic.css以简洁易用的方式为网页增添动态元素,为...

    CSS3图片导航效果.zip_CSS3图片导航效果_导航

    本文将深入探讨“CSS3图片导航效果”,以及如何通过CSS3实现这种导航效果。 首先,CSS3引入了新的选择器,如伪类(`:hover`, `:active`, `:focus`)和伪元素(`::before`, `::after`),这使得我们可以在不依赖...

    13种html5+css3全屏遮罩效果导航菜单

    综上所述,"13种html5+css3全屏遮罩效果导航菜单"这个主题涵盖了从基础的HTML5和CSS3特性,到高级的交互设计和动画实现,是提升网页设计技能的重要学习资源。通过实践这些示例,开发者可以更好地掌握这两种技术,...

Global site tag (gtag.js) - Google Analytics