最近一周在学习HTML、CSS、JavaScript，HTML+CSS学习一天，js学习了一天，说实话，头疼得很，学习新东西真的需要实践，很多时候，你学的术语绕来绕去，还不如亲手做一下实践，原理一下子就明白了很多。
很多知识点学习了，实际上工作中常用的就是那么几个，理解不理解不影响使用。废话不多说，跟着我这个思路做一遍，可以让你入门前端工程师。
实验效果图
头部：
中间部分：
底部部分：
特效：
鼠标悬停有下拉菜单出现
特效：
浏览器有下拉20像素，出现悬停宽口，点击返回顶部。
特效：
中间的图片进行轮播
HTML代码
好了，下面是html代码：
每段代码都有注释。
<!DOCTYPE html>
<html>
<!-- 这是头部信息 -->
<head>
<meta charset="utf-8">
<title>模仿的网页</title>
<!-- 网站标题 -->
<link rel="stylesheet" type="text/css" href="https://www.ctyun.cn/portal/link.html?target=test10.css" />
<!-- 引入css样式表 -->
</head>
<body>
<!-- 使用warrap进行整个页面的包裹 -->
<div class="warrap">
<!-- 这是头部的区域 -->
<div class="top_top">
<div class="logo">
<!-- 这是logo的区域 -->
<img src="01%20HTML/logo.png" width=200px height=55px />
<!-- logo图标 -->
</div>
<!-- 这是导航菜单 -->
<div class="navList">
<ul >
<!-- 使用ul列表制作 -->
<li class="myLi01" id="ulfirst" onmouseover="xialahanshu('ulfirst','ulsecond');" ><a href="https://www.ctyun.cn/portal/link.html?target=%23" >精品课</a>
<ul class="myLi0101" id="ulsecond">
<!-- ul列表里面嵌套一层列表 -->
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">精品课</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">精品课</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">精品课</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">精品课</a></li>
</ul>
</li>
<!-- 第二层列表 -->
<li class="myLi01" id="xl02" onmouseover="xialahanshu('xl02','xl0202');"><a href="https://www.ctyun.cn/portal/link.html?target=%23">在线班</a>
<ul class="myLi0101" id="xl0202">
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">在线班</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">在线班</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">在线班</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">在线班</a></li>
</ul>
</li>
<!-- 第三层列表 -->
<li class="myLi01" id="xl03" onmouseover="xialahanshu('xl03','xl0303');"><a href="https://www.ctyun.cn/portal/link.html?target=%23">教程库</a>
<ul class="myLi0101" id="xl0303">
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">教程库</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">教程库</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">教程库</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">教程库</a></li>
</ul>
</li>
<!-- 第四层列表 -->
<li class="myLi01" id="xl04" onmouseover="xialahanshu('xl04','xl0404');"><a href="https://www.ctyun.cn/portal/link.html?target=%23">技术组</a>
<ul class="myLi0101" id="xl0404">
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">技术组</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">技术组</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">精品课</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">技术组</a></li>
</ul>
</li>
<!-- 第五层列表 -->
<li class="myLi01" id="xl05" onmouseover="xialahanshu('xl05','xl0505');"><a href="https://www.ctyun.cn/portal/link.html?target=%23">面授班</a>
<ul class="myLi0101" id="xl0505">
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">精品课</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">精品课</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">精品课</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">精品课</a></li>
</ul>
</li>
</ul>
</div>
<!-- 登陆注册按钮的区域 -->
<div class="login">
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">登陆</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">注册</a></li>
</div>
</div>
<!-- 轮播图区域 -->
<div class="lunbo" id="lunbotu01">
<!-- 嵌套三个div -->
<div class="banner picactive"><a href="https://www.ctyun.cn/portal/link.html?target=%23"><img src="02%20CSS/image/banner1.jpg" width="100%" height="400px" /></a></div>
<div class="banner picnone"><a href="https://www.ctyun.cn/portal/link.html?target=%23"><img src="02%20CSS/image/banner2.jpg" width="100%" height="400px"/></a></div>
<div class="banner picnone"><a href="https://www.ctyun.cn/portal/link.html?target=%23"><img src="02%20CSS/image/banner3.jpg" width="100%" height="400px" /></a></div>
</div>
<!-- 内容区域 -->
<div class="content_01">
<!-- 第一个内容块 -->
<div class="c01">
<h1>公开课</h1>
<p>随时随地，免费听课</p>
</div>
<!-- 内容的第二部分 -->
<div class="c02">
<div class="c022"><img src="02%20CSS/image/course1.jpg" width="268px" height="150px" />
<p>WIFI攻防哪些事情</p>
</div>
<div class="c022"><img src="02%20CSS/image/course2.jpg" width="268px" height="150px"/>
<p>Metasploit渗透测试入门课</p>
</div>
<div class="c022"><img src="02%20CSS/image/course3.jpg" width="268px" height="150px"/>
<p>防火墙入门导论</p>
</div>
<div class="c022"><img src="02%20CSS/image/course4.jpg" width="268px" height="150px"/>
<p>Web安全入门导论</p>
</div>
</div>
<!-- 内容第三部分 -->
<div class="c03">
<a href="https://www.ctyun.cn/portal/link.html?target=%23">更多公开课</a>
</div>
</div>
<!-- 一样的是内容区域 -->
<div class="content_01">
<!-- 内容第一个部分 -->
<div class="c01">
<h1>精品课</h1>
<p>实战精品课程，从理论到实战</p>
</div>
<!-- 内容第二部分 -->
<div class="c02">
<div class="c022"><img src="02%20CSS/image/course1.jpg" width="268px" height="150px" />
<p>WIFI攻防哪些事情</p>
</div>
<div class="c022"><img src="02%20CSS/image/course2.jpg" width="268px" height="150px"/>
<p>Metasploit渗透测试入门课</p>
</div>
<div class="c022"><img src="02%20CSS/image/course3.jpg" width="268px" height="150px"/>
<p>防火墙入门导论</p>
</div>
<div class="c022"><img src="02%20CSS/image/course4.jpg" width="268px" height="150px"/>
<p>Web安全入门导论</p>
</div>
</div>
<!-- 内容第三部分 -->
<div class="c03">
<a href="https://www.ctyun.cn/portal/link.html?target=%23">更多公开课</a>
</div>
</div>
<!-- 内容的部分 -->
<div class="content_01">
<!-- 中间内容部分 -->
<div class="c01">
<h1>在线班</h1>
<p>名师一对一 | 专属班级群 | 闯关式学习</p>
</div>
<div class="c02">
<div class="c022"><img src="02%20CSS/image/course1.jpg" width="268px" height="150px" />
<p>WIFI攻防哪些事情</p>
</div>
<div class="c022"><img src="02%20CSS/image/course2.jpg" width="268px" height="150px"/>
<p>Metasploit渗透测试入门课</p>
</div>
<div class="c022"><img src="02%20CSS/image/course3.jpg" width="268px" height="150px"/>
<p>防火墙入门导论</p>
</div>
<div class="c022"><img src="02%20CSS/image/course4.jpg" width="268px" height="150px"/>
<p>Web安全入门导论</p>
</div>
</div>
<div class="c03">
<a href="https://www.ctyun.cn/portal/link.html?target=%23">更多公开课</a>
</div>
</div>
<!-- 底部版权部分 -->
<div class="footer_buttom">
<!-- 文字部分 -->
<div class="wenzi">Copyright © 拼客学院 All Rights Reserved</div>
<div class="tubiao">
<!-- 图片部分 -->
<img src="02%20CSS/image/sina.png"/>
<img src="02%20CSS/image/qq.png"/>
<img src="02%20CSS/image/wechat.png"/>
</div>
</div>
</div>
<!-- 返回顶部的按钮 -->
<div class="fanhuidingbu" id="fanhui" onclick="dianji()">
<!-- 使用button制作 -->
<button>返回顶部</button>
</div>
</body>
<!-- 引入js文件 -->
<script src="test10.js"></script>
</html>
CSS代码
下面是css代码
都有注释：
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
/* 定义通用的样式 */
.warrap{
/* border: 1px solid red; */
width: 1200px;
margin: 0 auto;
}
/* 限定宽度,样式居中 */
.top_top{
/* border: 1px solid black; */
height: 60px;
background-color: #000000;
width: 100%;
color: #747474;
}
/* 头部区域样式 */
.top_top .logo{
float: left;
/* border: 1px solid red; */
margin-left: 15px;
cursor: pointer;
}
/* 头部logo区域样式 */
.top_top .navList{
float: left;
/* border: 1px solid red; */
margin-left: 30px;
}
/* 导航列表样式 */
.top_top .navList li a{
color: #747474;
display: block;
font-size: 18px;
line-height: 60px;
padding: 0 15px;
}
/* 链接标签样式 */
.top_top .navList li a:hover{
color: #F0FFFF;
background-color: #555555;
}
/* 链接悬停样式 */
.top_top .login{
float: right;
/* border: 1px solid red; */
}
/* 登陆区域样式 */
.top_top .login li{
display: inline-block;
margin-right: 0px;
}
/* li样式 */
.top_top .login li a{
color: #747474;
display: inline-block;
font-size: 18px;
line-height: 60px;
padding: 0 25px;
}
/* 增加距离,设置a链接样式 */
.top_top .login li a:hover{
color: #F0FFFF;
background-color: #555555;
}
/* 设置悬停样式 */
.lunbo{
/* border: 1px solid blue; */
}
/* 设置轮播图区域的样式 */
.lunbo .picactive{
display: block;
}
/* 轮播图片显示 */
.lunbo .picnone{
display: none;
}
/* 轮播图片隐藏 */
.content_01 {
/* border: 1px solid blue; */
width: 100%;
text-align: center;
}
/* 内容居中 */
.content_01 .c01{
padding: 30px 0;
}
/* 内边距 */
.content_01 .c01 p{
margin-top: 5px;
padding-bottom: 30px;
color: #747474;
}
/* 调整距离 */
.content_01 .c02{
width: 100%;
/* border: 1px solid #00FF00; */
height: 200px;
}
/* 设置宽高 */
.content_01 .c02 .c022{
float: left;
margin-left: 20px;
/* border: 1px solid #747474; */
}
/* 设置浮动 */
.content_01 .c02 .c022 p{
color: #747474;
}
/* 设置颜色 */
.content_01 .c03 a{
color: #747474;
display: inline-block;
font-size: 18px;
padding: 100px 0;
}
/* 设置a链接样式 */
.footer_buttom{
color: #F0FFFF;
background-color: #000000;
height: 50px;
}
/* 底部样式 */
.footer_buttom .wenzi{
float: left;
padding: 15px 20px;
}
/* 设置浮动 */
.footer_buttom .tubiao{
float: right;
margin-right: 10px;
padding: 10px 10px;
}
/* 设置浮动,设置距离 */
.footer_buttom .tubiao img{
display: inline-block;
padding: 0 10px;
opacity: 0.5;
}
/* 设置不透明度 */
.footer_buttom .tubiao img:hover{
cursor: pointer;
opacity: 1;
}
/* 设置图片悬停样式,透明度为1 */
.fanhuidingbu{
width: 100px;
height: 60px;
text-align: center;
position: fixed;
bottom: 80px;
right: 30px;
z-index: 999;
display: none;
}
/* 设置返回按钮,设置fixed定位,设置距离,设置z-index距离 */
.fanhuidingbu button{
display: block;
width: 100%;
height: 100%;
font-size: 18px;
font-weight: bold;
border-radius: 15px;
background-color: #747474;
}
/* 设置button的样式,圆角,背景颜色 */
.fanhuidingbu button:hover{
background-color: #949494;
cursor: pointer;
}
/* 设置button悬停样式 */
.top_top .navList .myLi01{
/* border: 1px solid red; */
}
/* 设置li的样式 */
.top_top .navList .myLi01 .myLi0101{
/* border: 1px solid chartreuse; */
display: none;
z-index: 999;
position: fixed;
background-color: #212121;
}
/* 默认隐藏按钮,返回按钮的样式 */
.navList .myLi01{
float: left;
}
/* 设置浮动,水平排列 */
JavaScript代码
下面是JavaScript代码
代码都有注释
// 纯js代码，没有使用js库。
// 轮播图
var index = 0
// 设置图片顺序值
var timer = 0
// 设置定时器
var banner = document.getElementById('lunbotu01');
// 获取轮播图的对象
var pics = document.getElementById('lunbotu01').getElementsByTagName('div')
// 获取轮播图对象的div数组
var len = pics.length;
// 获取数组的数量，即轮播图数量
// 初始化，设置轮播图片的css样式
function setImg(){
// 通过for循环进行读取数组
for( var i = 0; i < len; i++ ){
// 全部进行样式设置，默认是隐藏
pics[i].className = 'banner picnone';
}
// 当前的index值的图片显示出来
pics[index].className = 'banner picactive';
}
// 设置播放函数
function playImg(){
// 设置一个定时器变量，获取定时器的情况
timer = setInterval(
function(){
// 图片的值进行加一
index = index + 1;
// 使用判断语句，对index值做限制
if(index >= len){
// 如果超过值，重新开始
index = 0;
}
// 进行样式的设置
setImg();
// 样式设置好了之后，会进行显示
},2500)
// 设置2.5秒进行循环
}
// 设置停止播放函数
function stopImg(){
// 进行判断
if(timer){
// 结束上一个定时器变量，也就结束轮播
clearInterval(timer);
}
}
// 设置主函数
function mainImg(){
// 鼠标移动到上面，停止播放
banner.onmouseover = function(){
stopImg()
}
// 鼠标移开，开始执行播放函数
banner.onmouseout = function(){
playImg()
}
// 一开始就执行这个空函数
banner.onmouseout();
}
// 运行主函数
mainImg();
// 下拉菜单
function xialahanshu(a , b ){
// 有两个参数，分别获取当前的对象
var f = document.getElementById(a);
var s = document.getElementById(b);
// 第一个列表的鼠标放在上面，设置css样式，让其显示出来
f.onmouseover = function(){
s.style.display = "block";
}
// 第一个列表的鼠标移开之后，设置css样式，让其隐藏起来
f.onmouseout = function(){
s.style.display = 'none';
}
}
//返回顶部
window.onscroll = function(){
// 如果出现了滚动条，就执行这个函数
fanhuihanshu()
}
// 返回顶部的函数
function fanhuihanshu() {
// 进行滚动条限制，超过20px的时候，或者是文档的内容向下移动20px，就设置css样式，让其出来
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("fanhui").style.display = "block";
} else {
// 如果不是，就设置css样式，让其隐藏起来
document.getElementById("fanhui").style.display = "none";
}
}
// 按钮点击函数
function dianji(){
// 如果用户点击了，让浏览器的滚动条消失，距离为0
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
图片大家可以使用其他的图片代替。
至此，前端的入门已经结束。
如有问题，可留言交流。