乐益达教育网页

最新推荐文章于 2024-01-02 09:41:13 发布
最新推荐文章于 2024-01-02 09:41:13 发布
阅读量1k 收藏 5
点赞数 6
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64005495/article/details/135025551
版权

目录

一、网页效果

二、html代码

三、CSS代码

四、JS代码

一、网页效果

二、html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript" src="/JS/JS.js"></script>
    <link rel="stylesheet" href="/Css/index02.css">
</head>
<body>
<!--head头部-->
<div id="head">
    <div class="top"> 
        <h1 class="logo"><img src="/images/logo.jpg" width="159" height="89" /></h1>   
        <div class="right">
            <a href="#"><span>设为首页</span></a>
        <a href="#"><span>加入收藏</span></a>
        </div>
    <ul class="nav">
            <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>
            <li><a href="#">联系我们</a></li>		 	      
        </ul>	  
    </div>
</div>
<!--head-->

<!--banner开头-->
<div id="banner">
    <ul class="banner_pic" id="banner_pic">
        <li class="current"><img src="/images/banner01.jpg" width="1007" height="379" /></li>
        <li class="pic"><img src="/images/banner02.jpg" width="1007" height="379" /></li>
        <li class="pic"><img src="/images/banner03.jpg" width="1007" height="379" /></li>
        <li class="pic"><img src="/images/banner04.jpg" width="1007" height="379" /></li>
    </ul>
    <ol id="button">
        <li class="current"></li>
        <li class="but"></li>
        <li class="but"></li>
        <li class="but"></li>
    </ol>
</div>
<!--banner-->

<!--content-->
<div id="content">
    <div class="left">
        <div class="left_top">
            <div class="part01">
                <h2><a href="#">更多>></a></h2>
                <dl>
                    <dt><img src="/images/pic1.jpg"/></dt>
                    <dd>中心介绍： 快乐中学习，创造中成长 北京乐益达教育科技有限公司，以著名儿童心理学家皮亚杰的“做中学”（learning by making）理论及著名发展心理…</dd>
                </dl>
            </div>
            <div class="part02">
                <h2><a href="#">更多>></a></h2>
                <dl>
                    <dt><img src="/images/pic2.jpg"/></dt>
                    <dd>
                        <a href="#">【企业新闻】<span>机器人课程开始了</span></a>
                        <a href="#">【企业新闻】<span>第二届机器人大赛</span></a>
                        <a href="#">【企业新闻】<span>乐益达机器人创客中</span></a>
                        <a href="#">【企业新闻】<span>小朋友们成长进步</span></a>
                    </dd>
                </dl>
            </div>      	
        </div>
        <div class="left_bottom">
            <h2><img src="/images/cyzs.jpg"/></h2>
            <div id="imgbox" class="imgbox">
                <span>
                    <a href="#"><img src="/images/pic_1.jpg" /></a>
                    <a href="#"><img src="/images/pic_2.jpg" /></a>
                    <a href="#"><img src="/images/pic_3.jpg" /></a>
                    <a href="#"><img src="/images/pic_4.jpg" /></a>
                    <a href="#"><img src="/images/pic_5.jpg" /></a>     
                </span>
            </div>
        </div>
        
    </div>
    <div class="right">
        <div class="rig_top">
            <dl class="onepart">
            <dt><img src="/images/intro01.jpg" width="76" height="74" /></dt>
            <dd>
                <span>
                    <a href="#"><strong>3+ 意识世界</strong></a>
                    3+ 意识世界 自我意识的发展是在孩子成长中极…
                </span>
            </dd>
        </dl>
        <dl class="twopart">
            <dt><img src="/images/intro02.jpg" width="76" height="74" /></dt>
            <dd>
                <span>
                    <a href="#"><strong>4+ 发现世界</strong></a>
                    4+ 发现世界 在玩乐的过程中，发现身边的世界，培…
                </span>
            </dd>
        </dl>
        </div>
        <div class="rig_bottom">
            <a href="#" class="nopadding"><img src="/images/zxyy.jpg" width="125" height="59" /></a>
            <a href="#"><img src="/images/gfwb.jpg" width="125" height="59" /></a>
        </div>
    </div>
</div>
<!--content-->

<!--footer-->
<div id="footer">
    <div class="con">
        <h2><img src="/images/bottom_logo.jpg" width="116" height="59" /></h2>
        <p>
        乐益达教育 版权所有 京ICP备09021854号<br/>
        copyright @2020-2021 gdyapei.com all rights reserved 站长统计
        </p>
    </div>
</div>
<!--footer-->

</body>
</html>

三、CSS代码

*{
    margin:0;
    padding:0; 
    list-style:none;  
    border:0;
}
body{font-size:12px; font-family:"微软雅黑";background:#f0f9fe; }
a:link,a:visited{color:#000; text-decoration:none; outline:none;}
a:hover{text-decoration:none;color:#0882B1;}
#head{
    width:100%;
    height:100px; 
    border-bottom:5px solid #3FB0DC;
    }
#head .top{
    width:1000px; 
    margin:0 auto; 
    position:relative;
    }
.top h1{
    padding:10px 0 5px 5px;
    float:left;
}
.top .right{
    position:absolute; 
    top:25px; 
    right:20px;
}
.top .right a{
    display:block;
    float:left;
    margin-right:25px; 
    background:url(../images/xb.jpg) no-repeat 0 2px; 
    padding-left:20px;
    }
.top .nav{
    width:700px; 
    height:41px; 
    margin-top:59px; 
    float:right;
    }
.top .nav li{
    float:left; 
    font-size:16px;  
    font-weight:bold;  
    text-align:center; 
    margin-right:15px;
    }
.top .nav a{
    display:block;
    width:83px; 
    height:41px; 
    line-height:41px;
    }
.top .nav a:hover{
    background:url(../images/bg_nav.png) no-repeat 0 0; 
    color:#FFF;
    }
/*banner开始*/
#banner{
    width:100%;
    height:380px; 
    position:relative; 
    overflow:hidden;
        background:#EBEAE6;
}
#banner  ul{
    width:1007px; 
    height:380px; 
    margin:0 auto; 
}
#banner .banner_pic li{
    display:none;
    position:absolute;
    left:50%; 
    top:0; 
    margin-left:-503px;}
#banner .banner_pic .current{display:block;}
#banner ol{
    position:absolute;
    left:350px; 
    top:320px;
    }
#button li{
    float:left;
    width:15px;
    height:15px;
    background:url(/images/flashbutton.gif) no-repeat -15px 0;
    cursor:pointer;
    margin-left:3px;
    }
#button li.current{
    background:url(/images/flashbutton.gif) no-repeat 0 0;
    }
/*banner结束*/
 	#content{
 		width:1000px;
 		height:auto; 
		margin:0 auto; 
 		margin-top:30px; 
 		overflow:hidden;}
 	#content .left{
 		width:715px;
 		height:407px;
 		float:left;
 		}
 	#content .left .left_top——{height:188px;}
 	#content .left .part01{
 		width:342px;
 		float:left;
 		}
 	#content .left .part01 h2{
 		width:56px;
 		height:44px;
 		padding-left:286px;
 		line-height:40px;
 		background:url(../images/lydjy.jpg) no-repeat 0 0;
 		}
 	#content .left a{
 		font-size:12px; 
 		font-weight:normal; 
 		color:#FFF;
 		}
 	#content .left a:hover{ color:#FF0;}
 	#content .left .part01 dl{
 		width:340px; 
 		height:121px; 
		border:1px solid #DFDFDF; 
 		border-top:0; 
 		background:#FFF;
 		}
 	.left .part01 dl dt{ float:left;} 
	.left .part01 dl dt img{
		border:1px solid #DFDFDF; 
		margin:10px;
		}
	.left .part01 dl dd{
		float:left;
		width:205px; 
		height:104px;
		color:#3F3E3E;
		line-height:20px;
		padding-top:10px;
		}
	#content .left .part02{
		width:347px;
		float:right;
		}
	#content .left .part02 h2{
		width:61px;
		height:44px; 
		padding-left:286px;
		line-height:40px;
		background:url(../images/xwdt.jpg) no-repeat 0 0;
		}
	#content .left .part02 dl{
		width:345px;
		height:121px;
		border:1px solid #DFDFDF;
		border-top:0; 
 		background:#FFF;
		}
	.left .part02 dl dt{ float:left;} 
	.left .part02 dl dt img{
		border:1px solid #DFDFDF; 
		margin:10px;
		}
	.left .part02 dl dd{
		float:right;
		width:210px; 
		height:104px; 
		line-height:24px; 
		padding-top:10px;}
	#content .left .part02 dl dd a{
		display:block; 
		color:#0882B1;
		}
	#content .left .part02 dl dd a:hover{color:#F60;}

	#content .left .left_bottom{
		width:713px; 
		height:180px;
		border:1px solid #DFDFDF; 
		clear:both; 
		background:#FFF;
		}
	.left .left_bottom h2{
		width:693px; 
		height:30px;  
		margin:17px 10px 5px; 
		border-bottom:2px dashed #3FB0DC;
		}
 	.left .left_bottom .imgbox{
 		width:693px; 
 		height:104px; 
 		margin:10px auto; 
 		white-space:nowrap;
 		overflow:hidden;
 		}
 	.left .left_bottom .imgbox a{margin-right:10px; }
 	.left .left_bottom .imgbox img{
 		width:123px; 
 		height:100px;
 		padding:1px;
 		border:1px solid #DFDFDF;
 		}
 	/*左下半部分*/
 	/*右上半部分*/
 	#content .right{
 		width:266px; 
 		height:407px; 
 		float:right;
 		}
 	.right .rig_top{
 		height:305px; 
 		background:url(../images/bg_intro.png) no-repeat 0 0;
 		}
 	.right .rig_top dl{
 		width:205px; 
 		height:80px; 
 		line-height:20px; 
 		float:left;
 		padding-left:30px; 
 		padding-top:46px;
 		}
 	.right .rig_top dt{
 		width:79px;
 		height:77px; 
 		float:left;
 		}
 	.right .rig_top dd{
 		width:110px; 
 		float:right;
 		}
 	.right .rig_top img{
 		width:76px;
 		height:74px;
 		padding:1px;
 		border:1px solid #DFDFDF;
 		}
 	.right .rig_top a{ display:block;}
 	.right .rig_top .twopart{padding-top:20px;}

 	.right .rig_bottom{
 		width:266px; 
 		height:58px;
 		}
 	.right .rig_bottom a{
 		display:block;
 		width:125px; 
 		height:59px; 
 		float:left; 
 		padding-left:16px;
 		}
 	.right .rig_bottom .nopadding{padding-left:0;}

#footer{
    width:100%; 
    height:77px;
    text-align:center; 
    background:#c8e5e9; 
    color:#666;
}
#footer .con{
    width:1000px; 
    margin:0 auto;
    }
#footer .con h2{
    width:116px;
    float:left;
    padding-top:10px;
    }
#footer .con P{
    width:884px; 
    text-align:center;
    line-height:20px; 
    padding-top:20px;
    }
/*footer结束*/

四、JS代码

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){
                        current_index=j;
                        button_li[j].className="current";
                        pic_li[j].className="current";
                    }else{
                        pic_li[j].className="li";
                        button_li[j].className="but";
                    }
                }
            }
            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="li";
                }
            }
        }
    }
    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();

算法第一深情
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
html 简易个人主页制作
nochiller的博客
07-27 7656
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charse...
学校教育网站建设源码
04-29
模板介绍： 蓝色风格的学校网站系统模板，采用pageadmin网站管理系统 v3.0版本制作，风格清晰，结构整洁，可用于大学院校、培训学校、中学、小学等学校类网站搭建。只需要此风格的用户可以直接复制/e/template目录下的文件夹到您目前的/e/template目录下，然后后台调用即可。 宽度：980px 对齐：居中 主色：蓝色 后台地址；pageadmin网站管理系统
乐益达 儿童益智网html样式
Starboy_kAi的博客
07-13 3578
乐益达儿童教育网练习小项目
html网页主页制作,网页主页制作过程
weixin_42632434的博客
06-17 4505
网页主页制作过程发布时间:2008-10-29 发布者:新锐传媒 查阅 [3749] 评论 [0]一、准备材料你首先做一个小计划,准备在主页上告诉人家什么？比如介绍三个方面：自我介绍,我的爱好,我的工作,那你就先起一个总目录(文件夹,比如d:\html),来放你的所有文件，然后再在这个目录建立三个子目录：myself,interest，job。文件名你可以任意，但最好全部小写，因为有的主机要认大小...
html益智游戏拼图游戏源代码
专注java二开部署
01-02 1234
在这个改进的示例中，我们添加了一个按钮用于打乱图片，以及一个事件监听器来检测用户是否点击了拼图块。如果用户点击了拼图块，就会检查拼图是否已经完成，如果未完成则重新打乱图片，如果已完成则显示一个消息提示用户拼图已经完成。注意，这只是一个非常简单的示例，真实的拼图游戏可能需要更复杂的逻辑来处理用户交互和游戏得分。我们还可以添加按钮让用户点击来随机打乱图片，还可以添加事件监听器来检测用户是否完成了拼图。来检查所有图片块是否都在正确的位置，以便在用户完成拼图时能够正确地标记拼图完成。在这个示例中，你需要替换。
EyouCMS响应式儿童益智玩具网站模板源码
05-27
EyouCMS响应式儿童益智玩具网站模板源码下载 配置环境：Linux+阿帕奇+php7.4+MySQL5.6 直接绑定域名 打开 按照提示安装就行了 非常的方便
web前端大作业-少儿益智学习中心响应式网站模板-界面适配移动设备-HTML源码.zip
最新发布
04-03
面对大学生朋友们的课程设计和毕业设计挑战，我们精心准备了一份Web前端大作业——一套高效的响应式网站HTML源码文件，它将是您实现学术成就的得力助手！ 这份源码文件不仅包含了丰富的功能和优雅的设计，更是一个...
IATF16949内审员考试题答案.doc
12-09
IATF16949内审员考试题答案.doc
thinkphp响应式儿童益智玩具网站模板+前后端源码
07-09
thinkphp响应式儿童益智玩具网站模板+前后端源码，本模板自带eyoucms内核，无需再下载eyou系统，原创设计、手工书写DIV+CSS，完美兼容IE7+、Firefox、Chrome、360浏览器等；主流浏览器；结构容易优化；多终端均可正常预览。
儿童益智产品信息网页模板
01-20
儿童益智产品信息网页模板
儿童智力益智开发网站模板
03-31
儿童智力益智开发网站模板
25个有趣的网站源代码.rar
11-09
补天漏洞响应平台爆出中国电信某系统的重大漏洞。通过该漏洞可以查询上亿用户信息，涉及姓名、 证件号、余额，并可以进行任意金额充值、销户、换卡等操作。 10月29日上午10点，该漏洞已得到中国电信厂商确认。
儿童益智游戏网页模板
01-20
儿童益智游戏网页模板
儿童智力开发主题网页模板
03-31
儿童智力开发主题网页模板
大一学生期末大作业 html+css+javascript网页设计实例【电影购票项目】html网页制作成品代码
网页设计与制作
12-23 1256
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
少儿益智教育动手培养机构网站织梦模板
fofu33的专栏
07-10 514
这是一套适合少儿编程、益智游戏、DIY动手组装、儿童智力发展教育机构公司的一套HTML5模板，本模板基于织梦程序二次开发，高端大气，效果酷炫；采用HTML5+CSS3设计，交互性很强。整站代码精简，加速响应，优化很多细节，对搜索引擎（SEO）友好，使该模板更实用而美观。 兼容IE10+、Firefox、Chrome、360浏览器等主流浏览器；页面简洁，容易管理，附带整站测试数据！ 下载地址：http://www.biaoxintong.com/dedeJiaoyu/1689.html 模板特点： 1、该模
益智类游戏源代码
qq_46377985的博客
04-04 475
基于dev-c++编写益智类游戏 下载并安装dev-c++： 下载地址：https://bloodshed-dev-c.en.softonic.com/ 游戏源码： #include #include <stdlib.h> #include <time.h> using namespace std; void Start(); void GetResults(); int i, j, life, maxrand; char c; void Start() { i = 0; j =
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

算法第一深情

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值