乐益达儿童益智网html样式

需要用到bootstrap jQuery 注意使用的版本

HTML部分代码

设为首页
加入收藏

益智教育
课程介绍
创意展示
学员中心
新闻动态
关于我们
联系我们

更多>> 中心介绍：快乐中学习，创造中成长北京乐益达教育科技有限公司，以著名儿童心理学家皮亚杰的“做中学”（learning by making）理论及著名发展心理… 更多>>

【企业新闻】机器人课程开始了
【企业新闻】机器人课程开始了
【企业新闻】机器人课程开始了
【企业新闻】机器人课程开始了

- 3+ 意识世界
- 3+ 意识世界自我意
  识的发展是在孩子成
  长中极…
- 4+ 发现世界
- 4+ 发现世界在玩乐
  的过程中，发现身边
  的世界，培…

jquey代码

css样式

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.maxbox{
    height: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top{
    background-color: #f0f9fe;
    width: 100%;
    border-bottom: 4px solid #3fb0dc;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.topin{
  width: 1010px;
  height: 105px;
  display: flex;
  justify-content: space-between;
}
.links{
  width: 735px;
  height: 110px;
}
.liks{
  margin-top: 25px;
  display: flex;
  justify-content: flex-end;
}
.liks li{
    float: left;
    width: 100px;  
}
.liks li a{
    color: black; 
}
.links2{
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}
.links2 li{
  float: left;
}
.links2 a{
  color: black;
  font-weight: 800;
}


.content{
    width: 100%;
    height: 380px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ebeae6;
}



.content2{
    height: 440px;
    display: flex;
    
    flex-direction: row;
    justify-content: space-between;
}
.boxleft{
  width: 720px;
  height: 435px;
  
}
.boxright{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 285px;
  height: 435px;
  
}
.cltop{
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.clbotm{
  margin-left: 10px;
  height: 180px;
  width: 700px;
  
  border: 1px solid rgb(161, 163, 163);
}
.imga1,.imga2{
  height: 165px;
  width: 340px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid rgb(161, 163, 163);
  
  
}
.imga1{
  background: url(../images/lydjy.jpg) no-repeat;
}
.imga2{
  background: url(../images/xwdt.jpg) no-repeat;
}
.imga2 li{
  margin: 5px;
}
.boxsml{
  width: 350px;
  height: 120px;
  margin-top: 40px;
  display: flex;
  font-size: 13px;
  align-items: center;
  justify-content: space-evenly;
}
.cbtop{
  height: 45px;
  width: 700px;
  background: url(../images/cyzs.jpg) no-repeat;
  background-position: 13px 13px;
  border-bottom: 2px dashed rgb(6, 119, 212);
}
.ExpertList {
        margin: 0 auto;
        margin-top: 22px;
        overflow: hidden;
        position: relative;
        text-align: center;
        width: 695px;
    }

    .ExpertList ul {
        overflow: auto;
    }

    .ExpertList ul li {
        float: left;
        box-sizing: border-box;
        text-align: center;
        display: inline-block;
        width: 120px;
        height: 100px;
        list-style: none;
        margin-left: 30px;
    }

.topimg{
  margin-top: -20px;
width: 265px;
height: 280px;
display: flex;
align-items: center;
justify-content: flex-end;
background: url(../images/bg_intro.png);
}
.botmimg{
  margin-top: -50px;
display: flex;
justify-content: space-between;
height: 80px;
width: 265px;
}
.pai{
margin-top: 15px;
width: 250px;
height: 80px;
display: flex;
align-items: center;
font-size: 14px;
}
.pai img{
margin-left: 20px;
}
.pai div{
margin-top: 3px;
margin-left: 2px;
}

.bottom{
    background-color: #c8e5e9;
    width: 100%;
    height: 75px;
    display: flex;
    justify-content: center;
}
.bopin{
  width: 1010px;
  height: 75px;
  display: flex;
  justify-content: space-between;
}
.texts{
  width: 833px;
  margin-top: 15px;
  text-align: center;
}
.texts p{
  margin: 0;
}

乐益达 儿童益智网html样式

Java相关栏目本月热门文章

乐益达儿童益智网html样式