目录
一、网页概述
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
3.JS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
六、更多推荐
欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例 样式齐全新颖
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导 网页定制 大学生课程作业辅导、毕设辅导 、网页模板源码 教程资料 技术咨询
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html+css+js： 导航菜单、三级页面、鼠标滑动特效 等。适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari 主流浏览器浏览。
二、网页文件
本网页实例共包含7 个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
迪斯尼公主
迪斯尼公主
"迪斯尼公主介绍。
基本信息 故事来源 动漫
"动漫"（animation & comic）在1996年以前在中国大陆并没有出现这个统一的概念，二者是分立而互有联系。此词的出现和推广，源于在1998年全中国第一家首先拔地而起的动漫资讯杂志《动漫时（ANIME COMIC TIME）》，因此"动漫"一词才得以出现并慢慢深入人心成为全公主档案迷常用的词汇和动画与漫画的总称。动漫就是建立在漫画和动画的基础上，因为如今两者的相似性把其归为一类，而产生的一个名词。 "动漫"一词首创则是源于1997年创刊的《漫友》杂志。
该片由迪士尼动画导演约翰·马斯克（John Musker）和罗恩·克莱门兹（Ron Clements）二人共同执导，他们曾一起导演过《小美人鱼》（The Little Mermaid）、《阿拉丁》（Aladdin）、《大力士》（Hercules）等经典迪士尼动画。为影片创作歌曲和音乐的是奥斯卡得主兰迪·纽曼（Randy Newman），他本人就是新奥尔良人，这次谱写新奥尔良地区特色的音乐自然不在话下。《公主与青蛙》由安尼卡·奥尼·萝丝、凯斯·大卫、詹妮弗·刘易斯、约翰·古德曼等幕后配音，于2009年12月11日上映 迪士尼的最新动画电影《公主和青蛙》对传统的童话来了一次完全的颠覆，对于这一点，导演兼编剧罗恩·克莱蒙兹说：“我们想把故事做得让人有眼前一亮的感觉。前几年的《魔法奇缘》里，对于传统王子公主的故事已经做出了一次勇敢的尝试，《魔法奇缘》的成功让我们感到有可能把这种理念延续下去，于是我们仍然选择了王子公主的题材进行再次创新，也许会有观众一开始对《公主和青蛙》感到不能接受，但我希望持有这种感觉的人能够看完整部电影，它一定会打消你的疑虑，事实上这部电影依然很‘迪士尼’创造着雅致的画廊。
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
*{ margin:0; padding:0;font-family:微软雅黑,Tahoma, Geneva, sans-serif; }
.zhuce{width:460px; height:300px; margin:auto; font-size:16px; color:#222;}
.subout{width:400px; height:50px; margin:auto; font-size:18px; color:#222;}
...
3.JS
代码如下（节选示例）：
// JavaScript Document
$(function() {
var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
var len = $("#focus ul li").length; //获取焦点图个数
var index = 0;
var picTimer;
//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = "
";
for(var i=0; i < len; i++) {
btn += "
}
btn += "
";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);
//为小按钮添加鼠标滑入事件，以显示相应的内容
$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
//上一页、下一页按钮透明度处理
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
//上一页按钮
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});
//下一页按钮
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});
//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$("#focus ul").css("width",sWidth * (len));
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000); //此4000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
}
});
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者 Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等 ，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
