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/" />
<link rel="stylesheet" href="./css/" />
<link rel="stylesheet" href="./css/" />
<link rel="stylesheet" href="./css/" />
<link rel="stylesheet" href="./css/">
</head>
<body>
<!-- start 头部 -->
<header class="edu_header">
<!-- start 上部分 -->
<div class="edu_header_bar">
<div class="logo">
<img src="./images/" 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/" 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="./">找学校</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/" 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/" 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/" 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/" 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/" 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/" 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/" alt="">
<h6>尤克里里</h6>
<span>增强自信心,培养情操及涵养。</span>
</div>
<div class="item">
<img src="images/" alt="">
<h6>尤克里里</h6>
<span>增强自信心,培养情操及涵养。</span>
</div>
<div class="item">
<img src="images/" alt="">
<h6>尤克里里</h6>
<span>增强自信心,培养情操及涵养。</span>
</div>
<div class="item">
<img src="images/" 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/" alt="">
<img src="images/" alt="">
<span>舞蹈培训</span>
<span>依晨</span>
<p>女儿从四岁多一直都在鹏星学习啦啦操培训,会努力坚持的!</p>
</div>
<div class="item">
<img src="images/" alt="">
<img src="images/" alt="">
<span>口才训练</span>
<span>carm123</span>
<p>上几节课,孩子的胆怯和怯场慢慢有了改善,以前总会有“生人勿近”</p>
</div>
<div class="item">
<img src="images/" alt="">
<img src="images/" alt="">
<span>街舞培训</span>
<span>carm123</span>
<p>老师很专业,教的很仔细,学下来感觉氛围很好,舞蹈室很大,很漂亮。</p>
</div>
<div class="item">
<img src="images/" alt="">
<img src="images/" 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/" alt="">
<span>少儿编程</span>
<span>GP82</span>
<p>值得推荐,近在为孩子找到报读兴趣班,也在团上看了很多,最终挑选到这门课</p>
</div>
<div class="item">
<img src="images/music_two.png" alt="">
<img src="images/" alt="">
<span>音乐培训</span>
<span>Jake</span>
<p>体验了一下何老师的吉他课,老师超nice,上课很轻松,环境也很棒</p>
</div>
<div class="item">
<img src="images/" alt="">
<img src="images/" alt="">
<span>美术绘画</span>
<span>tony</span>
<p>老师很专业,环境特别好,女儿学得非常认真。</p>
</div>
<div class="item">
<img src="images/" alt="">
<img src="images/" 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/" alt="">
<span>《自信口才》语言表达体验课</span>
<div class="info">
<h3>胜狮少儿口才培训</h3>
<p>开播时间:2020年10月18日</p>
<div class="teacher">
<img src="images/" alt="">
<p>讲师:小强老师</p>
</div>
</div>
</div>
<div class="item">
<img src="images/" 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/" alt="">
<span>【架子鼓】少儿零基础课</span>
<div class="info">
<h3>心乐艺术中心</h3>
<p>开播时间:2020年10月30日</p>
<div class="teacher">
<img src="images/" 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/" 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/" alt="">
<div class="info">
<p>有关孩子“兴趣班”,看这一篇,就够了!</p>
<span class=""></span>
<p class="number">10000</p>
</div>
</li>
<li>
<img src="images/" alt="">
<div class="info">
<p>有关孩子“兴趣班”,看这一篇,就够了!</p>
<span class=""></span>
<p class="number">10000</p>
</div>
</li>
<li>
<img src="images/" 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/" alt="">
<div class="info">
<p>有关孩子“兴趣班”,看这一篇,就够了!</p>
<span class=""></span>
<p class="number">10000</p>
</div>
</li>
<li>
<img src="images/" alt="">
<div class="info">
<p>有关孩子“兴趣班”,看这一篇,就够了!</p>
<span class=""></span>
<p class="number">10000</p>
</div>
</li>
<li>
<img src="images/" 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>