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>