DIV+CSS导航条效果

css

CSS文件:

 程序代码 <style>
#nav{background:#000; font-size:12px; float:left; margin-left:50px; width:250px; padding:50px;}
#nav div{margin:8px;}
#nav span{display:none; display:block;}
#nav a{color:#666;text-decoration:none; display:block;}
#nav a:hover{color:#FFFF00; position:relative;}
#nav a:hover span{display:block;left:-10px;position:absolute;color:#FFff00;border-top: 12px solid #ffff00;border-left:4px solid #ffff00;line-height:0px;}
</style>

DIV文件:

 程序代码 <div id="nav">
  <div><a href="http://www.zishu.cn"><span></span>网站首页</a></div>
  <div><a href="http://www.zishu.cn"><span></span>网站首页</a></div>
  <div><a href="http://www.zishu.cn"><span></span>网站首页</a></div>
  <div><a href="http://www.zishu.cn"><span></span>网站首页</a></div>
  <div><a href="http://www.zishu.cn"><span></span>网站首页</a></div>
  <div><a href="http://www.zishu.cn"><span></span>网站首页</a></div>
</div>

演示效果:

 HTML代码 <style>#nav{background:#000; font-size:12px; float:left; margin-left:50px;width:250px; padding:50px;}#nav div{margin:8px;}#nav span{display:none; display:block;}#nav a{color:#666;text-decoration:none; display:block;}#nav a:hover{color:#FFFF00; position:relative;}#nav a:hoverspan{display:block;left:-10px;position:absolute;color:#FFff00;border-top:12px solid #ffff00;border-left:4px solid #ffff00;line-height:0px;}</style><div id="nav"> <div><ahref="http://www.zishu.cn"><span></span>网站首页</a></div> <div><ahref="http://www.zishu.cn"><span></span>网站首页</a></div> <div><ahref="http://www.zishu.cn"><span></span>网站首页</a></div> <div><ahref="http://www.zishu.cn"><span></span>网站首页</a></div> <div><ahref="http://www.zishu.cn"><span></span>网站首页</a></div> <div><ahref="http://www.zishu.cn"><span></span>网站首页</a></div></div>

chenhuili优化后的!
 HTML代码 CSS部分:<style>*{ margin: 0; padding: 0; }#nav{ width: 250px; font-size: 12px; background: #000; }#nav ul{ display: block; list-style-type: none; }#nav li{ display: block; }#nav li a{ padding: 0 0 0 10px; width: 200px; display: block; color: #666; text-decoration: none; }#nav li a:link,#nav li a:visited{ color: #666; }#nav li a:hover{ padding: 0 0 0 8px; border-left: 2px solid #FF0000; color: #FFFF00; }</style>结构部分:<div id="nav"> <ul> <li><a href="http://www.zishu.cn">网站首页</a></li> <li><a href="http://www.zishu.cn">网站首页</a></li> <li><a href="http://www.zishu.cn">网站首页</a></li> <li><a href="http://www.zishu.cn">网站首页</a></li> <li><a href="http://www.zishu.cn">网站首页</a></li> <li><a href="http://www.zishu.cn">网站首页</a></li> </ul></div>

时间: 2024-09-08 04:51:24

DIV+CSS导航条效果的相关文章

一款DIV+CSS导航条效果

css|导航 运行代码框 <style>/*频道链接样式*/.channel { width:350px; margin:12px 0px 0px 175px; height:30px; line-height:30px; text-align:center; }.channel ul { list-style:none; margin:0px;}.channel li { float:left; padding-left:8px; }.channel a { background:url(/

JS+CSS实现鼠标滑过时动态翻滚的导航条效果_javascript技巧

本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下: <!DOCTYPE htm

各式各样的导航条效果css3结合jquery代码实现_jquery

导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下面有横线)等.每种导航条都有自己的特色,比如高亮显示的导航条看起来比较简单,但是视觉效果还不错,具有动画效果的导航条在视觉上也是有很好的效果.  接下来将会一一介绍4种应用比较广的导航条,即:高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,具有摩擦运动动画的导航条.  1.高亮显示的

JS实现选中当前菜单后高亮显示的导航条效果_javascript技巧

本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果.分享给大家供大家参考.具体如下: 这里演示选中当前菜单后,该菜单高亮显示,也就是说在不改变菜单CSS代码的情况下,用JavaScript去控制菜单的背景,如果该菜单项被点击后,将赋予它一个与众不同的背景颜色或背景图像,这样可以清淅的指引用户下在浏览的网站栏目,本菜单不需要动态语言的加入,简单方便而且效果好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cho-nav-gl-sho

js实现适用于素材网站的黑色多级菜单导航条效果_javascript技巧

本文实例讲述了js实现适用于素材网站的黑色多级菜单导航条效果.分享给大家供大家参考.具体如下: 这是一款适用于素材网站的黑色多级菜单导航条,无需jQuery,采用CSS+javaScript来实现,整体效果非常棒,用来学习CSS也是很不错的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-color-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X

纯CSS导航条下拉菜单代码

提示:您可以先修改部分代码再运行 纯CSS导航条下拉菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

div css导航菜单

提示:您可以先修改部分代码再运行 div css导航菜单 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

基于jQuery实现中英文切换导航条效果_jquery

先来看一下中英文切换的导航条效果图: 我采用了两种方式实现,一种用css3,另一种是用jquery实现. 首先说一下用css3如何实现: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <link rel="stylesheet" href=&q

DIV+CSS导航学习笔记

学习简单导航制作,常见导航有如下样式: w3school导航 网易首页导航 以上两种分别可以用ul和div来制作,直接上代码: test.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Lan