HTML实现学习网站首页

项目访问

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">更多热门学校 &gt;</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">更多兴趣课 &gt;</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">更多兴趣课 &gt;</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">更多兴趣课 &gt;</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">更多文章 &gt;</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>

HTML实现学习网站首页相关推荐

前端新手学习记录2 -使用vscode编写个人网站首页
编写了一个网站首页,参照网上的例子.界面如下代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...
把百度网站设为首页_大仙SEO：如何解决网站首页百度收录后被删除？【SEO案例】...
前天(5/20)看数据的时候,发现5118数据直线下降,跌的有些厉害,猜测网站应该出问题了.这个时候不要慌(内心实则慌的一批),在等等看,会不会是百度自身的一些调整.算了分析分析网站吧!site看网站 ...
分享几个神奇有效的Python学习网站
想要学好Python,只靠看Python相关的书籍是远远不够的!互联网时代,我们还要充分利用网络上的免费资源,不然怎样成为一名优秀的Pythoner呢?今天小U就为大家分享几个神奇有效的Python学 ...
Springboot中国古代史在线学习网站毕业设计-附源码260839
Springboot中国古代史在线学习网站摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为 ...
自学编程80余年，这些私藏的实用工具学习网站陪我走到了现在，必须收藏，学习效率翻倍 - 网站篇
前言: 自学编程80余年,对于自学,善于搜索网上的一些资源来辅助,个人还是十分有经验的,下面爷爷我就把这辈子私藏的各种资源,网站贡献出来给你们. 自学编程80余年,这些私藏的实用工具&学习网站 ...
前端——用div画菜鸟网站首页导航条“小三角”
今天学到一个新的知识点--用div来画"三角". 之前本帅博主写过一篇<前端--菜鸟网站横向CSS导航条菜单:带小三角形>,里面也有介绍如何制作小三角形,不过它是用的现 ...
（附源码）springboot在线学习网站毕业设计 751841
spring boot在线学习网站摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻 ...
SSM在线学习网站的设计与实现毕业设计源码011451
摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题.针对网络在线学习等问题,对 ...
第5章.网站首页高可用nginx+lua
第5章网站首页高可用nginx+lua 学习目标了解Lua语言的基本语法使用nginx+Lua+redis实现广告缓存掌握nginx限流的基本使用方法 1 Lua介绍 1.1 lua是什么 ...
[附源码]java毕业设计在线学习网站的设计与实现
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...

HTML实现学习网站首页

HTML实现学习网站首页相关推荐

最新文章

热门文章