HTML5前端开发实战08-外语培训

最新推荐文章于 2021-06-20 23:23:24 发布

谷哥的小弟

最新推荐文章于 2021-06-20 23:23:24 发布

阅读量1.9k

点赞数 8

分类专栏： HTML5前端开发实战文章标签： HTML CSS JavaScript 源码

本文链接：https://blog.csdn.net/lfdfhl/article/details/100124808

版权

HTML5前端开发实战专栏收录该内容

8 篇文章 86 订阅

订阅专栏

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

页面效果

在这里插入图片描述

页面源码

HMTL源码

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>外语培训</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/english.js"></script>
	</head>
	<body>
		<!--head-->
		<div class="head">
			<div class="left"><img src="img/logo.jpg" /></div>
			<div class="right"><img src="img/phone.jpg" /></div>
		</div>
		<!--nav-->
		<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>
		<!--banner-->
		<div class="banner">
			<ul class="banner_pic" id="banner_pic">
				<li class="current"><img class="one" src="img/01.jpg" /></li>
				<li class="pic"><img class="one" src="img/02.jpg" /></li>
				<li class="pic"><img class="one" src="img/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="img/1.jpg" /></a>
					<a href="#"><img src="img/2.jpg" /></a>
					<a href="#"><img src="img/3.jpg" /></a>
					<a href="#"><img src="img/4.jpg" /></a>
				</span>
			</div>
		</div>
		<!--英语课程特色-->
		<div id="features">
			<h2>英语课程特色</h2>
			<div class="list0">
				<div id="SwitchBigPic">
					<span class="sp"><a href="#"><img src="img/111.jpg" /></a></span>
					<span><a href="#"><img src="img/222.jpg" /></a></span>
					<span><a href="#"><img src="img/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>
			</div>
		</div>
		<!--footer-->
		<div class="footer">外语培训网版权所有2018-2028&nbsp;&nbsp;京ICP备08001421号&nbsp;&nbsp;京公网安备110108007702</div>
	</body>
</html>

CSS源码

* {
	margin: 0;
	padding: 0;
	list-style: none;
	outline: none;
	border: 0;
	background: none;
}

body {
	font-size: 14px;
	font-family: "微软雅黑";
}

a:link,
a:visited {
	color: #fff;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

/*head*/
.head {
	width: 980px;
	margin: 0 auto;
	height: 50px;
	padding-top: 30px
}

.head .left {
	float: left;
}

.head .right {
	float: right;
}

/*nav*/
#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*/
.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(../img/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;
}

/* Table切换 */
.list0 {
	width: 638px;
	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(../img/txt_111_1.jpg) no-repeat;
}

#SwitchNav .txt_img2 {
	background: url(../img/txt_222_2.jpg) no-repeat;
}

#SwitchNav .txt_img3 {
	background: url(../img/txt_333_3.jpg) no-repeat;
}

#SwitchNav .txt_img1:hover {
	background: url(../img/txt_111.jpg) no-repeat;
}

#SwitchNav .txt_img2:hover {
	background: url(../img/txt_222.jpg) no-repeat;
}

#SwitchNav .txt_img3:hover {
	background: url(../img/txt_333.jpg) no-repeat;
}

/*免费课程*/
.list1 {
	width: 326px;
	height: 375px;
	float: right;
	margin-top: 25px;
}

.list1 h3 {
	width: 326px;
	height: 74px;
	background: url(../img/zhuce.jpg) no-repeat;
}

.list1 .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(../img/btn.jpg) right top no-repeat;
	margin-top: 30px;
	cursor: pointer;
}

/*footer*/
.footer {
	width: 100%;
	height: 60px;
	line-height: 60px;
	text-align: center;
	background: #0373b9;
	color: #FFF;
}

JavaScript源码

//焦点图轮播
window.οnlοad=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].οnmοuseοver=function(){
				if(timer){
					clearInterval(timer);
				}
				for(var j=0;j<pic_li.length;j++){
					if(button_li[j]==this){
						current_index=j;
						button_li[j].className="current";
						pic_li[j].className="current";
					}else{
						pic_li[j].className="pic";
						button_li[j].className="but";
					}
				}
			}
			button_li[i].οnmοuseοut=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;
		//获取<div id="imgbox">元素
		var imgbox = document.getElementById("imgbox");
		//复制一个<span>，用于无缝滚动
		imgbox.innerHTML += imgbox.innerHTML;
		//获取两个<span>元素
		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(){
			//当第1个<span>被完全卷出时
			if(imgbox.scrollLeft > span[0].offsetWidth){
				//将被卷起的内容归0
				imgbox.scrollLeft = 0;
			}else{
				//否则向左滚动
				++imgbox.scrollLeft;
			}
		}
	}
	school();
	
	
	function tableChange(){
		//Table栏
		//获得#SwitchNav中所有的<li>元素
		var lis = document.getElementById("SwitchNav").getElementsByTagName("li");
		//获得#SwitchBigPic中所有的<a>元素
		var spans=document.getElementById("SwitchBigPic").getElementsByTagName("span");
		//保存当前焦点元素的索引
		var current_index=0;
		//启动定时器
		var timer = setInterval(autoChange,3000);
		//遍历lis，为各<li>元素添加事件
		for(var i=0;i<lis.length;i++){
			//<li>的鼠标移入事件
			lis[i].onmouseover = function(){
				//定时器存在时清除定时器
				if(timer){
					clearInterval(timer);
				}
				//遍历lis
				for(var i=0;i<lis.length;i++){
					//设置当前焦点元素的样式
					if(lis[i]==this){
						spans[i].className = "sp";					
						//保存当前索引，当恢复自动切换时继续切换
						current_index = i;
					//设置非当前焦点元素的样式
					}else{
						spans[i].className = "";	
					}
				}
			}
			//<li>的鼠标移出事件
			lis[i].onmouseout = function(){
				//启动定时器，恢复图片自动切换
				timer = setInterval(autoChange,3000);
			}
		}
		//定时器周期函数-图片自动切换
		function autoChange(){
			//自增索引
			++current_index;
			//当索引自增达到上限时，索引归0
			if (current_index == lis.length) {
				current_index=0;
			}
			//遍历lis，将所有元素取消焦点样式
			for (var i=0; i<lis.length; i++) {
				spans[i].className = "";	
			}
			//为当前索引元素添加焦点样式
			spans[current_index].className = "sp";
		}	
	}
	tableChange();
}