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>  <header class="edu_header">  <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>   <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>  </header>   <main class="edu_container">  <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>   <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>   <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>   <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>   <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>   <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>  </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: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>  </body> </html>

秒客网

HTML实现学习网站首页

相关文章