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

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义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">不论你学习英语是为了满足日常沟通的需要，还是为了工作和职业的发展，不论你现在的英语水平处在那个阶段，想要前往那 个阶段，我们的英语都能帮你达成目标。来自于美国硅谷“DynEdInternational”历经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){//将被卷起的内容归0imgbox.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);}//遍历lisfor(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;//当索引自增达到上限时，索引归0if (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();
}

HTML5前端开发实战08-外语培训相关推荐

HTML5前端开发实战02-旅游网页面设计
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
HTML5前端开发实战06-幸福表单
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
什么是HTML5前端开发？HTML5前端要学哪些技术？
什么是HTML5前端开发?HTML5前端要学哪些技术? 什么是HTML5前端开发?前端开发一般指网页开发,前端开发是从网页制作上演变过来的,网页上软件化的交互形式都是基于前段技术实现的.程序员指从事程 ...
HTML5游戏开发实战
<HTML5游戏开发实战> 基本信息原书名:HTML5 Games Development by Example: Beginner's Guide 作者: (美)Makzan 译者: ...
HTML5前端开发学习路线建议，学习前端的必备知识点
Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师.主要进行网站开发,优化,完善的工作.网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览 ...
html5前端开发培训机构，JavaScript变量声明提升
学习路线第一阶段:网页制作 HTML:常用标签,锚点,列表标签,表单标签,表格标签,标签分类,标签语义化,注释,字符实体 CSS:CSS介绍,全局样式,行内样式,内联样式,选择器,字体样式值,文本样 ...
转发：11个web前端开发实战项目案例+源码！拿走就是了
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43793782/arti ...
转行HTML5前端开发，该怎么学才能最快入门
首先无论你要学习任何技能,必须有一个清晰的版图,什么是清晰的版图呢?首先了解你学的技术将来要从事什么工作,这个工作的条件是哪些? 然后你要有一个非常清晰的学习大纲,切记学习任何东西都要系统,不可胡乱的 ...
HTML5前端开发就业前景，高薪背后的原因分析！
国家统计局披露数据显示,2019年全国城镇非私营单位(以下简称"非私营单位")就业人员年平均工资为90501元,城镇私营单位(以下简称"私营单位")就业人员年平 ...

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

版权声明

页面效果

页面源码

HMTL源码

CSS源码

JavaScript源码

HTML5前端开发实战08-外语培训相关推荐

最新文章

热门文章