目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
5000+网页案例完整代码，主题涵盖30+种类型:
一、网页简介
本实例应用html5+css3+js： 导航菜单、图片飞入效果、鼠标悬停图片放大效果等。适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含2个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FILM</title>
<link rel="icon" href="./font/marvel.png" type="image/x-icon" />
<link rel="stylesheet" href="./assets/animate.css">
<link rel="stylesheet" href="./assets/reset.css">
<link rel="stylesheet" href="./css/film.css">
</head>
<body>
<div class="box">
<ul class="animated lightSpeedIn nav">
<li>
<a href="hero.html">
<img src="./font/marvel.png" alt="logo">
</a>
</li>
<li id="li_btn">
<a href="hero.html">
英雄
</a>
<ul id="nav_two" class=" nav_two">
<li class="animated zoomIn " id="thor">Thor</li>
<li class="animated zoomIn " id="hulk">Hulk</li>
<li class="animated zoomIn " id="widow">Widow</li>
</ul>
</li>
<li>
<a href="film.html">
电影
</a>
</li>
</ul>
<div id="con" class="con">
<ul id="one" class="animated zoomIn">
<li>
<img src="./img/ironman1.jpg" alt="ironman">
<span>钢铁侠</span>
</li>
<li>
<img src="./img/spider1.jpg" alt='spiderman'>
<span>蜘蛛侠</span>
</li>
<li>
<img src="./img/thor1.jpg" alt='Thor'>
<span>雷神</span>
</li>
<li>
<img src="./img/avengers1.jpg" alt='avengers'>
<span>复仇者联盟</span>
</li>
</ul>
<ul id="two" class="animated zoomIn">
<li>
<img src="./img/captain1.jpg" alt="captain">
<span>美国队长</span>
</li>
<li>
<img src="./img/galaxy1.jpg" alt="galaxy">
<span>银河拯救队</span>
</li>
<li>
<img src="./img/deadpool.jpg" alt="deadpool">
<span>死侍</span>
</li>
<li>
<img src="./img/ant1.jpg" alt="antman">
<span>蚁人</span>
</li>
</ul>
<ul>
<li>
<img src="./img/marvel.jpg" alt="marvel">
<span>惊奇队长</span>
</li>
</ul>
<!-- 弹窗 -->
<ul id="ironman" class="pop animated zoomIn">
<li>
<img src="./img/ironman1.jpg" alt="钢铁侠1">
<span>钢铁侠</span>
</li>
<li>
<img src="./img/ironman2.jpg" alt="钢铁侠2">
<span>钢铁侠2</span>
</li>
<li>
<img src="./img/ironman3.jpg" alt="钢铁侠3">
<span>钢铁侠3</span>
</li>
</ul>
<ul id="spiderman" class="pop animated zoomIn ">
<li >
<img src="./img/spider1.jpg" alt="蜘蛛侠:英雄归来">
<span>
蜘蛛侠1
</span>
</li>
<li >
<img src="./img/spider2.jpg" alt="蜘蛛侠:英雄远征">
<span>蜘蛛侠2</span>
</li>
<li >
<img src="./img/superspider1.jpg" alt="超凡蜘蛛侠">
<span>超凡蜘蛛侠</span> </li>
<li >
<img src="./img/superspider2.jpg" alt="超凡蜘蛛侠2">
<span>超凡蜘蛛侠2</span> </li>
<li >
<img src="./img/oldspider1.jpg" alt="蜘蛛侠">
<span>蜘蛛侠</span> </li>
<li >
<img src="./img/oldspider2.jpg" alt="蜘蛛侠2">
<span>蜘蛛侠2</span> </li>
<li >
<img src="./img/oldspider3.jpg" alt="蜘蛛侠3">
<span>蜘蛛侠3</span> </li>
</ul>
<ul id="Thor" class="pop animated zoomIn">
<li>
<img src="./img/thor1.jpg" alt="雷神">
<span>雷神</span>
</li>
<li>
<img src="./img/thor2.jpg" alt="雷神2">
<span>雷神2</span>
</li>
<li>
<img src="./img/thor3.jpg" alt="雷神3">
<span>雷神3</span>
</li>
</ul>
<ul id="avengers" class="pop animated zoomIn">
<li><img src="./img/avengers1.jpg" alt="复联1"><span>复联1</span></li>
<li><img src="./img/avengers2.jpg" alt="复联1"><span>复联2</span></li>
<li><img src="./img/avengers3.jpg" alt="复联1"><span>复联3</span></li>
<li><img src="./img/avengers4.jpg" alt="复联1"><span>复联4</span></li>
</ul>
<ul id="captain" class="pop animated zoomIn">
<li> <img src="./img/captain1.jpg" alt="美队"> <span>美国队长1</span> </li>
<li> <img src="./img/captain2.jpg" alt="美队"> <span>美国队长2</span> </li>
<li> <img src="./img/captain3.jpg" alt="美队"> <span>美国队长3</span> </li>
</ul>
<ul id="galaxy" class="pop animated zoomIn">
<li> <img src="./img/galaxy1.jpg" alt="银河拯救队"> <span>银河拯救队</span> </li>
<li> <img src="./img/galaxy2.jpg" alt="银河拯救队2"> <span>银河拯救队2</span> </li>
</ul>
<ul id="deadpool" class="pop animated zoomIn">
<li> <img src="./img/deadpool.jpg" alt="死侍"> <span>死侍</span> </li>
<li> <img src="./img/deadpool2.jpg" alt="死侍2"> <span>死侍2</span> </li>
</ul>
<ul id="antman" class="pop animated zoomIn">
<li> <img src="./img/ant1.jpg" alt="蚁人"> <span>蚁人</span> </li>
<li> <img src="./img/ant2.jpg" alt="蚁人2"> <span>蚁人2</span> </li>
</ul>
</div>
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/film.js"></script>
</html>
...
2.CSS
代码如下（节选示例）：
body {
width: 100%;
height: 100%;
overflow-x: hidden;
background-color: #0e100f;
}
body a {
color: #fff;
text-decoration: none;
}
body::-webkit-scrollbar {
display: none;
}
body .nav {
z-index: 999;
width: 50%;
display: flex;
justify-content: space-evenly;
position: absolute;
top: 1.5%;
font-weight: bolder;
}
body .nav > li {
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
body .nav > li img {
width: 50%;
}
body .nav > li:nth-child(1) {
font-size: 25px;
}
body .nav > li:hover {
cursor: pointer;
font-size: 25px;
}
body .nav .nav_two {
display: none;
color: lightgray;
font-size: 15px;
}
body .nav .nav_two li {
height: 50px;
}
body .nav .nav_two li:hover {
font-size: 20px;
}
body {
color: #ffffff;
}
body .con {
position: relative;
margin: 200px auto;
}
body .con ul {
display: flex;
justify-content: space-around;
margin-bottom: 150px;
}
body .con ul li {
z-index: 999;
display: inline-block;
width: 285px;
height: 460px;
text-align: center;
font-weight: bolder;
padding: 10px;
cursor: pointer;
}
body .con ul li:hover {
color: #000000;
background-color: #ffffff;
transform: scale(1.1);
transition: background-color 1.5s, color 1.5s, transform 0.5s;
}
body .con ul li:hover span {
color: #000000;
}
body .con ul li img {
width: 100%;
margin-bottom: 10px;
}
body .con ul li span {
color: #ffffff;
}
body .con .pop {
display: none;
width: 80%;
z-index: 999;
background-color: #000000;
position: absolute;
top: 10%;
left: 10%;
}
body .con .pop span:nth-child(1) {
cursor: pointer;
position: absolute;
right: 25px;
top: 25px;
}
...
3.JS
代码如下（节选示例）：
$(function () {
let dom = {
global: $(window),
con: $('#con'),
ironman: $('#ironman')
};
// 控制每个系列弹窗的显示或者隐藏状态
let status = {
ironman: false,
spiderman: false,
Thor: false,
avengers: false,
captain: false,
galaxy: false,
deadpool: false,
antman: false,
marvel: false
};
let feature = {
// 改变状态
changeStatus(name) {
status[name] = !status[name];
},
// 通过检查状态来决定点击弹窗隐藏还是显示
checkStatus(domName) {
if (status[domName] == true) {
$('#' + domName).show();
} else {
$('#' + domName).hide();
}
}
};
dom.global.on('click', function (e) {
let msg = e.target.alt;
console.log(msg);
if (msg != undefined) {
feature.changeStatus(msg);
feature.checkStatus(msg);
} else {
for (let i in status) {
if (status[i] == true) {
feature.changeStatus(i);
feature.checkStatus(i);
}
}
}
});
});
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流
标签：css3,Web,漫威,网页,color,body,li,nav,con From： https://blog.csdn.net/VX_L_5201314168/article/details/144540846