比较漂亮的一个导航条的效果DIV+CSS


导航条的一个效果DIV+CSS
现在应用于客齐集网站！

代码如下:

<style> 
* {margin:0; padding:0; list-style:none;} 
body{font-size:12px; margin:100px;} 
#info{border:1px solid #BCFF1D; width:348px; background:#D6FF8C url(/upload/200732411541374.gif) no-repeat left top;  float:left; } 
#info ul{ margin:5px;width:338px} 
#info li{ width:33%; height:40px; float:left;} 
#info li a{ font-size:12px; font-weight:normal; line-height:35px; display:block;color:#000; text-decoration:none; padding-left:40px;background:url(/upload/200732411542811.gif) no-repeat;} 
#info li a:link,#info li a:visited{background-position:center top} 
#info li a:hover,#info li a:active{background-position:center bottom} 
</style> 
</head> 
<body> 
<div id="info"> 
  <ul> 
    <li></li> 
    <li><a href="http://www.jb51.net" target="_blank">找工作</a></li> 
    <li><a href="http://www.jb51.net" target="_blank">找房子</a></li> 
    <li><a href="http://www.jb51.net" target="_blank">自行车买卖</a></li> 
    <li><a href="http://www.jb51.net" target="_blank">带车求职</a></li> 
    <li><a href="http://www.jb51.net" target="_blank">拼车上下班</a></li> 
    <li><a href="http://www.jb51.net" target="_blank">技能交换</a></li> 
    <li><a href="http://www.jb51.net" target="_blank">物品交换</a></li> 
    <li><a href="http://www.jb51.net" target="_blank">语言交换</a></li> 
  </ul> 
</div> 
</body>

test

* {margin:0; padding:0; list-style:none;}
body{font-size:12px; margin:100px;}
#info{border:1px solid #BCFF1D; width:348px; background:#D6FF8C url(/upload/200732411541374.gif) no-repeat left top; float:left; }
#info ul{ margin:5px;width:338px}
#info li{ width:33%; height:40px; float:left;}
#info li a{ font-size:12px; font-weight:normal; line-height:35px; display:block;color:#000; text-decoration:none; padding-left:40px;background:url(/upload/200732411542811.gif) no-repeat;}
#info li a:link,#info li a:visited{background-position:center top}
#info li a:hover,#info li a:active{background-position:center bottom}

  • 找工作
  • 找房子
  • 自行车买卖
  • 带车求职
  • 拼车上下班
  • 技能交换
  • 物品交换
  • 语言交换

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

作者:zishu

赞 (0)

相关推荐

  • 比较漂亮的一个导航条的效果DIV+CSS

    比较漂亮的一个导航条的效果DIV+CSS

    导航条的一个效果DIV+CSS 现在应用于客齐集网站! 复制代码 代码如下: <style>  * {margin:0; padding:0; list-style:none;}  body{font-size:12px; margin:100px;}  #info{border:1px solid #BCFF1D; width:348px; background:#D6FF8C url(/upload/200732411541374.gif) no-repeat left top;  flo

  • jquery入门—编写一个导航条(可伸缩)

    jquery入门—编写一个导航条(可伸缩)

    1.编写一个导航条,单击标题时,可以伸缩导航条内容,简化内容或显示更多内容. 示例代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="

  • iOS 设置导航条透明效果的实例代码

    APP中很多界面都是这样的.从有不透明到透明,透明到不透明 以下代码即可实现该功能 //设置导航栏透明 func setNavigationIsTranslucent(isTranslucent:Bool) { if isTranslucent == true { self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) self.navigationController?.navi

  • CSS仿淘宝首页导航条布局效果

    以下是CSS内容部分: /*子鼠*/ body{ font-size:12px; text-align:center; margin-top:30px; font-family:Verdana;} div,img{margin:0; padding:0; border:0;} ul,li{list-style-type: none; margin:0; padding:0; float:left; } #info{ margin-left:auto; margin-right:auto;widt

  • 利用js定义一个导航条菜单

    利用js定义一个导航条菜单

    效果: 一.html代码: <div class="Maintenance"> <div class="Title"> <div class="M_Button" id="Plan">menu1</div> <div class="M_Button" id="Expert">menu2</div> <div c

  • jquery 导航条的效果(css选择器控制)

    标题1 标题2 标题3 标题4 标题5 标题6 进入之后才能看到效果! $(document).ready(function () { myHide(); }); function myHide() { //alert("hello"); //注册事件 $(".m1").bind('mouseover', m1_mouseover); $(".m1").bind('mouseout', m1_mouseout); $(".m2"

  • 一个导航条布局的简单写法

    我希望能用最简单的代码去解决问题!CSS部分 复制代码 代码如下: <style> #menu ul {list-style:none;margin: 0px;padding: 0px;} #menu li {float:left;font-size:12px; background: #999; padding:2px 20px;border:1px solid #000; margin-left: -1px;} </style> 内容部分:  复制代码 代码如下: <di

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

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

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

  • Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也就是手机上,我们页面的宽度并不像PC端那样大,可以显示很长的导航项,但对于我们移动端来说,由于功能的拓展,或者业务的细分,往往导航项也会随之增多,一旦超过移动端在一行的页面显示宽度,那便会出现导航项换行的现象,虽说也有这样布局,但一旦导航项增多到一定程度的时候,我们的页面(首页)将均被导航项霸占,这

  • 一个自动居中的导航条实例与相关问题 DIV+CSS

    这是我刚刚作的一个导航条,为了让那四个LINK居中,我这样作了,但作完后发现了很多的问题,写出来和大家分享一下! 首先我们先来看一下这个导航条! test zishu /*zishu.cn*/ *{ margin:0; padding:0;} body{ font-size:12px; font-family:Verdana, "宋体", Arial; margin:100px 0;} a:link,a:visited{color:#000; text-decoration: none

随机推荐