450. 酷炫的建站网络科技企业网站大学生期末大作业 Web前端网页制作 html+css+js

仙女网页制作

于 2024-08-19 15:28:30 发布

阅读量1.5k

点赞数 57

文章标签：前端 html html5 javascript css jquery css3

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

版权

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

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

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

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

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

一、网页概述

本实例应用html+css+js：导航菜单、图片轮翻、无缝滚动插件、鼠标滑动特效、留言表单等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

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

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html class="desktop">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>科技公司</title>
<meta name="keywords" content=""/>
<meta name="renderer" content="webkit">
<meta name="description" content=""/>
<link rel="stylesheet" href="css/glide.css">
<link rel="stylesheet" href="css/jquery.fullPage.css">
<link rel="stylesheet" href="css/jquery.circliful.css" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">

<body>

<div class="header gb-header show">
   <div class="logo">
       <a href="index.html"></a>
</div>
   <div class="nav">
       <ul>
           <li><a href="index.html"><span class="s1">首页</span><span class="s2">首页</span></a></li>
<li><a href="works.html"><span class="s1">案例</span><span class="s2">案例</span></a></li>
<li><a href="superiority.html"><span class="s1">优势</span><span class="s2">优势</span></a></li>
<li><a href="experience.html"><span class="s1">体验</span><span class="s2">体验</span></a></li>
           <li><a href="group.html"><span class="s1">服务</span><span class="s2">服务</span></a></li>
           <li><a href="about.html"><span class="s1">关于</span><span class="s2">关于</span></a></li>
           <li><a href="contact.html"><span class="s1">联系</span><span class="s2">联系</span></a></li>
       </ul>
   </div>
</div>
<div class="gb-nav">
   <div class="logo">
       <a href="index.html"></a>
   </div>
   <div class="gh">
       <a href="javascript:void(0);"></a>
   </div>
</div>
<div class="page-wrap">
   <div class="section page1">
       <div class="slide-wrap">
           <ul>
               <li id="s1" class="selected">
               <video poster="images/bg1a.jpg" loop src="images/bg1.webm"></video>
               <div class="bg"></div>
               <div class="wrap">
               <div class="img">
                   <img src="images/img46.png"/>
               </div>
               </div>
               </li>
               <li id="s2">
               <video poster="images/bg2a.jpg" loop src="images/bg2.webm"></video>
               <div class="bg"></div>
               <div class="wrap">
               <span class="img">
                   <img src="images/img48.png"/>
               </span>
               </div>
               </li>
               <li id="s3">
               <video poster="images/bg3a.jpg" loop src="images/bg3.webm"></video>
               <div class="bg"></div>
               <div class="wrap">
               <div class="img">
                   <img src="images/img43.png"/>
               </div>
               <div class="text">
                   从PC到移动端全网打通，交互体验响应式网站建设开发。
               </div>
               </div>
               </li>
           </ul>
       </div>
       <div class="arrow">
           <table>
               <tr><td><a href="#services"><img src="images/img1.png"/></a></td></tr>
           </table>
       </div>
       <div class="slide-nav-wrap">
           <div class="nav" id="slide-nav">
               <ul>
                   <li class="nav-line">
                   </li>
                   <li class="nav-bullet-container active" data-index="0">
                       <a class="nav-link" href="#">
                       <div class="nav-bullet">
                       </div>
                       <div class="nav-text">开始于2008年</div>
                       </a>
                   </li>
                   <li class="nav-line">
                   </li>
                   <li class="nav-bullet-container" data-index="1">
                       <a class="nav-link" href="#">
                       <div class="nav-bullet">
                       </div>
                       <div class="nav-text">专注于原创网站开发
                       </div>
                       </a>
                   </li>
                   <li class="nav-line">
                   </li>
                   <li class="nav-bullet-container" data-index="2">
                       <a class="nav-link" href="#">
                       <div class="nav-bullet">
                       </div>
                       <div class="nav-text">为时代而改变
                       </div>
                       </a>
                   </li>
                   <li class="nav-line">
                   </li>
               </ul>
           </div>
       </div>
   </div>
   <div class="section page2 noql">
       
       <div class="wrapper">
           <ul>
               <li class="l1">
                   <div class="bg">
                   </div>
                   <div class="wrap">
                       <div class="ico">
                       </div>
                       <h2>企业官网设计开发</h2>
                       <dl>
                           <dd><img src="images/img9.png"/></dd>
                           <dd><span></span></dd>
                           <dd><img src="images/img10.png"/></dd>
                           <dd><span></span></dd>
                           <dd><img src="images/img11.png"/></dd>
                       </dl>
                       <p class="desc">企业官网专属的高端定制化服务<br/>
   解决方案，全面满足建设核心与运行管理<br/>
   并提升企业品牌的有效传播。</p>
                   </div>
                   <div class="img">
                       <img src="images/img2-1.jpg"/>
                   </div>
               </li>
               <li class="l2">
                   <div class="bg">
                   </div>
                   <div class="wrap">
                       <div class="ico">
                       </div>
                       <h2>平台功能型网站设计定制</h2>
                       <dl>
                           <dd><img src="images/img12.png"/></dd>
                           <dd><span></span></dd>
                           <dd><img src="images/img13.png"/></dd>
                           <dd><span></span></dd>
                           <dd><img src="images/img14.png"/></dd>
                       </dl>
                       <p class="desc">皇室科技凭借多年的行业经验与专业团队<br/>
   让各知名行业门户脱颖而出<br/>
   从满足预期到走向卓越。</p>
                   </div>
                   <div class="img">
                       <img src="images/img2-2.jpg"/>
                   </div>
               </li>
               <li class="l3">
                   <div class="bg">
                   </div>
                   <div class="wrap">
                       <div class="ico">
                       </div>
                       <h2>HTML5响应式网站开发</h2>
                       <dl>
                           <dd><img src="images/img15.png"/></dd>
                           <dd><span></span></dd>
                           <dd><img src="images/img16.png"/></dd>
                           <dd><span></span></dd>
                           <dd><img src="images/img17.png"/></dd>
                       </dl>

...

2.CSS

代码如下（节选示例）：

.slider {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
}
   .slides {
       height: 100%;
       /* Simple clear fix */
       overflow: hidden;
       /**
       * Prevent blinking issue
       * Not tested. Experimental.
       */
       -webkit-backface-visibility: hidden;
       -webkit-transform-style: preserve-3d;
       /**
       * Here is CSS transitions
       * responsible for slider animation in modern broswers
       */
       -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
       -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
       -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
       -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
       transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
   }
       .slide {
           height: 100%;
           float: left;
           clear: none;
       }
       .slide img{
           display:block;
       }
   .slider-arrows {}
       .slider-arrow {
           position: absolute;
           display: block;
           margin-bottom: -20px;
           width: 61px;
           height: 86px;
           text-decoration: none;
           text-align: center;
           color: #fff;
           font-size: 2em;
           background-color: #333;
           background-color: rgba(50,50,50,.3);
           background:url(../images/img4.png) no-repeat;
       }
           .slider-arrow--right { bottom: 50%; right: 0; width:58px; }
           .slider-arrow--left { bottom: 50%; left: 0; background:url(../images/img3.png) no-repeat;}
   .slider-nav {
       bottom: 25px;
       left: 50%;
       margin-left: -550px !important;
       position: absolute;
       width: 1110px !important;
       z-index:9;
       text-align:center;
   }
       .slider-nav__item {
           width:18px; height:17px; cursor:pointer; display:inline-block; margin:0 5px; background:url(../images/img1.png) no-repeat;
       }
               .slider-nav__item:hover { /*background: #ccc;*/ }
               .slider-nav__item--current {
                   background:url(../images/img2.png) no-repeat;
               }
.Tpiaochuan{ width:500px; height:230px; background:url(../images/bgx-1.png) no-repeat center center; position:fixed; left:50%; margin-left:-250px; z-index:9999; top:50%; margin-top:-115px;
   background-size:100% 100%;
   -webkit-background-size:100% 100%;
   -moz-background-size:100% 100%;
   display:none;
   opacity:0.9; -html-opacity:0.9;
}
.Tpiaochuan .noneyin{ position:absolute; bottom:30px; left:37px; cursor:pointer;}
.Tpiaochuan .zixun{ position:absolute; bottom:30px; right:30px; cursor:pointer;}

...

3.JS

代码如下（节选示例）：

var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
slice = Array.prototype.slice,
nullLowestDeltaTimeout, lowestDelta;

if ( $.event.fixHooks ) {
for ( var i = toFix.length; i; ) {
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
}
}

var special = $.event.special.mousewheel = {
version: '3.1.9',

setup: function() {
if ( this.addEventListener ) {
for ( var i = toBind.length; i; ) {
this.addEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
// Store the line height and page height for this particular element
$.data(this, 'mousewheel-line-height', special.getLineHeight(this));
$.data(this, 'mousewheel-page-height', special.getPageHeight(this));
},

teardown: function() {
if ( this.removeEventListener ) {
for ( var i = toBind.length; i; ) {
this.removeEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
},

getLineHeight: function(elem) {
return parseInt($(elem)['offsetParent' in $.fn ? 'offsetParent' : 'parent']().css('fontSize'), 10);
},

getPageHeight: function(elem) {
return $(elem).height();
},

settings: {
adjustOldDeltas: true
}
};

$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel');
},

unmousewheel: function(fn) {
return this.unbind('mousewheel', fn);
}
});

function handler(event) {
var orgEvent = event || window.event,
args = slice.call(arguments, 1),
delta = 0,
deltaX = 0,
deltaY = 0,
absDelta = 0;
event = $.event.fix(orgEvent);
event.type = 'mousewheel';

// Old school scrollwheel delta
if ( 'detail' in orgEvent ) { deltaY = orgEvent.detail * -1; }
if ( 'wheelDelta' in orgEvent ) { deltaY = orgEvent.wheelDelta; }
if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; }
if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; }

// Firefox < 17 horizontal scrolling related to DOMMouseScroll event
if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaX = deltaY * -1;
deltaY = 0;
}

// Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
delta = deltaY === 0 ? deltaX : deltaY;

// New school wheel delta (wheel event)
if ( 'deltaY' in orgEvent ) {
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if ( 'deltaX' in orgEvent ) {
deltaX = orgEvent.deltaX;
if ( deltaY === 0 ) { delta = deltaX * -1; }
}

...