目录
欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html5+css3+js： 导航菜单、图片轮翻、三级页面、鼠标滑动特效、视频、悬浮菜单等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含9个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE HTML>
<html>
<head>
<meta name="renderer" content="webkit">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>义乌市上雅生物科技有限公司|上雅生物|上雅彩妆|莫菲|欧慕菲|幻彩星光系列|玻尿酸水光|</title>
<meta name="keywords" content="义乌市上雅生物科技有限公司|上雅生物|上雅彩妆|莫菲|欧慕菲|幻彩星光系列|玻尿酸水光|" />
<meta name="generator" content="中企视窗 网站+微信+手机站数据同步，技术领先！ 5.2.9" />
<link href="favicon.ico" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="css/global_ui.css" id="metuimodule" data-module ="10001" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/public_cn.css" />
<script src="js/jquery1.7.2.js" type="text/javascript"></script>
<script src="js/global_ui.js" type="text/javascript"></script>
<!--[if IE]>
<script src="js/html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<!--内置JS常用效果插件START-->
<LINK rel=stylesheet type=text/css href="css/zhongqi.css">
<script language="javascript" src="js/common.js"></script>
<!--内置JS常用效果插件END-->
<body>
<div id="innerContainer" style="background:none;"><!--网站内容开始-->
<!--头部SEO忧化START-->
<div style=" text-indent:-9999px; height:0px; overflow:hidden"></div>
<!--头部SEO忧化END-->
<header>
<div class="inner header">
<div class="top-logo">
<a href="index.html" title="义乌市上雅生物科技有限公司|上雅生物|上雅彩妆|莫菲|欧慕菲|幻彩星光系列|玻尿酸水光|" id="web_logo">
<img src="picture/1438583679.png" alt="义乌市上雅生物科技有限公司|上雅生物|上雅彩妆|莫菲|欧慕菲|幻彩星光系列|玻尿酸水光|" title="义乌市上雅生物科技有限公司|上雅生物|上雅彩妆|莫菲|欧慕菲|幻彩星光系列|玻尿酸水光|" />
</a>
</div>
<div class="header-nav-search"><!--<div id="websearch" class="flor mt10"><div class='search_2'><form method="POST" name="myform1" action="http://www.shangyachina.com/search/search.php?lang=cn" target="_self"><div class='searchBox'> <a href='javascript:' target='_self' class='f6 xskqy1x0'><span class='dpan' style='width:50px;'>整站搜索</span></a> <ul style='display: none;'> <li class='il' data-corner=''>整站搜索</li> <li class='il' data-corner='151'>产品展示</li> <li class='il' data-corner='152'>新闻资讯</li> </ul> <input value='' name='class1' class='hiddenIpt' type='hidden'></div><div class='flol'><input style='color: rgb(204, 204, 204);' name='searchword' class='fc xskqy1x0 xsk1x1' value='请输入搜索关键词！' onclick="this.value=''" type='text'></div><input type="hidden" name="lang" value='cn'/><input type="hidden" name="searchtype" value='0'/><input class='searchimage' type='image' src='templates/default/images/botton.jpg' /></form></div></div>-->
<nav><ul class="list-none">
<li id="nav_10001"><a href='index.html' title='首页' class='nav'><span>首页</span></a></li>
<li class="line"></li><li id='nav_1' ><a href='about.html' 0 title='走进上雅' class='hover-none nav'><span>走进上雅</span></a></li>
<li class="line"></li><li id='nav_151' ><a href='product.html' 0 title='产品展示' class='hover-none nav'><span>产品展示</span></a></li>
<li class="line"></li><li id='nav_152' class='navdown'><a href='news.html' 0 title='新闻资讯' class='hover-none nav'><span>新闻资讯</span></a></li>
<li class="line"></li><li id='nav_155' ><a href='fwcx.html' 0 title='防伪查询' class='hover-none nav'><span>防伪查询</span></a></li>
<li class="line"></li><li id='nav_156' ><a href='sqcx.html' 0 title='授权查询' class='hover-none nav'><span>授权查询</span></a></li>
<li class="line"></li><li id='nav_70' ><a href='message.html' 0 title='联系我们' class='hover-none nav'><span>联系我们</span></a></li>
</ul></nav></div></div>
</header>
<div class="met_flash" ><link rel='stylesheet' href='css/css.css' type='text/css'><SCRIPT type=text/javascript src='js/lanrenzhijia.js'></SCRIPT>
<div id='bn'>
<div class='wrap' style='height:600px;'>
<span class='tu' style='height:600px;'>
<a href='http://qxu1590600213.my3w.com/product/showproduct.php?lang=cn&id=1523' target='_blank' class='lianjie' title='水乳' style='background:url(images/1440831095.jpg) no-repeat center top;height:600px;display: block;'></a>
<a href='http://qxu1590600213.my3w.com/product/showproduct.php?lang=cn&id=1515' target='_blank' class='lianjie' title='面膜' style='background:url(images/1441003763.jpg) no-repeat center top;height:600px;display:none;'></a>
</span>
</div>
<div class='inner'>
<span class='txt'>
<em class='zi'
style='display: block;left:7px;' >水乳
</em>
<em class='zi'
style='display: none;left:42px;' >面膜
</em>
</span>
<div id='hao'>
<a class='xu'></a>
<a class='xu'></a>
</div>
</div>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
html,body{ font:12px/1.8 '微软雅黑','宋体',Arial,'Microsoft YaHei',Tahoma,Verdana,'Simsun'; color:#333; -webkit-text-size-adjust:none;}
body,h1,h2,h3,h4,h5,h6,dl,dt,li,dd,th,td,p,pre,form,input,button,textarea,hr{margin:0;padding:0;}h1,h2,h3,h4,h5,h6{font-size:100%;}img{border:0;}button,input,select,textarea{font-size:100%;}ul,ol{ list-style:none; margin:0; padding:0;}body{ background:#FFF;}
.list-none{ list-style:none;}.none{ display:none;}.blo{ display:block;}
.clearfix{ display:block; clear:both;}.clear{ clear:both; height:0; overflow:hidde;}/*在已经浮动的DIV上清除浮动后在IE7上会产生双倍间距 解决方法：height:0; overflow:hidde或删除已浮动DIV上面的清除浮动DIV
height:0; overflow:hidde; 可以永远防止了浮动后产生的间距，推荐使用*/
.flol{float:left !important;}.flor{float:right !important;}
.word{word-break:break-all;}/*英文强制换行*/
.blank5{ height:5px; overflow:hidden;}.blank10{ height:10px; overflow:hidden;}.blank15{ height:15px; overflow:hidden;}.blank20{ height:20px; overflow:hidden;}
a{ color:#333; text-decoration:none;}a:hover{ color:#e77817; text-decoration:underline;}.hover{ color:#995f2e;}.hovert{ color:red;}/* A标签问题：li下如果存在无内容的span空标签定义li下的A标签为区块则在IE7下会产生间距 如：<li><a href='#'>左侧栏目分类<a><span>点击展开的下级分类【无内容时】</span></li> */
.editor{ line-height:2;}
.editor h1{ font-size:32px;}.editor h2{ font-size:24px;}.editor h3{ font-size:19px;}.editor h4{ font-size:16px;}.editor h5{ font-size:13px;}.editor h6{ font-size:12px;}
.editor ul,.editor ol{ padding:0px 0px 0px 0px; margin:0px;}
.editor a{ color:#995f2e; text-decoration:none;}
/*盒子间距公用样式START--------------------------------------------------*/
.mt5{ margin-top:5px;}.mb5{ margin-bottom:10px;}.ml5{ margin-left:5px;}.mr5{ margin-right:5px;}
.mt10{ margin-top:10px;}.mb10{ margin-bottom:10px;}.ml10{ margin-left:10px;}.mr10{ margin-right:10px;}
.mt15{ margin-top:15px;}.mb15{ margin-bottom:15px;}.ml15{ margin-left:15px;}.mr15{ margin-right:15px;}
.pt5{ padding-top:5px;}.pb5{ padding-bottom:5px;}.pl5{ padding-left:5px;}.pr5{ padding-right:5px;}
.pt10{ padding-top:10px;}.pb10{ padding-bottom:10px;}.pl10{ padding-left:10px;}.pr10{ padding-right:10px;}
.pt15{ padding-top:15px;}.pb15{ padding-bottom:15px;}.pl15{ padding-left:15px;}.pr15{ padding-right:15px;}
.madt{ margin-top:0 !important;}.madb{ margin-bottom:0 !important;}.madl{ margin-left:0 !important;}.madr{ margin-right:0 !important;}
.padt{ padding-top:0 !important;}.padb{ padding-bottom:0 !important;}.padl{ padding-left:0 !important;}.padr{ padding-right:0 !important;}
.mad5{ margin:5px;}.mad10{ margin:10px;}.mad15{ margin:15px;}
.madtb5{ margin:5px 0;}.madtb10{ margin:10px 0;}.madtb15{ margin:15px 0;}
.madlr5{ margin:0 5px;}.madlr10{ margin:0 10px;}.madlr15{ margin:0 15px;}
.pad5{ padding:5px;}.pad10{ padding:10px;}.pad15{ padding:15px;}
.padtb5{ padding:5px 0;}.padtb10{ padding:10px 0;}.padtb15{ padding:15px 0;}
.padlr5{ padding:0 5px;}.padlr10{ padding:0 10px;}.padlr15{ padding:0 15px;}
.mad{ margin:0 !important;}.pad{ padding:0 !important;}
.f12{font-size: 12px}
.f14{font-size: 14px}
.f15{font-size: 15px}
.f16{font-size: 16px}
.f18{font-size:18px}
.f20{font-size:20px}
.f39{font-size:39px}
/* 公用盒子 */
.container{ overflow:hidden;}.block{ overflow:hidden;}.box{ overflow:hidden;}.itemGrid{ overflow:hidden;}.global{ overflow:hidden;}
.contentBox{ padding:10px; overflow:hidden;}
/*盒子间距公用样式END--------------------------------------------------*/
#innerContainer{ min-width:1335px; }
.inner{ width:1335px; margin:0 auto;}
/* ------------------------------------------------------------------------------公用样式END */
/*内页侧栏*/
.sidebar{ margin-top:280px;width: 1182px;}
.sidebar h1{ margin-bottom:30px; color:#999999; font-weight:normal;}
.sidebar h1 a{color:#999999;font-weight:normal;}
.leftAdvBox{}
.leftAdvBox a{ display:block; margin-bottom:10px;}
.leftAdvBox img{ width:100%; display:block; height:auto;}
.sidebar .sb_nav{ float:left; width:210px;}
.sidebar .sb_nav h3.title{ text-align:left;padding:0px 15px 10px 15px; height:33px; line-height:33px; border-bottom:1px solid #cecece; font-size:20px; color:#B9D530;}
.sidebar .sb_nav h3.line{ margin-top:15px; }
.sidebar .sb_nav .active{ padding:10px 0px;}.sidebar .sb_nav .more{ font-size:12px;}
#sidebar dl dt{ border-bottom:1px solid #D4D4D4; height:36px; line-height:36px; overflow:hidden;}
#sidebar dl dt a{ display:block; padding:0 0 0 30px; background:url(../images/bg-navico.png) no-repeat 18px 14px;}
...
3.JS
代码如下（节选示例）：
// JavaScript Document
$(function(){
var db = $(".downBox");
db.each(function(j){
db.eq(j).find('a').each(function(i){
//function a click 开始
db.eq(j).find('a').eq(i).click(function(){
db.eq(j).find("ul").each(function(m){
if(i == m){
var ooy = db.eq(j).find("a").eq(m);
var oox = ooy.offset();
var ooc = db.eq(j).find("ul").eq(m);
ooc.css({"width":ooy.width()+27,"left":oox.left,"top":oox.top+ooy.height()});
//alert(oox.left);
db.eq(j).find("ul").eq(m).show().siblings('ul').hide();
db.eq(j).siblings().find('ul').hide();
}
//下拉选项选择效果控制
db.eq(j).find("ul").eq(m).find('li').click(function(){
//alert($(this).text());
db.eq(j).find('a').eq(m).children('span').text($(this).text());
db.eq(j).find('.hiddenIpt').eq(m).val($(this).attr('data-corner'));
$(this).parents('ul').hide();
})
})
})
////function a click 结束
//function a span click start
db.eq(j).find('a').eq(i).children('span').click(function(){
db.eq(j).find("ul").each(function(m){
if(i == m){
var ooy = db.eq(j).find("a").eq(m);
var oox = ooy.offset();
var ooc = db.eq(j).find("ul").eq(m);
ooc.css({"width":ooy.width()+27,"left":oox.left,"top":oox.top+ooy.height()});
db.eq(j).find("ul").eq(m).show().siblings('ul').hide();
db.eq(j).siblings().find('ul').hide();
}
//下拉选项选择效果控制
db.eq(j).find("ul").eq(m).find('li').click(function(){
db.eq(j).find('a').eq(m).children('span').text($(this).text());
db.eq(j).find('.hiddenIpt').eq(m).val($(this).attr('data-corner'));
$(this).parents('ul').hide();
})
})
})//function a span click over
})
//else click function start
$('*').click(function(event){
if(event.target.className != "f6 xskqy1x0"&&event.target.className != "il"&&event.target.className != "dpan"){
db.eq(j).find('ul').hide();
}
})
//else click function over
})//db.eq(j).find('a').each over
var Searchdb = $(".searchBox");
Searchdb.each(function(j){
Searchdb.eq(j).find('a').each(function(i){
//function a click 开始
Searchdb.eq(j).find('a').eq(i).click(function(){
Searchdb.eq(j).find("ul").each(function(m){
if(i == m){
var ooy = Searchdb.eq(j).find("a").eq(m);
var oox = ooy.offset();
var ooc = Searchdb.eq(j).find("ul").eq(m);
ooc.css({"width":ooy.width()+27,"left":oox.left,"top":oox.top+ooy.height()});
//alert(oox.left);
Searchdb.eq(j).find("ul").eq(m).show().siblings('ul').hide();
Searchdb.eq(j).siblings().find('ul').hide();
}
//下拉选项选择效果控制
Searchdb.eq(j).find("ul").eq(m).find('li').click(function(){
//alert($(this).text());
Searchdb.eq(j).find('a').eq(m).children('span').text($(this).text());
Searchdb.eq(j).find('.hiddenIpt').eq(m).val($(this).attr('data-corner'));
$(this).parents('ul').hide();
})
})
})
////function a click 结束
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有兴趣的添加以下微信交流👇🏻👇🏻👇🏻
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
