<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.whole { border:0px solid #333; width: 1002px; height: 950px; margin: 0 auto;}
.head { border: 1px solid #b979e9; width: 1000px;height: 35px; background-color:#b979e9; border-radius:5px 5px 0 0; }
.head_ul li{ list-style: none; float: left; margin-right:35px;margin-top: -17px; padding-left:10px; width:65px; height:36px;font-size: 14px; font-weight: bold;
background-color: #b979e9;text-align: center;}
.head_ul li a {
text-decoration: none; color: #fff; line-height: 5px; line-height:40px;}
.out ul li { list-style: none;}/*display: none ;margin-left:-40px;*/
.out { width:1000px;
height:200px; border: 1px solid sandybrown;
position: relative;}
.tu li {position: absolute;top: 0;left: 0;display: none ;}
.shu { position: absolute;bottom:0px;left:400px; text-align: center;}/*font-size: 0;width: 100%;*/
.shu li { height: 15px; width:15px;background-color:#333333 ;color:#ededed;font-size: 12px;border-radius: 50%;display: inline-block;margin: 0 5px;cursor: pointer;}
.shu li:hover { background-color:#a60000; }
.out .btn { width: 30px; height: 60px; background:rgba(0,0,0,0.3); color: #FFFFFF; font-size: 14px;
text-align: center; line-height: 60px; position: absolute;top: 50%; margin-top: -30px;
cursor: pointer;
}
.out .left{ left: 0;}
.out .right{right: 0;}
.top-dl { margin-top: -15px;}
.top-dl dl {
float: left; width: 111px; position: relative;
}
.top-dl dt { background: url("images/037.jpg"); background-repeat: no-repeat;
height: 26px;padding-top:8px;text-align: center ;;font-size: 14px;font-weight: bold;}
.top-dl dt a,.top-dl dt a:hover { text-decoration: none;
color: #000; font-size: 14px; font-weight: 900;}
.top-dl dd {background: url("images/background/0019a.jpg") repeat-y; width:111px; margin-left:-10px;
display:none;
position:absolute;
z-index:1;
left:10px;
top:33px;
text-align: center;;
}
/*悬浮显示*/
.top-dl
dl:hover dd{
display:block;
}
.top-dl
dd a{
font-size:12px;
color: #333333;
line-height:25px;
display:block;
text-decoration: none;
}
.top-dl
dd a:hover{ color: #7f0107;}
.menu { background-color: #d6ffff; border: 1px solid #1cb7f9; width: 1000px; height: 650px;}
.topBox ul li { list-style: none;}
.bottomBox ul { padding-left:0px;}
.bottomBox ul li { height:20px; width:40px; list-style: none;
border: 1px solid #fff;
float: left;margin-top:-15px;}
.bottomBox ul li.cur { border:1px solid #900;}
.bottomBox { text-decoration: none;border: 1px solid #FFFFFF; height: 22px ;width: 210px;overflow:hidden;margin-top: 210px; }
.topBox img { border: 1px solid #FFFFFF;cursor:pointer;}
.topBox img:hover { border: 1px solid #7f0107;}
#forcus {position: relative; border: 1px solid #d6ffff; width: 210px; height: 235px; margin-top:25px; float: right;}
#forcus dl { bottom: 1px; left: 0; height:60px;
width: 210px;font-size: 12px; background-color: #999999;
opacity: 0.7; filter:alpha(opacity=70); color: #fff; line-height: 20px text-inden: 10px; display:none; position:absolute;z-index:1; top: 140px;left: 0px;}
#forcus dl.on { display: block;}
.hot h3 {
display:inline-block;
margin-top: -10px;}
.hot a { float: right; text-decoration: none;}
.hua ul {list-style: none; padding-left:0px; margin-top:-15px;}
.hua li a{text-decoration: none;font-size: 14px; line-height:28px; }
.hua li a:hover{ color: #f58fd1;}
.foot{
width:1000px; height:50px;
background-color:#bef9fd;
color:#999; text-align: center; font-size: 12px; margin-top: -8px;
border: 1px solid #1cb7f9 ;
}
.foot p{ line-height: 20px;}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$(".head_ul li").hover( function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","#b979e9");
});
});
$(function(){
$(".tu li").first().show();
$(".shu li").first().addClass("hover");
//手动控制
$(".shu li").mouseout(function(){
$(this).addClass("hover").siblings("li").removeClass("hover");
var index=$(this).index();
i=index
$(".tu li").eq(index).fadeIn().siblings().fadeOut();
})
//时间间隔自动
var i=0;
var t =setInterval(move,2000)
//运动函数
function move(){
i++
if(i==4){
i=0;
}
$(".shu li").eq(i).addClass("hover").siblings().removeClass("hover");
$(".tu li").eq(i).fadeIn().siblings().fadeOut();//与手动相同.
}
function moveL(){
i--
if(i==-1){
i=3;
}
$(".shu li").eq(i).addClass("active").siblings().removeClass("active");
$(".tu li").eq(i).fadeIn().siblings().fadeOut();//同手动
}
//鼠标悬浮停止运动
$(".out").hover(function(){
clearInterval(t);
},function(){
t=setInterval(move,2000);
})
// 点击左边箭头执行的动画
$(".out .left").click(function(){
moveL();
})
//点击右边箭头执行的动画
$(".out .right").click(function(){
move();
})
})
$(function(){
$(".topBox ul li").first().show();
$(".bottomBox ul li").first().addClass("cur");
var movement =
setInterval(moves,2000);
var index =0;
var maxindex = $(".bottomBox ul li").length;
function moves(){
$(".bottomBox ul li").removeClass("cur").eq(index).addClass("cur");
dosome(index);
index++;
if(index>maxindex-1)index=0;
}
$(".bottomBox ul li").hover(function(){
var index = $(this).index();
$(this).addClass("cur");
dosome(index);
},function(){
$(".bottomBox ul li").removeClass("cur","hover");
//$(this).addClass("cur");
});
$("#forcus").hover(function(){
clearInterval(movement);
},function(){
movement = setInterval(moves,3000);
});
function dosome(index){
$(".topBox li").fadeOut(500).eq(index).fadeIn(500);
$("#forcus dl").slideUp(500).eq(index).slideDown(500);
}
})
</script>
</head>
<body>
<div class="whole">
<div class="head">
<ul class="head_ul">
<li><a href="Login.html">首页</a></li>
<li><a href="#">艺术简介</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">经典作品</a></li>
<li><a href="Xiangce.html">动感相册</a></li>
<li><a href="#">服务指南</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="out">
<ul class="tu">
<li><img src="images/one.jpg"></li>
<li><img src="images/two.jpg"></li>
<li><img src="images/stree.jpg"></li>
<li><img src="images/four.jpg"></li>
</ul>
<ul class="shu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="btn left"><</div>
<div class="btn right">></div>
</div>
<div class="menu">
<div class="top-dl">
<dl>
<dt><a href="#">中心信息</a></dt>
<dd><a href="#">中心介绍</a>
<a href="#" >荣誉奖项</a>
<a href="#" >中心环境</a>
<a href="#" >中心地址</a>
<a href="#" >联系我们</a> </dd>
</dl>
<dl>
<dt><a href="#">新闻动态</a></dt>
<dd><a href="#">行业新闻</a>
<a href="#" >中心新闻</a> </dd>
</dl>
<dl>
<dt><a href="#">课程介绍</a></dt>
</dl>
<dl>
<dt><a href="#">师资力量</a></dt>
<dd><a href="#">招生办公室</a>
<a href="#" >教质部</a>
<a href="#" >学术部</a>
<a href="#" >就业部</a> </dd>
</dl>
<dl>
<dt><a href="#">就业展示</a></dt>
<dd><a href="#">就业学员</a>
<a href="#" >签约名企</a>
<a href="#" >就业感言</a>
<a href="#" >就业活动</a>
<a href="#" >就业部工作</a> </dd>
</dl>
<dl>
<dt><a href="#">学术教学</a></dt>
<dd><a href="#">教学教法</a>
<a href="#" >学习心得</a>
<a href="#" >视频分享</a>
<a href="#" >技术文档</a> </dd>
</dl>
<dl>
<dt><a href="#">学员天地</a></dt>
<dd><a href="#">学员活动</a>
<a href="#" >学社工作</a>
<a href="#" >项目展示</a> </dd>
</dl>
<dl>
<dt><a href="#">招生信息</a></dt>
<dd><a href="#">开班信息</a>
<a href="#" >体验课信息</a>
<a href="#" >讲座信息</a>
<a href="#" >招生问答</a> </dd>
</dl>
<dl>
<dt><a href="#">咨询报名</a></dt>
</dl>
</div>
<div id="forcus">
<div class="topBox">
<ul class="tu">
<li ><a href="#"><img src="./images/017.jpg"width="208" height="210"
alt=""></a></li>
<li><a href="#"><img src="./images/018.jpg"width="208" height="210"
alt=""></a></li>
<li><a href="#"><img src="./images/019.jpg"width="208" height="210"
alt=""></a></li>
<li><a href="#"><img src="./images/020.jpg"width="208" height="210" alt=""></a></li>
<li><a href="#"><img src="images/021.jpg"width="208" height="210" alt=""></a></li>
</ul>
</div>
<div class="">
</div>
<div class="bottomBox">
<ul>
<li class="cur"><img src="images/017.jpg"width="40" height="20"
alt=""></li>
<li class=""><img src="images/018.jpg" width="40" height="20" alt=""></li>
<li class=""><img src="images/019.jpg"width="40" height="20" alt=""></li>
<li class=""><img src="images/020.jpg"width="40" height="20" alt=""></li>
<li class=""><img src="images/021.jpg"width="40" height="20" alt=""></li>
</ul>
<dl class='on'>
<dt> <a href="#">Merry Christmas! 1乐</a></dt>
<dd>大家圣诞快乐啊<br/>，平安夜祝福你</dd>
</dl>
<dl >
<dt> <a href="#">Merry Christmas!!圣诞快乐 圣诞2乐</a></dt>
<dd>平安夜收到心仪的礼物，<br/>1平安幸福！！</dd>
</dl>
<dl >
<dt> <a href="#">Merry Christmas!!Merry Christmas!!1</a></dt>
<dd>大家圣诞快乐啊<br/>，平安夜祝福你</dd>
</dl>
<dl >
<dt> <a href="#">Merry Christmas!!Merry Christmas!!Merry Christmas!!</a></dt>
<dd>平安夜收到心仪的礼物，<br/>1平安幸福！！</dd>
</dl>
<dl >
<dt> <a href="#">Merry Christmas!!Merry Christmas!!Merry Christmas!!</a></dt>
<dd>平安夜收到心仪的礼物，<br/>1平安幸福！！</dd>
</dl>
</div>
<hr/>
<div class="hot">
<h3>热门资源推荐</h3>
<a href="#">换一换</a>
</div>
<div class="hua">
<ul>
<li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">年终报告如何写，千份模板</a></li>
<li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">雾霾天生存指南 快保存 手慢无</a></li>
<li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">一套价值8800元的高考教程</a></li>
<li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">年终报告如何写，人你说</a></li>
<li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">雾霾天生存指南 快保存 手慢无</a></li>
<li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">一套价值8800元的高考教程</a></li>
<li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">哈哈哈哈哈哈哈哈哈哈</a></li>
<li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">雾霾天生存指南 快保存 手慢无</a></li>
<li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">一套价值8800元的高考教程</a></li>
<li><img src=" images/small/hua.jpg" width="10px"; height="10px";><a href="#">哈哈哈哈哈哈哈哈哈哈</a></li>
</ul>
</div>
</div><!--漂浮需移动-->
</div><!--背景颜色-->
<div class="foot">
<!--
.foot{
width:1000px; height:50px;
background-color:#befdf8;
color:#999;
}
--> <p>婚纱摄影公司网站CopyLight(c)2016-05-06</p>
</div>
</div><!--整体-->
</body>
</html>
2016-04-29 14:31
