⛵ 源码获取 文末联系 ✈
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">单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演</p>
<p class="p2">单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演</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">2019.02.28</p>
<span class="line"></span>
<p class="p1 g_ell">单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演</p>
<p class="p2">单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演</p>
</a>
</li>
<li>
<a href="newsdetail.html" class="box" target="_blank">
<p class="time">2019.02.28</p>
<span class="line"></span>
<p class="p1 g_ell">单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演</p>
<p class="p2">单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演</p>
</a>
</li>
<li>
<a href="newsdetail.html" class="box" target="_blank">
<p class="time">2019.02.28</p>
<span class="line"></span>
<p class="p1 g_ell">单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演</p>
<p class="p2">单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演单色舞蹈2017年度武汉地区成人优秀舞蹈作品展演</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%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
更多推荐
大学生个人网页模板 简单网页制作作业成品 极简风格个人介绍HTML网页设计(舞蹈培训网页)
发布评论