⛵源码获取 文末联系✈
Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园篮球网页设计 | 足球体育运动 | 体育游泳运动 | 兵乓球 | 网球 | 等网站的设计与制作 | HTML期末大学生网页设计作业，Web大学生网页
HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为
文章目录
前端学习路线网页基本结构网页演示HTML结构代码学的反而越迷茫学习更多前端学习路线
（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）
网页基本结构
(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面
网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。
网页演示
HTML结构代码
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><meta name="format-detection" content="email=no"><title>首页-某某舞蹈培训</title><link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"><link rel="stylesheet" type="text/css" href="css/slick-theme.css"><link rel="stylesheet" type="text/css" href="css/slick.css"><link rel="stylesheet" href="css/g.css"><link rel="stylesheet" href="css/s.css"><script src="js/jquery-1.11.1.min.js"></script><script src="js/jquery-ui.min.js"></script><script src="js/slick.js"></script><script src="js/scrolloverflow.min.notransition.js"></script><script src="js/g.js"></script><style>.banners-pc {clear: both; height: 685px; }.banners-pc .frame {height: 685px; background: no-repeat center center; background-size: cover; }.banners-mb {display: none; clear: both; height: 685px; }.banners-mb div {height: 100%; }.banners-mb .frame {height: 100%; background: no-repeat center center; background-size: cover; }@media (max-width: 1024px) {.banners-pc {display: none; }.banners-mb {display: block; }}.main1 {}.main1 .offset {padding-top: 70px; }.main1 .offset .list {overflow: hidden; margin-left: -100px; margin-bottom: -30px; }.main1 .offset .list > li {float: left; width: 25%; padding-left: 100px; padding-bottom: 30px; }.main1 .offset .list > li:nth-child(4n+1) {clear: both; }.main1 .offset .list > li .pic {text-align: center; margin-top: 5px; height: 224px; width: 224px; }.main1 .offset .list > li .pic img {border-radius: 50%; display: inline-block; text-align: center; margin-top: 13px; }.main1 .offset .list > li .font {text-align: center; }.main1 .offset .list > li .font .p1 {font-size: 18px; color: #333; padding-top: 30px; }.main1 .offset .list > li .font .p1 .line {display: block; width: 32px; height: 2px; background: #a93f52; margin: 15px auto 20px auto; }.main1 .offset .list > li .font .p2 {color: #999; line-height: 24px; }.main1 .offset .list > li .font .btn {text-align: center; margin-top: 30px; }.main1 .offset .list > li .font .btn .more {display: inline-block; padding: 10px 40px; border-radius: 50px; color: #fff; }.main1 .offset .list .li1 .pic {background: url(http://www.ylcp.shop/files/files/1649473054859/img/kc_list_bg1.png) no-repeat center center; background-size: contain; }.main1 .offset .list .li2 .pic {background: url(http://www.ylcp.shop/files/files/1649473054859/img/kc_list_bg2.png) no-repeat center center; background-size: contain; }.main1 .offset .list .li1 .font .btn .more {background: #ec8520; }.main1 .offset .list .li2 .font .btn .more {background: #058bd6; }@media (max-width: 1024px) {.main1 .offset .list > li {width: 50%; }.main1 .offset .list > li:nth-child(n) {clear: none; }.main1 .offset .list > li:nth-child(2n+1) {clear: both; }.main1 .offset .list > li .pic {margin-left: auto; margin-right: auto; }}@media (max-width: 600px) {.main1 .offset .list > li {width: 100%; }.main1 .offset .list > li:nth-child(n) {clear: none; }}@media (max-width: 300px) {.main1 .offset .list > li .pic {height: auto; width: auto; }}.main2 {background: url(picture/teacher_bg.jpg) no-repeat center center; height: 780px; padding-top: 70px; margin-top: 120px; }.main2 .right {float: right; background: #ec8718; }.main2 .intro .font {max-width: 750px; padding-top: 70px; }.main2 .intro .font .h1 {font-size: 18px; color: #333; padding-bottom: 40px; }.main2 .intro .font .p1 {color: #666; line-height: 30px; }.main2 .intro .font .more {color: #df3d47; margin-top: 20px; display: block; }.main2 .intro .list {overflow: hidden; margin-left: -24px; margin-bottom: -20px; margin-top: 60px; }.main2 .intro .list > li {float: left; padding-left: 24px; padding-bottom: 20px; }.main2 .intro .list > li .box {display: block; position: relative; }.main2 .intro .list > li .box img {border-radius: 20px; display: inline-block; max-width: 156px; }.main2 .intro .list > li .box:before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 4px solid #ec8718; opacity: 0; border-radius: 20px; }.main2 .intro .list > li .box:hover:before {opacity: 1; transition: ease .4s; }@media (max-width: 950px) {.main2 {background: #fbefe1; height: auto; padding-bottom: 50px; }.main2 .intro .font {max-width: none; text-align: center; }.main2 .intro .list > li {width: 25%; }.main2 .intro .list > li .box img {width: 100%; max-width: none; }}@media (max-width: 600px) {.main2 .intro .list > li {width: 33.33%; }}@media (max-width: 350px) {.main2 .intro .list > li {width: 50%; }}.main3 {margin-top: 90px; }.main3 .top {overflow: hidden; padding-top: 70px; }.main3 .top .pic {float: left; padding-right: 60px; position: relative; }.main3 .top .pic .bg {width: 576px; height: 325px; background: #ec8520; display: block; border-radius: 20px; }.main3 .top .pic .tp {display: block; position: absolute; left: 20px; top: -20px; }.main3 .top .pic .tp img {border-radius: 20px; }.main3 .top .font {float: left; max-width: 542px; }.main3 .top .font .nav {overflow: hidden; padding: 14px 0; background: #0b8f54; display: inline-block; border-radius: 30px }.main3 .top .font .nav > li {float: left; padding: 0 40px; }.main3 .top .font .nav > li .box {display: block; color: #fff; }.main3 .top .font .con {}.main3 .top .font .con .p1 {font-size: 18px; color: #333; padding: 54px 0 24px 0; }.main3 .top .font .con .p2 {color: #666; line-height: 24px; }.main3 .top .font .con .more {color: #df3d47; padding-top: 20px; display: block; }.main3 .bottom {margin-top: 50px; overflow: hidden; }.main3 .bottom .list {margin-left: -40px; margin-bottom: -30px; }.main3 .bottom .list > li {float: left; width: 33.33%; padding-left: 40px; padding-bottom: 30px; }.main3 .bottom .list > li .box {background: #f1f1f1; display: block; border-radius: 20px; padding: 36px 40px 30px 36px; }.main3 .bottom .list > li .box .time {font-size: 18px; color: #999; padding-bottom: 15px; }.main3 .bottom .list > li .box .line {width: 34px; height: 2px; background: #ec8520; display: inline-block; }.main3 .bottom .list > li .box .p1 {font-size: 16px; color: #333; padding: 18px 0; }.main3 .bottom .list > li .box .p2 {color: #999; line-height: 24px; }.main3 .bottom .list > li .box:hover {background: #ec8520; }.main3 .bottom .list > li .box:hover .time {color: rgba(255,255,255,.6); }.main3 .bottom .list > li .box:hover .line {background: #fff; }.main3 .bottom .list > li .box:hover .p1 {color: #fff; }.main3 .bottom .list > li .box:hover .p2 {color: rgba(255,255,255,.6); }@media (max-width: 1024px) {.main3 .top .pic {float: none; padding-right: 0; }.main3 .top .pic .bg {display: none; }.main3 .top .pic .tp {position: unset; text-align: center; }.main3 .top .font {float: none; max-width: none; padding-top: 30px; }.main3 .top .font .nav {display: block; margin: 0 100px; }.main3 .top .font .nav > li {width: 50%; }.main3 .top .font .nav > li .box {text-align: center; }.main3 .top .font .con .more {text-align: center; }.main3 .bottom .list > li {width: 50%; }.main3 .bottom .list > li .box {padding: 20px 20px; }}@media (max-width: 700px) {.main3 .top .font .nav {margin: 0; }.main3 .bottom .list > li {width: 100%; }.main3 .bottom .list > li .box {padding: 20px 10px; }}</style><script>$(function () {});</script><link rel="stylesheet" type="text/css" href="http://www.ylcp.shop/g/css/freedom.css?v1.18.12.14"><script>(function(){var l=function(){var l1=function(){var sg=document.createElement('SCRIPT');sg.setAttribute('src','/g/js/freedom.js?v1.19.03.19');(document.head||document.getElementsByTagName('head')[0]).appendChild(sg);sg.onload=function(){_g.take($(document));};};if(!window.jQuery){var sj=document.createElement('SCRIPT');sj.setAttribute('src','/g/js/jquery-1.11.1.min.js');(document.head||document.getElementsByTagName('head')[0]).appendChild(sj);sj.onload=l1;}else l1();};window.addEventListener?window.addEventListener('load',l):window.attachEvent('onload',l);})();</script></head><body><div class="g_header"><div class="top"><div class="g_cw"><p class="logo"><a href=""><img src="picture/logo.png"></a></p><div class="right"><p class="p1">欢迎来到某某舞蹈培训官方网站</p><p class="p2">服务热线: 400-0000-000</p></div></div></div><div class="bar"><a href="" class="logo"><img src="picture/logo_m.png">某某舞蹈</a><a href="#" class="menu"><img src="picture/menu.svg"></a></div><div class="nav"><div class="g_cw"><ul class="list"><li><a href="" class="on"><b>首页</b></a></li><li><a href="about.html"><b>关于我们</b></a></li><li><a href="course.html"><b>课程展示</b></a></li><li><a href="teacher.html"><b>师资团队</b></a></li><li><a href="room.html"><b>教室环境</b></a></li><li><a href="news.html"><b>新闻资讯</b></a></li><li><a href="ach.html"><b>教学成果</b></a></li><li><a href="contact.html"><b style="border-right:0;">联系我们</b></a></li></ul></div></div></div><div class="banners-pc"><div class="frame" style="background-image:url(picture/banner-index-p.jpg);"></div><div class="frame" style="background-image:url(picture/banner-index-p.jpg);"></div></div><div class="banners-mb" zoom-width="1024" zoom-heigh="685"><div class="frame" style="background-image:url(picture/banner-index-m.jpg);"></div><div class="frame" style="background-image:url(picture/banner-index-m.jpg);"></div></div><script>(function () {$('.banners-pc, .banners-mb').slick({arrows: true, dots: true, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 5000, speed: 500 });})();</script><style>.banners-pc .slick-dots, .banners-mb .slick-dots {bottom: 60px; }</style><!--主体内容--><!--课程选择--><div class="main1"><div class="g_cw"><div class="g_title"><p class="l2">CURRICULUM <span class="ico"><img src="picture/logo_m.png"></span> SELECTION</p><p class="l1">课程选择</p></div><div class="offset"><ul class="list"><li class="li1"><a href="coursedetail.html" class="box" target="_blank"><p class="pic"><img src="picture/rvzqwzq3ef0pjy1.jpg" class="g_imgf"></p><div class="font"><p class="p1">少儿拉丁舞<span class="line"></span></p><p class="p2">童通过拉丁舞的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。</p><p class="btn"><span class="more">MORE</span></p></div></a></li><li class="li1"><a href="coursedetail.html" class="box" target="_blank"><p class="pic"><img src="picture/3a66kpukvktvaby.jpg" class="g_imgf"></p><div class="font"><p class="p1">少儿民族舞<span class="line"></span></p><p class="p2">童通过民族舞的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。</p><p class="btn"><span class="more">MORE</span></p></div></a></li><li class="li1"><a href="coursedetail.html" class="box" target="_blank"><p class="pic"><img src="picture/arjjxkvl0fv5iyq.jpg" class="g_imgf"></p><div class="font"><p class="p1">少儿中国舞<span class="line"></span></p><p class="p2">童通过中国舞的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。</p><p class="btn"><span class="more">MORE</span></p></div></a></li><li class="li1"><a href="coursedetail.html" class="box" target="_blank"><p class="pic"><img src="picture/34dji6sorejd59t.jpg" class="g_imgf"></p><div class="font"><p class="p1">少儿芭蕾<span class="line"></span></p><p class="p2">童通过芭蕾的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。</p><p class="btn"><span class="more">MORE</span></p></div></a></li></ul></div></div></div><div class="main2"><div class="g_cw"><div class="g_title"><p class="l2" style="color:#b54884;">TEACHER <span class="ico"><img src="picture/logo_m.png"></span> INTRODUCED</p><p class="l1" style="color:#df3d47;">名师介绍</p></div><div class="intro"><div class="font"><p class="h1">教学总监：李文丽</p><p class="p1">硕士学位，毕业于沈阳音乐学院。从教6年，曾担任浙江省歌剧舞剧院独舞演员，全国“桃李杯”舞蹈比赛一等奖，全国舞蹈比赛表演三等奖。<br>辽宁省“荷花杯”舞蹈比赛表演金奖，曾为签国家领导人江泽民进行舞蹈表演。曾参加辽宁电视台、湖南卫视春节文艺晚会......</p><a href="#" class="more">READ MORE ></a></div><ul class="list"><li><a href="teacherdetail.html" class="box" target="_blank"><img src="picture/h1vztvumx5satbp.jpg"></a></li><li><a href="teacherdetail.html" class="box" target="_blank"><img src="picture/h1vztvumx5satbp.jpg"></a></li><li><a href="teacherdetail.html" class="box" target="_blank"><img src="picture/h1vztvumx5satbp.jpg"></a></li><li><a href="teacherdetail.html" class="box" target="_blank"><img src="picture/h1vztvumx5satbp.jpg"></a></li></ul></div></div></div><div class="main3"><div class="g_cw"><div class="g_title"><p class="l2" style="color:#0b8f54;">NEWS <span class="ico"><img src="picture/logo_m.png"></span> INFORMATION</p><p class="l1" style="color:#ec8520;">新闻资讯</p></div><div class="top"><p class="pic"><span class="tp"><img src="picture/index_news1.jpg" class="g_imgf"></span><span class="bg"></span></p><div class="font"><ul class="nav"><li><a href="news.html" class="box ">最新活动</a></li><li style="border-left:1px solid #fff;"><a href="news.html" class="box ">行业新闻</a></li></ul><div class="con"><a href="newsdetail.html" class="box" target="_blank"><p class="p1 g_ell">单色舞蹈度武汉地区成人优秀舞蹈作品展演</p><p class="p2">单色舞蹈度武汉地区成人优秀舞蹈作品展演单色舞蹈度武汉地区成人优秀舞蹈作品展演单色舞蹈度武汉地区成人优秀舞蹈作品展演</p><span class="more">READ MORE ></span></a></div></div></div><div class="bottom"><ul class="list"><li><a href="newsdetail.html" class="box" target="_blank"><p class="time">.02.28</p><span class="line"></span><p class="p1 g_ell">单色舞蹈度武汉地区成人优秀舞蹈作品展演</p><p class="p2">单色舞蹈度武汉地区成人优秀舞蹈作品展演单色舞蹈度武汉地区成人优秀舞蹈作品展演单色舞蹈度武汉地区成人优秀舞蹈作品展演</p></a></li><li><a href="newsdetail.html" class="box" target="_blank"><p class="time">.02.28</p><span class="line"></span><p class="p1 g_ell">单色舞蹈度武汉地区成人优秀舞蹈作品展演</p><p class="p2">单色舞蹈度武汉地区成人优秀舞蹈作品展演单色舞蹈度武汉地区成人优秀舞蹈作品展演单色舞蹈度武汉地区成人优秀舞蹈作品展演</p></a></li><li><a href="newsdetail.html" class="box" target="_blank"><p class="time">.02.28</p><span class="line"></span><p class="p1 g_ell">单色舞蹈度武汉地区成人优秀舞蹈作品展演</p><p class="p2">单色舞蹈度武汉地区成人优秀舞蹈作品展演单色舞蹈度武汉地区成人优秀舞蹈作品展演</p></a></li></ul></div></div></div><!--主体内容 end--><div class="g_footer"><div class="top clearfix"><div class="g_cw"><p class="pic"><img src="picture/logo_bottom.png"></p><ul class="nav clearfix"><li><div class="box"><p class="h1">关于我们</p><a href="about.html"><p class="p1">学校介绍</p></a></div></li><li><div class="box"><p class="h1">课程展示</p><a href="#"><p class="p1">少儿芭蕾</p></a><a href="#"><p class="p1">民间民族舞</p></a><a href="#"><p class="p1">古典舞</p></a><a href="#"><p class="p1">拉丁舞</p></a></div></li><li><div class="box"><p class="h1">师资团队</p><a href="#"><p class="p1">教室团队</p></a></div></li><li><div class="box"><p class="h1">教室环境</p><p class="p1">环境展示</p></div></li><li><div class="box"><p class="h1">新闻资讯</p><p class="p1">最新活动</p><p class="p1">行业新闻</p></div></li><li><div class="box"><p class="h1">教学成果</p><p class="p1">精彩瞬间</p></div></li><li class="li_lx"><div class="box" style="border-right:0;padding-right:0;"><p class="h1">联系我们</p><p class="p1">联系方式</p></div></li></ul><p class="rx">服务热线：400-0000-000</p><p class="add">地址：xxxxxxxxxxxxxxxxxxxxxx</p></div></div><div class="bottom">Copyright © 某某舞蹈培训学校 </div></div><style>.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}</style></body></html>
学的反而越迷茫
有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
