ysy
/
index2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/jquery1.42.min.js" ></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js" ></script>
<style>

.box-pic{position:relative;overflow:hidden;cursor:pointer;}
.txt{width:245px;height:45px;background:rgba(0,0,0,0.6);/*透明背景色，不透明其文字内容*/position:absolute;left:0;bottom:0;color:#fff;font-family:"微软雅黑";}
.txt h3{font-size:20px;font-weight:100;height:45px;text-align:center;line-height:45px;}
.txt p{font-size:14px;text-align:center;}


</style>

	</head>
	<body>
<div class="nav">
	<img src="img/logo.jpg" style="float: left;"/>
<div class="top-nav"><a href="http://www.10yan.com" target="_blank">秦楚网首页</a><span>|</span><a href="http://www.10yan.com/news/" target="_blank">新闻中心</a><span>|</span><a href="http://v.10yan.com/" target="_blank">秦楚网视</a><span>|</span><a href="http://picture.10yan.com/" target="_blank">精彩图片</a><span>|</span><a href="http://12345.10yan.com/" target="_blank">网上问政 </a><span>|</span><a href="http://job.10yan.com/" target="_blank"> 伯乐网 </a><span>|</span><a href="http://www.hbyoo.com/" target="_blank"> 楚之游</a><span>|</span><a href="http://www.25du.net/" target="_blank">25度生活网</a><span>|</span><a href="http://www.onfun.net/" target="_blank">房产在线</a><span>|</span><a href="http://www.onche.net/" target="_blank">十堰车友网</a><span>|</span><a href="http://www.10yan.com/html/zt/szbsy/" target="_blank">数字报</a><span>|</span><a href="http://zhuanti.10yan.com/m/" target="_blank">客户端</a><span>|</span><a href="http://zhuanti.10yan.com/html/2014/khd/" target="_blank">游十堰</a></div>
</div>

<div class="banner">

</div>
<div class="slide">
	<div class="slider">

		<div class="bd">
			<ul>

				<li><a target="_blank" href="http://www.superslide2.com"><img src="img/幻灯焦点图06.jpg" /></a></li>
				<li><a target="_blank" href="http://www.superslide2.com"><img src="img/幻灯焦点图07.jpg" /></a></li>
				<li><a target="_blank" href="http://www.superslide2.com"><img src="img/幻灯焦点图08.jpg" /></a></li>
				<li><a target="_blank" href="http://www.superslide2.com"><img src="img/幻灯焦点图09.jpg" /></a></li>
				<li><a target="_blank" href="http://www.superslide2.com"><img src="img/幻灯焦点图10.jpg" /></a></li>
				<li><a target="_blank" href="http://www.superslide2.com"><img src="img/幻灯焦点图11.jpg" /></a></li>
				<li><a target="_blank" href="http://www.superslide2.com"><img src="img/幻灯焦点图12.jpg" /></a></li>
				<li><a target="_blank" href="http://www.superslide2.com"><img src="img/幻灯焦点图13.jpg" /></a></li>

			</ul>
		</div>

		<div class="hd"><ul></ul></div><!-- 自动分页 -->

		<div class="pnBtn prev">
			<span class="blackBg"></span>
			<a class="arrow" href="javascript:void(0)"></a>
		</div>
		<div class="pnBtn next">
			<span class="blackBg"></span>
			<a class="arrow" href="javascript:void(0)"></a>
		</div>

	</div>

	<script type="text/javascript">
		/* 把最后一个放到第一个前面，然后通过外层ul{margin-left:-980px !important; }来显示第一个 */
		jQuery(".slider .bd li").first().before( jQuery(".slider .bd li").last() );
		/* 控制左右按钮显示 */
		jQuery(".slider").hover(function(){ jQuery(this).find(".arrow").stop(true,true).fadeIn(300) },function(){ jQuery(this).find(".arrow").fadeOut(300) });
		/* 调用SuperSlide */
		jQuery(".slider").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"leftLoop",  autoPlay:true, vis:3, autoPage:true, trigger:"click"});
	</script>


</div>
<div class="box">
	<div class="box-nav">
		<a href="">
		<img  src="img/nav.jpg"/>
		</a>
	</div>
	<div class="box-con">
		<div class="box-pic">
			<img  src="img/pic.jpg" class="pt10" width="227px" height="135px"/>
			<div class="txt">
					<h3>title</h3>
					<p>description</p>
			</div>
		</div>
		<div class="box-pic">
			<img  src="img/pic.jpg" class="pt10" width="227px" height="135px"/>
			<div class="txt">
					<h3>IT培训</h3>
					<p>为您铺就成为IT大神的在线学习之路</p>
			</div>
		</div>
		<div class="box-pic">
			<img  src="img/pic.jpg" class="pt10" width="227px" height="135px"/>
			<div class="txt">
					<h3>IT培训</h3>
					<p>为您铺就成为IT大神的在线学习之路</p>
			</div>
		</div>
		<div class="box-pic">
			<img  src="img/pic.jpg" class="pt10" width="227px" height="135px"/>
			<div class="txt">
					<h3>IT培训</h3>
					<p>为您铺就成为IT大神的在线学习之路</p>
			</div>
		</div>
		<div class="box-pic">
			<img  src="img/pic.jpg" class="pt10" width="227px" height="135px"/>
			<div class="txt">
					<h3>IT培训</h3>
					<p>为您铺就成为IT大神的在线学习之路</p>
			</div>
		</div>
		<div class="box-pic">
			<img  src="img/pic.jpg" class="pt10" width="227px" height="135px"/>
			<div class="txt">
					<h3>IT培训</h3>
					<p>为您铺就成为IT大神的在线学习之路</p>
			</div>
		</div>
		<div class="box-pic">
			<img  src="img/pic.jpg" class="pt10" width="227px" height="135px"/>
			<div class="txt">
					<h3>IT培训</h3>
					<p>为您铺就成为IT大神的在线学习之路</p>
			</div>
		</div>
		<div class="box-pic">
			<img  src="img/pic.jpg" class="pt10" width="227px" height="135px"/>
			<div class="txt">
					<h3>IT培训</h3>
					<p>为您铺就成为IT大神的在线学习之路</p>
			</div>
		</div>
	</div>


</div>
<div class="contract">
	<div class="logo1">
		<img src="img/ctc.jpg" />
	</div>
	<div class="conbox">
		<ul>
			<li>本栏目同时诚邀广大市民踊跃参与，把你身边不同的夜十堰用镜头记录下来与大家分享</li>
			<li>1.投稿邮箱：qc10yan@163.com</li>
			<li>2.投稿要求：一组图片反映一个主题（或一类人群），每组图片不少于8张，主题积极向上，图片清晰，投稿注明"夜十堰"栏目。一经采用，即付稿酬</li>
			<li>3.联系电话：8208110</li>
		</ul>
	</div>
	<div class="conbox conbg">
		<img src="img/liantu200.png" width="160px" height="160px" style="margin: 15px;" class="fl"/>
		<li class="pt20"><h1>十堰新闻客户端</h1></li>
		<p class="lh mt20">"十堰新闻"手机客户端是十堰本地最权威、最及时、最特色、最贴心的移动新媒体，目前安装用户超过3万户。"十堰新闻"客户端除滚动发布新闻报道外，还设有手机论坛、百姓问政、周末游、试吃团、看电影、惠生活等多个栏目。</p>
	</div>
</div>
<div class="bottom">
	<div class="bottom-nav">
		<img src="img/nav2.jpg" />
	</div>
	<div class="bottom-con mt10">
		<div class="bottom-box">
			<img src="img/bottom1.jpg" class="pt10" width="235px" height="84px"/>
		</div>
		<div class="bottom-box">
			<img src="img/bottom1.jpg" class="pt10" width="235px" height="84px"/>
		</div>
		<div class="bottom-box">
			<img src="img/bottom1.jpg" class="pt10" width="235px" height="84px"/>
		</div>
		<div class="bottom-box">
			<img src="img/bottom1.jpg" class="pt10" width="235px" height="84px"/>
		</div>
	</div>
</div>
<div class="footer">
	<ul>
		<li><a href="http://www.10yan.com/pages/wzjs.html" target="_blank">关于我们</a> - <a href="http://www.10yan.com/pages/wztd.html" target="_blank">网站团队</a> - <a href="http://www.10yan.com/pages/ggyw.html" target="_blank">广告业务</a> - <a href="http://www.10yan.com/pages/wzdt.html" target="_blank">网站地图</a> - <a href="http://tg.10yan.com/" target="_blank">在线投稿</a> - <a href="http://www.10yan.com/pages/hzhb.html" target="_blank">合作伙伴</a> - <a href="http://movie.10yan.com/wsbl2/fabu.asp" target="_blank">客户投诉</a> - <a href="http://www.10yan.com/rss/rssmap.html" target="_blank" title="rss订阅">RSS订阅</a></li>
		<li>秦楚网(10yan.com) 版权所有 未经同意不得复制或镜像</li>
		<li>主管：中共十堰市委宣传部　主办：十堰日报传媒集团　出品：秦楚网</li>
		<li>编辑部：0719-8118833   广告业务：0719—8113299   技术部：0719-8208110   传真：0719-8118988</li>
		<li><img src="http://zt.10yan.com/statics/images/foot.gif"></li>
	</ul>
</div>


<script type="text/javascript">
$(".box-con .box-pic").hover(function(){
	$(this).find(".txt").stop().animate({height:"155px"},400);
	$(this).find(".txt h3").stop().animate({paddingTop:"60px"},400);
},function(){
	$(this).find(".txt").stop().animate({height:"45px"},400);
	$(this).find(".txt h3").stop().animate({paddingTop:"0px"},400);
})


</script>
	</body>
</html>