目录
前言
一站式企业代理服务公司网页设计实例，应用html+css+js： Div、导航栏、选项卡、悬浮菜单、留言表单、注册页面、登录页面、搜索等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。
一、网页概述
网页布局为“同字型”的布局，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验。
支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含6个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/oindex.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.superslide.2.1.1.js"></script>
</head>
<body>
<!--头部-->
<header class="oindex-head">
<div class="o-top">
<div class="width1180">
<span class="fl">您好，欢迎访问注册公司_代理记账报税_工商注册_商标注册_专注于企业成长一站式服务平台
</span>
<span class="fr">
<a href="#" title="登录">登录</a>
<a href="#" title="注册">注册</a>
<a href="#" title="易知猴首页"><i class="o-home"></i>易知猴首页</a>
<a href="#" title="联系我们" ><i class="o-contract"></i>联系我们</a>
<!--登录后
<a title="管理员" href="http://www.yizhihou.com/member/" target="_blank" rel="nofollow">嘉客</a>
<a href="http://www.yizhihou.com/member/logout.php" rel="nofollow">退出</a>
-->
</span>
</div>
</div>
<div clear></div>
<div class="head-muild">
<div class="width1180">
<h1 class="fl"> </h1>
<div class="o-search">
<form>
<input type="text" class="search-text" placeholder="请输入您搜索的关键词"><button class="search-bnt"><img src="images/search-i.png"> 搜索</button>
</form>
</div>
<div class="fl search-keywords">
<a href="#" title="长沙注册公司">长沙注册公司</a> <a href="#" title="注册流程">注册流程</a> <a href="#" title="注册费用">注册费用</a>
</div>
<div class="clearfix"></div>
<nav>
<div class="fenlei-nav fl">全部分类</div>
<ul class="fl">
<li><a href="index.html" title="首页" class="on">首页</a></li>
<li><a href="公司注册.html" title="公司注册">公司注册<img src="images/hot.gif"></a></li>
<li><a href="服务详情.html" title="代理记账">代理记账<img src="images/hot.gif"></a></li>
<li><a href="#" title="商标注册">商标注册</a></li>
<li><a href="#" title="资质代办">资质代办</a></li>
<li><a href="新闻中心.html" title="工商知识">工商知识</a></li>
<li><a href="关于我们.html" title="关于我们">关于我们</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!--头部-->
<!--banner-->
<div class="o-banner">
<div class="width1180">
<div class="banner-menu">
<ul>
<li>
<p><a href="#" title="公司注册" ><i class="o-index1"></i>公司注册<b>></b></a></p>
<div class="lihover-box ">
<dl>
<dt class="fl">注册公司</dt>
<dd class="fl">
<a href="#" title="有限责任公司注册">有限责任公司注册</a>
<a href="#" title="个体户注册">个体户注册</a>
<a href="#" title="股份公司注册">股份公司注册</a>
<a href="#" title="1元注册公司">1元注册公司</a>
<a href="#" title="一般纳税人公司注册">一般纳税人公司注册</a>
<a href="#" title="集团公司注册">集团公司注册</a>
<a href="#" title="分公司注册">分公司注册</a>
<a href="#" title="加急公司注册，2天出证">加急公司注册，2天出证</a>
<a href="#" title="子公司注册">子公司注册</a>
<a href="#" title="香港公司注册">香港公司注册</a>
<a href="#" title="加急公司注册，2天出证">加急公司注册，2天出证</a>
</dd>
</dl>
<dl>
<dt class="fl">公司变更</dt>
<dd class="fl">
<a href="#" title="有限责任公司注册">公司股权变更</a>
<a href="#" title="个体户注册">经营地址变更</a>
<a href="#" title="股份公司注册">经营范围变更</a>
<a href="#" title="1元注册公司"> 公司名称变更</a>
<a href="#" title="一般纳税人公司注册">公司法人变更</a>
<a href="#" title="集团公司注册">注册资本变更</a>
<a href="#" title="分公司注册">税务信息变更</a>
</dd>
</dl>
<dl>
<dt class="fl">公司注销</dt>
<dd class="fl">
<a href="#" title="小规模工商注销">小规模工商注销</a>
<a href="#" title="个体户注册">一般纳税人工商注销</a>
<a href="#" title="股份公司注册">个体工商户注销</a>
<a href="#" title="1元注册公司"> 内资公司注销</a>
</dd>
</dl>
<a class="zixun-bnt" href="#">立即免费咨询</a>
</div>
</li>
<li class="clearfix">
<p><a href="#" title="记账报税"><i class="o-index2"></i>记账报税<b>></b></a></p>
<div class="lihover-box">
<dl>
<dt class="fl">注册公司</dt>
<dd class="fl">
<a href="#" title="有限责任公司注册">有限责任公司注册</a>
<a href="#" title="个体户注册">个体户注册</a>
<a href="#" title="股份公司注册">股份公司注册</a>
<a href="#" title="1元注册公司">1元注册公司</a>
<a href="#" title="一般纳税人公司注册">一般纳税人公司注册</a>
<a href="#" title="集团公司注册">集团公司注册</a>
<a href="#" title="分公司注册">分公司注册</a>
<a href="#" title="加急公司注册，2天出证">加急公司注册，2天出证</a>
<a href="#" title="子公司注册">子公司注册</a>
<a href="#" title="香港公司注册">香港公司注册</a>
<a href="#" title="加急公司注册，2天出证">加急公司注册，2天出证</a>
</dd>
</dl>
<dl>
<dt class="fl">公司变更</dt>
<dd class="fl">
<a href="#" title="有限责任公司注册">公司股权变更</a>
<a href="#" title="个体户注册">经营地址变更</a>
<a href="#" title="股份公司注册">经营范围变更</a>
<a href="#" title="1元注册公司"> 公司名称变更</a>
<a href="#" title="一般纳税人公司注册">公司法人变更</a>
<a href="#" title="集团公司注册">注册资本变更</a>
<a href="#" title="分公司注册">税务信息变更</a>
</dd>
</dl>
<dl>
<dt class="fl">公司注销</dt>
<dd class="fl">
<a href="#" title="小规模工商注销">小规模工商注销</a>
<a href="#" title="个体户注册">一般纳税人工商注销</a>
<a href="#" title="股份公司注册">个体工商户注销</a>
<a href="#" title="1元注册公司"> 内资公司注销</a>
</dd>
</dl>
<a class="zixun-bnt" href="#">立即免费咨询</a>
</div>
</li>
<li class="clearfix">
<p><a href="#" title="记账报税"><i class="o-index3"></i>公司变更<b>></b></a></p>
<div class="lihover-box">
<dl>
<dt class="fl">注册公司</dt>
<dd class="fl">
<a href="#" title="有限责任公司注册">有限责任公司注册</a>
<a href="#" title="个体户注册">个体户注册</a>
<a href="#" title="股份公司注册">股份公司注册</a>
<a href="#" title="1元注册公司">1元注册公司</a>
<a href="#" title="一般纳税人公司注册">一般纳税人公司注册</a>
<a href="#" title="集团公司注册">集团公司注册</a>
<a href="#" title="分公司注册">分公司注册</a>
<a href="#" title="加急公司注册，2天出证">加急公司注册，2天出证</a>
<a href="#" title="子公司注册">子公司注册</a>
<a href="#" title="香港公司注册">香港公司注册</a>
<a href="#" title="加急公司注册，2天出证">加急公司注册，2天出证</a>
</dd>
</dl>
<dl>
<dt class="fl">公司变更</dt>
<dd class="fl">
<a href="#" title="有限责任公司注册">公司股权变更</a>
<a href="#" title="个体户注册">经营地址变更</a>
<a href="#" title="股份公司注册">经营范围变更</a>
<a href="#" title="1元注册公司"> 公司名称变更</a>
<a href="#" title="一般纳税人公司注册">公司法人变更</a>
<a href="#" title="集团公司注册">注册资本变更</a>
<a href="#" title="分公司注册">税务信息变更</a>
</dd>
</dl>
<dl>
<dt class="fl">公司注销</dt>
<dd class="fl">
<a href="#" title="小规模工商注销">小规模工商注销</a>
<a href="#" title="个体户注册">一般纳税人工商注销</a>
<a href="#" title="股份公司注册">个体工商户注销</a>
<a href="#" title="1元注册公司"> 内资公司注销</a>
</dd>
</dl>
<a class="zixun-bnt" href="#">立即免费咨询</a>
</div>
</li>
...
2.CSS
代码如下（节选示例）：
* {word-break:break-all;-webkit-text-size-adjust:none;}/*"Microsoft Yahei",*/
body{ margin:0px; padding: 0px; font-family: "微软雅黑"; font-size: 12px; display: block; overflow-x: hidden}
ul,li,dd,dt,dl,p,div,h2,h6{ list-style: none;margin: 0px; padding: 0px; }
img{ border:0px; }
a{ color: #333; text-decoration: none; }
em{ font-style: normal }
a:hover img{ filter: Alpha(opacity=85); -moz-opacity:0.85; opacity:0.85; }
/*共同样式*/
.width1180{ width: 1180px; margin: 0px auto; }
.fl{ float: left; }
.fr{ float: right; }
.clearfix{ clear: both; }
.colorred{ color: #fe525e }
.color666{ color:#666; }
.fontsize16{ font-size: 16px }
.fontsize18{ font-size: 18px; }
.colorfa3508{ color: #fa3508 }
.color999{ color:#999; }
.colord82116{ color: #d82116 }
/*头部*/
.o-top{ background: #f2f0f0; height: 35px; line-height: 35px; }
.o-top span a{ color: #f4530b; margin-left: 15px }
.o-top span a:hover{ color: #e70d1c }
.o-top span a i{ width:14px; height: 14px; display: inline-block; margin-right: 5px}
.o-top span a i.o-home{ background: url(../images/oindex-17.png); }
.o-top span a i.o-contract{ background: url(../images/oindex-18.png); }
.head-muild{ background: #fff; box-shadow: 0 0 10px #dbd8d8; overflow:hidden; position: relative; z-index: 8}
.o-search{ float: left; border:#04b6e9 2px solid; width:425px; height:35px; margin-top: 20px; margin-left:50px; }
.search-text{ height: 22px; line-height: 22px; padding: 5px 0px; text-indent: 10px; border:0px; outline: 0; width: 355px;}
.search-bnt{ background: #04b6e9; border: 0px; height: 35px; width: 70px; color: #fff; float: right; font-family: '微软雅黑'; font-size: 16px; }
.search-keywords{ float:right; margin-top: 30px; }
.search-keywords a{ margin-left: 15px }
.search-keywords a:hover{ color: #e21010 }
.fenlei-nav{ background: #04b6e9; text-align: center; height: 40px; line-height: 40px; width: 220px; color: #fff; font-size: 16px; position: relative; bottom: -5px }
nav ul li{ float: left; font-size: 16px; font-weight: 700; position: relative; }
nav ul li a{ color: #666; padding: 0px 20px;line-height: 40px; height: 40px; display: inline-block;}
nav ul li a:hover{ color: #fd5252 }
nav ul li a.on{ border-bottom: #fd5252 3px solid; color: #fd5252; }
nav ul{ width: 960px; }
nav ul span{ position: relative; }
nav ul li img{ position: absolute; top:-10px; right: 20px; }
/*banner*/
.o-banner{ background: #eae9e9; padding-bottom: 10px; overflow: hidden;}
.banner-menu{ width:220px; height: 470px; background: #747373; position: relative; float: left;}
.banner-menu ul li{ border-bottom: #9a9a9a 1px solid; width: 220px; position: static; }
.banner-menu ul li:hover{ background: #e7212f }
.banner-menu ul li a{ color: #fff; font-size: 18px; }
.banner-menu ul li:hover a{ font-weight: 700 }
.banner-menu ul li a b{
float: right;
font-size: 18px;
line-height: 80px;
color: #999;
font-family: "宋体";
font-style: normal;
margin-right: 15px;
color: #7e7d7d
}
.banner-menu ul li p{transition: all .6s; width: 100%; display: block; overflow: hidden; height: 77px; line-height: 77px}
.banner-menu ul li:hover .lihover-box{ display: block; }
.banner-menu ul li:hover b{ color: #cbc9ca }
.banner-menu ul li:hover p{ margin-left: 10px; }
.banner-menu ul li i{ width: 50px; height:50px; display: inline-block; background: url(../images/m-ico.png); margin-right: 20px; position: relative;bottom:-10px; }
.banner-menu ul li i.o-index1{ background-position: 0px 0px }
.banner-menu ul li i.o-index2{ background-position: 0px -65px }
.banner-menu ul li i.o-index3{ background-position: 0px -125px }
.banner-menu ul li i.o-index4{ background-position: 0px -190px }
.banner-menu ul li i.o-index5{ background-position: 0px -250px }
.banner-menu ul li i.o-index6{ background-position: 0px -305px }
...
3.JS
代码如下（节选示例）：
*/
!function(a){a.fn.slide=function(b){return a.fn.slide.defaults={type:"slide",effect:"fade",autoPlay:!1,delayTime:500,interTime:2500,triggerTime:150,defaultIndex:0,titCell:".hd li",mainCell:".bd",targetCell:null,trigger:"mouseover",scroll:1,vis:1,titOnClassName:"on",autoPage:!1,prevCell:".prev",nextCell:".next",pageStateCell:".pageState",opp:!1,pnLoop:!0,easing:"swing",startFun:null,endFun:null,switchLoad:null,playStateCell:".playState",mouseOverStop:!0,defaultPlay:!0,returnDefault:!1},this.each(function(){var c=a.extend({},a.fn.slide.defaults,b),d=a(this),e=c.effect,f=a(c.prevCell,d),g=a(c.nextCell,d),h=a(c.pageStateCell,d),i=a(c.playStateCell,d),j=a(c.titCell,d),k=j.size(),l=a(c.mainCell,d),m=l.children().size(),n=c.switchLoad,o=a(c.targetCell,d),p=parseInt(c.defaultIndex),q=parseInt(c.delayTime),r=parseInt(c.interTime);parseInt(c.triggerTime);var Q,t=parseInt(c.scroll),u=parseInt(c.vis),v="false"==c.autoPlay||0==c.autoPlay?!1:!0,w="false"==c.opp||0==c.opp?!1:!0,x="false"==c.autoPage||0==c.autoPage?!1:!0,y="false"==c.pnLoop||0==c.pnLoop?!1:!0,z="false"==c.mouseOverStop||0==c.mouseOverStop?!1:!0,A="false"==c.defaultPlay||0==c.defaultPlay?!1:!0,B="false"==c.returnDefault||0==c.returnDefault?!1:!0,C=0,D=0,E=0,F=0,G=c.easing,H=null,I=null,J=null,K=c.titOnClassName,L=j.index(d.find("."+K)),M=p=-1==L?p:L,N=p,O=p,P=m>=u?0!=m%t?m%t:t:0,R="leftMarquee"==e||"topMarquee"==e?!0:!1,S=function(){a.isFunction(c.startFun)&&c.startFun(p,k,d,a(c.titCell,d),l,o,f,g)},T=function(){a.isFunction(c.endFun)&&c.endFun(p,k,d,a(c.titCell,d),l,o,f,g)},U=function(){j.removeClass(K),A&&j.eq(N).addClass(K)};if("menu"==c.type)return A&&j.removeClass(K).eq(p).addClass(K),j.hover(function(){Q=a(this).find(c.targetCell);var b=j.index(a(this));I=setTimeout(function(){switch(p=b,j.removeClass(K).eq(p).addClass(K),S(),e){case"fade":Q.stop(!0,!0).animate({opacity:"show"},q,G,T);break;case"slideDown":Q.stop(!0,!0).animate({height:"show"},q,G,T)}},c.triggerTime)},function(){switch(clearTimeout(I),e){case"fade":Q.animate({opacity:"hide"},q,G);break;case"slideDown":Q.animate({height:"hide"},q,G)}}),B&&d.hover(function(){clearTimeout(J)},function(){J=setTimeout(U,q)}),void 0;if(0==k&&(k=m),R&&(k=2),x){if(m>=u)if("leftLoop"==e||"topLoop"==e)k=0!=m%t?(0^m/t)+1:m/t;else{var V=m-u;k=1+parseInt(0!=V%t?V/t+1:V/t),0>=k&&(k=1)}else k=1;j.html("");var W="";if(1==c.autoPage||"true"==c.autoPage)for(var X=0;k>X;X++)W+="<li>"+(X+1)+"</li>";else for(var X=0;k>X;X++)W+=c.autoPage.replace("$",X+1);j.html(W);var j=j.children()}if(m>=u){l.children().each(function(){a(this).width()>E&&(E=a(this).width(),D=a(this).outerWidth(!0)),a(this).height()>F&&(F=a(this).height(),C=a(this).outerHeight(!0))});var Y=l.children(),Z=function(){for(var a=0;u>a;a++)Y.eq(a).clone().addClass("clone").appendTo(l);for(var a=0;P>a;a++)Y.eq(m-a-1).clone().addClass("clone").prependTo(l)};switch(e){case"fold":l.css({position:"relative",width:D,height:C}).children().css({position:"absolute",width:E,left:0,top:0,display:"none"});break;case"top":l.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; height:'+u*C+'px"></div>').css({top:-(p*t)*C,position:"relative",padding:"0",margin:"0"}).children().css({height:F});break;case"left":l.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; width:'+u*D+'px"></div>').css({width:m*D,left:-(p*t)*D,position:"relative",overflow:"hidden",padding:"0",margin:"0"}).children().css({"float":"left",width:E});break;case"leftLoop":case"leftMarquee":Z(),l.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; width:'+u*D+'px"></div>').css({width:(m+u+P)
...
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
