⛵Get the source code and contact at the end of the article✈
Web front-end development technology
description Web design theme, DIV+CSS layout production, HTML+CSS web design final course assignment | | HTML final college student web design assignment, Web college student web page
-
HTML: structure
-
CSS: style
In terms of operation, html5 and css3 are used, and
basic knowledge such as div+css structure, form, hyperlink, floating, absolute positioning, relative positioning, font style, and reference video are adopted -
JavaScript: do interactive behavior with the user
Article directory
Front-end learning route
(1) html file: where index.html is the home page, and other html is the second-level page;
(2) css file: all css page styles, text scrolling, image zoom, etc.;
(3) js file: js realizes dynamic carousel special effects , form submission, click event, etc. (js code is used in web pages)
Basic structure of web page
(1) Homepage: The first page you see when you enter the webpage (LOGO, company name, navigation, banner, news, related information, bottom information, banner is generally 5) (2) Secondary page: After clicking to enter from the
homepage The page is called the second-level page
(3) Third-level page: the page clicked from the second-level page
Web page html : A web page is the basic element of a website and a platform for carrying various website applications.
In layman's terms, a website is a home page composed of web pages : the home page is the entry
page of a website, so it is often edited to make it easy to understand . The top or side area, also known as the navigation bar, plays the role of linking various pages in the site or software.
Web page footer : It is the area at the bottom of each page in the web page. Often used to display additional information. Such as author, record number, etc.
web demo
HTML structure code
<!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>
The more you learn, the more confused you become
It's normal to feel this way, because you haven't really been in the company, and you don't know how much you need to learn to be competent for the work assigned to you in the company. I can see from your statement that your foundation should still be very solid. There is definitely no problem following the full set of video tutorials on the Internet.
When you actually enter the company in the future and find that the difficulty and amount of work are only about 20% of your study period, you may sigh: So the work is nothing more than that.
This is normal, because most companies recruit you to work and write business, not to let you be a newcomer to develop the company structure. They are all ready-made things, what you have to do is to add bricks and tiles under the guidance of others and direct them hand in hand. At that time, I am afraid you will exclaim: This is it?
So, relax and enjoy your college time
—————————————————
learn more
Follow me | Like blog posts | Take you to increase your knowledge every day
