目录
一、网页概述
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
3.JS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
六、更多推荐
欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html5+css+js：菜单栏、图片轮翻效果、注册页面、登录页面等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含10个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>千与千寻网</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script type="text/javascript" src="js/rotation.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<a href="index.html">千与千寻</a>
</div>
<div class="nav">
<a href="index.html">千寻首页</a>
<a href="view1.html">影片信息</a>
<a href="view2.html">剧情简介</a>
<a href="view3.html">人物简介</a>
<a href="view4.html">精彩剧照</a>
<a href="view5.html">影片细节</a>
<a href="view6.html">热门影评</a>
<a href="view7.html">影片意义</a>
<a href="register.html">粉丝注册</a>
<a href="login.html">快速登录</a>
</div>
<div id="focus" class="focus">
<ul id="focus_image" class="focus_image" >
<li class="current">
<a href="view1.html"><img src="images/focus1.jpg"/></a>
</li>
<li><a href="view2.html"><img src="images/focus2.jpg"/></a></li>
</ul>
<ul id="focus_button" class="focus_button">
<li class="on"></li>
<li></li>
</ul>
</div>
<div class="wrapper">
<div class="list">
<a href="view1.html"><img src="images/view4.12.jpg"/></a>
<h3><a href="view1.html">影片信息</a></h3>
<p><a href="view1.html">《千与千寻》是宫崎骏执导、编剧，柊瑠美、入野自由、中村彰男、夏木真理等配音，吉卜力工作室制作的动画电影。该片讲述了10岁的少女千寻和家人意外来到神灵异世界后，为了救爸爸妈妈和白龙，经历了很多磨难的故事。该片于2001年7月20日在日本上映，后于2019年6月21日在中国正式上映。</a></p>
</div>
<div class="list">
<a href="view2.html"><img src="images/view4.1.jpg"/></a>
<h3><a href="view2.html">剧情简介</a></h3>
<p><a href="view2.html">小女孩千寻和父母一起在森林里迷了路，走过了一条神秘的隧道之后进入了一小镇。奇怪的是整个镇子一个人也没有。千寻的父母看到有一处店铺里存放着大量新鲜的食物，按奈不住诱惑便疯狂地吃了起来。千寻却感觉这里令她很不安，看到父母只顾着吃，她只得自己到别处转悠转悠。。。。。。</a></p>
</div>
<div class="list">
<a href="view3.html"><img src="images/view4.8.jpg"/></a>
<h3><a href="view3.html">人物简介</a></h3>
<p><a href="view3.html">宫崎骏老先生的每一部动画都是用唯美诗意的手法去表达深刻黑暗的内涵，这一点在《千与千寻》中尤为明显。《千与千寻》对于小孩子，是千寻的探险之旅；对成人，是一次反思和自省，这用孩子的的语言和画面，给成人讲故事。宫崎骏在告诉我们，成人和孩子的区别，孩子身上那份可贵的清醒和纯真。</a></p>
</div>
<div class="line">
<a href="view4.html"><img src="images/view4.4.jpg"/></a>
<h3><a href="view4.html">精彩剧照</a></h3>
<p><a href="view4.html">《千与千寻》不论是画面还是剧情，这部在18年前就已经上映的经典动画仍然引起了很多人的共鸣。很多人都觉得宫崎骏的动画看上去非常温馨舒服，但是具体是为什么也说不太上来，最近有人在网上曝出了一组《千与千寻》的画面配色表，看到这些配色表，我们才知道宫崎骏和工作室的人们对这部动画是有多用心。《千与千寻》采用电脑数位技术来制作画面。吉卜力先手工描绘场景画面，再将完成的图稿扫描至电脑中制作成动画效果。色彩方面有使用IMAGICA所开发的“Color Management System”，增加画面制作上的可用色数。</a></p>
<p><a href="view4.html">动画配乐为宫崎骏指定的作曲家久石让负责的，在东京墨田区“すみだトリフォニーホール”录制。创作中久石让认为在影片开头不必像一般电影用盛大的配乐开场、可以只用单一的钢琴演奏来描绘出千寻的心情。</a></p>
</div>
<div class="item">
<a href="view5.html"><img src="images/view4.6.jpg"/></a>
<h3><a href="view5.html">影片细节</a></h3>
<p><a href="view5.html">《千与千寻》影片细节刻画的非常丰富，每一个场景都富含深意，在现实世界中四季盛开的花，在“这里”同时间开放。里面有杜鹃、梅花、山茶花等，象征着它是一个不可思议的世界。每一个画面都力求真实为了真实描绘白龙吞咽药丸一幕，团队特拍摄金毛犬献牙、咬合视频，在创作时进行反复观看。每一个物件都精心选择电影开场干子搬家到新学校，手中拿着旧同学送的香豌豆花，其花语是:永远的离别。</a></p>
<p><a href="view5.html">每一个神情都极富真实感当小宝宝发现婆婆没有认出自己后，先是忧伤，然后流露出恼怒的眼神。，尽管是“小”人物，仍被赋予丰富的形象设计。每一个配乐都专属定制片中无脸男、汤婆婆、白龙等人物都拥有专属的音乐，而浴室雇员欢迎无脸男的舞曲，更是由宫崎骏亲自撰写，有特别的情感。</a></p>
</div>
<div class="list">
<a href="view6.html"><img src="images/view4.3.jpg"/></a>
<h3><a href="view6.html">热门影评</a></h3>
<p><a href="view6.html">《千与千寻》一直以为是两个人的名字，结果是一个人的，前一个是被给予的名字，后一个是被剥夺的。这个故事其实是属于两个名字的，琥珀川与千寻。宫崎俊有着美丽的幻想，他给你的比你想要的还要好。好，伴随着苦难，却不伴随着虚假。</a></p>
</div>
<div class="list">
<a href="view6.html"><img src="images/view4.9.jpg"/></a>
<h3><a href="view6.html">粉丝评价</a></h3>
<p><a href="view6.html">《千与千寻》传达出作者对于社会生活和关系的这样一种认知：生命力的发掘来源于与社会的沟通，互助和关爱是打破孤独、寻回自我的钥匙。千寻的神幻历险是如此的平实，以至于每个成年人都能从她的泪水和欢笑中看见自己的童年回忆。</a></p>
</div>
<div class="list">
<a href="view7.html"><img src="images/view4.11.jpg"/></a>
<h3><a href="view7.html">影片意义</a></h3>
<p><a href="view7.html">《千与千寻》电影的寓意是生活中有着形形色色的人，保持自己心中那份善良，携带着朋友和家人给你的帮助和爱，你终将成功。千与千寻里有很多善良可爱的人，那些或好或坏的人组成一个充满温馨的故事。宫崎骏的动漫往往都体现着那种魅力，每一个人都是活的。</a></p>
</div>
</div>
<div class="footer">
Copyright @ 2021 qianyuqianxun.com All Rights Reserved. 千与千寻网 版权所有
</div>
</div>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:12px;font-family:"Microsoft YaHei";color:#333;background-color:#2a97b6;
}
a{color:#666;text-decoration:none;cursor:pointer;
}
a:hover{color:#2a97b6;
}
.container{width:1000px;margin:0 auto;overflow:hidden;
}
.header{float:left;width:1000px;height:110px;line-height:110px;font-size:42px;text-align:center;
}
.header a{color:#fff;
}
.nav{float:left;width:1000px;height:40px;line-height:36px;margin-bottom:20px;font-size:14px;font-weight:bold;background-color:#cd5a55;border:2px solid #fff;border-radius:5px;overflow:hidden;
}
.nav a{margin:0 26px 0 15px;color:#fff;
}
.nav a:nth-last-child(1){margin-right:0;
}
.focus{float:left;position:relative;width:1000px;height:460px;margin-bottom:20px;border:2px solid #fff;border-radius:5px;overflow:hidden;
}
.focus_image{float:left;width:1000px;height:460px;list-style:none;
}
.focus_image li{float:left;width:1000px;height:460px;display:none;
}
.focus_image li.current{display:block;
}
.focus_image li img{float:left;width:1000px;height:460px;
}
.focus_button{position:absolute;bottom:24px;right:415px;width:100px;height:45px;padding-top:20px;list-style:none;
}
.focus_button li{float:left;width:20px;height:6px;margin-left:10px;background-color:#fff;cursor:pointer;
}
.focus_button li.on{background-color:#2a97b6;
}
.wrapper{float:left;width:1000px;padding-bottom:20px;background-color:#fff;border:2px solid #503b4a;border-radius:5px;overflow:hidden;
}
.wrapper h3 a{color:#2a97b6;
}
.wrapper p a{color:#777;
}
.list{float:left;width:308px;margin:20px 5px 0 15px;
}
.list img{float:left;width:308px;height:220px;
}
.list h3{float:left;width:308px;height:30px;line-height:30px;margin-top:8px;font-size:16px;
}
.list p{float:left;width:308px;line-height:25px;
}
.line{float:left;width:965px;margin:20px 0 0 15px;
}
.line img{float:left;width:310px;height:220px;
}
.line h3{float:right;width:640px;height:30px;line-height:30px;font-size:16px;
}
.line p{float:right;width:640px;line-height:26px;margin-top:5px;
}
.item{float:left;width:965px;margin:20px 0 5px 15px;
}
.item img{float:right;width:310px;height:220px;
}
.item h3{float:left;width:640px;height:30px;line-height:30px;font-size:16px;
}
.item p{float:left;width:640px;line-height:26px;margin-top:5px;
}
.info{float:left;width:1000px;padding-bottom:10px;
}
.info h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;font-size:16px;font-weight:bold;color:#2a97b6;text-align:center;
}
.info img{float:left;width:304px;height:475px;margin:20px 0 0 20px;
}
.info dl{float:left;width:309px;margin:15px 0 0 20px;
}
.info dl dt{float:left;width:80px;height:40px;line-height:40px;border-bottom:1px dotted #cccccc;
}
.info dl dd{float:left;width:224px;height:40px;line-height:40px;border-bottom:1px dotted #cccccc;
}
.plot{float:left;width:1000px;padding-bottom:10px;
}
.plot h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;font-size:16px;font-weight:bold;color:#2a97b6;text-align:center;
}
.plot img{float:left;width:900px;margin:20px 0 20px 50px;
}
.plot p{float:left;width:900px;line-height:27px;margin-left:50px;font-size:13px;text-indent:25px;
}
...
3.JS
代码如下（节选示例）：
window.οnlοad=function()
{
function getIdName(id,tagName)
{
if(tagName!=0)
{
return document.getElementById(id).getElementsByTagName(tagName);
}
else
{
return document.getElementById(id);
}
}
function rotation(json)
{
var that;
var start=0;
var index=0;
var timer=null;
var option={
li:"li", //默认用li包裹
wrapperId:"", //最外面 id
imageId:"", //图片外面id
buttonId:"", //按钮外面id
ms:4000 //多少毫秒切换一张,默认4000毫秒
}
for(var i in option)
{
if(json[i]!=undefined)
{
option[i]=json[i];
}
}
var wrapper=getIdName(option.wrapperId,0);
var images=getIdName(option.imageId,option.li);
var buttons=getIdName(option.buttonId,option.li);
function scrollImage(that)
{
if(that>=0)
{
index=that;
}
else
{
if(start==0)
{
index++;
}
else
{
index--;
start=0;
}
}
if(index>=buttons.length) index=0;
if(index<0) index=buttons.length-1;
for(var j=0;j<buttons.length;j++)
{
images[j].className="";
buttons[j].className="";
}
images[index].className="current";
buttons[index].className="on";
}
images[index].className="current";
buttons[index].className="on";
for(var i=0;i<buttons.length;i++)
{
buttons[i].index=i;
buttons[i].οnclick=function()
{
that=this.index;
scrollImage(that);
}
}
timer=setInterval(scrollImage,option.ms);
wrapper.οnmοuseοver=function()
{
clearInterval(timer);
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
