此平台结合季节变化和互动动画，通过原创儿童歌曲和故事，为幼儿提供寓教于乐的学习体验，促进对自然环境和季节变化的理解。家长陪同参与，增强亲子教育效果。
自己写的一个jquery循环幻灯片，代码有冗余，或大家有更好的方法，欢迎指证或建议！
common.js
baby.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>傲贝软件乐园orbaby.com</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="css/common.css"> <script src="js/jquery.js" type="text/javascript" ></script> <script src="js/common.js" type="text/javascript" ></script> </head> <body> <div id="header"> <div id="logo"></div> <ul> <li><a href="index.jsp">公园入口</a></li> <li><a class="cur" href="baby.jsp">幼儿百科园</a></li> <li><a href="action.jsp"><font color="#6DB52C">新园区即将开放</font></a></li> <li><a href="about.jsp">关于我们</a></li> </ul> </div> <div id="softbanner"> <div class="pro"> <h3>幼儿百科园：</h3> <p>配有多首原创儿童歌曲,根据四季的变化展开"主题儿歌式"教育,将四季的各个不同点变成朗朗上口的儿歌,从而让儿童在娱乐过程中自然记忆. 通过多个精美的互动动画以及琅琅上口的儿歌来加深儿童对季节变化中的动植物特征的影响. 包含了多个较为隐蔽的互动点,让儿童在娱乐的过程尝试从探索中获得知识. </p> </div> <div class="pro_pic"></div> <div class="pic"> <div class="pic_img"> </div> <div class="info"> <div class="title"></div> <ul class="change_bt"> <li value="1" class="open">1</li> <li value="2">2</li> <li value="3">3</li> <li value="4">4</li> </ul> </div> </div> </div> <div id="pic_list"> <h3>软件截图</h3> <div class="toLeft"></div> <div class="wrapper"> <div class="images"> <ul class="middle"> <li class="img"><img src="images/spring.jpg" /></li> <li class="img"><img src="images/summer.jpg" /></li> <li class="img"><img src="images/autumn.jpg" /></li> <li class="img"><img src="images/winter.jpg" /></li> <li class="img"><img src="images/spring.jpg" /></li> <li class="img"><img src="images/summer.jpg" /></li> <li class="img"><img src="images/autumn.jpg" /></li> <li class="img"><img src="images/winter.jpg" /></li> </ul> </div> </div> <div class="toRight"></div> </div> <div id="content"> <div class="word"> <h3>特色：</h3> <p>配有多首原创儿童歌曲,根据四季的变化展开"主题儿歌式"教育,将四季的各个不同点变成朗朗上口的儿歌,从而让儿童在娱乐过程中自然记忆. 通过多个精美的互动动画以及琅琅上口的儿歌来加深儿童对季节变化中的动植物特征的影响. 包含了多个较为隐蔽的互动点,让儿童在娱乐的过程尝试从探索中获得知识. </p> <p> 通过多个精美的互动动画以及琅琅上口的儿歌来加深儿童对季节变化中的动植物特征的影响. 包含了多个较为隐蔽的互动点,让儿童在娱乐的过程尝试从探索中获得知识. </p> <p>建议家长陪同宝宝一起玩乐,有助于亲子教育噢~ </p> </div> </div> <ul class="imgs"> <li><p>春天到了，冰雪融化，万物复苏！</p><img src="images/spring.jpg" height="245px" width="400px" /></li> <li><p>夏天到了，知了叫了，</p><img src="images/summer.jpg" height="245px" width="400px" /></li> <li><p>秋天到了，树叶黄了，</p><img src="images/autumn.jpg" height="245px" width="400px" /></li> <li><p>冬天到了，大地被雪复盖</p><img src="images/winter.jpg" height="245px" width="400px" /></li> </ul> <jsp:include page="inc/footer.jsp" /> </body> </html>
common.css
@CHARSET "UTF-8";
* {
margin: 0px;
padding: 0px;
}
p {
text-indent: 2em;
line-height: 1.8em;
text-align: left;
}
body {
width: 100%;
height: auto;
font-size: 13px;
font-family: Microsoft YaHei, Arial, Helvetica, sans-serif, Simsun,Arial;
font-color: black;
text-align: center;
background:#F5F5F5;
}
#header{
width: 800px;
height: 100px;
margin: 0 auto;
background: url("../images/header_bg.png") repeat-x;
border-radius: 0px 0px 10px 10px;
-moz-box-shadow: 3px 3px 4px #ccc;
-webkit-box-shadow: 3px 3px 4px #ccc;
box-shadow: 3px 3px 4px #ccc; *
filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4,
Direction = 135, Color = "#cccccc" );
}
#header #logo {
width: 200px;
height: 90px;
float: left;
overflow:hidden;
background: url("../images/logo.png") no-repeat;
}
#header ul{
margin:0px 20px;
padding:0px;
width:100%;
height:100%;
list-style:none;
}
#header ul li{
float:left;
width:140px;
height:100px;
line-height:100%;
}
#header ul li a{
text-decoration: none;
height:100px;
line-height:100px;
display:block;
font-size:16px;
font-family:"宋体";
color:#FCA41B;
}
#header ul li a.cur{
line-height:100px;
font-weight: bold;
color:white;
background:url("../images/hover.png") no-repeat;
}
#header ul li a:hover{
line-height:100px;
font-weight: bold;
font-size:18px;
/**background:url("../images/hover.png") no-repeat;**/
}
#softbanner {
width: 800px;
height: 250px;
margin: 5px auto;
background-color: white;
border-radius: 10px 0px 10px 0px;
-moz-box-shadow: 3px 3px 4px #ccc;
-webkit-box-shadow: 3px 3px 4px #ccc;
box-shadow: 3px 3px 4px #ccc; *
filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4,
Direction = 135, Color = "#cccccc" );
}
#softbanner .pro {
width: 258px !important;
width: 300px;
height: 205px !important;
height: 250px;
float: left;
padding: 20px;
background: url("../images/pro_bg.png");
border-top: 5px solid #F6FF04;
border-radius: 0px 0px 0px 10px;
}
#softbanner .pro p {
margin-top: 20px;
}
#softbanner .pro_pic {
width: 50px;
height: 255px;
float: left;
background: url("../images/center.png") repeat-x;
}
#softbanner .pic {
width: 450px;
height: 245px !important;
height: 250px;
clear: right;
float: left;
border-bottom: 5px solid #6DB52C;
overflow: hidden;
}
#softbanner .pic .pic_img{
margin:0 auto;
padding:0;
width: 400px;
height: 240px !important;
height: 245px;
border-radius: 10px;
background:white;
overflow:hidden;
-moz-box-shadow: 3px 3px 4px #ccc;
-webkit-box-shadow: 3px 3px 4px #ccc;
box-shadow: 3px 3px 4px #ccc; *
filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4,
Direction = 135, Color = "#cccccc" );
}
#softbanner .pic .info{
margin:0 auto;
padding:0;
width: 400px;
height: 30px !important;
height: 30px;
border-radius: 0px 0px 10px 10px;
overflow:hidden;
background:black;
position:relative;
top:-30px;
opacity: 0.50;
filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50,finishOpacity=100);
}
#softbanner .pic .info .title{
width: 300px;
height: 30px !important;
height: 30px;
line-height:30px;
text-align:left;
vertical-align:center;
float:left;
color:white;
}
#softbanner .pic .info ul.change_bt{
margin:0;
padding:0px;
width:100px;
list-style:none;
float:left;
border-radius: 30px 30px 0px 0px;
}
#softbanner .pic .info ul.change_bt li{
float:left;
width:20px;
height: 30px;
line-height:30px;
margin-left:3px;
background:#6DB52C;
cursor: pointer;
display:block;
color:white;
}
#softbanner .pic .info ul.change_bt li.open{
float:left;
width:20px;
height: 30px;
line-height:30px;
margin-left:3px;
background:#fff;
cursor: pointer;
}
#content {
width: 720px !important;
width: 800px;
height: auto;
margin: 20px auto;
padding: 20px 40px;
border: 2px solid #E8E8E8;
border-top: 0px;
border-radius: 0px 0px 10px 10px;
background: url("../images/bg.png") repeat-x;
-moz-box-shadow: 3px 3px 4px #ccc;
-webkit-box-shadow: 3px 3px 4px #ccc;
box-shadow: 3px 3px 4px #ccc; *
filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4,
Direction = 135, Color = "#cccccc" );
}
#pic_list {
width: 760px !important;
width: 800px;
height: 220px !important;
height: 260px;
margin: 15px auto;
padding: 20px;
overflow: hidden;
border: 2px solid #E8E8E8;
border-radius: 0px 0px 10px 10px;
background: url("../images/bg.png") repeat-x;
-moz-box-shadow: 3px 3px 4px #ccc;
-webkit-box-shadow: 3px 3px 4px #ccc;
box-shadow: 3px 3px 4px #ccc; *
filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4,
Direction = 135, Color = "#cccccc" );
}
ul.imgs{
display:none;
}
#pic_list .wrapper{
width:550px;
height:200px;
overflow:hidden;
position: relative;
top:0px;
left:0px;
float:left;
}
#pic_list .wrapper .images{
width:1780px;
height:200px;
position: relative;
top:0px;
left:-400px;
float:left;
}
#pic_list .toLeft{
width:100px;
height:180px;
background:url("../images/toLeft.png") no-repeat;
float:left;
position: relative;
top:0px;
left:0px;
z-index:1;
}
#pic_list .toRight{
width:100px;
height:180px;
overflow:hidden;
display:inline;
float:left;
background:url("../images/toRight.png") no-repeat;
position: relative;
top:0px;
left:0px;
}
#pic_list .wrapper .images ul {
margin:0px;
padding:0px;
list-style:none;
width:1780px;
overflow:hidden;
float:left;
}
#pic_list .wrapper .images ul li{
width: 200px;
height: 160px;
float: left;
text-align: center;
margin: 10px;
padding: 10px auto;
border-radius: 5px;
border: 1px solid #D7D7D7;
behavior: url(border-radius.htc);
-moz-box-shadow: 3px 3px 4px #ccc;
-webkit-box-shadow: 3px 3px 4px #ccc;
box-shadow: 3px 3px 4px #ccc; *
filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4,
Direction = 135, Color = "#cccccc" );
}
#pic_list .wrapper .images ul li img {
width:180px;
height:140px;
text-align: center;
margin: 8px auto;
border-radius: 5px;
-moz-box-shadow: 3px 3px 4px #ccc;
-webkit-box-shadow: 3px 3px 4px #ccc;
box-shadow: 3px 3px 4px #ccc; *
filter: progid : DXImageTransform.Microsoft.Shadow ( Strength = 4,
Direction = 135, Color = "#cccccc" );
}
#Lion{
position:absolute;
top:250px;
left:300px;
width:80px;
height:100px;
}
#Ostrich{
position:absolute;
top:330px;
left:70px;
width:100px;
height:100px;
}
#Monkey{
position:absolute;
top:270px;
left:210px;
width:40px;
height:60px;
}
#Crocodile{
position:absolute;
top:340px;
left:195px;
width:125px;
height:40px;
}
#Elephant{
position:absolute;
top:300px;
left:550px;
width:120px;
height:120px;
}
#Panda{
position:absolute;
top:240px;
left:550px;
width:50px;
height:60px;
}
#Frog{
position:absolute;
top:295px;
left:470px;
width:40px;
height:40px;
}
#Pig{
position:absolute;
top:275px;
left:500px;
width:40px;
height:30px;
}
#Horse{
position:absolute;
top:370px;
left:280px;
width:80px;
height:40px;
}
#Giraffe{
position:absolute;
top:210px;
left:250px;
width:60px;
height:100px;
}
#orbaby{
position:absolute;
top:375px;
left:356px;
width:80px;
height:55px;
}
#footer,#footer p {
margin:0 auto;
padding:0;
width:800px;
text-align: center;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
