HTML实现学习网站首页

项目访问

reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

base.css

/* 该选择器 指代的就是html标签 */
:root {
    /* 设置项目默认的主题颜色 */
    --theme-blue: rgb(74, 195, 246);
    --theme-gray: rgb(167,167,167);

    /* 使用 " var() "该函数可以插入自定义的属性值 */
}

header.css

.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    zoom: 1;
}

a {
    color: #000;
    text-decoration: none;
}

.edu_header {
    width: 1200px;
    margin: 0 auto;
    /* height: 600px; */
    /* border: 1px solid blue; */
}

/* 媒体查询 */
@media screen and (max-width: 1200px) {
    .edu_header {
        width: 960px;
    }
    .search_right input{
        /* !important ==> 设置关键字，提高优先级 */
        width: 250px!important;
    } 
}

.edu_header_bar {
    display: flex;
    justify-content: space-between;
    /* background-color: antiquewhite; */
}
   
.edu_header_bar .logo {
    width: 148px;
    height: 50px;
}

.edu_header_bar .logo img{
    height: 100%;
}

.edu_header_bar .search {
    display: flex;
    /* 不写，默认主轴从左到右排列 */
    /* justify-content: space-between; */
    height: 50px;
}

.search_left {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 20px;
}

.search_left .location_icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right:6px;
    background: url(../images/local.jpg) no-repeat center/cover;
}

.search_left .city {
    color: var(--theme-gray);
}

.search_right {
    display: flex;
    justify-content: space-between;

    position: relative;

    align-items: center;
}

.search_right input {
    box-sizing: border-box;
    width: 414px;
    height: 40px;
    padding-left: 46px;
    border: 1px solid var(--theme-blue);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    outline: none;
}

.search_right::before {
    position: absolute;
    left: 18px;
    top: 50%;
    margin-top: -10px;

    content:"";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(../images/star-on-24.png) no-repeat center/cover;
}

.search_right label {
    width: 85px;
    height: 40px;
    line-height: 40px;
    background-color: var(--theme-blue);
    text-align: center;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    font-size: 20px;
    color: #fff;
}

.edu_header_bar .link{
    height: 50px;
}

.edu_header_bar .link li{
    float: left;
    height: 50px;
    line-height: 50px;
    /* 给外面的li标签设置外边距值 */
    margin-left:30px;
}

.edu_header_bar .link li a{
    display: inline-block;
    height: 100%;
    color: var(--theme-gray);
}

.edu_header_bar .link li img {
    width: 40px;
    height: 40px;
    margin-top: 5px;
    border-radius: 50%;
}

/* header_bar上部分  end  */

/* header_nav start  */

.header_nav {
    margin-top: 15px;
}

.nav_list {
    display: flex;
    align-items: center;
    height: 50px;
}

.nav_list  .nav_item {
    height: 100%;
    line-height: 50px;
    margin-right: 50px;
    font-size: 20px;
}

/* 同一个标签设置多个类名，可以这样写 */
.nav_list  .nav_item.active {
    border-bottom: 3px solid var(--theme-blue);
}

.nav_list  .nav_item.active a{
    /* 字体粗细程度  设置为粗体 */
    font-weight: bold;
    color: var(--theme-blue);
}

/* 把最后一个li标签的外边距值设置为0 */
.nav_list  .nav_item:last-child {
    margin-right: 0;
}
/* header_nav end */

index.css

/* start edu_container */
.edu_container {
    position: relative;
    width: 100%;
    min-width: 1200px;
}

.edu_banner {
    position: relative;
    width: 100%;
    min-width: 980px;
}
.course , .parent ,.video , .artice{
    position: relative;
    width: 100%;
    min-width: 1200px;
} 
.banner_pic {
    width: 100%;
}

/* 设置媒体查询 当宽度大于1260px，更改左右按钮的left和right值 */
@media screen and (max-width: 1260px){
    .edu_banner .prev_btn {
        left: 100px!important;
    }

    .edu_banner .next_btn {
        right: 100px!important;
    }
}

.prev_btn ,
.next_btn {
    position: absolute;
    top: 50%;
    /* 向上移动自身高度的一半 */
    margin-top: -25px;
    width: 50px;
    height: 50px;
    /* background-color: ; */
    border-radius: 50%;
}

.prev_btn {
    left: 170px;
    background:rgba(74, 195, 246, .3) url(../images/left.png) no-repeat center;
}

.next_btn {
    right: 180px;
    background: rgba(74, 195, 246, .3) url(../images/right.png) no-repeat center;
}

.page_dot {
    position: absolute;
    bottom: 6px;
    left: 50%;
    /* 向左移动自身宽度的一半 */
    margin-left: -23px;
    width: 46px;
    /* height: 20px; */
    /* background-color: orange; */

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page_dot .dot{
    /* 行内元素，设置宽高无效的 */
    display: inline-block;
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background-color: var(--theme-gray);
}

.page_dot .dot.active {
    width: 12px;
    height: 12px;
    background-color: var(--theme-blue);
}

/* start 广州热门学校 */
.edu_wrapper {
    display: flex;
    justify-content: space-between;

    width: 1200px;
    margin: 0 auto;
    padding-top: 55px;
}

/* 左侧是弹性宽度 */
.hot_school {
    flex: 1;
}

/* 右侧固定宽度 */
.hot_rating {
   width: 23%;
   flex: 0 0 23%;
   margin-left: 2%;
}

.school_lesson{
    position: relative;
}

.title{
    display: inline-block;
    font-size: 32px;
}

.small_title{
    display: inline-block;
    margin-left: 16px;
    font-size: 16px;
    color: var(--theme-gray);
}

.more{
    position: absolute;
    top: 9px;
    right: 0;
    font-size: 14px;
    color: var(--theme-blue);
}

.lesson_items {
    padding-top: 20px;
}

.lesson_items>ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
} 

.lesson_items>ul>li{
    width: 32%;
    margin-bottom: 20px;
    border-radius: 15px;
    /* 盒子阴影 */
    box-shadow: 0px 1px 2px 1px #eee;
} 

.lesson_items>ul>li>img {
    height: 200px;
    width: 100%;
}

.lesson_items .items_name,
.lesson_items .items_star,
.lesson_items .items_tips,
.lesson_items .items_address {
    margin-left: 15px;
}

.lesson_items .items_name{
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
} 

.lesson_items .items_star{
    margin-bottom: 15px;
}

.lesson_items .star {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/star-on-24.png) no-repeat center/cover;
}

.lesson_items .score{
    color: #ecb50d;
}

.lesson_items .items_tips {
    margin-bottom: 15px;
}

.lesson_items .items_tips span{
    padding:2px 10px;
    background-color: var(--theme-blue);
    color: #fff;
    font-size: 12px;
    border-radius: 10px;
}
.lesson_items .items_address{
    margin-bottom: 15px;
    font-size: 12px;
    color: var(--theme-gray);
}   

/* 右侧固定的评论 */
.hot_rating {
    margin-top: 50px;
}

.hot_rating article {
    margin-top: 20px;
}

.hot_rating  .rating_title {
    display: inline-block;
    width: 130px;
    font-size: 24px;
    font-weight: 500;
    /* 设置省略号效果 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hot_rating  .rating_look {
    display: inline-block;
    font-size: 14px;
    color: var(--theme-blue);
}

.hot_rating  .rating_plan {
    font-size: 15px;
}
.hot_rating  .rating_plan span{
    padding:0 2px;
    background: orangered;
    border-radius: 5px;
    color: #fff;
}

.hot_rating  .rating_visited {
    padding: 15px 0;
    color: var(--theme-gray);
    font-size: 12px;
 }
/* end 广州热门学校 */

/* start 热门兴趣课 */
.course{
    background-color: #f7f8fa;
    /* margin: 0 auto; */
    padding-top: 24px;
    box-sizing: border-box;
}
.course_container{
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
.course_items{
    width: 1200px;
    margin: 18px 0 20px 0;
    display: flex;
    justify-content: space-between;
}
.course_items .item{
    width: 280px;
    padding-bottom: 40px;
}
.course_items .item img{
    width: 100%;
}
.course_items .item h6{
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    margin: 10px 0 5px 0;
}
.course_items .item span{
    font-size: 12px;
    color: #bdbdbf;  
}
/* end 热门兴趣课 */

/* start 家长种草推荐 */
.parent {
    padding-top: 24px;
    box-sizing: border-box;
  }
  .parent_container {
    width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  .parent_items{
     width: 1200px;
     margin-top: 20px;
  }
  .parent_items .top_items , .parent_items .bottom_items {
       display: flex;
       justify-content: space-between;
       margin-bottom: 20px;
  }
  .parent_items .item{
    width: 274px; 
    box-shadow: 0px 1px 2px 1px #eee;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    position: relative;
  }
  .parent_items .item img{
       width: 100%;
       height: 178px;
       
  }
  .parent_items .item img:last-of-type{
    height: 44px;
    width: 44px;
    border-radius: 50%;
    position: absolute;
    top: 151px;
    left: 26px;
  }
  .parent_items .item span:first-of-type{
    display: inline-block;
    width: 75px;
    height: 20px;
    background-color: #29b7f5;
    position: absolute;
    top: 166px;
    right:0px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 9px;
  }
  .parent_items .item span:last-of-type{
    position: absolute;
    top: 178px;
    left: 78px;
    font-size: 13px;
    color: #333;
    font-weight: bold;
  }
  .parent_items .item p{
    font-size: 13px;
    color: #dfdfdf;
    margin-top: 36px;
    margin-bottom: 20px;
    height: 36px;
    width: 199px;
    margin-left: auto;
    margin-right: auto;
    line-height: 18px;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* end  家长种草推荐*/

  /* start 直播试听课 */
  .video {
    padding-top: 24px;
    box-sizing: border-box;
    background-color: #f7f8fa;
    position: relative;
    padding-bottom: 48px;
}
.video_container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.video_container .video_items{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.video_container .video_items .item{
  width: 272px;
  position: relative;
}
.video_container .video_items .item img{
  height: 192px;
  width: 100%;
}
.video_container .video_items .item span{
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 11px;
  background-color: rgba(0, 0, 0, 0.41);
  top: 171px;
  left: 0px;
  color: #fff;
  text-align: center;
}
.video_container .video_items .item .info{
  width: 100%;
  height: 117px;
  box-sizing: border-box;
  padding-top: 11px;
  text-align: center;
  background-color: #fff;
  
}
.video_container .video_items .item .info h3{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 16px;
}
.video_container .video_items .item .info p{
  display: block;
  margin-bottom: 8px;
  font-size: 8px;
  color: #e2e2e2;
}
.video_container .video_items .item .info .teacher{
  padding-top: 10px;
}
.video_container .video_items .item .info .teacher img{
  width: 28px;
  height: 28px;
  vertical-align: middle;
}
.video_container .video_items .item .teacher p {
  display: inline-block;
}
.left , .right{
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  border-radius: 50%;
  background-size: 20px 20px;
}
.left{
  top: 202px;
  left: 100px;
  background: #dbdbdd url(../images/left.png) no-repeat center center;
  
}
.right{
  top: 202px;
  right: 100px;
  background:#dbdbdd url(../images/right.png) no-repeat center center;
}
  /* end 直播试听课 */

 /* start 文章 */
 .artice{
    padding-top: 24px;
    box-sizing: border-box;
    position: relative;
  }
  .artice_container{
    width: 1200px;
    margin: 0 auto;
    position: relative;
   
  }
  .artice_container .artice_content{
    display: flex;
    justify-content: space-between;
  }
  .artice_container .artice_content .left_content , .artice_container .right_content{
       width: 588px;
       margin-bottom: 20px;
       margin-top: 20px;
  }
  .artice_container ul li{
    border-radius: 12px;
    width: 100%;
    height: 190px;
    margin-bottom: 10px;
    /* background-color: red; */
    box-sizing: border-box;
    padding: 20px 30px;
    box-shadow: 0px 1px 2px 1px #eee;
  }
  .artice_container ul li img{
    width: 196.5px;
    height: 146px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius:12px;
    vertical-align: top;
    margin-right: 20px;
  }
  .artice_container ul li .info {
     display: inline-block;
     width: 306px;
     height: 100%;
     position: relative;
  }
  .artice_container ul li .info p{
    font-size: 16px;
    color: #8e8e8e;
    width: 257px;
    line-height: 30px;
  }
  .artice_container ul li .info span{
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../images/点赞.png) no-repeat center;
    background-size: 30px;
    top: 100px;
    left: -6px;
  }
  .artice_container ul li .info .number{
     position: absolute;
     top: 110px;
     left: 41px;
     color: #2063e8;
  }
 /* end 文章 */
/* end edu_container */

footer.css

/* start 底部 */
.edu_footer{
    background-color: #414141;
    height: 160px;
    box-sizing: border-box;
    padding-top: 28px;
    padding-bottom: 20px;
  }
  .footer_container{
    width: 810px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    /* background-color: aqua; */
  }
  .footer_container .top{
    height: 31px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    color: #fff;
    box-sizing: border-box;
    padding-bottom: 53px;
  }
  .footer_container .bottom {
    font-size: 8px;
    color: #fff;
    box-sizing: border-box;
    padding-top: 20px;
  }
  .footer_container .bottom span::after{
    content: "|";
  }
  .footer_container .bottom span:nth-child(4)::after{
    content: "";
  }
  .footer_container .bottom span:last-child::after{
    content: "";
  }
  .footer_container .bottom .bottom_top{
    margin-bottom: 5px;
  }
  .footer_container .top .top_left span{
    margin-right: 12px;
  }
  .footer_container .top .top_left{
    margin-top: 8px;
  }
  .footer_container .top .top_right span{
    display: inline-block;
    width: 112px;
    height: 30px;
  }
 
  .footer_container .top .top_right span p{
    display: inline-block;
    margin-left: 26px;
    margin-top: 7px;
  }
  .footer_container .top .top_right span:first-of-type{
     background: url(../images/weibo.png) no-repeat center left;
     background-size: 20px;
  }
  .footer_container .top .top_right span:last-of-type{
     background: url(../images/weixin.png) no-repeat center left;
     background-size: 20px;
  }
  /* end 底部 */

index.html

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>趣学网首页title>

  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/base.css" />

  <link rel="stylesheet" href="./css/header.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/footer.css">
head>

<body>
  
  <header class="edu_header">
    
    <div class="edu_header_bar">
      <div class="logo">
        <img src="./images/logo.jpg" alt="logo" />
      div>

      <div class="search">
        <div class="search_left">
          <i class="location_icon">i>
          <span class="city">广州span>
        div>
        <div class="search_right">
          <input type="text" id="search" placeholder="搜索培训机构或者课程" />
          <label for="search">搜索label>
        div>
      div>

      <ul class="link clearfix">
        <li>
          <a href="#"> 足迹 a>
        li>
        <li>
          <a href="#">消息a>
        li>
        <li>
          <a href="#">收藏a>
        li>
        <li>
          <a href="#">
            <img src="./images/avatar.png" alt="用户头像" />
          a>
        li>
      ul>
    div>
    

    
    <nav class="header_nav">
      <ul class="nav_list">
        <li class="nav_item active">
          <a href="#">首页a>
        li>
        <li class="nav_item">
          <a href="./school.html">找学校a>
        li>
        <li class="nav_item">
          <a href="#">问答社区a>
        li>
        <li class="nav_item">
          <a href="#">资讯文章a>
        li>
        <li class="nav_item">
          <a href="#">趣学专题a>
        li>
      ul>
    nav>
    
  header>
  

  
  <main class="edu_container">
    
    <div class="edu_banner">
      
      <div class="banner_pic">
        <img src="./images/banner.jpg" width="100%" alt="轮播图片" />
      div>

      
      <div class="prev_btn">div>
      <div class="next_btn">div>

      
      <div class="page_dot">
        <span class="dot">span>
        <span class="dot active">span>
        <span class="dot">span>
      div>
    div>
    

    
    <div class="edu_wrapper">
      <section class="hot_school">
        <div class="school_lesson">
          <h2 class="title">广州热门学校h2>
          <h3 class="small_title">报课不迷路h3>
          <p class="more">更多热门学校 >p>
        div>

        <div class="lesson_items">
          <ul>
            <li>
              <img src="./images/paning.png" alt="画画" />
              <h2 class="items_name">童程童美教育h2>
              <div class="items_star">
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="score">5.0分span>
              div>
              <div class="items_tips">
                <span>少儿编程span>
              div>
              <div class="items_address">天河儿童公园/上社div>
            li>
            <li>
              <img src="./images/Hiphop.png" alt="画画" />
              <h2 class="items_name">利泰丽姿.形体仪态礼仪h2>
              <div class="items_star">
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="score">5.0分span>
              div>
              <div class="items_tips">
                <span>口才礼仪span>
              div>
              <div class="items_address">珠江新城div>
            li>
            <li>
              <img src="./images/eloquence.png" alt="画画" />
              <h2 class="items_name">新世界日语h2>
              <div class="items_star">
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="score">5.0分span>
              div>
              <div class="items_tips">
                <span>日语span>
              div>
              <div class="items_address">天河城/体育中心div>
            li>
            <li>
              <img src="./images/paning.png" alt="画画" />
              <h2 class="items_name">艾佛瑞钢琴学校h2>
              <div class="items_star">
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="score">5.0分span>
              div>
              <div class="items_tips">
                <span>钢琴辅导span>
              div>
              <div class="items_address">车陂/东圃div>
            li>
            <li>
              <img src="./images/program_three.png" alt="画画" />
              <h2 class="items_name">美联少儿英语辅导h2>
              <div class="items_star">
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="score">5.0分span>
              div>
              <div class="items_tips">
                <span>英语辅导span>
              div>
              <div class="items_address">凯德广场div>
            li>
            <li>
              <img src="./images/art.png" alt="画画" />
              <h2 class="items_name">山谷私塾h2>
              <div class="items_star">
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="star">span>
                <span class="score">5.0分span>
              div>
              <div class="items_tips">
                <span>书法span>
              div>
              <div class="items_address">上下九/北京路div>
            li>
          ul>
        div>
      section>
      <section class="hot_rating">
        <article>
          <h2 class="rating_title">热门讨论寒假放假如何完成寒假作业h2>
          <p class="rating_look">(去社区看看)p>
        article>
        <article>
          <h2 class="rating_plan">我的假期学习计划 <span>热span>h2>
          <p class="rating_visited">300万次浏览p>
        article>
        <article>
          <h2 class="rating_plan">我的假期学习计划 <span>热span>h2>
          <p class="rating_visited">300万次浏览p>
        article>
        <article>
          <h2 class="rating_plan">我的假期学习计划 <span>热span>h2>
          <p class="rating_visited">300万次浏览p>
        article>
        <article>
          <h2 class="rating_plan">我的假期学习计划h2>
          <p class="rating_visited">300万次浏览p>
        article>
        <article>
          <h2 class="rating_plan">我的假期学习计划h2>
          <p class="rating_visited">300万次浏览p>
        article>
        <article>
          <h2 class="rating_plan">我的假期学习计划h2>
          <p class="rating_visited">300万次浏览p>
        article>
        <article>
          <h2 class="rating_plan">我的假期学习计划h2>
          <p class="rating_visited">300万次浏览p>
        article>
        <article>
          <h2 class="rating_plan">我的假期学习计划h2>
          <p class="rating_visited">300万次浏览p>
        article>
      section>
    div>
    

    
    <div class="course">
      <section class="course_container">
        <div class="course_header">
          <h2 class="title">热门兴趣课h2>
          <h3 class="small_title">看看他们学什么h3>
          <p class="more">更多兴趣课 >p>
        div>
        <div class="course_items">
          <div class="item">
            <img src="images/yukrili.png" alt="">
            <h6>尤克里里h6>
            <span>增强自信心，培养情操及涵养。span>
          div>
          <div class="item">
            <img src="images/ballet.png" alt="">
            <h6>尤克里里h6>
            <span>增强自信心，培养情操及涵养。span>
          div>
          <div class="item">
            <img src="images/the-game-of-go.png" alt="">
            <h6>尤克里里h6>
            <span>增强自信心，培养情操及涵养。span>
          div>
          <div class="item">
            <img src="images/drawing.png" alt="">
            <h6>尤克里里h6>
            <span>增强自信心，培养情操及涵养。span>
          div>
        div>
      section>
    div>
    

    
    <div class="parent">
      <section class="parent_container">
        <div class="parent_header">
          <h2 class="title">家长种草推荐h2>
          <p class="more">更多兴趣课 >p>
        div>
        <div class="parent_items">
          <div class="top_items">
            <div class="item">
              <img src="images/dance.png" alt="">
              <img src="images/user1.png" alt="">
              <span>舞蹈培训span>
              <span>依晨span>
              <p>女儿从四岁多一直都在鹏星学习啦啦操培训，会努力坚持的！p>
            div>
            <div class="item">
              <img src="images/eloquence.png" alt="">
              <img src="images/user2.png" alt="">
              <span>口才训练span>
              <span>carm123span>
              <p>上几节课，孩子的胆怯和怯场慢慢有了改善，以前总会有“生人勿近”p>
            div>
            <div class="item">
              <img src="images/Hiphop.png" alt="">
              <img src="images/user3.png" alt="">
              <span>街舞培训span>
              <span>carm123span>
              <p>老师很专业，教的很仔细，学下来感觉氛围很好，舞蹈室很大，很漂亮。p>
            div>
            <div class="item">
              <img src="images/Magic.png" alt="">
              <img src="images/user4.png" alt="">
              <span>魔术教学span>
              <span>Donespan>
              <p>魔术拉松很有耐心，孩子很内向，希望跟着老师学习后能活泼开朗。p>
            div>
          div>
          <div class="bottom_items">
            <div class="item">
              <img src="images/program_one.png" alt="">
              <img src="images/user5.png" alt="">
              <span>少儿编程span>
              <span>GP82span>
              <p>值得推荐，近在为孩子找到报读兴趣班，也在团上看了很多，最终挑选到这门课p>
            div>
            <div class="item">
              <img src="images/music_two.png" alt="">
              <img src="images/user6.png" alt="">
              <span>音乐培训span>
              <span>Jakespan>
              <p>体验了一下何老师的吉他课，老师超nice，上课很轻松，环境也很棒p>
            div>
            <div class="item">
              <img src="images/art.png" alt="">
              <img src="images/user7.png" alt="">
              <span>美术绘画span>
              <span>tonyspan>
              <p>老师很专业，环境特别好，女儿学得非常认真。p>
            div>
            <div class="item">
              <img src="images/game.png" alt="">
              <img src="images/user8.png" alt="">
              <span>智力围棋span>
              <span>Donaspan>
              <p>环境很好，老师也非常亲切，小宝很喜欢老师，只是离家远了！p>
            div>
          div>
        div>
    div>
    

    
    <div class="video">
      <span class="left">span>
      <section class="video_container">
        <div class="video_header">
          <h2 class="title">直播试听课h2>
          <p class="more">更多兴趣课 >p>
        div>
        <div class="video_items">
           <div class="item">
             <img src="images/layer.png" alt="">
             <span>《自信口才》语言表达体验课span>
             <div class="info">
               <h3>胜狮少儿口才培训h3>
               <p>开播时间：2020年10月18日p>
               <div class="teacher">
                 <img src="images/teacher.png" alt="">
                 <p>讲师：小强老师p>
               div>
             div>
           div>
           <div class="item">
            <img src="images/FineArts.png" alt="">
            <span>少儿美术体验课span>
            <div class="info">
              <h3>大本象美术教育h3>
              <p>开播时间：2020年11月10日p>
              <div class="teacher">
                <img src="images/张修.png" alt="">
                <p>讲师：张修p>
              div>
            div>
           div>
           <div class="item">
            <img src="images/Drumkit.png" alt="">
            <span>【架子鼓】少儿零基础课span>
            <div class="info">
              <h3>心乐艺术中心h3>
              <p>开播时间：2020年10月30日p>
              <div class="teacher">
                <img src="images/teacher.png" alt="">
                <p>讲师：小王老师p>
              div>
            div>
           div>
           <div class="item">
            <img src="images/program_three.png" alt="">
            <span>少儿编程基础入门试听课span>
            <div class="info">
              <h3>乐博乐博STEAM少儿编程h3>
              <p>开播时间：2020年12月15日p>
              <div class="teacher">
                <img src="images/teacher.png" alt="">
                <p>讲师：小张老师p>
              div>
            div>
           div>
        div>
      section>
      <span class="right">span>
    div>
    

    
    <div class="artice">
      <section class="artice_container">
        <div class="artice_header">
          <h2 class="title">文章h2>
          <p class="more">更多文章 >p>
        div>
        <div class="artice_content">
          <div class="left_content">
            <ul>
              <li>
                <img src="images/Hiphop.png" alt="">
                <div class="info">
                  <p>有关孩子“兴趣班”，看这一篇，就够了！p>
                  <span class="">span>
                  <p class="number">10000p>
                div>
              li>
              <li>
                <img src="images/Hiphop.png" alt="">
                <div class="info">
                  <p>有关孩子“兴趣班”，看这一篇，就够了！p>
                  <span class="">span>
                  <p class="number">10000p>
                div>
              li>
              <li>
                <img src="images/Hiphop.png" alt="">
                <div class="info">
                  <p>有关孩子“兴趣班”，看这一篇，就够了！p>
                  <span class="">span>
                  <p class="number">10000p>
                div>
              li>
            ul>
          div>
          <div class="right_content">
            <ul>
              <li>
                <img src="images/Hiphop.png" alt="">
                <div class="info">
                  <p>有关孩子“兴趣班”，看这一篇，就够了！p>
                  <span class="">span>
                  <p class="number">10000p>
                div>
              li>
              <li>
                <img src="images/Hiphop.png" alt="">
                <div class="info">
                  <p>有关孩子“兴趣班”，看这一篇，就够了！p>
                  <span class="">span>
                  <p class="number">10000p>
                div>
              li>
              <li>
                <img src="images/Hiphop.png" alt="">
                <div class="info">
                  <p>有关孩子“兴趣班”，看这一篇，就够了！p>
                  <span class="">span>
                  <p class="number">10000p>
                div>
              li>
            ul>
          div>
        div>
      section>
    div>
    
  main>
  
  
  
  <footer class="edu_footer">
     <div class="footer_container">
       <div class="top">
         <div class="top_left">
           <span>联系我们span>
           <span>法律声明span>
           <span>隐私政策span>
           <span>用户协议span>
           <span>加入我们span>
         div>
         <div class="top_right">
           <span><p>官方微博p>span>
           <span><p>微信公众号p>span>
         div>
       div>
       <div class="bottom">
         <div class="bottom_top">
           <span>客服热线：400 8536 100 周一至周日 9:00-21:00span>
           <span>在线客服：趣学网 - 我 -在线客服span>
           <span>违法和不良信息举报电话：400 8536 100 转7span>
           <span>教App备11517号span>
         div>
         <div class="bottom_bottom">
           <span>粤ICP备15039397号span>
           <span>粤公网安备 11010502035430号span>
           <span>粤B2-070890span>
           <span>广东趣学教育有限公司span>
           <span>广州市天河区广四路大街span>
           <span>营业执照span>
           <span>出版物证span>
         div>
       div>
     div>
  footer>
  
body>

html>