项目访问
reset.css
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126License: 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><!-- start 头部 --><header class="edu_header"><!-- start 上部分 --><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><!-- end 上部分 --><!--start 下部分 --><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><!--end 下部分 --></header><!-- end 头部 --><!-- start 主体内容 --><main class="edu_container"><!-- part01 start banner --><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><!-- part01 end banner --><!-- part02 start 广州热门学校 --><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><!-- part02 end 广州热门学校 --><!-- part03 start 热门兴趣课 --><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><!-- part03 end 热门兴趣课 --><!-- part04 start 家长种草推荐 --><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>carm123</span><p>上几节课，孩子的胆怯和怯场慢慢有了改善，以前总会有“生人勿近”</p></div><div class="item"><img src="images/Hiphop.png" alt=""><img src="images/user3.png" alt=""><span>街舞培训</span><span>carm123</span><p>老师很专业，教的很仔细，学下来感觉氛围很好，舞蹈室很大，很漂亮。</p></div><div class="item"><img src="images/Magic.png" alt=""><img src="images/user4.png" alt=""><span>魔术教学</span><span>Done</span><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>GP82</span><p>值得推荐，近在为孩子找到报读兴趣班，也在团上看了很多，最终挑选到这门课</p></div><div class="item"><img src="images/music_two.png" alt=""><img src="images/user6.png" alt=""><span>音乐培训</span><span>Jake</span><p>体验了一下何老师的吉他课，老师超nice，上课很轻松，环境也很棒</p></div><div class="item"><img src="images/art.png" alt=""><img src="images/user7.png" alt=""><span>美术绘画</span><span>tony</span><p>老师很专业，环境特别好，女儿学得非常认真。</p></div><div class="item"><img src="images/game.png" alt=""><img src="images/user8.png" alt=""><span>智力围棋</span><span>Dona</span><p>环境很好，老师也非常亲切，小宝很喜欢老师，只是离家远了！</p></div></div></div></div><!-- part04 end 家长种草推荐 --><!-- part05 start 直播试听课 --><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><!-- part05 end 直播试听课 --><!-- part06 start 文章 --><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">10000</p></div></li><li><img src="images/Hiphop.png" alt=""><div class="info"><p>有关孩子“兴趣班”，看这一篇，就够了！</p><span class=""></span><p class="number">10000</p></div></li><li><img src="images/Hiphop.png" alt=""><div class="info"><p>有关孩子“兴趣班”，看这一篇，就够了！</p><span class=""></span><p class="number">10000</p></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">10000</p></div></li><li><img src="images/Hiphop.png" alt=""><div class="info"><p>有关孩子“兴趣班”，看这一篇，就够了！</p><span class=""></span><p class="number">10000</p></div></li><li><img src="images/Hiphop.png" alt=""><div class="info"><p>有关孩子“兴趣班”，看这一篇，就够了！</p><span class=""></span><p class="number">10000</p></div></li></ul></div></div></section></div><!-- part06 end 文章 --></main><!-- end 主体内容 --><!-- start 尾部 --><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:00</span><span>在线客服：趣学网 - 我 -在线客服</span><span>违法和不良信息举报电话：400 8536 100 转7</span><span>教App备11517号</span></div><div class="bottom_bottom"><span>粤ICP备15039397号</span><span>粤公网安备 11010502035430号</span><span>粤B2-070890</span><span>广东趣学教育有限公司</span><span>广州市天河区广四路大街</span><span>营业执照</span><span>出版物证</span></div></div></div></footer><!-- end 尾部 -->
</body></html>
![[IIS网站问题]设置防火墙协议及端口等问题](https://img-blog.csdn.net/20160529223534604)
