目录
一、网页概述
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
3.JS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
六、更多推荐
欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html5+css3+js： 导航菜单、图片轮翻、jquery动画特效、注册、登录等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含3个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>六点半小说网</title>
<link type="text/css" rel="stylesheet" href="css/basic.css" >
<div id="topOne">
</div>
<div id="Top">
<div class="logo"><a href="#"><img src="images/logo1.jpg" width="200px" height="50px"/></a></div>
<div class="search">
<form>
<div id="searchTxt" class="searchTxt" >
<div class="searchMenu">
<div class="searchSelected" id="searchSelected">玄幻</div>
<div style="display:none;" class="searchTab" id="searchTab">
<ul>
<li class="">玄幻</li>
<li>奇幻</li>
<li>武侠</li>
<li>仙侠</li>
<li>都市</li>
<li>现实</li>
<li>军事</li>
<li>历史</li>
<li>游戏</li>
</ul>
</div>
</div>
<input name="w" type="text" />
<div class="searchBtn">
<button id="searchBtn" type="submit">搜索</button>
</div>
</div>
</form>
</div>
<div class="user">
<font><a href="denglu.html">登录 |</a></font>
<font><a href="zhuce.html">注册</a></font>
</div>
</div>
<div id="Logo" >
<ul>
<li class="first"><span class="iconfont"></span>全部小说分类</li>
<li><a href="index.html" title="首页">首页</a></li>
<li><a href="#" title="魂帝武神">魂帝武神</a></li>
<li><a href="#">万古第一帝</a></li>
<li><a href="#">绝世弃少</a></li>
<li><a href="#">谋断九州</a></li>
<li><a href="#">天命修罗</a></li>
<li><a href="#">紫阳</a></li>
<li class="last"></li>
</ul>
</div>
<!--主体-->
<div id="Foucs">
<div class="FoucsCommon">
<div class="Menu">
<ul>
<li>
<h3>都市小说</h3>
<p><a href="">狂少</a><a href="">校花的贴身高手</a></p>
<div class="moreNav">
</div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<h3>玄幻小说</h3>
<p><a href="">魂帝武神</a><a href="">星辰变</a><a href="">归一</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<h3>历史小说</h3>
<p><a href="">我的民国生涯</a><a href="">明朝那些事</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
...
2.CSS
代码如下（节选示例）：
body,img,input,ul,li,h3,p,dl,dd ,dt{margin:0px;border:0px;padding:0px; font-family:"微软雅黑";list-style-type:none;}
a{text-decoration:none;}
/*广告样式*/
#topOne{width:100%; height:20px; background:url(../images/one.gif) ; text-align:center;
cursor:pointer;/*相对定位*/}
/*Top样式*/
#Top{width:1000px; height:70px; margin:0px auto;/*水平距中*/ padding-top:-50px;}
#Top .logo{width:215px; height:70px; float:left;/*左浮动*/}
#Top .search{width:370px; height:70px;float:left; position:relative;}
#Top .user{width:400px; height:70px; float:right;/*右浮动*/font-size:24px; color:red;
text-align:right;/*水平距右*/}
#Top .user span.iconfont{font-family:"微软雅黑" !important; font-size:20px; color:#ed145b;
padding:0px 10px;background-color:paleturquoise}
#Top .user font{padding-right:20px;}
#Top .user font a{text-decoration:none; color:#666;}
#Top .user font a:hover{color:#ed145b;}
#Top .user a.usertxt{color:#ed145b; text-decoration:none; padding:0px 5px;}
#Top .search input.txt{width:310px; height:38px;overflow:hidden; border:1px solid #ddd; outline:none;}
#Top .search input.but{width:42px;height:40px; border:0px;background:url("../images/ser_but.png");
position:absolute; left:312px; top:0px;}
/*导航样式*/
#Logo{width:100%;height:50px; background:#000;top:-50px; }
#Logo ul{width:1200px; height:50px;margin:0px auto;/*水平居中*/position:relative; }
#Logo ul li{ height:50px;list-style-type:none; float:left;
color:#fff; font-size:14px; text-align:center; line-height:50px;
}
#Logo ul li a{color:#fff; display:block;padding:0px 30px; position:relative;z-index:3;}
#Logo ul li.first{width:190px; background:#f42760;}
#Logo ul li.first span{font-family:"微软雅黑" !important; color:#fff; font-size:20px; padding-right:10px;}
#Logo ul li.last{width:100px; height:50px; background:green; position:absolute;
left:190px;z-index:2; display:none;}
/*头部焦点部分样式*/
#Foucs{width:100%; height:420px; }
#Foucs .FoucsCommon{width:1200px; height:420px; margin:0px auto;}
#Foucs .FoucsCommon .Menu{width:190px; height:420px; background:#000; float:left;}
#Foucs .FoucsCommon .Flash{width:820px; height:420px;float:left;}
#Foucs .FoucsCommon .News{width:190px; height:420px; float:left;}
/*菜单样式*/
#Foucs .FoucsCommon .Menu ul li{ height:69px; border-bottom:1px dotted #403f3f; color:#fff; position:relative;}
#Foucs .FoucsCommon .Menu ul li h3{font-size:14px; font-weight:100; line-height:40px;
text-indent:20px;}
#Foucs .FoucsCommon .Menu ul li p{font-size:12px;}
#Foucs .FoucsCommon .Menu ul li p a{color:#fff;padding-left:20px;}
#Foucs .FoucsCommon .Menu ul li p a:hover{color:#f42760;}
/*二级菜单*/
.Menu ul{position:relative;}
.Menu ul li .moreNav{width:850px; position:absolute;
left:189px; /*top bottom*/ box-shadow:0 0 10px #000;display:none;
background:#fff;}
.Menu ul li .border_top{height:1px; background:#ddd;width:190px; position:absolute;left:0px; top:-1px; display:none;}
.Menu ul li .border_bottom{height:1px; background:#ddd;width:190px; position:absolute;left:0px; bottom:-1px;display:none;}
.Menu ul li .border_right{height:69px; background:#000;width:1px; position:absolute;right:0px; bottom:0px;display:none;}
.Menu ul li.hover .moreNav{display:block;}
.Menu ul li.hover .border_top{display:block;}
.Menu ul li.hover .border_bottom{display:block;}
.Menu ul li.hover .border_right{display:block;}
/*头部焦点 Flash 动画特效*/
#Foucs{width:100%; height:419px; overflow:hidden;}
#Foucs .FoucsCommon{width:1200px;height:419px; margin:0px auto;}
#Foucs .FoucsCommon .flash{width:820px; height:419px; background-image:url(../images/five.jpg);float:left;
position:relative;}
#Foucs .FoucsCommon .flash a{width:71px;height:71px;display:block;display:none;
position:absolute; top:180px;z-index:333;}
#Foucs .FoucsCommon .flash a.prev{left:-35px; background:url("../images/but.png") -71px 0px;}
#Foucs .FoucsCommon .flash a.next{right:-35px; background:url("../images/but.png") -71px -71px;}
#Foucs .FoucsCommon .flash a.prev:hover{background-position:0px 0px;}
#Foucs .FoucsCommon .flash a.next:hover{background-position:0px -71px;}
#Foucs .FoucsCommon .flash .scroll{width:820px;height:419px;position:relative; overflow:hidden;}
#Foucs .FoucsCommon .flash .scroll img{position:absolute;left:820px;}
#Foucs .FoucsCommon .flash .But{width:150px;height:20px; background:rgba(0,0,0,0.5); position:absolute;
left:340px; bottom:10px; border-radius:20px; text-align:center;}
#Foucs .FoucsCommon .flash .But span{width:10px;height:10px; display:inline-block; border-radius:5px;
background:#666;}
#Foucs .FoucsCommon .flash .But span.hover{background:#ff0099;}
...
3.JS
代码如下（节选示例）：
//鼠标导航滑块跟随效果
$("#Logo ul li").not(".first,.last").hover(function(){
//移上去
var _left=$(this).position().left; //li与 ul左边的距离
var _width=$(this).width(); //获取 li宽度
$("#Logo ul li.last").show().css("width",_width).stop().animate({left:_left},300);
},function(){
//移开
$("#Logo ul li.last").hide();
//$("#Logo ul li.last").css("width","78px").stop().animate({left:"190px"},300);
});
//左侧二级悬浮菜单
$(".Menu ul li").hover(function(){
$(this).addClass("hover");
var _index=$(this).index();
var _top=$(this).position().top;
var _height=$(this).find(".moreNav").height()/3;
//document.title=_top +"--"+_height;
if(_top>_height){//当高度大于 1/3时
if(_index==5){ //当序列号为 5 最后一个
$(this).find(".moreNav").css("bottom","0px");
}else{
$(this).find(".moreNav").css("top","-"+_height+"px");
}
}else{
$(this).find(".moreNav").css("top","-1px");
}
},function(){
$(this).removeClass("hover");
});
/*首页轮播图特效*/
var _index=0;
var _qindex=0;
var clearTime=null;
var ktime=new Date();//获取当前时间
$(".But span").mouseover(function(){
clearInterval(clearTime);
_index=$(this).index();//获取序列号
scrollPlay();//调用播放方法
_qindex=_index;//把当前的值赋作为下一次的前一个序列号
}).mouseout(function(){
autoPlay();
});
//右切换按扭
$(".flash a.next").click(function(){
var newtime=new Date();
if(newtime-ktime>300){
_index++;//序列号加1
if(_index>6){
_index=0;
_qindex=6;
}
scrollPlay();
_qindex=_index;
}
ktime=new Date();//重新设置时间
});
$(".flash a.prev").click(function(){
_index--;
if(_index<0){
_qindex=0;
_index=6;
}
scrollPlay();
_qindex=_index;
});
$("a.next,a.prev").hover(function(){
clearInterval(clearTime);
},function(){
autoPlay();
});
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有兴趣的添加以下微信交流👇🏻👇🏻👇🏻
