可用来显示推荐介绍内容,jQuery多级手风琴菜单完结代码

详解CSS display:inline-block的应用

2015/11/03 · CSS ·
display

原稿出处:
小灰狼的脑壳   

本文详细描述了display:inline-block的基础知识,产生的题材和消除格局以及其广大的采纳场景,加深了对inline-block应用的更为领会。

本小说给我们介绍一款不错的jQuery多级手风琴菜单落成代码,有必要了然的爱人可参看,手风琴菜单一般用来下拉领航,由于外观分外简洁,使用起来跟手风琴一样能够拉伸和减弱而得名,项目中妥当使用手风琴效果会给用户带来13分好的感受

读书资料来源于

本实例使用Javascript达成右下角可关闭最小化div,能够用于展现推荐介绍内容,效果预览网址:
作用图片:
亚洲必赢官网 1 
完整源代码:

基础知识

display:inline-block是怎么啊?相信大家对那本性格并不不熟悉,依照名字inline-block大家就能够大体猜出它是整合了inline和block两者的特征于寥寥,一言以蔽之:设置了inline-block属性的成分既具备了block成分能够安装width和height的风味,又保持了inline成分不换行的表征。

举例表明:以前笔者们做横向菜单列表的时候,大家能够透过li和float:left两者来完结,今后能够通过li和display:inline-block。

HTML代码:

XHTML

<ul> <li>首页</li> <li>关于</li>
<li>热点</li> <li>联系大家</li> </ul>

1
2
3
4
5
6
<ul>
    <li>首页</li>
    <li>关于</li>
    <li>热点</li>
    <li>联系我们</li>
</ul>

CSS代码

CSS

ul, li { padding: 0; margin: 0; list-style-type: none; } li { display:
inline-block; border: 1px solid #000; }

1
2
3
4
5
6
7
8
9
ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
li {
    display: inline-block;
    border: 1px solid #000;
}

效果图

亚洲必赢官网 2

inline-block基本功效

能够看出li成分可以横向排列,并且能够设置width属性,我们能够复制代码本人查看效果或查看Demo

功效如下

选项卡原理

规定: 选中代表激活,未选中意味着失活

复制代码 代码如下:

inline-block的问题

观测地方的例证,细心的同桌肯定会发现,种种li之间有一个小空子,而小编辈的代码中并没有安装margin等休戚相关属性,那是为啥吧?

亚洲必赢官网 3

食谱栏目

先将具备须要切换来分的气象变为失活,然后将最近选中的因素状态设置为激活状态;

亚洲必赢官网 ,<!DOCTYPE html PUBliC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<title>js完结右下角可关闭最小化div–柯乐义</title>
<script src=””
type=”text/javascript”></script>
<style type=”text/css” media=”screen”>
/* 右下角跳出的广告 */
#downmsg_emessage{POSITION: fixed;_position:absolute; z-index:100;
bottom:0;right:0;
backgroundnull:url()
no-repeat left top;width:225px;}
#donwmsg_head{float:left; display:inline;
font-size:12px;color:#FFFFFF;margin-left: 26px;margin-top: 6px;}
#downmsgBar
.close{float:right;width:11px;height:11px;margin-top:6px;display:block;margin-right:5px;}
#downmsgBar{height:25px;}
#donwmsg_content{height:162px;overflow:hidden;}
#donwmsg_content ul{font-size:12px;color:#007cc1; top:
0px;padding:0px 2px 0 6px;left: 6px;line-height:180%; height:110px;
overflow:hidden;}
#donwmsg_content ul
li{backgroundnull:url()
no-repeat -100px -245px;text-indent:13px;}
#donwmsg_content ul li a{color:#007cc1;}
#donwmsg_content ul .ll a{color:#a10000;font-weight:bold;}
#donwmsg_content p{position:absolute;left: 13px;top: 157px;}
#donwmsg_content .lb{padding:0px; text-align:center;}
#donwmsg_content .lb a{font-size:12px;color:Blue}
a.msg-hidden-btn-2{width:11px;
height:11px;overflow:hidden;float:right;display:block;margin-right:5px;margin-top:6px;backgroundnull:url()
no-repeat -0px -250px;}
a.msg-hidden-btn-1{ width:11px;
height:11px;overflow:hidden;float:right;display:block;margin-right:5px;margin-top:6px;backgroundnull:url()
no-repeat -50px -250px;}
</style>
</head>
<body>
<div id=”downmsg_emessage” style=”DISPLAY: block”>
<div id=”downmsgBar”>
<div id=”donwmsg_head”>柯乐义推荐内容</div><a
class=”close” href=”javascript:closeDiv()”></a><a
class=”msg-hidden-btn-1″ id=”msg_hidden_btn”
href=”javascript:showHideDiv()”> </a></div>
<div id=”donwmsg_content” style=”DISPLAY: block; HEIGHT:
162px”>
<ul>
<li class=”ll”><a
href=””
>单行文字间歇向上滚动</a></li>
<li><a href=””
>jQuery UI修饰title气泡</a></li>
<li><a href=””
>jquery清空textarea等输入框</a></li>
<li><a href=””
>jquery关灯特效</a></li>
<li><a href=””
>可改变大小DIV层</a></li>
</ul>
<div class=”lb”><a href=””
target=”_blank”>jQuery</a>   <a
href=””
target=”_blank”>Javascript</a>   <a
href=”” target=”_blank”>CMS</a>
</div>
</div>
</div>
</body>
</html>

默认的inline元素

可用来显示推荐介绍内容,jQuery多级手风琴菜单完结代码。首先,我们着眼一下暗中认可的inline成分的表现:

HTML代码

XHTML

<a>首页</a> <a>热点</a>

1
2
<a>首页</a>
<a>热点</a>

CSS代码

CSS

a { margin: 0; padding: 0; border: 1px solid #000; }

1
2
3
4
5
a {
    margin: 0;
    padding: 0;
    border: 1px solid #000;
}

效果图

亚洲必赢官网 4

inline私下认可景况

暗中同意境况下,inline成分之间就有空当出现,所以结合了inline和block属性的inline-block属性自然也有那些特点。
那这几个空隙是怎么样呢,它们是空白符!

代码解析

栏目标具体内容

先将享有的栏目内容项设置为隐匿状态,然后再将日前挑选的菜单选项对应的具体内容的场地设置为展示。

您恐怕感兴趣的篇章:

  • js达成三张图(文)片一起切换的banner核心图
  • JS选项卡动态替换banner图片路径的办法
  • js实现网站最上端可关闭的变通广告条代码
  • JS达成点击图片在现阶段页面放大并可关闭的上佳效果
  • js微博首页可关闭背景效果代码
  • js右下角弹出窗口,点击可关闭效果
  • js达成向右横向滑出的二级菜单成效
  • js达成网页右上角滑出会自动消失小幅度广告的章程
  • JS达成带关闭功用的Ali阿娘网站顶部滑出banner工具条代码

铲除空白符

在浏览器中,空白符是不会被浏览器忽略的,几个一而再的空白符浏览器会活动将其联合成一个。大家编辑代码时写的空格,换行都会发生空白符。所以大势所趋的七个要素之间会有空白符,借使将上述例子中的a标签写成一行,空白符消失,菜单之间也就紧密起来了。

空白符纵然是浏览器符合规律的展现作为,可是平日情状下,设计师同学的布置稿不会出现这几个空隙,咱们在苏醒设计稿的时候,怎么去除掉那么些空隙呢。
要去除空白符发生的闲暇,首先要掌握空白符归根结蒂是个字符,通过设置font-size属性可以操纵发生的空隙的深浅。
率先大家将font-size设置成50px试试,修改CSS代码如下:

CSS

ul, li { padding: 0; margin: 0; list-style-type: none; font-size:50px }
li { display: inline-block; border: 1px solid #000; width: 100px;
text-align: center; font-size:12px }

1
2
3
4
5
6
7
8
9
10
11
12
13
ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size:50px
}
li {
    display: inline-block;
    border: 1px solid #000;
    width: 100px;
    text-align: center;
    font-size:12px
}

大家修改ul的font-size为50px,而li的font-size为12px保持原来的字体大小,效果如下:

亚洲必赢官网 5

font-size:50px的空隙

能够看到菜单之间的空子变大了。
继之大家设置font-site属性为0px,代码如下

JavaScript

ul, li { padding: 0; margin: 0; list-style-type: none; font-size:0px }
li { display: inline-block; border: 1px solid #000; width: 100px;
text-align: center; font-size:12px }

1
2
3
4
5
6
7
8
9
10
11
12
13
ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size:0px
}
li {
    display: inline-block;
    border: 1px solid #000;
    width: 100px;
    text-align: center;
    font-size:12px
}

成效如下:

亚洲必赢官网 6

font-size:0的空隙

可以看到菜单之间的空隙没有了,大家能够自行查看Demo

HTML

艺术1:实现思路(使用class来落实)

1.获得具有的菜单选项,及全部菜单选项对应的选项内容;

2.遍历菜单选项数组,给每八个菜系选项自定义三个索引,并将遍历变量(i)赋给该值;

  1. 给每贰个接纳绑定鼠标滑过事件;

4.在鼠标滑过事件中,再次遍历全数的菜单选项,将每2个菜系选项的场合设置为失活,每一个菜单项的具体内容的动静设置为隐匿;

5.遍历实现后,再给当下入选的菜单项设置激活状态(active),以及当前挑选对应的情节项的景况设置为显示;

包容性难题

在IE8+,FF和Chrome的浏览器,inline-block能够健全的同盟,考虑到IE6和IE7等低版本浏览器的占用率,即便有办法能够匹配,但本文不再赘言,大家有趣味的可以寻找有关材质。

首先在head间引用jQuery和插件。

德姆o代码完毕–jquery写法

inline-block的应用

inline-block的采用什么景况有啥样呢?大家大家着想3个技能的应用场景时,首先肯定要思考的是技术的特点和急需是不是适合。inline-block的天性是整合inline和block三种特性的特色,能够安装width和height,并且成分保持行内排列的风味,基于这点,全数行内排列并且可以安装大小的气象都是大家得以考虑采用inline-block的使用场景。下边举例表达:

 代码如下

HTML

<div class=”tab clearfix”>

<div class=”tab-wrap clearfix”>

<ul class=”tab-menu”>

<li class=”active”><a
href=”javascript:;”>menu1</a></li>

<li><a href=”javascript:;”>menu2</a></li>

<li><a href=”javascript:;”>menu3</a></li>

<li><a href=”javascript:;”>menu4</a></li>

<li><a href=”javascript:;”>menu5</a></li>

</ul>

</div>

<div class=”tab-content clearfix”>

<div class=”content show”>content1</div>

<div class=”content”>content2</div>

<div class=”content”>content3</div>

<div class=”content”>content4</div>

<div class=”content”>content5</div>

</div>

</div>

网页底部菜单

网页尾部的菜谱正是一流的横向排列并且供给安装大小的利用,在inline-block以前,完毕菜单基本都以用float属性来促成,float属性会导致惊人塌陷,须要消除浮动等难点,使用inline-block实现就不需求在意那样的难题。代码如下:

HTML代码

XHTML

<div class=”header”> <ul> <li> <a
href=”javascript:;” target=”_blank”>服装城</a> </li>
<li> <a href=”javascript:;”
target=”_blank”>美妆馆</a> </li> <li> <a
href=”javascript:;” target=”_blank”>超市</a> </li>
<li> <a href=”javascript:;”
target=”_blank”>全球购</a> </li> <li> <a
href=”javascript:;” target=”_blank”>闪购</a> </li>
<li> <a href=”javascript:;” target=”_blank”>团购</a>
</li> <li> <a href=”javascript:;”
target=”_blank”>拍卖</a> </li> <li> <a
href=”javascript:;” target=”_blank”>金融</a> </li>
<li> <a href=”javascript:;” target=”_blank”>智能</a>
</li> </ul> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="header">
    <ul>
        <li>
            <a href="javascript:;" target="_blank">服装城</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">美妆馆</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">超市</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">全球购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">闪购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">团购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">拍卖</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">金融</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">智能</a>
        </li>
    </ul>
</div>

CSS代码:

JavaScript

a, ul, li { padding: 0; margin: 0; list-style-type: none; } a {
text-decoration: none; color: #333; } .header ul { font-size: 0;
text-align: center; } .header li { display: inline-block; font-size:
16px; width: 80px; text-align: center; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a, ul, li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
a {
    text-decoration: none;
    color: #333;
}
.header ul {
    font-size: 0;
    text-align: center;
}
.header li {
    display: inline-block;
    font-size: 16px;
    width: 80px;
    text-align: center;
}

效果图

亚洲必赢官网 7

京东首页导航菜单

那是效仿京东首页底部导航菜单的完毕,使用inline-block可以非常的粗略的兑现横向菜单列表

复制代码

CSS

div,ul,li,a{margin:0;padding:0;list-style:none;text-decoration:none;}

.clearfix:after{content:”;display:block;clear:both;overflow:hidden;visibility:hidden;}

.clearfix{zoom:1;}

.tab{width:900px;margin:30px auto;}

.tab.tab-wrap{border-bottom:1px solid#f00;}

.tab-menu{float:right;}

.tab-menuli,.tab-menuli
a{display:inline-block;*display:inline;float:left;height:34px;line-height:34px;font-size:14px;font-family:”Microsoft
YaHei”,”微软雅黑”;padding:0 14px;text-align:center;}

.active{position:relative;border:1px
solid#f00;border-bottom:none;height:34px;line-height:34px;background-color:#fff;margin-bottom:-1px;margin-left:-1px;margin-right:-1px;}

.content{display:none;height:400px;width:900px;line-height:400px;background:olivedrab;float:left;}

.show{display:block;}

内联块成分

除此之外菜单之外,一切须要行内排列并且可设置大小的须要就能够用inline-block来兑现。
比如利用a标签做按钮时,供给安装按钮的轻重缓急,我们就能够选用inline-block来兑现。

HTML代码

XHTML

<div> 点击左侧的按钮直接买卖 <a href=”javascript:;”
class=”button”> 购买 </a> </div>

1
2
3
4
5
6
<div>
    点击右边的按钮直接购买
    <a href="javascript:;" class="button">
        购买
    </a>
</div>

CSS代码

JavaScript

.button { display: inline-block; width: 150px; height: 45px; background:
#b61d1d; color: #fff; text-align: center; line-height: 45px;
font-size: 20px; }

1
2
3
4
5
6
7
8
9
10
.button {
    display: inline-block;
    width: 150px;
    height: 45px;
    background: #b61d1d;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 20px;
}

效果图

亚洲必赢官网 8

a标签菜单

<script type=”text/javascript” src=”js/jquery.js”></script> 
<script type=”text/javascript” src=”js/accordion.js”></script> 

JS

$(function() {

var aLi =$(‘.tab-menu’).find(‘li’);

var aDiv =$(‘.tab-content’).find(‘div’);

for(var i =0;i < aLi.length;i++) {

$(aLi[i])[0].index= i;

$(aLi[i]).mouseover(function() {

for(var j =0;j < aLi.length;j++) {

$(aLi[j]).removeClass(‘active’);//JavaScript使用obj.className = “”;

$(aDiv[j]).removeClass(‘show’);//JavaScript使用obj.className = “”;

}

$(this).addClass(‘active’);//JavaScript使用obj.className = “active”;

$(aDiv[$(this)[0].index]).addClass(‘show’);//JavaScript使用obj.className
= “show”;

});

}

});

布局

inline-block也得以用来大规模的布局,使用它就不须求去注意float属性布局带来的题材。
举例表明,成立3个周边的3列布局。

HTML代码

XHTML

<div class=”wrap”> <div class=”header”> 网页头部</div> <div class=”content”> <div class=”left”> 右侧</div> <div class=”center”> 中间 </div> <div
class=”right”> 右边 </div> </div> <div
class=”footer”> 网页尾部 </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="wrap">
    <div class="header">
        网页头部
    </div>
    <div class="content">
        <div class="left">
            左侧
        </div>
        <div class="center">
            中间
        </div>
        <div class="right">
            右侧
        </div>
    </div>
    <div class="footer">
        网页底部
    </div>
</div>

CSS代码

CSS

body, div { margin: 0; padding: 0; } .header, .footer { width: 100%;
background: #ccc; height: 120px; text-align: center; line-height:
120px; } .content { margin: 0 auto; background: #ff6a00; width: 1000px;
font-size: 0; } .content .left, .content .center, .content .right {
display: inline-block; font-size: 16px; height: 400px; } .content .left,
.content .right { width: 200px; } .content .center { width: 600px;
background: #00ffff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body, div {
    margin: 0;
    padding: 0;
}
.header, .footer {
    width: 100%;
    background: #ccc;
    height: 120px;
    text-align: center;
    line-height: 120px;
}
.content {
    margin: 0 auto;
    background: #ff6a00;
    width: 1000px;
    font-size: 0;
}
.content .left, .content .center, .content .right {
    display: inline-block;
    font-size: 16px;
    height: 400px;
}
.content .left, .content .right {
    width: 200px;
}
.content .center {
    width: 600px;
    background: #00ffff;
}

效果图

亚洲必赢官网 9

inline-block的三列布局

本条例子使用了inline-block做出了普遍的网页布局。

关于inline-block的选取,只若是从左到右,从上到下,并且要求安装大小的列表都足以用它来落实,而那种需假设格外普遍的,相比较于float,作者更推荐inline-block。inline-block的采取应该还有许多,我们能够多多挖掘出来。

随后,在body间写上菜单主体代码,HTML代码将由一种类冬季列表组成。

效果图

亚洲必赢官网 10

选项卡案例1

总结

对待于选取float所带来的题材,使用inline-block所急需专注的点主借使空白符带来的标题,那或多或少也足以很有益于的缓解。
动用inline-block能够很有益的拓展列表布局,特别符合我们的思维习惯,相信使用它的同桌们也会更多,欢迎我们议论。

3 赞 5 收藏
评论

亚洲必赢官网 11

 代码如下

复制代码

<ul class=”nav”> 
   <li><a href=”; 
   <li><a href=”#”>服务</a></li> 
   <li><a href=”#”>案例</a></li> 
   <li><a href=”#”>文章</a></a> 
        <ul> 
           <li><a href=”#” target=”_blank”>XHTML/CSS</a></li> 
           <li><a href=”#”>Javascript/Ajax/jQuery</a> 
                <ul> 
                    <li><a href=”#”>Cookies</a></li> 
                    <li><a href=”#”>Event</a></li> 
                    <li><a href=”#”>Games</a></li> 
                    <li><a href=”#”>Images</a></li> 
                </ul> 
            </li> 
            <li><a href=”#” target=”_blank”>PHP/MYSQL</a></li> 
            <li><a href=”#” target=”_blank”>前端观看</a></li> 
            <li><a href=”#” target=”_blank”>HTML5/移动WEB应用</a></li> 
        </ul> 
    </li> 
    <li><a href=”#”>关于</a></li> 
</ul> 

 

CSS

自然,大家要为那一个冬天列表加上样式,让它特别简洁的变今后显示屏上。

 代码如下

复制代码

.nav {width: 213px; padding: 40px 28px 25px 0;}  
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;}  
ul.nav li {}  
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #000; display: block; 
text-decoration: none; font-weight: bolder;} 
ul.nav li a:hover {background-color:#675C7C;    color:white;} 
ul.nav ul { margin: 0; padding: 0;display: none;}  
ul.nav ul li { margin: 0; padding: 0; clear: both;}  
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;} 
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;}  
ul.nav ul ul li a {color:silver; padding-left: 40px;}  
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;}  
ul.nav span{float:right;} 

jQuery

调用accordion插件,设置相关属性,一个美艳的手风琴效果就成功了。

 代码如下

复制代码

$(function(){ 
   $(“.nav”).accordion({ 
        speed: 500, 
        closedSign: ‘[+]’, 
        openedSign: ‘[-]’ 
    }); 
});  

PASSATion提供以下选项设置:

speed:数字微秒,设置菜单进行和倒闭的时光。

closedSign:当下级菜单关闭时,显示于菜单旁边的始末,能够是任意html或许text。

openedSign:当下级菜单展开时,展现于菜单旁边的内容,能够是任意html或许text。

在意,如若您想菜单初叶载入时就举办以来,能够在对应要拓展的li上加class=”active”。

实例代码

 代码如下

复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>

<link rel=”stylesheet” type=”text/css” href=”../css/main.css” />
<script type=”text/javascript”
src=”../js/jquery.js”></script>
<script type=”text/javascript”
src=”accordion.js”></script>
<script type=”text/javascript”>
$(function(){
   $(“.nav”).accordion({
        //accordion: true,
        speed: 500,
     closedSign: ‘[+]’,
  openedSign: ‘[-]’
 });
});
</script>
<style>
.demo{width:300px; margin:40px auto; padding:10px;
background:#f7f7f7}
ul{list-style:none}
.nav {width: 213px; padding: 40px 28px 25px 0; font-family: “Microsoft
yahei”, Arial, Helvetica, sans-serif;}
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em;
list-style: none;}
ul.nav li {}
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px;
color: #000; display: block; text-decoration: none; font-weight:
bolder;}
ul.nav li a:hover {background-color:#675C7C;    color:white;}
ul.nav ul { margin: 0; padding: 0;display: none;}
ul.nav ul li { margin: 0; padding: 0; clear: both;}
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight:
normal;}
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;}
ul.nav ul ul li a {color:silver; padding-left: 40px;}
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;}
ul.nav span{float:right;}
</style>
</head>

<body>

<div id=”main”>
      <div class=”demo”>
      <ul class=”nav”>
         <li><a href=””
target=”_blank”>首页</a></li>
         <li><a href=”#”>服务</a>
              <ul>
                  <li><a
href=”#”>JAVASCRIPT</a></li>
                  <li><a
href=”#”>PHP</a></li>
                  <li><a
href=”#”>MYSQL</a></li>
                  <li><a
href=”#”>LINUX</a></li>
              </ul>
         </li>
         <li><a href=”#”>案例</a></li>
         <li><a href=”#”>文章</a></a>
              <ul>
                   <li class=”active”><a href=”4.html”
target=”_blank”>XHTML/CSS</a></li>
                   <li><a
href=”#”>Javascript/Ajax/jQuery</a>
                        <ul>
                            <li><a
href=”#”>Cookies</a></li>
                            <li><a
href=”#”>Event</a></li>
                            <li><a
href=”#”>Games</a></li>
                            <li><a
href=”#”>Images</a></li>
                        </ul>
                   </li>
                   <li><a href=”6.html”
target=”_blank”>PHP/MYSQL</a></li>
                   <li><a href=”7.html”
target=”_blank”>前端观察</a></li>
                   <li><a href=”9.html”
target=”_blank”>HTML5/移动WEB应用</a></li>
              </ul>
         </li>
         <li><a href=”about.html”
target=”_blank”>关于</a></li>
      </ul>
   </div>
  
</div>

</body>
</html>

jQuery多级手风琴菜单下载:

网站地图xml地图