<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtnl-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset = utf-8"/>
<title>学好英语网</title>
<link rel="stylesheet" href="css/style08.css" type="text/css"/>
<script type="text/javascript" src="js/js08.js"></script>
</head>
<body>
<div class="head">
<div class="left"><img src="images/logo.jpg"/></div>
<div class="right"><img src="images/phone.jpg"/></div>
</div>
<div id="nav">
<ul class="nav">
<li><a href="#" class="color_in">首页</a></li>
<li><a href="#" >机构</a></li>
<li><a href="#" >少儿英语</a></li>
<li><a href="#" >成人英语</a></li>
<li><a href="#" >托福雅思</a></li>
<li><a href="#" >英语四级</a></li>
<li><a href="#" >英语六级</a></li>
</ul>
</div>
<div class="banner">
<ul class="banner_pic" id="banner_pic">
<li class="current"><img class="one" src="images/01.jpg"/></li>
<li class="pic"><img class="one" src="images/02.jpg"/></li>
<li class="pic"><img class="one" src="images/03.jpg"/></li>
</ul>
<ol id="button">
<li class="current"></li>
<li class="but"></li>
<li class="but"></li>
</ol>
</div>
<div id="learn">
<h2>学好英语网简介</h2>
<dl>
<dt></dt>
<dd class="txt1">你知道学好英语网的好处吗？</dd>
<dd class="txt2">不论你学习英语是为了满足日常沟通的需要，还是为了工作和职业的发展，不论你现在的英语水平处在哪个阶段，
想要往哪个阶段，我们的英语都能够帮你达成目标。来自于美国硅谷“DynEd International”历经16年在全球80多个国家的成功实践，
听说读写全面覆盖的教学内容，使用而有趣的教材设计针对不同阶段的学员水平，从入门到精通的9个级别的英语晋升阶梯，让你的
学习成为轻松，快乐的旅程！高雅，舒适的教学环境，为您提供一个高端人士社交的平台，专业的个人课程顾问和双语指导老师将
对您的学习效果提供保障。学好英语网已成为中国英语教育史上新的里程碑！</dd>
</dl>
<div class="imgbox" id="imgbox">
<span>
<a href="#"><img src="images/1.jpg"/></a>
<a href="#"><img src="images/2.jpg"/></a>
<a href="#"><img src="images/3.jpg"/></a>
<a href="#"><img src="images/4.jpg"/></a>
</span>
</div>
</div>
<div id="features">
<h2>英语课程特色</h2>
<div class="list0">
<div id="SwitchBigPic">
<span class="sp"><a href="#"><img src="images/111.jpg"/></a></span>
<span ><a href="#"><img src="images/222.jpg"/></a></span>
<span ><a href="#"><img src="images/333.jpg"/></a></span>
</div>
<ul id="SwitchNav">
<li><a class="txt_img1" href="#" ></a></li>
<li><a class="txt_img2" href="#" ></a></li>
<li><a class="txt_img3" href="#" ></a></li>
</ul>
</div>
<div class="list1">
<h3></h3>
<form action="#" method="post" class="biaodan">
<table class="content">
<tr>
<td class="left">姓名：</td>
<td ><input type="text" class="txt01"/></td>
</tr>
<tr>
<td class="left">手机：</td>
<td ><input type="text" class="txt01"/></td>
</tr>
<tr>
<td class="left">邮箱：</td>
<td ><input type="text" class="txt01"/></td>
</tr>
<tr>
<td class="left">中心：</td>
<td >
<select class="course">
<option>请选择学习中心</option>
<option>北京学习中心</option>
<option>上海学习中心</option>
<option>广州学习中心</option>
<option>深圳学习中心</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><input class="no-border" type="button"/></td>
</tr>
</table>
</form>
</form>
</div>
</div>
<div class="footer">
学好英语网版权所有2000-2016京ICP备08001421号 京公网安备110108007701
</div>
</body>
</html>
*{margin:0;padding:0;list-style:none;outline:none;border:0;background:none;}
body{font-family:"微软雅黑";font-size:14px;}
a:link,a:visited{text-decoration:none;color:#fff;}
a:hover{text-decoration:none;}
.head{width:980px;margin:0 auto;height:50px;padding-top:30px;}
.head .left{float:left;}
.head .right{float:right;}
#nav{width:100%;background:#0373b9;}
.nav{width:980px;height:35px;line-height:35px;margin:0 auto;text-align:center;font-size:14px;}
.nav li{float:left;}
.nav a{display:inline-block;padding:0 40px;}
.nav a:hover{background:#25abff;}
.nav .color_in{background:#25abff;}
.banner{width:100%;height:580px;position:relative;overflow:hidden;}
.one{position:absolute;left:50%;top:0;margin-left:-960px;}
.banner .banner_pic .pic{display:none;}
.banner .banner_pic .current{display:block;}
.banner ol{position:absolute;left:50%;top:90%;margin-left:-62px;}
.banner ol .but{float:left;width:28px;height:1px;border:1px solid #d6d6d6;margin-right:20px;}
.banner ol li{cursor:pointer;}
.banner ol .current{background:#90d1d5;float:left;width:28px;height:1px;border:1px solid #90d1d5;margin-right:20px;}
#learn{width:980px;margin:0 auto;}
h2{font-weight:100;font-size:24px;color:#585858;padding:40px 0;border-bottom:7px solid #ececec;}
#learn dl{width:980px;height:220px;}
#learn dt{width:145px;height:220px;background:url(../images/learn.jpg) center center no-repeat;float:left;}
#learn dd{width:780px;padding:20px 0 0 30px;float:left;}
#learn .txt1{font-size:24px;color:#ffa800;}
#learn .txt2{color:#6b6862;line-height:24px;}
.imgbox{width:940px;padding:0 20px;white-space:nowrap;overflow:hidden;}
.imgbox img{width:226px;height:129px;padding:2px;}
.imgbox a{margin-right:20px;}
#features{width:980px;height:565px;margin:0 auto;}
.list0{width:639px;margin-top:25px;float:left;position:relative;}
#SwitchBigPic{border:1px solid #ddd;}
#SwitchBigPic span{display:none;}
#SwitchBigPic img{width:448px;height:375px;}
#SwitchBigPic .sp{display:block;}
#SwitchNav{width:190px;position:absolute;top:0px;left:447px;}
#SwitchNav li{width:190px;height:125px;margin-bottom:1px;}
#SwitchNav a{display:block;width:190px;height:125px;background:url(../images/txt_111_1.jpg) no-repeat;}
#SwitchNav .txt_img2{background:url(../images/txt_222_2.jpg)no-repeat;}
#SwitchNav .txt_img3{background:url(../images/txt_333_3.jpg)no-repeat;}
#SwitchNav .txt_img1:hover{background:url(../images/txt_111.jpg)no-repeat;}
#SwitchNav .txt_img2:hover{background:url(../images/txt_222.jpg)no-repeat;}
#SwitchNav .txt_img3:hover{background:url(../images/txt_333.jpg)no-repeat;}
.list1{width:326px;height:375px;margin-top:25px;float:right;}
.list1 h3{width:326px;height:74px;background:url(../images/zhuce.jpg)no-repeat;}
.list .biaodan{width:326px;height:200px;}
.left{width:80px;text-align:right;font-size:18px;}
tr{height:50px;}
td{text-align:center;}
input{width:204px;height:28px;border:1px solid #d2d2d2;}
.course{width:204px;height:28px;border:1px solid #d2d2d2;padding:3px 0;}
.no-border{border:none;width:222px;height:53px;background:url(../images/btn.jpg)right top no-repeat;margin-top:30px;cursor:pointer;}
.footer{width:100%;height:60px;line-height:60px;text-align:center;background:#0373b9;color:#FFF;}
window.onload=function(){
//顶部的焦点图切换
function hotChange()
{
var current_index=0;
var timer=window.setInterval(autoChange,3000);
var button_li=document.getElementById("button").getElementsByTagName("li");
var pic_li=document.getElementById("banner_pic").getElementsByTagName("li");
for(var i=0;i<button_li.length;i++)
{
//鼠标移动到按钮上
button_li[i].onmouseover=function()
{
if(timer){clearInterval(timer);}//停止自动切换
for(var j=0;j<pic_li.length;j++)
{
if(button_li[j]==this)//如果鼠标移动到j按钮上，更改样式
{
current_index=j;
button_li[j].className="current";
pic_li[j].className="current";
}
else
{
button_li[j].className="but";
pic_li[j].className="pic";
}
}
}
//鼠标离开按钮
button_li[i].onmouseout=function()
{
timer=setInterval(autoChange,3000);//继续自动切换
}
}
function autoChange()
{
++current_index;
if(current_index==button_li.length){current_index=0;}
for(var i=0;i<button_li.length;i++)
{
if(i==current_index)
{
button_li[i].className="current";
pic_li[i].className="current";
}
else
{
button_li[i].className="but";
pic_li[i].className="pic";
}
}
}
}
hotChange();
function school()
{
var speed=50;
var imgbox=document.getElementById("imgbox");
imgbox.innerHTML+=imgbox.innerHTML;
var span=imgbox.getElementsByTagName("span");
var timer1=window.setInterval(marquee,speed);
imgbox.onmouseover=function(){clearInterval(timer1);}
imgbox.onmouseout=function(){timer1=setInterval(marquee,speed);};
function marquee()
{
if(imgbox.scrollLeft>span[0].offsetWidth)
{
imgbox.scrollLeft=0;
}
else
{
++imgbox.scrollLeft;
}
}
}
school();
function tableChange()
{
var lis=document.getElementById("SwitchNav").getElementsByTagName("li");
var spans=document.getElementById("SwitchBigPic").getElementsByTagName("span");
var current_index=0;
var timer=setInterval(autoChange,3000);
for(var i=0;i<lis.length;i++)
{
lis[i].onmouseover=function()
{
if(timer){clearInterval(timer);}
for(var i=0;i<lis.length;i++)
{
if(lis[i]==this)
{
spans[i].className="sp";
current_index=i;
}
else
{
spans[i].className="";
}
}
}
lis[i].onmouseout=function()
{timer=setInterval(autoChange,3000);}
}
function autoChange()
{
++current_index;
if(current_index==lis.length){current_index=0;}
for(var i=0;i<lis.length;i++)
{spans[i].className="";}
spans[current_index].className="sp";
}
}
tableChange();
}
1323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
