530. 响应式互联网服务科技公司网页大学生期末大作业 Web前端网页制作 html+css+js

最新推荐文章于 2024-10-10 16:09:45 发布

仙女网页制作

最新推荐文章于 2024-10-10 16:09:45 发布

阅读量849

点赞数 18

分类专栏： Web网页设计实例科技文章标签：前端 html css javascript html5 bootstrap jquery

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

版权

Web网页设计实例同时被 2 个专栏收录

525 篇文章 28 订阅

订阅专栏

科技

9 篇文章 1 订阅

订阅专栏

欢迎光临仙女的网页世界！这里有各行各业的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>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<body>

<div class="ct_wrapper">


<header>
   
<div class="top_strip">
   <div class="container">
<div class="top_location_wrap">
<p><i class="fa fa-map-marker"></i>江苏省昆山市智谷创意产业园</p>
</div>
<div class="top_ui_element">
<ul>
<li><i class="fa fa-envelope"></i><a>123456@123.com</a></li>
<li><i class="fa fa-phone"></i><a>400-12345678</a></li>
</ul>
</div>
</div>
</div>



<div class="logo_nav_outer_wrap">
   <div class="container">
<div class="logo_wrap">
<a href="#"><img src="images/logo.png" alt=""></a>
</div>

<nav class="main_navigation">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="about-us.html">关于我们</a></li>
<li><a href="course-listing.html">案例介绍</a></li>
<li><a href="our-teacher.html">团队风采</a></li>
<li><a href="blog-grid.html">新闻中心</a></li>
<li><a href="contact-us.html">联系我们</a></li>
</ul>
</nav>

<div id="kode-responsive-navigation" class="dl-menuwrapper">
<button class="dl-trigger">Open Menu</button>
<ul class="dl-menu">
<li class="active"><a href="index.html">网站首页</a></li>
<li><a href="about-us.html">关于我们</a></li>
<li class="menu-item kode-parent-menu"><a href="course-listing.html">案例介绍</a></li>
<li class="menu-item kode-parent-menu"><a href="our-teacher.html">团队风采</a></li>
<li class="menu-item kode-parent-menu"><a href="blog-grid.html">新闻中心</a></li>
<li class="menu-item kode-parent-menu"><a href="contact-us.html">联系我们</a></li>
</ul>
</div>

</div>
</div>

</header>



<div class="banner_outer_wrap">
   <ul class="main_slider">
   <li>
   <img src="images/banner/banner1.jpg" alt="">

</li>
<li>
   <img src="images/banner/banner1.jpg" alt="">

</li>
</ul>
</div>



<div class="ct_content_wrap">

<section>
   <div class="container">
   <div class="get_started_outer_wrap">
       <div class="row">
<div class="col-md-6">
<div class="get_started_content_wrap ct_blog_detail_des_list">
<h3>关于CN科技</h3>
<p>CN科技专注网站建设、网站设计、品牌设计、空间设计、网络营销、网站托管、整合营销服务为核心服务。专注于创意设计实现商业价值最大化，为所有谋求长远发展的企业提升品牌品质。拥有经验丰富技术团队，专业的资深设计师。凝聚了一批行业内最优秀的年轻人，富有创造力和奉献精神。我们所做的一切都是以客户的利益为出发点，帮助企业建立全面且切实的市场形象，我们坚信与企共同成长！</p>
<ul>
   <li>产品用心,前期对产品功能定义及目标用户群调研，上线后进行用户可用性测试。</li>
<li>服务贴心，合作的客户中，50%以上的客户都签订了长期战略合作协议。</li>
<li>品牌知心，凭借对服务品质和商业价值的追求，赢得了众多国内外客户的信任。</li>
<li>我们专注于创意设计实现商业价值最大化，为所有谋求长远发展的企业提升品牌品质</li>
<li>团队有多年丰富的设计经验，专注于创意设计实现商业价值最大化</li>
</ul>
</div>
</div>

<div class="col-md-6">
<div class="get_started_video">
<img src="images/ab.jpg" alt="">
</div>
</div>
   </div>
</div>

...

2.CSS

代码如下（节选示例）：

@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?kqr4pl');
src: url('../fonts/icomoon.eot?kqr4pl#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?kqr4pl') format('truetype'),
url('../fonts/icomoon.woff?kqr4pl') format('woff'),
url('../fonts/icomoon.svg?kqr4pl#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-avatar:before {
content: "\e900";
}
.icon-command:before {
content: "\e901";
}
.icon-logo:before {
content: "\e902";
}
.icon-open-book:before {
content: "\e903";
}
.icon-pulse:before {
content: "\e904";
}

...

3.JS

代码如下（节选示例）：

;( function( $, window, undefined ) {

'use strict';

// global
var Modernizr = window.Modernizr, $body = $( 'body' );

   $.DLMenu = function( options, element ) {
       this.$el = $( element );
       this._init( options );
   };

   // the options
   $.DLMenu.defaults = {
       // classes for the animation effects
       animationClasses : { classin : 'dl-animate-in-1', classout : 'dl-animate-out-1' },
       // callback: click a link that has a sub menu
       // el is the link element (li); name is the level name
       onLevelClick : function( el, name ) { return false; },
       // callback: click a link that does not have a sub menu
       // el is the link element (li); ev is the event obj
       onLinkClick : function( el, ev ) { return false; }
   };

$.DLMenu.prototype = {
_init : function( options ) {

           // options
           this.options = $.extend( true, {}, $.DLMenu.defaults, options );
           // cache some elements and initialize some variables
           this._config();

           var animEndEventNames = {
                   'WebkitAnimation' : 'webkitAnimationEnd',
                   'OAnimation' : 'oAnimationEnd',
                   'msAnimation' : 'MSAnimationEnd',
                   'animation' : 'animationend'
               },
               transEndEventNames = {
                   'WebkitTransition' : 'webkitTransitionEnd',
                   'MozTransition' : 'transitionend',
                   'OTransition' : 'oTransitionEnd',
                   'msTransition' : 'MSTransitionEnd',
                   'transition' : 'transitionend'
               };
           // animation end event name
           this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] + '.dlmenu';
           // transition end event name
           this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.dlmenu',
           // support for css animations and css transitions
           this.supportAnimations = Modernizr.cssanimations,
           this.supportTransitions = Modernizr.csstransitions;

this._initEvents();

       },
       _config : function() {
           this.open = false;
           this.$trigger = this.$el.children( '.dl-trigger' );
           this.$menu = this.$el.children( 'ul.dl-menu' );
           this.$menuitems = this.$menu.find( 'li:not(.dl-back)' );
           this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-back"><a href="#">back</a></li>' );
           this.$back = this.$menu.find( 'li.dl-back' );
       },
       _initEvents : function() {

var self = this;

           this.$trigger.on( 'click.dlmenu', function() {

               if( self.open ) {
                   self._closeMenu();
               }
               else {
                   self._openMenu();
               }
               return false;

} );

...