样式大全
图片切换效果
View Code
<!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=gbk" />
<title>Jquery+CSS实现的大气漂亮图片切换效果代码 - www.webdm.cn</title>
<script type="text/javascript" src="http://www.webdm.cn/images/20091029/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2").append('<em></em>')
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").html(" (" + largeAlt + ")"); return false;
});
});
</script>
<style type="text/css">
body {
margin: 20px auto;
padding: 0;
width: 580px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
h2 {
font: bold 190%/100% Arial, Helvetica, sans-serif;
margin: 0 0 .2em;
}
h2 em {
font: normal 80%/100% Arial, Helvetica, sans-serif;
color: #999999;
}
#largeImg {
border: solid 1px #ccc;
width: 550px;
height: 400px;
padding: 5px;
}
.thumbs img {
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 4px;
}
.thumbs img:hover {
border-color: #FF9900;
}
</style>
</head>
<body>
<h2>Illustrations</h2>
<p><img id="largeImg" src="http://www.webdm.cn/images/20091029/img1-lg.jpg" alt="Large image" /></p>
<p class="thumbs">
<a href="http://www.webdm.cn/images/20091029/img2-lg.jpg" title="Image 2"><img
src="http://www.webdm.cn/images/20091029/img2-thumb.jpg" /></a>
<a href="http://www.webdm.cn/images/20091029/img3-lg.jpg" title="Image 3"><img
src="http://www.webdm.cn/images/20091029/img3-thumb.jpg" /></a>
<a href="http://www.webdm.cn/images/20091029/img4-lg.jpg" title="Image 4"><img
src="http://www.webdm.cn/images/20091029/img4-thumb.jpg" /></a>
<a href="http://www.webdm.cn/images/20091029/img5-lg.jpg" title="Image 5"><img
src="http://www.webdm.cn/images/20091029/img5-thumb.jpg" /></a>
<a href="http://www.webdm.cn/images/20091029/img6-lg.jpg" title="Image 6"><img
src="http://www.webdm.cn/images/20091029/img6-thumb.jpg" /></a>
</p>
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
仿京东左侧栏目导航
View Code
<!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=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>安博中程企业培训,企业内训,专注于android培训,软考培训,软件开发,软件工程,嵌入式,UI设计,重构,架构等IT企业培训</title>
<meta name="keywords" content="企业培训,企业内训,android培训,软考培训,it企业培训"/>
<meta name="description" content="中国高端培训第一品 牌."/>
<meta name="copyright" content="安博教育集团 中程在线北京科技有限公司版权所有"/>
</head>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font:12px/22px "宋体", "Arial Unicode MS"; color:#666; background-color:#f9f9f9;}
em{ font-style:normal;}
H3 {FONT-SIZE: 12px}
.box{width:188px;/** margin:20px auto; **/text-align:left; float:left; margin:4px 10px 0 0;}
.allsort {Z-INDEX:10;/** BACKGROUND: url(/images/Bg.jpg) no-repeat 0px -166px;**/ FLOAT: left; WIDTH: 188px; MARGIN-left: 4px; POSITION: relative; HEIGHT:32px; background-color:#FFFFFF;clear:both;}
.allsort .mt {PADDING-RIGHT: 12px; PADDING-LEFT: 16px; CURSOR: pointer; LINE-HEIGHT: 24px; HEIGHT: 24px; margin:0}
.allsort .mt { font-family:"微软雅黑", "宋体", "黑体";FONT-SIZE: 14px; FLOAT: left; COLOR: #630}
#o-search .allsort .mt A {COLOR: #630}
.allsort .mt .extra {DISPLAY: none}
.allsort .mc { left:-1px; background:#FFF;BORDER-RIGHT: #C6001D 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #C6001D 0px solid; PADDING-LEFT: 3px;PADDING-BOTTOM: 0px; OVERFLOW: visible; BORDER-LEFT: #C6001D 1px solid; WIDTH: 182px; PADDING-TOP: 0px; BORDER-BOTTOM: #C6001D 1px solid; POSITION: absolute; TOP: 32px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px}
.allsort .item {BORDER-TOP: #E8E8E8 1px solid; WIDTH: 176px; HEIGHT:27px}
.allsort .fore {BORDER-TOP-STYLE: none}
.allsort SPAN {DISPLAY: block; Z-INDEX: 1; WIDTH: 176px; POSITION: relative}
.allsort H3 { PADDING-LEFT: 20px; FONT-WEIGHT: normal; /*BACKGROUND: url(/images/bg.jpg) no-repeat -318px -240px;BORDER-LEFT: #fef8ef 1px solid;BORDER-RIGHT: #fef8ef 0px solid; BORDER-TOP: #fef8ef 1px solid; BORDER-BOTTOM: #fef8ef 1px solid;*/ WIDTH: 165px; HEIGHT:28px;}
.allsort H3 A:link { DISPLAY: block; COLOR: #666; LINE-HEIGHT: 27px; HEIGHT:27px}
.allsort H3 A:visited {DISPLAY: block; COLOR: #666; LINE-HEIGHT: 27px; HEIGHT: 27px}
.allsort H3 A:hover {COLOR: #ff0000}
.allsort H3 A:active {COLOR: #666}
.allsort S {DISPLAY: block; BACKGROUND: url(/images/homeBg_53.gif) no-repeat top right; LEFT: 156px; WIDTH: 13px; POSITION: absolute; TOP: 10px; HEIGHT: 13px}
.allsort .item .i-mc { DISPLAY: none; LEFT: 188px; OVERFLOW: hidden; WIDTH: 563px;/** BACKGROUND: #fff9ef;BORDER-LEFT: #c30 1px solid; BORDER-BOTTOM: #c30 1px solid;BORDER-RIGHT: #c30 1px solid; BORDER-TOP: #c30 1px solid;**/ border:1px solid #FF0000; background-color:#FFFFFF; POSITION: absolute; TOP: 0px}
.allsort .item DT { PADDING-RIGHT: 6px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; PADDING-TOP: 3px}
.allsort .item DD { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 3px; ZOOM: 1}
.allsort .subitem { PADDING-RIGHT: 4px; PADDING-LEFT: 8px; MIN-HEIGHT: 300px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 484px; PADDING-TOP: 0px}
.allsort .subitem .fore{ display:block; width:550px; clear:both; overflow:hidden; border-bottom:1px solid #eee;}
.allsort .subitem dt{ width:80px; text-align:center; float:left;}
.allsort .subitem dd{ float:left; display:block; color:#999999;}
.allsort .subitem dd span{ display: inline-table; color:#333333; width:90px; float:left;}
.allsort .subitem dd a{ color:#3399FF;}
/**.allsort .subitem DL { PADDING-RIGHT: 0px; BORDER-TOP: #ffefd7 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 6px; OVERFLOW: hidden; PADDING-TOP: 6px; ZOOM: 1}
.allsort .subitem .fore { BORDER-TOP-STYLE: none}
.allsort .subitem DT { FLOAT: left; WIDTH: 80px; LINE-HEIGHT: 22px; TEXT-ALIGN: right}
.allsort .subitem DT A{COLOR: #c00;}
.allsort .subitem DD { FLOAT: left; }
.allsort .subitem DD A { BORDER-LEFT: #ccc 1px solid; padding:0 8px; margin-bottom:5PX; TEXT-DECORATION: underline;display:inline-block; line-height:20PX;}**/
.allsort .fr {BACKGROUND: #fff; MARGIN-BOTTOM: -2000px; PADDING-BOTTOM: 2010px; WIDTH: 176px}
.allsort .fr DL {PADDING-BOTTOM: 0px}
#o-search .allsort .fr A {COLOR: #666}
.allsort .brands {PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 6px; WIDTH: 160px; PADDING-TOP: 6px}
.allsort .brands EM {FLOAT: left; WIDTH: 80px}
.allsort .brands DD {LINE-HEIGHT: 20px; PADDING-TOP: 6px}
.allsort .promotion {PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 6px; WIDTH: 160px; PADDING-TOP: 6px}
.allsort .promotion DD {LINE-HEIGHT: 20px; PADDING-TOP: 6px}
.allsort .mc .extra {PADDING-RIGHT: 8px; BORDER-TOP: #fde6d2 1px solid; PADDING-LEFT: 8px; BACKGROUND: #fdf1de; PADDING-BOTTOM: 7px; PADDING-TOP: 7px}
#o-search .allsort .mc .extra A {COLOR: #c00}
.allsorthover {BACKGROUND-POSITION: 0px -166px}
.allsorthover .mt .extra {BACKGROUND-POSITION: -274px -190px}
.allsorthover .mc {DISPLAY: block}
.allsort .hover SPAN {Z-INDEX: 13; WIDTH: 160px}
.allsort .hover H3 {BORDER-RIGHT: #c30 0px solid; BORDER-TOP: #c30 1px solid; FONT-WEIGHT: bold; BACKGROUND: url(/images/Bg.jpg) #fff no-repeat -318px -172px; OVERFLOW: hidden; BORDER-LEFT: #c30 1px solid; BORDER-BOTTOM: #c30 1px solid}
.allsort .hover S {DISPLAY: none}
.allsort .hover .i-mc {DISPLAY: block; Z-INDEX: 12}
* HTML .allsort .item DD {PADDING-BOTTOM: 6px}
.allsort .blue{ border-top:solid 1px #ddd;}
.allsort .blue a{color:#3399FF;font-weight:bold;text-decoration: underline; padding-left:20px;}
</style>
<body>
<script type="text/javascript" src="http://www.miiceic.org.cn/templets/js/jquery.min.js"></script>
<script type="text/javascript">
(function ($){$.fn.hoverForIE6 = function (option) { var s = $.extend({ current: "hover", delay: 10 }, option || {});$.each(this, function () { var timer1 = null, timer2 = null, flag = false;$(this).bind("mouseover", function () { if (flag) { clearTimeout(timer2); } else { var _this = $(this); timer1 = setTimeout(function () { _this.addClass(s.current); flag = true; }, s.delay); } }).bind("mouseout", function () { if (flag) { var _this = $(this); timer2 = setTimeout(function () { _this.removeClass(s.current); flag = false; }, s.delay); } else { clearTimeout(timer1); } }) }) } })(jQuery);
</script>
<div class="allsort">
<div class="mt"><a href="http://www.miiceic.org.cn/">安博中程栏目分类</a></div>
<div class="mc">
<div class="item fore">
<span>
<h3>最新公开课</h3>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt>北京</dt>
<dd>
<p>
2012.03.29-03.30 “云计算架构鉴赏”培训 | 2012.03.29-03.31 “嵌入式系统软件架构”培训
</p>
</dd>
</dl>
<dl class="fore">
<dt>上海</dt>
<dd>
<p>
2012.03.29-03.31 “大型架构案例分析-训练营”培训班 | 2012.03.24-03.28 “数据库仓库和BI企业级技术高级应用”培训班
</p>
</dd>
</dl>
<dl class="fore">
<dt>深圳</dt>
<dd>
<p>
2012.03.21-03.24 “软件详细设计师”高级培训班 | 2012.03.25-03.27 “物联网应用及开发”进阶培训
</p>
</dd>
</dl>
</div>
</div>
</div>
<div class="item ">
<span>
<h3>高端课程</h3>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt>软件工程培训</dt>
<dd>
<p>软件架构专题 | 大型架构案例分析 | 软件设计专题 </p>
</dd>
</dl>
<dl class="fore">
<dt>嵌入式培训</dt>
<dd>
<p>嵌入式架构设计 | 嵌入式系统开发 | 嵌入式软件开发 </p>
</dd>
</dl>
<dl class="fore">
<dt>数据库培训</dt>
<dd>
<p>SQL Server系列 | ORACLE系列 | DB2系列</p>
</dd>
</dl>
<dl class="fore">
<dt>专项突破 </dt>
<dd>
<p>
<span>数学</span>思维训练 |奥数 | 华数 | 数学集训
</p>
<p>
<span>语文</span>阅读 | 作文
</p>
<p>
<span>英语</span>三一口语 | 新概念英语 | 剑桥英语 | 朗文英语 | 阅读写作
</p>
</dd>
</dl>
</div>
</div>
</div>
<div class="item ">
<span>
<h3>安博中程</h3>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt><a href="http://www.miiceic.org.cn/">中程在线</a></dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>安博中程</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>企业内训</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>软考培训</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>android培训</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>UI设计</dt>
<dd>
</dd>
</dl>
</div>
</div>
</div>
<div class="item ">
<span>
<h3>
<b>专家团队</b>
</h3>
<s></s>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt>台湾顾问</dt>
<dd>
<p>
<a href="http://www.miiceic.org.cn/tuandui/">高焕堂</a>| <a href="http://www.miiceic.org.cn/tuandui/">柯博文</a> | <a href="http://www.miiceic.org.cn/tuandui/">陈俊宏</a>
</p>
</dd>
</dl>
<dl class="fore">
<dt>中程专家</dt>
<dd>
<p>
<a href="http://www.miiceic.org.cn/tuandui/">杨秀峰</a> | <a href="http://www.miiceic.org.cn/tuandui/">温昱</a> | <a href="http://www.miiceic.org.cn/tuandui/">张云河</a>
</p>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<span>
<h3>最新公开课</h3>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt>北京</dt>
<dd>
<p>
2012.03.29-03.30 “云计算架构鉴赏”培训 | 2012.03.29-03.31 “嵌入式系统软件架构”培训
</p>
</dd>
</dl>
<dl class="fore">
<dt>上海</dt>
<dd>
<p>
2012.03.29-03.31 “大型架构案例分析-训练营”培训班 | 2012.03.24-03.28 “数据库仓库和BI企业级技术高级应用”培训班
</p>
</dd>
</dl>
<dl class="fore">
<dt>深圳</dt>
<dd>
<p>
2012.03.21-03.24 “软件详细设计师”高级培训班 | 2012.03.25-03.27 “物联网应用及开发”进阶培训
</p>
</dd>
</dl>
</div>
</div>
</div>
<div class="item ">
<span>
<h3>高端课程</h3>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt>软件工程培训</dt>
<dd>
<p>软件架构专题 | 大型架构案例分析 | 软件设计专题 </p>
</dd>
</dl>
<dl class="fore">
<dt>嵌入式培训</dt>
<dd>
<p>嵌入式架构设计 | 嵌入式系统开发 | 嵌入式软件开发 </p>
</dd>
</dl>
<dl class="fore">
<dt>数据库培训</dt>
<dd>
<p>SQL Server系列 | ORACLE系列 | DB2系列</p>
</dd>
</dl>
<dl class="fore">
<dt>专项突破 </dt>
<dd>
<p>
<span>数学</span>思维训练 |奥数 | 华数 | 数学集训
</p>
<p>
<span>语文</span>阅读 | 作文
</p>
<p>
<span>英语</span>三一口语 | 新概念英语 | 剑桥英语 | 朗文英语 | 阅读写作
</p>
</dd>
</dl>
</div>
</div>
</div>
<div class="item ">
<span>
<h3>企业培训</h3>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt><a href="http://www.miiceic.org.cn/">中程在线</a></dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>安博中程</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>企业内训</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>软考培训</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>android培训</dt>
<dd>
</dd>
</dl>
<dl class="fore">
<dt>UI设计</dt>
<dd>
</dd>
</dl>
</div>
</div>
</div>
<div class="item ">
<span>
<h3>
<b>专家团队</b>
</h3>
<s></s>
</span>
<div class="i-mc">
<div class="subitem">
<dl class="fore">
<dt>台湾顾问</dt>
<dd>
<p>
<a href="http://www.miiceic.org.cn/tuandui/">高焕堂</a>| <a href="http://www.miiceic.org.cn/tuandui/">柯博文</a> | <a href="http://www.miiceic.org.cn/tuandui/">陈俊宏</a>
</p>
</dd>
</dl>
<dl class="fore">
<dt>中程专家</dt>
<dd>
<p>
<a href="http://www.miiceic.org.cn/tuandui/">杨秀峰</a> | <a href="http://www.miiceic.org.cn/tuandui/">温昱</a> | <a href="http://www.miiceic.org.cn/tuandui/">张云河</a>
</p>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".allsort .item").hoverForIE6({ delay: 150 });
</script>
<div style="float:left;width:600px;font-size:14px;line-height:36px;padding-top:50px;padding-left:20px;">
中国高端培训第一品牌.
</div>
</body>
</html>
posted on 2012-02-17 14:33 lan.xiaofeng 阅读(84) 评论(0) 收藏 举报
浙公网安备 33010602011771号