36.响应式自适应纸业公司网页 Web前端网页制作大学生期末大作业 html+css+js-CSDN博客

本文链接：https://blog.csdn.net/VX_L_5201314168/article/details/142748877

一、前言

本实例是个响应式自适应纸业公司静态网站，应用html+css+js，包括bootstrap、jquery、实现图片自适应动态轮翻、二级三级菜单、留言表单等，该案例模板适用于企业的网页开发，供大家参考。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>自适应纸业公司网站页面</title>
<meta name="keywords" content="集团">
<meta name="description" content="集团">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="favicon.ico">

<link rel="stylesheet" type="text/css" href="css/slick.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mmenu.all.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>

<body>
<div>

<header class="header">
<section class="container"> <a href="javascript:;" class="phone-nav glyphicon glyphicon-th-list"></a> </section>
<div class="top">
<div class="container clearfix">
<div class="logo pull-left"> <a href="javascript:;"><img src="images/logo.png" alt="" /></a> </div>
<div class="navwrap pull-right">
<div class="lwt-wrap"> <a href="javascript:;"><img src="images/yuyan.png" alt="" /></a> <span> <img src="images/weixin.png" alt="" />
<div class="erweima"> <img src="images/erweima.jpg" alt="" /> </div>
</span> <a class="toptel" href="javascript:;"><img src="images/tel.png" alt="" />400-111-1111</a> </div>
<ul class="nav">
<li class="active"><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a>
<ul class="two">
<li><a href="javascript:;">公司简介</a></li>
<li><a href="honor.html">荣誉资质</a></li>
</ul>
</li>
<li><a href="yewu.html">业务范围</a>
<ul class="two">
<li><a href="yewuny.html">纸类印刷</a>
<ul>
<li><a href="javascript:;">宣传册印刷</a></li>
<li><a href="javascript:;">广告用品印刷</a></li>
<li><a href="javascript:;">文具用品印刷</a></li>
<li><a href="javascript:;">名片贺卡印刷</a></li>
</ul>
</li>
<li><a href="yewuny.html">包装与礼品</a></li>
<li><a href="yewuny.html">海报与展架</a></li>
<li><a href="yewuny.html">平面设计</a></li>
</ul>
</li>
<li><a href="anli.html">客户案例</a>
<ul class="two">
<li><a href="anliny.html">纸类印刷</a>
<ul>
<li><a href="javascript:;">宣传册印刷</a></li>
<li><a href="javascript:;">广告用品印刷</a></li>
<li><a href="javascript:;">文具用品印刷</a></li>
<li><a href="javascript:;">名片贺卡印刷</a></li>
</ul>
</li>
<li><a href="anliny.html">包装与礼品</a></li>
<li><a href="anliny.html">海报与展架</a></li>
<li><a href="anliny.html">平面设计</a></li>
</ul>
</li>
<li><a href="shili.html">实力展现</a>
<ul class="two">
<li><a href="javascript:;">印刷中心</a></li>
<li><a href="javascript:;">唯星事业部</a></li>
</ul>
</li>
<li><a href="news.html">新闻中心</a>
<ul class="two">
<li><a href="newsny.html">公司新闻</a></li>
<li><a href="newsny.html">行业动态</a></li>
</ul>
</li>
<li><a href="we.html">联系我们</a></li>

......

2.CSS

代码如下（节选示例）：

#featured-area {
   height: 400px;
   width: 86.325%;
   margin: 40px auto 0 auto;
}
.roundabout-holder {
   list-style: none;
   width: 60%;
   height: 366px;
   margin: 0px auto;
}
.roundabout-moveable-item {
   font-size: 12px!important;
   height: 366px;
   width: 100%;
   cursor: pointer;
   padding: 5px;

   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
}
.roundabout-moveable-item img {
   max-height: 100%;
   max-width: 100%;
   background-color: #000;
   /*margin: 0;*/
}
.roundabout-in-focus {
   cursor: auto;
}
.roundabout-in-focus:hover {
   -webkit-box-shadow: 0px 0px 20px #787878;
   -moz-box-shadow: 0px 0px 20px #787878;
   /*background: #f9f9f9;*/
}
.roundabout-holder span {
   display: none;
}
.roundabout-in-focus:hover span {
   display: inline;
   position: absolute;
   bottom: 5px;
   right: 5px;
   padding: 8px 20px;
   background: #f9f9f9;
   color: #3366cc;
   z-index: 999;
   -webkit-border-top-left-radius: 5px;
   -moz-border-radius-topLeft: 5px;
   border-left: 1px solid #aaaaaa;
   border-top: 1px solid #aaaaaa;
}
.roundabout a:active,
.roundabout a:focus,
.roundabout a:visited {
   outline: none;
   text-decoration: none;
}
.roundabout li {
   margin: 0
}

......

3.JS

代码如下（节选示例）：

(function() {
// Use local alias
var $ = jQuery;

var LightboxOptions = (function() {
function LightboxOptions() {
this.fadeDuration = 500;
this.fitImagesInViewport = true;
this.resizeDuration = 700;
this.positionFromTop = 150;
this.showImageNumberLabel = true;
this.alwaysShowNavOnTouchDevices = false;
this.wrapAround = false;
}

// Change to localize to non-english language
LightboxOptions.prototype.albumLabel = function(curImageNum, albumSize) {
return "Image " + curImageNum + " of " + albumSize;
};

return LightboxOptions;
})();

var Lightbox = (function() {
function Lightbox(options) {
this.options = options;
this.album = [];
this.currentImageIndex = void 0;
this.init();
}

Lightbox.prototype.init = function() {
this.enable();
this.build();
};

// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
// that contain 'lightbox'. When these are clicked, start lightbox.
Lightbox.prototype.enable = function() {
var self = this;
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
self.start($(event.currentTarget));

return false;
});
};

// Build html for the lightbox and the overlay.
// Attach event handlers to the new DOM elements. click click click
Lightbox.prototype.build = function() {
var self = this;
$("<div id='lightboxOverlay' class='lightboxOverlay' style='filter:alpha(opacity=80);'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><div class='lb-dataContainer'><div class='lb-data'><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div><img class='lb-image' src='' /></div></div></div>").appendTo($('body'));

// Cache jQuery objects
this.$lightbox = $('#lightbox');
this.$overlay = $('#lightboxOverlay');
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
this.$container = this.$lightbox.find('.lb-container');

// Store css values for future lookup
this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);

// Attach event handlers to the newly minted DOM elements
this.$overlay.hide().on('click', function() {
self.end();
return false;
});

this.$lightbox.hide().on('click', function(event) {
if ($(event.target).attr('id') === 'lightbox') {
self.end();
}
return false;
});

this.$outerContainer.on('click', function(event) {
if ($(event.target).attr('id') === 'lightbox') {
self.end();
}
return false;
});

this.$lightbox.find('.lb-prev').on('click', function() {
if (self.currentImageIndex === 0) {
self.changeImage(self.album.length - 1);
} else {
self.changeImage(self.currentImageIndex - 1);
}
return false;
});

this.$lightbox.find('.lb-next').on('click', function() {
if (self.currentImageIndex === self.album.length - 1) {
self.changeImage(0);
} else {
self.changeImage(self.currentImageIndex + 1);
}
return false;
});

......