展会信息港展会大全

用CSS打造可折叠伸缩名片菜单
来源:互联网   发布日期:2016-03-25 16:22:53   浏览:2064次  

导读:代码如下 复制代码 style type=text/css !-- #menu { font-size:12px; height:380px; margin:0; padding:0; width:180px; overflow:hidden; background:#f0f0f0; list-style:none; border-left:1px solid #cccccc; border-right:1px solid #cccccc; } #menu...

代码如下

复制代码

<style type="text/css">

<!--

#menu {

font-size:12px;

height:380px;

margin:0;

padding:0;

width:180px;

overflow:hidden;

background:#f0f0f0;

list-style:none;

border-left:1px solid #cccccc;

border-right:1px solid #cccccc;

}

#menu li a {

display:block;

text-decoration:none;

color:#00b;

margin:0;

width:100%;

}

#menu li a span {

display:none;

color:#000;

height:120px

}

#menu li a.one span {

display:block;

margin:0 10px;

}

#menu li a:hover {

background:#f1f1f1;

}

#menu li a:hover span {

display:block;

margin:0 10px;

cursor:pointer;

}

#menu .h2 {

margin:0 5px;

padding:0;

color:#808;

font-variant:small-caps;

border:0;

}

#menu .h3 {

margin:0 5px;

padding:0;

color:#00b;

}

.curved {

width:180px;

margin:0 auto;

}

.curved .b1, .curved .b2, .curved .b3, .curved .b4{

font-size:1px;

display:block;

background:#88c;

overflow: hidden;

}

.curved .b1, .curved .b2, .curved .b3 {

height:1px;

}

.curved .b2, .curved .b3, .curved .b4 {

background:#f0f0f0;

border-left:1px solid #cccccc;

border-right:1px solid #cccccc;

}

.curved .b1 {

margin:0 4px;

background:#cccccc;

}

.curved .b2 {

margin:0 2px;

border-width:0 2px;

}

.curved .b3 {

margin:0 1px;

}

.curved .b4 {

height:2px;

margin:0px;

}

-->

</style>

<div class="curved"><b class="b1 c1"></b><b class="b2 c2"></b><b class="b3 c3"></b><b class="b4 c4" ></b><ul id="menu"><li><ahref="#nogo"><b class="h2">网页陶吧 ONE</b><br /><b class="h3">http://homepage./</b><span>WEB标准 是 结构(Structure) 、表现(Presentation) 和 行为(Behavior) 叁方面构成的标准集合</span></a></li><li><a href="#nogo"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="h2">网页陶吧 TWO</b><br /><b class="h3">http://homepage./</b><span>WEB标准 是 结构(Structure) 、表现(Presentation) 和 行为(Behavior) 叁方面构成的标准集合</span></a></li><li><a href="#nogo"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="h2">网页陶吧 THREE</b><br /><b class="h3">http://homepage./</b><span>WEB标准 是 结构(Structure) 、表现(Presentation) 和 行为(Behavior) 叁方面构成的标准集合</span></a></li><li><a href="#nogo"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="h2">网页陶吧 FOUR</b><br /><b class="h3">http://homepage./</b><span>WEB标准 是 结构(Structure) 、表现(Presentation) 和 行为(Behavior) 叁方面构成的标准集合</span></a></li><li><a class="one" href="#nogo"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="h2">网页陶吧 FIVE</b><br /><b class="h3">http://homepage./</b><span>WEB标准 是 结构(Structure) 、表现(Presentation) 和 行为(Behavior) 叁方面构成的标准集合</span></a></li> </ul><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

相关内容
AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港