首页
网页特效库
网页特效库
导航菜单
按钮表单
背景特效
时间日期
图片特效
鼠标特效
文本操作
窗口页面
状态栏类
警告对话
综合应用
游戏娱乐
首页
>
特效
>
文本操作
> 正文
CSS打造的折叠标签页面
2009-12-19 文本操作 ℃
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>折叠标签-www.zlcool.com</title> <style type="text/css"> <!-- #menu{ overflow:hidden; background-color:#fbfef4; width:210px; height:550px; } #menu h1 { font-size: 14px; margin:0px; color:#739c23; } #menu li { display: block; width: 180px; list-style-type:none; border:1px solid #739c23; border-bottom-width:0px; } #menu li.end{ border-bottom-width:1px;} #menu li a { display:block; text-decoration:none; width:100%; padding:10px; } #menu li a span{ display:none; color:#333; font-size:12px; padding-top:10px; } #menu li a:hover{ background:#fff;} #menu li a:hover span{ display:block; cursor:hand;} --> </style> </head> <body> <ul id="menu"> <li><a href="#"> <h1>第一天的忠告</h1> <span>给别人一个惊喜 给朋友一个惊喜，能增进你们的友谊；给家人一个惊喜，能带来温馨和快乐；给同学一个惊喜，能提升你的人际关系；一声轻轻的问候，一份贴心的关怀，能给人带来温暖。把自己的快乐告诉别人，大家共享其乐融融。不要刻意炮制惊喜，否则便会弄巧成拙。 每日一言：惊喜会让快乐长上翅膀，让你越飞越高。</span></a></li> <li><a href="#"> <h1>第二天的忠告</h1> <span>弥补自己的不足。 不要与光彩夺目的人相处，那样会突出你的缺陷。 不要与爱挑剔的人相伴，那样会彰显你的缺点。 与“太阳”型的人在一起会灼伤自己。与互补型的人在一起，事业可蒸蒸日上。 用人所长补己之短，你才会离成功越来越近。 每日一言：找准自己的位子，巧干。</span></a></li> <li class="end"><a href="#"> <h1>第三天的忠告</h1> <span>孤独是健康的大敌。 世上最悲哀的事莫过于被集体遗弃，世上最悲惨的事莫过于离群索居，无论被动的还是主动的孤独，寂寞的感觉总是在身边围绕。心灵的孤独容易毁灭一个人的生存欲望。 每日一言：孤独容易使人心力交瘁，保持良好的人际关系很重要。</span> </a></li></ul> </body> </html>
相关特效代码
无相关信息
热门特效代码
输入框的文字闪烁变色引人注意
纯CSS内页内容切换选项卡
鼠标经过链接显示注释旋转风火轮
指向自动选择的输入框
放大镜链接效果
带注释的链接特效
文字闪烁效果
带注释的链接特效代码
点击文字显示隐藏链接
WEB2.0圆形边框css做法
推荐特效代码
字符连续消隐
文字变色逐个出现
段落文字百叶窗效果输出
点击文字显示隐藏链接
文字由小变大由大变小（动态变化
文字来回上下移动或跳动
