806. 大学生HTML5期末大作业 ―【Bootstrap家居装饰公司响应式自适应网页(6页)】 Web前端网页制作 html5+css3+js-CSDN博客

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

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

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

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

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

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

一、网页概述

本实例应用html+css+js：Bootstrap、Fonts 、导航菜单、图片轮翻、返回主页按钮等。响应式自适应网页，可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含6个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>生态家居</title>
<link rel="icon" href="images/top-arrow.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Interient Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() {setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="all" />

<link href="css/owl.carousel.css" rel="stylesheet">

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

<link href="css/style.css" rel="stylesheet" type="text/css"/>

<script src="js/jquery-2.1.4.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
</head>

<body>

<div class="header" id="home">
<div class="header-top">
<nav class="navbar navbar-default nav-dflt-setin">
<div class="container">

<div class="navbar-header nav-min-wid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<h1><a class="navbar-brand" href="index.html">生态家居</a></h1>
</div>

<div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-max-wid cl-effect-5" id="cl-effect-5">
<li><a href="index.html"><span data-hover="首页" class="active">首页</span></a></li>
<li><a href="designer.html"><span data-hover="设计师">设计师</span></a></li>
<li><a href="services.html"><span data-hover="服务">服务</span></a></li>
<li><a href="case.html"><span data-hover="案例">案例</span></a></li>
<li><a href="company.html"><span data-hover="公司">公司</span></a></li>
<li><a href="information.html"><span data-hover="联系我们">联系我们</span></a></li>
</ul>
</div>

<div class="clearfix"></div>
</div>

</nav>
</div>
<div class="header-bottom">
<div id="mycarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="images/ban.jpg" alt="banner" class="banner-wid">
<div class="carousel-caption">
<h3>思想设计必须有思想，也就是我们常说的构思，建筑设计如此，室内设计也一样。我要表达的是什么，我想向空间的参观者和感受者传递什么信息，是设计前必须考虑的问题。明确思路，并把握之，使其贯穿于整个设计之中，这样才能保持设计的一致性和连贯性，保持空间之间的流动的完整。</h3>
</div>
</div>
<div class="item"> <img src="images/ban1.jpg" alt="banner" class="banner-wid">
<div class="carousel-caption">
<h3>空间空间和功能是室内设计的前题，室内空间是建筑空间的延续和发展。空间的尺度和均衡关系是设计需考虑的首要因素。而功能决定了空间，不同功能的空间有着相应的比例关系，处理好这些关系是室内设计的第一步。不同功能的空间有着其相应的性格，并根据所处的环境和使用者的情况，展现出不同的表情。把握这层关系并从文脉中找出设计思想。是整个设计的灵魂所在。 </h3>
</div>
</div>
<div class="item"> <img src="images/ban2.jpg" alt="banner" class="banner-wid">
<div class="carousel-caption">
<h3>留白设计的过程中，很容易犯的另一个毛病就是就是天地墙六个面均想设计得丰富，运用很多的符号和手法，以至于堆得满满的，让人喘不过气来。素不知学会留白才是最重要的。要从三维甚至是四维的空间去考虑，应该想到，你设计的是一个空间而不是各自独立的平面，如何抓住该空间的重点，是关键。 </h3>
</div>
</div>
</div>

</div>
</div>
</div>


<div class="content">
<section class="best-quality">
<div class="container">
<p>这世界上任何颜色都是美的，只有不成功的搭配可能不美。</p>
</div>
</section>
<div class="work-section">
<div class="container">
<div class="col-md-6 work-grids">
<div class="work-grid-text">
<ul>
<li> <span class="glyphicon glyphicon-glass work-grid-icn" aria-hidden="true"></span>护理 </li>
<li> <span class="glyphicon glyphicon-wrench work-grid-icn" aria-hidden="true"></span>安装 </li>
<li> <span class="glyphicon glyphicon-pushpin work-grid-icn" aria-hidden="true"></span>改造 </li>
</ul>

...

2.CSS

代码如下（节选示例）：

/*!
* Bootstrap v3.3.4 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*//*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}select{background:#fff!important}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}@font-face{font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-regular.eot);src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype')

...

3.JS

代码如下（节选示例）：

/*
* jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php
*
* Uses the built In easIng capabilities added In jQuery 1.1
* to offer multiple easIng options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/

// t: current time, b: begInnIng value, c: change In value, d: duration

jQuery.extend( jQuery.easing,
{
   easeInQuad: function (x, t, b, c, d) {
       return c*(t/=d)*t + b;
   },
   easeOutQuad: function (x, t, b, c, d) {
       return -c *(t/=d)*(t-2) + b;
   },
   easeInOutQuad: function (x, t, b, c, d) {
       if ((t/=d/2) < 1) return c/2*t*t + b;
       return -c/2 * ((--t)*(t-2) - 1) + b;
   },
   easeInCubic: function (x, t, b, c, d) {
       return c*(t/=d)*t*t + b;
   },
   easeOutCubic: function (x, t, b, c, d) {
       return c*((t=t/d-1)*t*t + 1) + b;
   },
   easeInOutCubic: function (x, t, b, c, d) {
       if ((t/=d/2) < 1) return c/2*t*t*t + b;
       return c/2*((t-=2)*t*t + 2) + b;
   },
   easeInQuart: function (x, t, b, c, d) {
       return c*(t/=d)*t*t*t + b;
   },
   easeOutQuart: function (x, t, b, c, d) {
       return -c * ((t=t/d-1)*t*t*t - 1) + b;
   },
   easeInOutQuart: function (x, t, b, c, d) {
       if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
       return -c/2 * ((t-=2)*t*t*t - 2) + b;
   },
   easeInQuint: function (x, t, b, c, d) {
       return c*(t/=d)*t*t*t*t + b;
   },
   easeOutQuint: function (x, t, b, c, d) {
       return c*((t=t/d-1)*t*t*t*t + 1) + b;
   },
   easeInOutQuint: function (x, t, b, c, d) {
       if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
       return c/2*((t-=2)*t*t*t*t + 2) + b;
   },
   easeInSine: function (x, t, b, c, d) {
       return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
   },
   easeOutSine: function (x, t, b, c, d) {
       return c * Math.sin(t/d * (Math.PI/2)) + b;
   },
   easeInOutSine: function (x, t, b, c, d) {
       return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
   },
   easeInExpo: function (x, t, b, c, d) {
       return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
   },
   easeOutExpo: function (x, t, b, c, d) {
       return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
   },
   easeInOutExpo: function (x, t, b, c, d) {
       if (t==0) return b;
       if (t==d) return b+c;
       if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
       return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
   },
   easeInCirc: function (x, t, b, c, d) {
       return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
   },
   easeOutCirc: function (x, t, b, c, d) {
       return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
   },
   easeInOutCirc: function (x, t, b, c, d) {
       if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
       return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
   },
   easeInElastic: function (x, t, b, c, d) {
       var s=1.70158;var p=0;var a=c;
       if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
       if (a < Math.abs(c)) { a=c; var s=p/4; }
       else var s = p/(2*Math.PI) * Math.asin (c/a);
       return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
   },
   easeOutElastic: function (x, t, b, c, d) {
       var s=1.70158;var p=0;var a=c;
       if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
       if (a < Math.abs(c)) { a=c; var s=p/4; }
       else var s = p/(2*Math.PI) * Math.asin (c/a);
       return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
   },
   easeInOutElastic: function (x, t, b, c, d) {
       var s=1.70158;var p=0;var a=c;
       if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
       if (a < Math.abs(c)) { a=c; var s=p/4; }
       else var s = p/(2*Math.PI) * Math.asin (c/a);
       if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
       return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
   },
   easeInBack: function (x, t, b, c, d, s) {
       if (s == undefined) s = 1.70158;
       return c*(t/=d)*t*((s+1)*t - s) + b;
   },
   easeOutBack: function (x, t, b, c, d, s) {
       if (s == undefined) s = 1.70158;
       return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
   },
   easeInOutBack: function (x, t, b, c, d, s) {
       if (s == undefined) s = 1.70158;
       if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
       return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
   },
   easeInBounce: function (x, t, b, c, d) {
       return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
   },
   easeOutBounce: function (x, t, b, c, d) {
       if ((t/=d) < (1/2.75)) {
           return c*(7.5625*t*t) + b;
       } else if (t < (2/2.75)) {
           return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
       } else if (t < (2.5/2.75)) {
           return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
       } else {
           return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
       }
   },
   easeInOutBounce: function (x, t, b, c, d) {
       if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
       return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
   }
});