代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Css
】
无图版CSS 滑动门
作者:
Dezai.CN
/ 发布于
2012/4/17
/
531
<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <head> <title>CSS滑动门</title> <style type="text/css"> .tabber{border:1px solid #AACCEE;clear:both;} .tabber .tmenu ul{margin:0;padding:0; display:block;} .tabber .tmenu li{ float:left; height:25px; line-height:25px; border-bottom:1px solid #AACCEE; border-right:1px solid #AACCEE; border-color:#AACCEE; border-width:1px; color:#004499; cursor:pointer; display:block; text-align:center;} .tabber .tmenu li.on{ background:#FFF; border-bottom-color:#FFFFFF; cursor:default; font-weight:bold;} .tabber .tbox{ height:267px; clear:both;} .tabber .tbox div p{padding:15px;} .block{display:block;} .none{display:none;} </style> <script type="text/javascript"> function SetTab(tab,id,cnt){ var menus=document.getElementById(tab).getElementsByTagName("li"); for(i=0;i<cnt;i++){ i==id?menus[i].className="on":menus[i].className=""; i==id?document.getElementById(tab+"-content"+i).className="block":document.getElementById(tab+"-content"+i).className="none"; } } </script> </head> <body> <div class="tabber" style="width: 529px;"> <div class="tmenu"> <ul id="tab1"> <li style="width: 85px;" class="on" onmouseover="SetTab('tab1',0,4);">新闻</li> <li style="width: 85px;" onmouseover="SetTab('tab1',1,4);">娱乐</li> <li style="width: 85px;" onmouseover="SetTab('tab1',2,4);">财经</li> <li style="width: 85px;" onmouseover="SetTab('tab1',3,4);">读书</li> <li style="width: 185px; border-bottom: solid 1px #AACCEE; border-right: none;"><a href="#">关注更多？</a></li> </ul> </div> <div class="tbox"> <div id="tab1-content0" class="block"> 看新闻，上网易 </div> <div id="tab1-content1" class="none"> 娱乐七天乐 </div> <div id="tab1-content2" class="none"> 今天股市暴跌 </div> <div id="tab1-content3" class="none"> 读书使人进步…… </div> </div> </div> <div class="tabber" style="width: 343px;"> <div class="tmenu"> <ul id="tab2"> <li style="width: 85px;" class="on" onmouseover="SetTab('tab2',0,4);">新闻</li> <li style="width: 85px;" onmouseover="SetTab('tab2',1,4);">娱乐</li> <li style="width: 85px;" onmouseover="SetTab('tab2',2,4);">Ajax</li> <li style="width: 85px; border-right: none;" onmouseover="SetTab('tab2',3,4);">编程</li> </ul> </div> <div class="tbox"> <div id="tab2-content0" class="block"> 最新的新闻内容 </div> <div id="tab2-content1" class="none"> 时尚娱乐资讯 </div> <div id="tab2-content2" class="none"> Ajax成就未来…… </div> <div id="tab2-content3" class="none"> ASP.NET... </div> </div> </div> </body> </div>
试试其它关键字
CSS
滑动门
同语言下
.
前端PC-移动端CSS公共样式+HTML
.
手机端页面通用样式
.
H5页面通用头部设置
.
elect默认样式美化代码兼容移动端和pc端
.
按钮效果 css
.
唤醒app
.
放大效果
.
html5+css3实现上拉和下拉刷新
.
html上传图片后，在页面显示上传的图片
.
html5实现点击弹出图片
可能有用的
.
C#实现的html内容截取
.
List 切割成几份 工具类
.
SQL查询 多列合并成一行用逗号隔开
.
一行一行读取txt的内容
.
C#动态修改文件夹名称(FSO实现，不移动文件)
.
c# 移动文件或文件夹
.
c#图片添加水印
.
Java PDF转换成图片并输出给前台展示
.
网站后台修改图片尺寸代码
.
处理大图片在缩略图时的展示
Dezai.CN
贡献的其它代码
(
4037
)
.
多线程Socket服务器模块
.
生成随机密码
.
清除浮动样式
.
弹出窗口居中
.
抓取url的函数
.
使用base HTTP验证
.
div模拟iframe嵌入效果
.
通过header转向的方法
.
Session操作类
.
执行sqlite输入插入操作后获得自动编号的ID
Copyright © 2004 - 2024 dezai.cn. All Rights Reserved
站长博客
粤ICP备13059550号-3