402.高端大气的网络科技公司网页大学生期末大作业 Web前端网页制作 html+css+js-CSDN博客

本文链接：https://blog.csdn.net/A240307/article/details/140730953

欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css+js：导航菜单、图片轮翻、三级页面、悬浮菜单等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含8个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>太象-互联网金融P2P行业领航者</title>
<meta content="太象科技|p2p|寻贷网|205168" name="keywords">
<meta content="太象" name="description">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/min.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body id="body">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/menu_jquery.js"></script>
<script type="text/javascript" src="js/myjs.js"></script>
<script type="text/javascript" src="js/slides.jquery.js"></script>
<script type="text/javascript" src="js/jq_scroll.js"></script>
<div id="heaher" class="item">
   <div class="inner wl">
       <div class="logo">
           <a href="" title="浙江太象网络科技有限公司"><img src="picture/logo.png"></a>
       </div>
       <div class="headnav" id="navigate">
           <ul>
               <li><a class="sel" href="index.html">首页</a></li>
               <li><a href="productcentre.html">产品中心</a></li>
               <li><a href="SuccessCase.html">成功案例</a></li>
               <li><a href="server.html">服务项目</a></li>
               <li><a href="safe.html">安全理念</a></li>
               <li><a href="news.html">新闻动态</a></li>
               <li><a href="about.html">关于我们</a></li>
           </ul>
       </div>
   </div>
</div>
<script type="text/javascript">$("#navigate a").each(function(){var e=this.href.toLowerCase().substring(0,this.href.length-5);document.location.href.toLocaleLowerCase().indexOf(e)>-1&&($("#navigate a").removeClass("sel"),$(this).addClass("sel"))});</script>
<div id="slides" class="visual item">
   <ul class="slides-container">
       <li style="background:url(images/201506171340021809.jpg) center no-repeat"><a href="news/show-203.html" target="_blank" title=""></a></li>
       <li style="background:url(images/201505181439161395.jpg) center no-repeat"><a href="" target="_blank" title=""></a></li>
       <li style="background:url(images/201505061012193732.jpg) center no-repeat"><a href="" target="_blank" title=""></a></li>
   </ul>
   <div class="prev icons">
       <a href="#"></a>
   </div>
   <div class="next icons">
       <a href="#"></a>
   </div>
   <div class="slideControl pagination">
       <span><a href="#" rel="0"></a></span><span><a href="#" rel="1"></a></span><span><a href="#" rel="2"></a></span>
   </div>
</div>
<div class="index-graybox item" id="flow">
   <div class="wl index-graycon">
       <div class="index-announce">
           <a href="#" class="index-announce-til">最新公告</a>
           <div class="index-announce-inc">
               <div class="announce-info">
                   <ul>
                   </ul>
               </div>
               <div class="announce-btn">
                   <a id="announce-btn-up" class="icons btn-up" href="javascript:;" style="cursor:pointer"></a><a id="announce-btn-down" class="icons btn-down" href="javascript:;" style="cursor:pointer"></a>
               </div>
           </div>
           <div class="icons announce-btn-end">
           </div>
       </div>
       <div class="index-contact">
           <a target="_blank" href="#"><em class="icons ico-phone"></em>
           <div class="contact-text">
               <p class="con-text">
                   <span>咨询热线：</span><em>400-811-4655</em>
               </p>
               <p class="con-arrow">
                   <em class="icons ico-con-arrow"></em>
               </p>
           </div>
           </a><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2880709080&site=qq&menu=yes"><em class="icons ico-qq"></em>
           <div class="contact-text">
               <p class="con-text">
                   <span>企业QQ：</span><em>2880709080</em>
               </p>
               <p class="con-arrow">
                   <em class="icons ico-con-arrow"></em>
               </p>
           </div>
           </a><a href="mailto:kefu@ixundai.com"><em class="icons ico-msg"></em>
           <div class="contact-text">
               <p class="con-text">
                   <span>邮箱地址：</span><em>kefu@ixundai.com</em>
               </p>
               <p class="con-arrow">
                   <em class="icons ico-con-arrow"></em>
               </p>
           </div>
           </a>
       </div>
       <div class="index-flow">
           <ul>
               <li><em class="icons early"></em>前期策划沟通<br>
               COMMUNICATIONS</li>
               <li><em class="icons design"></em>视觉及交互设计<br>
               VISUAL AND DESIGN</li>
               <li><em class="icons html"></em>前端表现及功能开发<br>
               HTML/CSS/TLoan</li>
               <li><em class="icons test"></em>测试调整阶段<br>
               ADJUSTMENT/TEST</li>
           </ul>
       </div>
   </div>
</div>
<div class="index-aboutbox item" id="about">
   <div class="wl index-aboutcon">
       <div class="slogan f1">
           <div class="fl">
               <span><font class="fs24">远瞻</font>积淀专业</span><span><font class="fs24">专业</font>打造安全</span><span><font class="fs24">安全</font>赢得市场</span>
           </div>
           <div class="fr">
               <span><font class="f24">互联网金融P2P行业领航者</font></span>
           </div>
       </div>
       <div class="firm">
           <div class="font">
               <span class="f2 fs36">About Us</span><br>
               <span class="f2 fs36">&</span><br>
               <span class="f3 fs20">浙江太象网络科技有限公司</span>
           </div>
           <p>
               浙江太象网络科技有限公司是一家互联网金融系统开发商，
           </p>
           <p>
               创立伊始即坚持“以技术进步为竞争力；以品牌设计为影响力；以注重体验为源动力；以客户满意为行动力”，
           </p>
           <p>
               致力于为客户提供P2P网贷平台整体解决方案和运营策划等全方位服务，以“出色的产品开发能力”与“领先的网络营销能力”赢得了客户的一致认可。
           </p>
       </div>
   </div>
</div>
<div class="box-end icons">
</div>
<div class="wl index-advantagebox item" id="advantage">
   <div class="font">
       <span class="f2 fs36 c1">Our Advantages</span><br>
       <span class="f2 fs36 c1">&</span><br>
       <span class="f3 fs20 c2">我们的优势</span>
   </div>
   <div class="colorcirclemainbox">
       <div class="colorcirclebox">
           <div class="colorcircle col-1">
               <em class="icons"></em>
           </div>
           <p>
               TLoan系统功能完善、稳定、高效、易用、简洁、安全
           </p>
       </div>
       <div class="colorcirclebox">
           <div class="colorcircle col-2">
               <em class="icons"></em>
           </div>
           <p>
               根据P2P特点，全力打造具有知识产权的framework
           </p>
       </div>
       <div class="colorcirclebox">
           <div class="colorcircle col-3">
               <em class="icons"></em>
           </div>
           <p>
               基于C#语言开发，采用标准MVC，能进行集群部署
           </p>
       </div>
       <div class="colorcirclebox">
           <div class="colorcircle col-4">
               <em class="icons"></em>
           </div>
           <p>
               系统具有高扩展性，高效性，很方便根据客户的具体要求进行二次开发
           </p>
       </div>
       <div class="colorcirclebox">
           <div class="colorcircle col-5">
               <em class="icons"></em>
           </div>
           <p>
               精确的数据统计，网站的每笔资金都能找到来源和去向，方便跟踪
           </p>
       </div>
       <div class="colorcirclebox">
           <div class="colorcircle col-6">
               <em class="icons"></em>
           </div>
           <p>
               提供完善的管理机制，从前台页面到账户中心页面交互设计
           </p>
       </div>
       <div class="colorcirclebox">
           <div class="colorcircle col-7">
               <em class="icons"></em>
           </div>
           <p>
               大量使用AJAX局部刷新技术提交和获取数据，减少服务器负担、提升用户体验
           </p>
       </div>
   </div>
</div>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
body{font:14px 'Microsoft YaHei',Helvetica,Tahoma;color:#7c7c7c;background-color:#fff;_background-image:url(about:blank);_background-attachment:fixed;}
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
img { vertical-align:middle;}
img.handin{cursor:pointer;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
del,ins,u,s,a,a:hover{text-decoration:none;}
a{ text-decoration:none; color:#333;}
a{blr:expression(this.onFocus=this.blur())}
*::after, *::before
.cl{clear: both;}
.wl{width:1002px}
.wl::after{clear: both;display: table;content: ""}
@media screen and (max-width:1200px){.wl{width:1002px}}
#header,#content,#footer,.wl{margin-left:auto;margin-right:auto}
.mainbox{height: inherit;}
@media (min-width:768px) {
#rig-suspend,#go{display: block!important;}
}
@font-face
{
font-family: FontOne;
src:url('../font/zfgz-yh.eot');
src:url('../font/zfgz-yh.ttf') format('truetype'),
url('../font/zfgz-yh.eot?#iefix') format('embedded-opentype');
}

@font-face
{
font-family: FontTwo;
src:url('../font/segoesc.eot?#iefix')format('embedded-opentype'),
url('../font/segoesc.ttf');
}
@font-face
{
font-family: FontThr;
src:url('../font/zfgz-yy.eot?#iefix')format('embedded-opentype'),
url('../font/zfgz-yy.ttf');
}

/*headernav*/
#header{width: 100%;background:#fdfdfd;height: 93px}
.fixed{position: fixed;top:0;left: 0;z-index: 3;background-color: rgba(255,255,255,0.9);}
#header .inner,.news-bg .inner{height: inherit;position: relative;}
.logo{float: left;height: 100%;position: relative;}
.headnav{float: right;font-size: 16px;position: relative;}
.headnav ul{float: right;}
.headnav li{float: left;}
.headnav li a{line-height: 98px;color: #333;padding: 3px 0;margin:0 14px;}
.headnav li a:hover{color: #003c7b;animation:0.5s headnav;-o-animation:headnav 0.8s ;-moz-animation:headnav 0.8s ;-webkit-animation:headnav 0.8s ;border-bottom: 2px solid #003c7b}
@keyframes headnav{from {border-bottom-color: #aad9f8;color: #aad9f8;}to {border-bottom-color: #003c7b;color: #003c7b;}}
@-moz-keyframes headnav{from {border-bottom-color: #aad9f8;color: #aad9f8;}to {border-bottom-color: #003c7b;color: #003c7b;}}
@-o-keyframes headnav{from {border-bottom-color: #aad9f8;color: #aad9f8;}to {border-bottom-color: #003c7b;color: #003c7b;}}
@-webkit-keyframes headnav{from {border-bottom-color: #aad9f8;color: #aad9f8;}to {border-bottom-color: #003c7b;color: #003c7b;}}
.headnav li a.sel{border-bottom: 2px solid #003c7b;color: #003c7b;}

/* 底部 */
#footer .inner{ height: inherit;text-align: center;}
#footer{background-color:#fff;height:auto;width: 100%;float: left;padding: 18px 0;color: #666;box-shadow: 0 0 8px #ccc;line-height: 28px;border-top: 1px solid #ccc;}
#footer a{margin: 0 8px;color: #666;}
#footer a:hover{color: #333;}

/* 部局 */
#body-color{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.4;filter:alpha(opacity = 40);display:none;z-index: 99}
.icons{background:url(../images/icon_all.png) no-repeat;display: inline-block;}
.font{width: 100%;text-align: center;margin-bottom: 15px;position: relative;}
.banner{width: 100%;position: relative;background-position: center;}
.fl{float: left;}
.fr{float: right;}
.f1{font-family: FontOne;}
.f2{font-family: FontTwo;}/*英文字体*/
.f3{font-family: FontThr;}
.fs24{font-size: 24px}
.fs36{font-size: 36px}
.fs20{font-size: 20px}
.fs16{font-size: 16px}
.lh56{line-height: 56px}
.lh36{line-height: 36px}
.c1{color: #003c7b}
.c2{color: #d4515e}
.c3{color: #fff;}
.mt30{margin-top: 30px;}

...

3.JS

代码如下（节选示例）：

//banner
$(function(){
$('#slides').slides({
container: 'slides-container',
preload: true,
play: 4000,
pause: 1500,
hoverPause: true,
effect: 'slide',
slideSpeed: 850
})

})

$(document).ready(function(){
$(".announce-info").Scroll({line:1,speed:500,timer:3000,up:"announce-btn-up",down:"announce-btn-down"});//公告滚动
});

//无缝滚动
function marquee(i, direction){
var obj = document.getElementById("marquee" + i);
var obj1 = document.getElementById("marquee" + i + "_1");
var obj2 = document.getElementById("marquee" + i + "_2");
if (direction == "up"){
if (obj2.offsetTop - obj.scrollTop <= 0){
obj.scrollTop -= (obj1.offsetHeight + 30);
}else{
var tmp = obj.scrollTop;
obj.scrollTop++;
if (obj.scrollTop == tmp){
obj.scrollTop = 1;
}
}
}else{
if (obj2.offsetWidth - obj.scrollLeft <= 0){
obj.scrollLeft -= obj1.offsetWidth;
}else{
obj.scrollLeft++;
}
}
}

function marqueeStart(i, direction){
var obj = document.getElementById("marquee" + i);
var obj1 = document.getElementById("marquee" + i + "_1");
var obj2 = document.getElementById("marquee" + i + "_2");

obj2.innerHTML = obj1.innerHTML;
var marqueeVar = window.setInterval("marquee("+ i +", '"+ direction +"')", 30);
obj.onmouseover = function(){
window.clearInterval(marqueeVar);
}
obj.onmouseout = function(){
marqueeVar = window.setInterval("marquee("+ i +", '"+ direction +"')", 30);
}
}

//同页跳转
//首页的
$(function () {
$(window).scroll(function () {
var scrollTop = $(document).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var contentItems = $("#body").find(".item");
var currentItem = "";

if (scrollTop+windowHeight==documentHeight) {
currentItem= "#" + contentItems.last().attr("id");
}else{
contentItems.each(function () {
var contentItem = $(this);
var offsetTop = contentItem.offset().top;
if (scrollTop > offsetTop - 200) {
currentItem = "#" + contentItem.attr("id");
}
});
}
if (currentItem != $("#go").find(".fon2").attr("href")) {
$("#go").find(".fon2").removeClass("fon2");
$("#go").find("[href=" + currentItem + "]").addClass("fon2");
}
});
});

// 安全中心的
$(function () {
$(window).scroll(function () {
var scrollTop = $(document).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var contentItems = $(".main").find(".item");
var currentItem = "";

if (scrollTop+windowHeight==documentHeight) {
currentItem= "#" + contentItems.last().attr("id");
}else{
contentItems.each(function () {
var contentItem = $(this);
var offsetTop = contentItem.offset().top;
if (scrollTop > offsetTop - 100) {
currentItem = "#" + contentItem.attr("id");
}
});
}
if (currentItem != $(".til").find(".pon").attr("href")) {
$(".til").find(".pon").removeClass("pon");
$(".til").find("[href=" + currentItem + "]").addClass("pon");
}
});
});