⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | | HTML期末大学生网页设计作业，Web大学生网页
-
HTML：结构
-
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 -
JavaScript：做与用户的交互行为
前端学习路线
（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 lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="content">
<header>
<div class="tou">
<div class="left">
<img src="../img/logo.png" alt="">
H5实战页面
</div>
<div class="right nav">
<a href="javascript:;" class="nav-item is-active" active-color="red" id="diyi">实战课程</a>
<a href="javascript:;" class="nav-item" active-color="red" id="dier">商业案例</a>
<a href="javascript:;" class="nav-item" active-color="red" id="disan">课程体系</a>
<a href="javascript:;" class="nav-item" active-color="red" id="disi">集成环境</a>
<a href="javascript:;" class="nav-item" active-color="red" id="diwu">云端学习</a>
<a href="javascript:;" class="nav-item jsxx" active-color="red" id="diliu">即刻学习</a>
<span class="nav-indicator"></span>
</div>
</div>
<h1>实战课程重磅上线</h1>
<p style="font-weight:300;">一键云学习,还在等什么?</p>
</header>
<div class="baner">
<h1>每门课都是<span class="dire">真</span>实商业案例</h1>
<p>
真实案例，真实场景，在实战中实践、操作、调试 <br>
大牛带你体验BA真实开发流程，所有开发过程一为你呈现
</p>
<div class="tupian">
<img src="../img/sc2-1.png" alt="" id="img1">
<img src="../img/sc2-2.png" alt="" id="img2">
</div>
</div>
<div class="baner1">
<img src="../img/sc3.png" alt="" id="img3">
<div class="qd">
<h1><span class="dire">强大</span>的语言课程体系支持</h1>
<p>学习环境与课程轻松对接，安装、调试、写入、部置、运行，一站式解决 <br>
,让你体验开发全流程</p>
<div class="five">
<div class="yi">HTML5</div>
<div class="er">PHP</div>
<div class="san">JAVA</div>
<div class="si">Python</div>
<div class="wu">Node.js</div>
</div>
</div>
</div>
<div class="baner baner3">
<h1>省去本地复<span class="dire">杂</span>的环境搭建</h1>
<p>
你可以告别在虚拟机中调试开发了
</p>
<div class="four">
<div>
<img src="../img/sc4-1.png" alt="">
<p>实战课程集成开发环境</p>
</div>
<div>
<img src="../img/sc4-2.png" alt="">
<p>内置终端命令行</p>
</div>
<div>
<img src="../img/sc4-3.png" alt="">
<p>编译你的应用程序</p>
</div>
<div>
<img src="../img/sc4-4.png" alt="">
<p>编译你的应用程序</p>
</div>
</div>
</div>
<div class="baner4">
<img src="../img/sc5-1.png" alt="" id="img5">
<h1>学习云计算<span class="ky">可以</span>这样简单</h1>
<p>看视频，敲代码，气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样</p>
</div>
<div class="baner5">
<a href="#"><button>继续了解学习体验</button></a>
</div>
<div class="footer">
<div class="jieshu">
<div>网站首页</div>
<div>人才招聘</div>
<div>联系我们</div>
<div>高粒联盟</div>
<div>关于我们</div>
<div>讲师招募</div>
<div>关于我们</div>
<div>意见反馈</div>
<div>友情链接</div>
</div>
<p style="color: #404444;">Copyright©2015 imooc.com All Rights Reserved|京ICP备13046642号-2</p>
</div>
</div>
</div>
</body>
</html>
<script>
var indicator = document.querySelector('.nav-indicator');
var items = document.querySelectorAll('.nav-item');
function handleIndicator(el) {
items.forEach(function (item) {
item.classList.remove('is-active');
item.removeAttribute('style');
});
console.log(el)
if(el.id=="diyi"){
window.scrollTo(0, 0)
}else if(el.id=="dier"){
window.scrollTo(0,500)
}else if(el.id=="disan"){
window.scrollTo(0, 1000)
}else if(el.id=="disi"){
window.scrollTo(0, 1600)
}else if(el.id=="diwu"){
window.scrollTo(0, 2100)
}else if(el.id=="diliu"){
window.scrollTo(0, 0)
}
indicator.style.width = "".concat(el.offsetWidth, "px");
indicator.style.left = "".concat(el.offsetLeft, "px");
indicator.style.backgroundColor = el.getAttribute('active-color');
el.classList.add('is-active');
}
items.forEach(function (item, index) {
item.addEventListener('click', function (e) {
handleIndicator(e.target);
});
item.classList.contains('is-active') && handleIndicator(item);
});
</script>
<script>
// 头部滑入效果
var tou =document.querySelector(".tou")
var headerh1=document.querySelector("header>h1")
var headerp=document.querySelector("header>p")
var banerh1=document.querySelector(".baner>h1")
var banerp=document.querySelector(".baner>p")
var baner1h1=document.querySelector(".qd>h1")
var baner1p=document.querySelector(".qd>p")
var baner3h1=document.querySelector(".baner3>h1")
var baner3p=document.querySelector(".baner3>p")
var baner4h1=document.querySelector(".baner4>h1")
var baner4p=document.querySelector(".baner4>p")
var five=document.querySelector(".five")
var four=document.querySelector(".four")
tou.style.top="0"
headerh1.style.opacity="1"
headerh1.style.marginTop="0"
headerp.style.opacity="1"
headerp.style.marginTop="0"
</script>
<script>
window.onload = f; //页面初始化时固定其位置
window.onscroll = f; //当文档位置发生变化时重新固定其位置
function f(){
//元素位置固定函数
var scrolltopTemp=document.documentElement.scrollTop||document.body.scrollTop
if(scrolltopTemp<350){
indicator.style.left = "".concat(26, "px")
}
if(scrolltopTemp>=350){
tou.style.backgroundColor="rgba(255, 255, 255, .3)"
banerh1.style.opacity="1"
banerh1.style.marginTop="0"
banerp.style.opacity="1"
banerp.style.marginTop="40px"
indicator.style.left = "".concat(26, "px");
}else{
tou.style.backgroundColor="transparent"
}
if(scrolltopTemp>=415){
img1.style.opacity="1"
setTimeout(function(){
img2.style.top="65px"
},3000)
indicator.style.left = "".concat(143, "px");
}
if(scrolltopTemp>=655){
img3.style.transform="scale(1)"
baner1h1.style.opacity="1"
baner1p.style.opacity="1"
baner1p.style.marginTop="50px"
setTimeout(function(){
five.style.opacity="1"
five.style.bottom="-30px"
},2000)
indicator.style.left = "".concat(258, "px");
}
if(scrolltopTemp>=1330){
baner3h1.style.opacity="1"
baner3p.style.opacity="1"
baner3p.style.marginTop="50px"
four.style.opacity="1"
indicator.style.left = "".concat(374, "px");
}
if(scrolltopTemp>=1700){
img5.style.transform="scale(1)"
baner4h1.style.opacity="1"
baner4p.style.opacity="1"
baner4p.style.marginTop="50px"
indicator.style.left = "".concat(491, "px");
}
}
</script>
学的反而越迷茫
有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
