目录
一、网页概述
本实例应用html+css+js： 导航菜单、图片轮翻、三级页面、下拉菜单、、鼠标滑动特效、视频、悬浮菜单等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含11个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no;">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
<script src="js/html5shiv.min-3.7.3.js"></script>
<script src="js/respond.min1.4.2.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
<title>健康管理有限公司 </title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<div class="mainFilter"></div>
<div class="wrapper">
<div class="header">
<div class="wrap">
<div class="logo"><a href="index.html"><img src="picture/logo.png"></a></div>
<div class="menuBtn"><span class="line1"></span><span class="line2"></span><span class="line3"></span></div>
<div class="nav">
<div class="tit">MENU</div>
<ul>
<li class="on"><a href="index.html">首页</a></li>
<li>
<a href="gushi.html">走进爱萌伊人</a>
<div class="sub">
<ul>
<li><a href="gushi.html">品牌故事</a></li>
<li><a href="wenhua.html">品牌文化</a></li>
<li><a href="rongyu.html">资质荣誉</a></li>
<li><a href="news.html">最新资讯</a></li>
</ul>
</div>
</li>
<li>
<a href="product.html">明星产品</a>
<div class="sub">
<ul>
<li><a href="product.html">单品介绍</a></li>
<li><a href="product.html">套装介绍</a></li>
</ul>
</div>
</li>
<li>
<a href="ketang.html">肌肤管理</a>
<div class="sub">
<ul>
<li><a href="ketang.html">美丽课堂</a></li>
<li><a href="jieda.html">问题解答</a></li>
</ul>
</div>
</li>
<li>
<a href="anli.html">蜕变心声</a>
<div class="sub">
<ul>
<li><a href="anli.html">肌肤案例</a></li>
<li><a href="xinsheng.html">蜕变心声</a></li>
</ul>
</div>
</li>
<li>
<a href="shipin.html">精彩瞬间</a>
<div class="sub">
<ul>
<li><a href="shipin.html">宣传视频</a></li>
</ul>
</div>
</li>
<li>
<a href="contact.html">联系我们</a>
<div class="sub">
<ul>
<li><a href="contact.html">联系我们</a></li>
<li><a href="partner.html">城市合伙人</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
...
2.CSS
代码如下（节选示例）：
body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,a,img{margin:0; padding:0;border:none;}
body{background:#fff;font-family:"Microsoft YaHei","微软雅黑",arial;font-size:12px;color:#333333;font-weight:normal;}
textarea,input{font-family:"Microsoft YaHei","微软雅黑",arial;color: #333333;font-size:12px;padding:0;margin:0;outline: none;}
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
input:focus,textarea:focus{outline:none;}
ol,ul,li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px;color:#333333;font-weight:normal;}
a,a:link,a:visited,a:focus,a:active,a:hover{font-family:"Microsoft YaHei","微软雅黑",arial;color:#333333;font-size:12px;text-decoration:none;}
a:hover{color:#901f71;}
.mainFilter{
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background: url(../images/mainfilter_bg.png);
display: none;
}
.wrapper{
width: 100%;
}
.wrap{
width: 1200px;
margin: 0 auto;
}
.row{
width: 100%;
clear: both;
}
.row:after{
content:"";
height:0;
display:block;
clear:both
}
.article{
line-height: 30px;
font-size: 14px;
color: #666666;
text-align: justify;
}
.article img{
max-width: 100%;
}
.header{
width: 100%;
height: 100px;
position: fixed;
left: 0;
top: 0;
z-index: 99;
background: #fff;
box-shadow: 0px 1px 9px 0px #e6e6e6;
}
.header .logo{
width: 100px;
height: 69px;
text-align: center;
overflow: hidden;
margin-top: 16px;
float: left;
}
.header .logo img{
width: 100%;
}
.header .searchBox{
float: right;
margin-right: 6px;
margin-top: 38px;
position: relative;
}
.header .searchBox .searchBtn{
width: 25px;
height: 25px;
background: url(../images/searchbtn.gif) no-repeat center;
cursor: pointer;
}
.header .searchBox .searchBar{
width: 300px;
height: 40px;
position: absolute;
right: -9px;
top: 30px;
z-index: 5;
border: solid 2px #eee;
box-sizing: border-box;
display: none;
}
.header .searchBox .searchBar .inpu{
width: 258px;
height: 36px;
float: left;
}
.header .searchBox .searchBar .inpu input{
width: 100%;
height: 36px;
line-height: 36px;
padding: 0 10px;
box-sizing: border-box;
font-size: 14px;
color: #666;
}
...
3.JS
代码如下（节选示例）：
//导航下拉
$(function(){
if( $(window).width()>=1200 ){
navSubLeft();
$(".header .nav li").hover(
function(){
$(this).find(".sub").stop().slideDown(200);
navSubLeft();
},function(){
$(this).find(".sub").stop().slideUp(200);
}
);
}
});
$(window).resize(function(){
navSubLeft();
});
//子导航位置
function navSubLeft(){
var navList = $(".header .nav").children("ul").children("li");
var navLength = navList.length;
for(var i=0;i<navLength;i++){
var liLeft = navList.eq(i).offset().left;
var liWidth = navList.eq(i).width();
var offsetRight = ($(window).width()) - (navList.eq(i).offset().left);
var liRight = offsetRight - liWidth ;
var subLenght = navList.eq(i).find(".sub ul li").length;
var subWidth1 = navList.eq(i).find(".sub ul li").eq(0).width();
var subWidth2 = navList.eq(i).find(".sub ul li").eq(subLenght-1).width();
if( i >= (navLength-2) ){
navList.eq(i).find(".sub ul").css({"right":liRight+(liWidth/2)-(subWidth2/2),"left":"auto"});
}else{
navList.eq(i).find(".sub ul").css({"left":liLeft+(liWidth/2)-(subWidth1/2)});
}
}
}
//手机弹出菜单
$(function(){
if( $(window).width()<1200 ){
$(".header .menuBtn").click(function(){
$(".wrapper").toggleClass("shiftLeft");
$(".mainFilter").fadeToggle();
});
$(".mainFilter").click(function(){
$(".wrapper").removeClass("shiftLeft");
$(".mainFilter").fadeToggle();
});
}
});
//导航搜索
$(function(){
if( $(window).width()>=1200 ){
$(".header .searchBox .searchBtn").click(function(){
if( $(this).parents(".searchBox").find(".searchBar").is(":hidden") ){
$(this).parents(".searchBox").find(".searchBar").fadeIn(200);
$(this).parents(".searchBox").find(".searchBar .inpu input").focus();
}else{
$(this).parents(".searchBox").find(".searchBar").fadeOut(200);
}
});
$(window).scroll(function(){
if($(window).scrollTop()>100){
$(".header .searchBox .searchBar").fadeOut(200);
}
});
}
if( $(window).width()<1200 ){
$(".header .searchBox .searchBtn").click(function(){
if( $(this).parents(".searchBox").find(".searchBar").is(":hidden") ){
$(this).parents(".searchBox").find(".searchBar").fadeIn(200);
$(this).parents(".searchBox").find(".searchBar .inpu input").focus();
$(".header").addClass('on');
$(".mainFilter").fadeIn(200);
}else{
$(this).parents(".searchBox").find(".searchBar").fadeOut(200);
$(".header").removeClass('on');
}
});
$(".mainFilter").click(function(){
$(this).fadeOut(200);
$(".header .searchBox .searchBar").fadeOut(200);
$(".header").removeClass('on');
});
}
});
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。