导航
首页
站内首页
网罗天下
网页前端
软件使用
站内首页
>
网页前端
>
JS
> 正文
网站导航文字按特殊的类型进行切换的特效
用CSS实现的文字导航上下切换,还有文本的左右切换,喜欢的话可以自己开发其它功能!
演示图
<style> * { margin:0; padding:0; font-size:12px; } img { border:none; } ul,ol { list-style:none; } #content { margin:20px auto; border:1px solid #a5b5c0; width:158px; height:241px; background:url(/uploadfile/201002/1/450936700.gif); overflow:hidden; } #title { height:17px; *height:16px; background:url(/uploadfile/201002/1/EA0936618.gif) repeat-x; border-bottom:1px solid #a5b5c0; padding:3px 0 0 6px; *padding:4px 0 0 6px; font-weight:700; } #title li { float:left; display:inline; width:92px; } #tit_l { float:left; width:92px; overflow:hidden; height:14px; } #tit_r { float:right; margin-top:-1px; *margin-top:-2px; } #tit_r img { margin-right:4px; cursor:pointer; } #tit_r img:hover { filter: Alpha(Opacity=70); -moz-opacity: 0.7; opacity: 0.7; } #text { clear:both; height:210px; } #text ul { background:url(/uploadfile/201002/1/F30936719.gif) no-repeat 12px 4px; margin:6px 0; } #text li { padding-left:34px; line-height:21px; } #text li a { color:#123b8d; text-decoration:none; } #text li a:hover { text-decoration:underline; } </style> </head> <body> <div id="content"> <div id="title"> <div id="tit_l"> <div id="mytit"> <ul> <li>热门搜索</li> <li>热门体育</li> <li>热门娱乐</li> </ul> </div> </div> <div id="tit_r"><img src="/uploadfile/201002/1/F30936175.gif" _fcksavedurl="/uploadfile/201002/1/F30936175.gif" alt="" /><img src="/uploadfile/201002/1/E50936360.gif" _fcksavedurl="/uploadfile/201002/1/E50936360.gif" alt="" /></div> </div> <div id="text"> <ul id="c1"> <li><a href="#" _fcksavedurl="#">热门搜索的内容</a></li> <li><a href="#" _fcksavedurl="#">热门搜索的内容</a></li> <li><a href="#" _fcksavedurl="#">热门搜索的内容</a></li> <li><a href="#" _fcksavedurl="#">热门搜索的内容</a></li> <li><a href="#" _fcksavedurl="#">热门搜索的内容</a></li> <li><a href="#" _fcksavedurl="#">热门搜索的内容</a></li> <li><a href="#" _fcksavedurl="#">热门搜索的内容</a></li> <li><a href="#" _fcksavedurl="#">热门搜索的内容</a></li> <li><a href="#" _fcksavedurl="#">热门搜索的内容</a></li> <li><a href="#" _fcksavedurl="#">热门搜索的内容</a></li> </ul> <ul id="c2"> <li><a href="#" _fcksavedurl="#">热门体育的内容</a></li> <li><a href="#" _fcksavedurl="#">热门体育的内容</a></li> <li><a href="#" _fcksavedurl="#">热门体育的内容</a></li> <li><a href="#" _fcksavedurl="#">热门体育的内容</a></li> <li><a href="#" _fcksavedurl="#">热门体育的内容</a></li> <li><a href="#" _fcksavedurl="#">热门体育的内容</a></li> <li><a href="#" _fcksavedurl="#">热门体育的内容</a></li> <li><a href="#" _fcksavedurl="#">热门体育的内容</a></li> <li><a href="#" _fcksavedurl="#">热门体育的内容</a></li> <li><a href="#" _fcksavedurl="#">热门体育的内容</a></li> </ul> <ul id="c3"> <li><a href="#" _fcksavedurl="#">热门娱乐的内容</a></li> <li><a href="#" _fcksavedurl="#">热门娱乐的内容</a></li> <li><a href="#" _fcksavedurl="#">热门娱乐的内容</a></li> <li><a href="#" _fcksavedurl="#">热门娱乐的内容</a></li> <li><a href="#" _fcksavedurl="#">热门娱乐的内容</a></li> <li><a href="#" _fcksavedurl="#">热门娱乐的内容</a></li> <li><a href="#" _fcksavedurl="#">热门娱乐的内容</a></li> <li><a href="#" _fcksavedurl="#">热门娱乐的内容</a></li> <li><a href="#" _fcksavedurl="#">热门娱乐的内容</a></li> <li><a href="#" _fcksavedurl="#">热门娱乐的内容</a></li> </ul> </div> </div> </body> </html>
提示:可以修改后运行.
<<
js控制页面字体大小
修改了的浮动带关闭或隐藏的代码
>>
查看所有评论
昵称
评论内容
相关文章
图片文字放大
动易多列显示子栏目导航自定义函数标签
类似QQ首页的无刷新换肤切换样式
非常不错的切换效果
HTML教程:奇妙的文字图形 font-family的非常用途
可以手动的层
Photoshop制作石头上的自然风化文字
符合网站标准的图片切换特效(天极软件)
从myie网站抠的选项卡效果
图片上加文字
在线留言
© 2021
i0561搜索
.All rights reserved.
v3.24
作者:
Song2816@126.com
浏览:
发布时间:
10/02/01