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

标签：Web 网页 color headnav js height var font

一、网页概述

二、网页文件

三、网页效果

欢迎光临仙女的网页世界！这里有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:[email protected]"><em class="icons ico-msg"></em>
           <div class="contact-text">
               <p class="con-text">
                   <span>邮箱地址：</span><em>[email protected]</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");
}
});
});

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询，有兴趣的联系我!

您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。

标签：Web,网页,color,headnav,js,height,var,font
From： https://blog.csdn.net/A240307/article/details/140730953

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

一、网页概述

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

六、更多推荐

相关文章

赞助商

阅读排行

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

一、网页概述

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

六、更多推荐

相关文章

赞助商

阅读排行

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