DIV+CSS 简单的导航条

很简单的导航条,放在这里已方便以后用到;
ie7/ie7/Firefox都测试过了;没有问题;


代码如下:

*{ padding:0; margin:0; font-size:12px; line-height:1.7; font-family:Verdana, "宋体", Arial; list-style:none;}
/*简单定义了一下全局*/
a:link,a:visited{background:#FFF3C6 url(jaian.gif) no-repeat 15px 7px; padding-left:23px; color:#000000;text-decoration: none;}
a:hover,a:active{color:#000;text-decoration: none;background-color: #FED762;}
a{display:block;border-bottom:1px solid #fff; padding-left:10px; width:127px; }
/*定义链接的样式*/
ul{ background:#fff; width:150px; border:1px solid #FF6600; margin:0px 20px -1px 20px; padding:1px;}
/*定义了UL*/
span{ display:block;background:#FF9900 url(jai.gif) no-repeat 5px 5px; padding-left:13px;}

代码如下:

<ul><span>网站首页</span>
 <li><a href="http://www.zishu.cn" target="_blank">我的日志</a></li>
 <li><a href="http://www.zishu.cn" target="_blank">给我留言</a></li>
 <li><a href="http://www.zishu.cn" target="_blank">情感文章</a></li>
</ul>
<ul><span>网站首页</span>
 <li><a href="http://www.zishu.cn" target="_blank">我的日志</a></li>
 <li><a href="http://www.zishu.cn" target="_blank">给我留言</a></li>
 <li><a href="http://www.zishu.cn" target="_blank">情感文章</a></li>
</ul>
<ul><span>网站首页</span>
 <li><a href="http://www.zishu.cn" target="_blank">我的日志</a></li>
 <li><a href="http://www.zishu.cn" target="_blank">给我留言</a></li>
 <li><a href="http://www.zishu.cn" target="_blank">情感文章</a></li>
</ul>

效果页

www.zishu.cn

*{ padding:0; margin:0; font-size:12px; line-height:1.7; font-family:Verdana, "宋体", Arial; list-style:none;}
/*简单定义了一下全局*/
a:link,a:visited{background:#FFF3C6 url(jaian.gif) no-repeat 15px 7px; padding-left:23px; color:#000000;text-decoration: none;}
a:hover,a:active{color:#000;text-decoration: none;background-color: #FED762;}
a{display:block;border-bottom:1px solid #fff; padding-left:10px; width:127px; }
/*定义链接的样式*/
ul{ background:#fff; width:150px; border:1px solid #FF6600; margin:0px 20px -1px 20px; padding:1px;}
/*定义了UL*/
span{ display:block;background:#FF9900 url(jai.gif) no-repeat 5px 5px; padding-left:13px;}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • DIV+CSS 简单的导航条

    很简单的导航条,放在这里已方便以后用到:ie7/ie7/Firefox都测试过了:没有问题: 复制代码 代码如下: *{ padding:0; margin:0; font-size:12px; line-height:1.7; font-family:Verdana, "宋体", Arial; list-style:none;} /*简单定义了一下全局*/ a:link,a:visited{background:#FFF3C6 url(jaian.gif) no-repeat 15p

  • Bootstrap CSS组件之导航条(navbar)

    本文主要大家分享了响应式导航条的具体代码,供大家参考,具体内容如下 1.基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav 2.导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form 3.导航条中的按钮,文本,链接navbar-btn.bavbar-text.navbar-link 4.导航条中的项目进行左右浮动navbar-lef

  • js+div+css下拉导航菜单完整代码分享

    效果预览:http://keleyi.com/keleyi/phtml/menu/1.htm 下拉菜单 js+div+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.w

  • DIV+CSS设计的动感横向导航

    效果图:演示代码: DIV+CSS打造精美导航菜单,sky整理收集. body{ background-color: #000000; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ po

  • BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

    bootstrap框架.导航条.下拉菜单.轮播广告carousel.栅格系统布局.标签页tabs.模态框.菜单定位的个人总结,具体详情如下所示: bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

  • bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)

    本文算是bootstrap学习使用的年底大总结,供大家参考,具体内容如下 bootstrap框架 BootStrap学习从现在开始,前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢. <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equi

  • Bootstrap每天必学之导航条(二)

    一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class="nav">)基础上添加类名"navbar-nav" 第二步:在列表外部添加一个容器(div),并且使用类名"navbar"和"navbar-default" <div class="navbar navbar-default"> <!-- 导航条标题--> <

  • 一系列Bootstrap导航条使用方法分享

    本文包含了Bootstrap导航条基础使用方法,供大家参考,具体内容如下 1.Bootstrap基础导航样式 Bootstrap框架中制作导航条主要通过".nav"样式.默认的".nav"样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如"nav-tabs"."nav-pills"之类.比如右侧代码编辑器中就有一个tab导航条的例子,他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式 <ul c

  • bootstrap中的导航条实例代码详解

    一.和导航的区别 1.导航条比导航多了一个条字 2.直接上图 导航: 导航条: 简单文字描述: 由两张图看出,导航内容比较简单,而导航条可以包含导航及其他元素,如表单,搜索框等,并且通常导航条会有一个区别于页面的背景色. 二.在页面中定义导航条 方法: 为父容器添加类名navbar navbar-default.navbar-default类用来规定导航条的颜色,可以更改为navbar-inverse来让导航条反色显示.bootstrap官网建议使用nav元素.但也常用div元素,建议用div元

  • 仿客齐集首页导航条DIV+CSS+JS [代码实例]

    作者子鼠 客齐集首页的一个效果, 今天有人问我是怎么写的,于是晚上就又重写了一个; 顺便把那个布局再理一下:  你可以先看一下客齐集首页的效果:http://shanghai.kijiji.cn 我试着不用position:absolute的方法: 但写起来太难了: 后来还是用position:absolute了: 但在客齐集站上的是没有用的:真不知道当时是怎么写出来的:以下是效果图: 以下是布局部分 复制代码 代码如下: <div id="info">   <div

随机推荐