web网页期末作业-在线教育 html+css+javascript6个页面
部分网页截图
部分网页源码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<!--top-->
<div class="top" id="top">
<div class="wrap clearfloat">
<div class="logo"><a href="index.html"><img src="images/logo.png"/></a></div>
<div class="nav">
<ul class="clearfloat">
<li class="active">
<h2><a href="index.html">首页</a></h2>
</li>
<li>
<h2><a href="news_detail.html">新闻动态</a><span class="navBtn"></span></h2>
</li>
<li>
<h2><a href="about.html">关于我们</a><span class="navBtn"></span></h2>
</li>
<li>
<h2><a href="join.html">加入我们</a><span class="navBtn"></span></h2>
</li>
<li>
<h2><a href="login.html">登录</a><span class="navBtn"></span></h2>
</li>
<li>
<h2><a href="regrdit.html">注册</a><span class="navBtn"></span></h2>
</li>
</ul>
</div>
</div>
<div class="muen">
<span class="muenX"></span>
<span class="muenY"></span>
<span class="muenZ"></span>
</div>
</div>
<!--top-->
<!--banner-->
<div class="banner" id="banner">
<ul class="sliderBanner">
<li>
<a href=""><img src="images/banner_img.jpg"/></a>
</li>
<li>
<a href=""><img src="images/banner_img.jpg"/></a>
</li>
<li>
<a href=""><img src="images/banner_img.jpg"/></a>
</li>
</ul>
</div>
<!--/banner-->
<div class="homeBox homeIdear">
<div class="wrap">
<div class="homeTitle">
<h2>办学理念</h2>
<h3><span>The idea of running a school</span></h3>
<div class="line"></div>
</div>
<div class="homeIdearWrap">
<ul class="slideHomeIdear clearfloat">
<li>
<h3>1某某教育?</h3>
<div class="line"></div>
<div class="pic"><img src="images/home_idear_img1.jpg"/></div>
<p>
从住宅配套到城市配套,从房子需求到客户需求,广州某某黑户需求,广州某某黑户需求,广州某某黑利伯瑞书院将是亲自然的学习乐园,而不是传统的学校注重更大面积的通风、采光……
</p>
<a href="">+</a>
</li>
<li>
<h3>2某某教育?</h3>
<div class="line"></div>
<div class="pic"><img src="images/home_idear_img2.jpg"/></div>
<p>
从住宅配套到城市配套,从房子需求到客户需求,广州某某黑户需求,广州某某黑户需求,广州某某黑利伯瑞书院将是亲自然的学习乐园,而不是传统的学校注重更大面积的通风、采光……
</p>
<a href="">+</a>
</li>
<li>
<h3>3某某教育?</h3>
<div class="line"></div>
<div class="pic"><img src="images/home_idear_img3.jpg"/></div>
<p>
从住宅配套到城市配套,从房子需求到客户需求,广州某某黑户需求,广州某某黑户需求,广州某某黑利伯瑞书院将是亲自然的学习乐园,而不是传统的学校注重更大面积的通风、采光……
</p>
<a href="">+</a>
</li>
</ul>
</div>
</div>
</div>
<div class="homeBox homeCour">
<div class="wrap">
<div class="homeTitle">
<h2>课程介绍</h2>
<h3><span>Course introduction</span></h3>
<div class="line"></div>
</div>
<div class="homeCourWrap">
<ul class="homeCourList clearfloat">
<li><a href="">
<div class="homeCourInner">
<div class="pic"><img src="images/home_cour_img1.png"/></div>
<h3>雪地课程</h3>
<h4>SNOW COURSE</h4>
</div>
<div class="homeCourTxt">
<h3>雪地课程</h3>
<h4>SNOW COURSE</h4>
<p>
主营帆船培训和航海夏、冬令营,
致力于青少年帆船运动的推广和航海
文化的传播。是中国大陆唯一获得英国皇家
游艇协会RYA认证的中心,并使用其
证教练团队。
</p>
</div>
</a></li>
<li><a href="">
<div class="homeCourInner">
<div class="pic"><img src="images/home_cour_img2.png"/></div>
<h3>海洋课程</h3>
<h4>MARINE CURRICULUM</h4>
</div>
<div class="homeCourTxt">
<h3>海洋课程</h3>
<h4>MARINE CURRICULUM</h4>
<p>
主营帆船培训和航海夏、冬令营,
致力于青少年帆船运动的推广和航海
文化的传播。是中国大陆唯一获得英国皇家
游艇协会RYA认证的中心,并使用其
证教练团队。
</p>
</div>
</a></li>
<li><a href="">
<div class="homeCourInner">
<div class="pic"><img src="images/home_cour_img3.png"/></div>
<h3>语言课程</h3>
<h4>LANGUAGE COURSE</h4>
</div>
<div class="homeCourTxt">
<h3>语言课程</h3>
<h4>LANGUAGE COURSE</h4>
<p>
主营帆船培训和航海夏、冬令营,
致力于青少年帆船运动的推广和航海
文化的传播。是中国大陆唯一获得英国皇家
游艇协会RYA认证的中心,并使用其
证教练团队。
</p>
</div>
</a></li>
<li><a href="">
<div class="homeCourInner">
<div class="pic"><img src="images/home_cour_img4.png"/></div>
<h3>综合课程</h3>
<h4>INTERATED COURSE</h4>
</div>
<div class="homeCourTxt">
<h3>综合课程</h3>
<h4>INTERATED COURSE</h4>
<p>
主营帆船培训和航海夏、冬令营,
致力于青少年帆船运动的推广和航海
文化的传播。是中国大陆唯一获得英国皇家
游艇协会RYA认证的中心,并使用其
证教练团队。
</p>
</div>
</a></li>
</ul>
</div>
</div>
</div>
<div class="homeBox homeJoin">
<div class="wrap">
<div class="homeTitle">
<h2>加入我们</h2>
<h3><span>Join us</span></h3>
<div class="line"></div>
</div>
<div class="homeJoinWrap">
<ul class="homeJoinList clearfloat">
<li>
<div class="pic"><img src="images/home_join_img1.jpg"/></div>
<a href="" class="homeJoinBg">
<div class="homeJoinBgInner">
<h3>招生专区</h3>
<h4>ENROLMENT AREA<span></span></h4>
</div>
</a>
</li>
<li>
<div class="pic"><img src="images/home_join_img2.jpg"/></div>
<a href="" class="homeJoinBg">
<div class="homeJoinBgInner">
<h3>招聘专区</h3>
<h4>RECRUITMENT AREA<span></span></h4>
</div>
</a>
</li>
</ul>
</div>
<div class="homeTitle">
<h2>校园动态</h2>
<h3><span>Campus dynamics</span></h3>
<div class="line"></div>
</div>
<div class="homeCamWrap">
<ul class="homeCamList clearfloat">
<li>
<div class="pic"><a href=""><img src="images/home_cum_img1.jpg"/></a></div>
<div class="homeCamCont">
<h3 class="single-line"><a href="">会员收费活动 | 英语思维之桌游系列</a></h3>
<h4>2018-07-10</h4>
<div class="line"></div>
<p class="multi-line">
我们为您准备了 30-500 人的各类活动专用场地,并配备了音箱、投影、桌椅、茶歇等增值服务。我们撤掉…
</p>
<a class="more" href="">MORE+</a>
</div>
</li>
<li>
<div class="pic"><a href=""><img src="images/home_cum_img2.jpg"/></a></div>
<div class="homeCamCont">
<h3 class="single-line"><a href="">会员收费活动 | 英语思维之桌游系列</a></h3>
<h4>2018-07-10</h4>
<div class="line"></div>
<p class="multi-line">
我们为您准备了 30-500 人的各类活动专用场地,并配备了音箱、投影、桌椅、茶歇等增值服务。我们撤掉…
</p>
<a class="more" href="">MORE+</a>
</div>
</li>
<li>
<div class="pic"><a href=""><img src="images/home_cum_img3.jpg"/></a></div>
<div class="homeCamCont">
<h3 class="single-line"><a href="">会员收费活动 | 英语思维之桌游系列</a></h3>
<h4>2018-07-10</h4>
<div class="line"></div>
<p class="multi-line">
我们为您准备了 30-500 人的各类活动专用场地,并配备了音箱、投影、桌椅、茶歇等增值动专用场地,并配备了音箱、投影、桌椅、茶歇等增值服务。我们撤掉…
</p>
<a class="more" href="">MORE+</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="homeLink">
<div class="wrap">
<div class="homeTitle">
<h2>友情链接</h2>
<h3><span>Friendship link</span></h3>
<div class="line"></div>
</div>
<div class="homeLinkWrap">
<a href="">万科Vanke</a><a href="">万有引力潜水</a> <a href="">万科Vanke</a><a href="">万有引力潜水</a><a href="">万科Vanke</a><a href="">万科Vanke</a><a href="">万科Vanke</a><a href="">万有引力潜水</a><a href="">宅宅网</a><a href="">万有引力潜水</a><a href="">万有引力潜水</a><a href="">在线动画</a><a href="">未来影院</a> <a href="">里番动漫</a> <a href="">没有广告</a> <a href="">吉吉影音</a><a href="">影视大全</a><a href="">万有引力潜水</a>
</div>
</div>
</div>
<div id="footer" class="homeFooter">
<div class="wrap clearfloat">
<div class="footerLeft">
<div class="footerlogo"><img src="images/logo_footer.png"/></div>
<div class="footerEwm">
<img src="images/ewm.png"/>
<p>扫一扫<br />关注微信号</p>
</div>
</div>
<div class="footerRight">
<ul class="clearfloat">
<li>
<h3>关于我们</h3>
<p><a href="">课程特色</a></p>
<p><a href="">寄宿</a></p>
<p><a href="">服务</a></p>
<p><a href="">某某教育</a></p>
</li>
<li>
<h3>学校新闻</h3>
<p><a href="">课程特色</a></p>
<p><a href="">寄宿</a></p>
<p><a href="">服务</a></p>
</li>
<li>
<h3>课程设置</h3>
<p><a href="">课程特色</a></p>
<p><a href="">寄宿</a></p>
<p><a href="">服务</a></p>
<p><a href="">某某教育</a></p>
</li>
<li>
<h3>我们的团队</h3>
<p><a href="">课程特色</a></p>
<p><a href="">寄宿</a></p>
<p><a href="">服务</a></p>
<p><a href="">某某教育</a></p>
</li>
<li>
<h3>招生信息</h3>
<p><a href="">课程特色</a></p>
<p><a href="">寄宿</a></p>
<p><a href="">服务</a></p>
<p><a href="">某某教育</a></p>
</li>
<li>
<h3>联系我们</h3>
<p><a href="">课程特色</a></p>
<p><a href="">寄宿</a></p>
<p><a href="">服务</a></p>
<p><a href="">友情链接</a></p>
</li>
</ul>
<div class="footerInfor clearfloat">
<div class="footerInforL">
<p>地址: 广东省深圳市南山区广东省深圳市南山区留仙3-1</p>
<p>邮箱:msedu@某某</p>
</div>
<div class="footerInforR">
<p><span>邮编:510630</span> <span>电话:0755-00000000</span></p>
<p>工作时间:周一至周五 9:00-12:00;14:00-17:30</p>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<div class="wrap">
<p>Copyright© 2016-2020 Meisha Technology. All Rights Reserved.</p>
</div>
</div>
</body>
<script type="text/javascript">
$('.sliderBanner').bxSlider({
'auto':true,
'controls':true,
'touchEnabled':true,
'pager':true,
'speed':1000,
'pause':4000,
'pagerType': 'full',
})
</script>
</html>