230. Web前端网页制作简单的家政服务公司响应式网页设计实例大学生期末大作业 html+css+js

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

前言

简单的家政服务公司响应式网页设计实例，应用html+css+js： Div、导航栏、Banner、选项卡、无缝滚动插件、图片轮翻效果、鼠标滑动特效等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。

一、网页概述

网页布局为“同字型”的布局，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验。

支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

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

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>xx</title>
<link rel="stylesheet" href="Assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="Assets/css/reset.css"/>

</head>

<body>

<div class="header">
<div class="head clearfix">
<div class="nav_m">
<div class="n_icon">导航栏</div>
<ul class="nav clearfix">
<li class="now"><a href="index.html">网站首页</a></li>
<li ><a href="about.html">关于xx</a></li>

<li><a href="service.html">服务介绍</a></li>

<li><a href="news.html">家庭百科</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
</div>
</div>


<div id="banner" class="banner">
<div id="owl-demo" class="owl-carousel">
<a class="item" target="_blank" href="" >
<img src="Assets/images/banner.jpg" alt="">
</a>
<a class="item" target="_blank" href="" >
<img src="Assets/images/banner1.jpg" alt="">
</a>
<a class="item" target="_blank" href="" >
<img src="Assets/images/banner2.jpg" alt="">
</a>

</div>
</div>

<div class="bg_a">
<div class="wrap">
<div class="i_name">
<p>THE PERMANENT WORKS</p>
<em>关于优匠</em>
<img src="Assets/images/titleline.png" alt=""/>
</div>
   <dl class="i_about clearfix">
   <dt><a href=""><img src="Assets/images/banner4.jpg" alt=""/></a></dt>
<dd>
   <h6>TIANYOU.DESIGN</h6>
<div class="tip">xx家政是一家专注于为客户服务的家政公司</div>
<p>xx家政是xx家政服务有限公司旗下品牌。优匠专注于母婴健康，育儿辅助，养老服务。xx家政位于上海，服务江浙沪及美国，加拿大，澳洲，欧洲等国家和地区的客户。我们口号是：优于行，匠于心。区别一般传统家政公司模式，致力于优化家政服务者的行为规范和技能水平，用匠者之心，设立了完善的培训体系，心理学专家，儿童早教师，高级营养师，等领域组成的课程研发团队，为客户提供专业的家政服务人员提供强大的技术保障。</p>
<span>服务保障</span>
<p>【个人身份+公安】身份与公安系统联网，杜绝假身份，严格认真人员个人信息。

　　<br>【健康无忧+医院体检】指定正规医院进行服务人员的体检，杜绝入户前的健康隐患。

　　<br>【专业培训+与时俱进】上海月嫂证，配合合作教育机构，定期公司内部专业培训，让服务时时刻刻与时俱进。

　　<br>【管理完善+职能匹配】对所有阿姨进行系统化科学管理，所有阿姨登记进入公司重金研发的职能管理系统，可以科学合理而且快速的匹配合适的阿姨。

　　<br>【服务保障+随时关怀】日志每日填写,您的评价是月嫂的晋升，淘汰的金标准。经验导师定期回访，线上线下随时为您解答相关疑问。

　　<br>【保险护航+拒绝意外】所有上户阿姨购买家政意外险。</p>

</dd>
</dl>
</div>
</div>
<div class="index-server">
<div class=" container">

<div class="wrap">
<div class="i_name">
<p>THE PERMANENT WORKS</p>
<em>精品项目</em>
<img src="Assets/images/titleline.png" alt=""/>
</div>
<div class="works">
   <dl class="clearfix">
   <dt>
   <img src="Assets/images/boutique1.jpg" alt=""/>
<div class="des">
   <div class="title"><a href="">母婴护理</a></div>
<div class="ctn"></div>

</div>
</dt>
<dd>
   <ul class="clearfix">
   <li>
   <img src="Assets/images/boutique2.jpg" alt=""/>
<div class="des">
<div class="title"><a href="">育婴服务</a></div>
<div class="ctn"></div>

</div>
</li>
<li>
   <img src="Assets/images/boutique3.jpg" alt=""/>
<div class="des">
<div class="title"><a href="">料理家务</a></div>
<div class="ctn"></div>

</div>
</li>
<li>
   <img src="Assets/images/boutique4.jpg" alt=""/>
<div class="des">
<div class="title"><a href="">家庭保洁</a></div>
<div class="ctn"></div>

</div>
</li>
<li>
   <img src="Assets/images/boutique5.jpg" alt=""/>
<div class="des">
<div class="title"><a href="">养老护理</a></div>
<div class="ctn"></div>

</div>
</li>
</ul>
</dd>
</dl>



</div>
</div>

<div class="bg_b">
   <div class="wrap f_zx">
   <p style="font-size: 2.0em;text-align: center;">xx家政，您的生活的好帮手！</p>
       <a href="">立即咨询</a>
</div>
</div>

<div class="content news " style="text-align: center; background: #fff;">
<div class="w1200 container">
   <div class="row">
<div class="i_name">
<p>THE PERMANENT WORKS</p>
<em>家庭百科</em>
<img src="Assets/images/titleline.png" alt=""/>
</div>
<ul class="news_zi_ul one" style="font-size:0px;">
           <li class="clearfix two col-md-6 col-sm-12">
               <div class="news_left clearfix">
                   <div class="pic">
                       <a href="news_show - 2.html"><img src="Assets/images/bg_5c0afeb1-cc01-4fa9-9fb2-693274501cc6.jpg" alt=""></a>
                       <i></i>
                   </div>
                   <div class="txt">
                       <a href="news_show - 2.html">每年3-5个月孩子长的最快！这样做能帮孩子长高！</a>
                       <p>人体的生长，完全来自于入口的食物质量，想让宝宝长得高，各种营养素都要均衡。</p>
                   </div>
               </div>
               <div class="news_right " >
                   <span style="font-size:30px;">07.25</span>
                   <time>2017</time>
               </div>
           </li>

...

2.CSS

代码如下（节选示例）：

/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

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
   }
   .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'), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
}*/

.glyphicon {
   position: relative;
   top: 1px;
   display: inline-block;
   font-family: 'Glyphicons Halflings';
   font-style: normal;
   font-weight: 400;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}

.glyphicon-asterisk:before {
content: "\2a"
}

.glyphicon-plus:before {
content: "\2b"
}

.glyphicon-eur:before,
.glyphicon-euro:before {
content: "\20ac"
}

.glyphicon-minus:before {
content: "\2212"
}

.glyphicon-cloud:before {
content: "\2601"
}

.glyphicon-envelope:before {
content: "\2709"
}

.glyphicon-pencil:before {
content: "\270f"
}

.glyphicon-glass:before {
content: "\e001"
}

.glyphicon-music:before {
content: "\e002"
}

.glyphicon-search:before {
content: "\e003"
}

.glyphicon-heart:before {
content: "\e005"
}

.glyphicon-star:before {
content: "\e006"
}

.glyphicon-star-empty:before {
content: "\e007"
}

.glyphicon-user:before {
content: "\e008"
}

.glyphicon-film:before {
content: "\e009"
}

.glyphicon-th-large:before {
content: "\e010"
}

.glyphicon-th:before {
content: "\e011"
}

.glyphicon-th-list:before {
content: "\e012"
}

.glyphicon-ok:before {
content: "\e013"
}

.glyphicon-remove:before {
content: "\e014"
}

.glyphicon-zoom-in:before {
content: "\e015"
}

.glyphicon-zoom-out:before {
content: "\e016"
}

.glyphicon-off:before {
content: "\e017"
}

.glyphicon-signal:before {
content: "\e018"
}

.glyphicon-cog:before {
content: "\e019"
}

.glyphicon-trash:before {
content: "\e020"
}

.glyphicon-home:before {
content: "\e021"
}

.glyphicon-file:before {
content: "\e022"
}

.glyphicon-time:before {
content: "\e023"
}

.glyphicon-road:before {
content: "\e024"
}

.glyphicon-download-alt:before {
content: "\e025"
}

.glyphicon-download:before {
content: "\e026"
}

.glyphicon-upload:before {
content: "\e027"
}

.glyphicon-inbox:before {
content: "\e028"
}

.glyphicon-play-circle:before {
content: "\e029"
}

.glyphicon-repeat:before {
content: "\e030"
}

.glyphicon-refresh:before {
content: "\e031"
}

.glyphicon-list-alt:before {
content: "\e032"
}

.glyphicon-lock:before {
content: "\e033"
}

.glyphicon-flag:before {
content: "\e034"
}

.glyphicon-headphones:before {
content: "\e035"
}

.glyphicon-volume-off:before {
content: "\e036"
}

.glyphicon-volume-down:before {
content: "\e037"
}

.glyphicon-volume-up:before {
content: "\e038"
}

.glyphicon-qrcode:before {
content: "\e039"
}

.glyphicon-barcode:before {
content: "\e040"
}

.glyphicon-tag:before {
content: "\e041"
}

.glyphicon-tags:before {
content: "\e042"
}

.glyphicon-book:before {
content: "\e043"
}

...

3.JS

代码如下（节选示例）：

if (typeof Object.create !== "function") {
Object.create = function (obj) {
function F() {}
F.prototype = obj;
return new F();
};
}
(function ($, window, document) {

var Carousel = {
init : function (options, el) {
var base = this;

base.$elem = $(el);
base.options = $.extend({}, $.fn.owlCarousel.options, base.$elem.data(), options);

base.userOptions = options;
base.loadContent();
},

loadContent : function () {
var base = this, url;

if (typeof base.options.beforeInit === "function") {
base.options.beforeInit.apply(this, [base.$elem]);
}

if (typeof base.options.jsonPath === "string") {
url = base.options.jsonPath;
$.getJSON(url, getData);
} else {
base.logIn();
}
},

base.$elem.data("owl-originalStyles", base.$elem.attr("style"));
base.$elem.data("owl-originalClasses", base.$elem.attr("class"));

base.$elem.css({opacity: 0});
base.orignalItems = base.options.items;
base.checkBrowser();
base.wrapperWidth = 0;
base.checkVisible = null;
base.setVars();
},

setVars : function () {
var base = this;
if (base.$elem.children().length === 0) {return false; }
base.baseClass();
base.eventTypes();
base.$userItems = base.$elem.children();
base.itemsAmount = base.$userItems.length;
base.wrapItems();
base.$owlItems = base.$elem.find(".owl-item");
base.$owlWrapper = base.$elem.find(".owl-wrapper");
base.playDirection = "next";
base.prevItem = 0;
base.prevArr = [0];
base.currentItem = 0;
base.customEvents();
base.onStartup();
},

onStartup : function () {
var base = this;
base.updateItems();
base.calculateAll();
base.buildControls();
base.updateControls();
base.response();
base.moveEvents();
base.stopOnHover();
base.owlStatus();

if (base.options.transitionStyle !== false) {
base.transitionTypes(base.options.transitionStyle);
}
if (base.options.autoPlay === true) {
base.options.autoPlay = 5000;
}
base.play();

base.$elem.find(".owl-wrapper").css("display", "block");

if (!base.$elem.is(":visible")) {
base.watchVisibility();
} else {
base.$elem.css("opacity", 1);
}
base.onstartup = false;
base.eachMoveUpdate();
if (typeof base.options.afterInit === "function") {
base.options.afterInit.apply(this, [base.$elem]);
}
},

eachMoveUpdate : function () {
var base = this;

if (base.options.lazyLoad === true) {
base.lazyLoad();
}
if (base.options.autoHeight === true) {
base.autoHeight();
}
base.onVisibleItems();

if (typeof base.options.afterAction === "function") {
base.options.afterAction.apply(this, [base.$elem]);
}
},

updateVars : function () {
var base = this;
if (typeof base.options.beforeUpdate === "function") {
base.options.beforeUpdate.apply(this, [base.$elem]);
}
base.watchVisibility();
base.updateItems();
base.calculateAll();
base.updatePosition();
base.updateControls();
base.eachMoveUpdate();
if (typeof base.options.afterUpdate === "function") {
base.options.afterUpdate.apply(this, [base.$elem]);
}
},

reload : function () {
var base = this;
window.setTimeout(function () {
base.updateVars();
}, 0);
},

watchVisibility : function () {
var base = this;

if (base.$elem.is(":visible") === false) {
base.$elem.css({opacity: 0});
window.clearInterval(base.autoPlayInterval);
window.clearInterval(base.checkVisible);
} else {
return false;
}
base.checkVisible = window.setInterval(function () {
if (base.$elem.is(":visible")) {
base.reload();
base.$elem.animate({opacity: 1}, 200);
window.clearInterval(base.checkVisible);
}
}, 500);
},

wrapItems : function () {
var base = this;
base.$userItems.wrapAll("<div class=\"owl-wrapper\">").wrap("<div class=\"owl-item\"></div>");
base.$elem.find(".owl-wrapper").wrap("<div class=\"owl-wrapper-outer\">");
base.wrapperOuter = base.$elem.find(".owl-wrapper-outer");
base.$elem.css("display", "block");
},

baseClass : function () {
var base = this,
hasBaseClass = base.$elem.hasClass(base.options.baseClass),
hasThemeClass = base.$elem.hasClass(base.options.theme);

if (!hasBaseClass) {
base.$elem.addClass(base.options.baseClass);
}

if (!hasThemeClass) {
base.$elem.addClass(base.options.theme);
}
},

updateItems : function () {
var base = this, width, i;

if (base.options.responsive === false) {
return false;
}
if (base.options.singleItem === true) {
base.options.items = base.orignalItems = 1;
base.options.itemsCustom = false;
base.options.itemsDesktop = false;
base.options.itemsDesktopSmall = false;
base.options.itemsTablet = false;
base.options.itemsTabletSmall = false;
base.options.itemsMobile = false;
return false;
}

width = $(base.options.responsiveBaseWidth).width();

if (width > (base.options.itemsDesktop[0] || base.orignalItems)) {
base.options.items = base.orignalItems;
}
if (base.options.itemsCustom !== false) {
//Reorder array by screen size
base.options.itemsCustom.sort(function (a, b) {return a[0] - b[0]; });

for (i = 0; i < base.options.itemsCustom.length; i += 1) {
if (base.options.itemsCustom[i][0] <= width) {
base.options.items = base.options.itemsCustom[i][1];
}
}

} else {

if (width <= base.options.itemsDesktop[0] && base.options.itemsDesktop !== false) {
base.options.items = base.options.itemsDesktop[1];
}

if (width <= base.options.itemsDesktopSmall[0] && base.options.itemsDesktopSmall !== false) {
base.options.items = base.options.itemsDesktopSmall[1];
}

if (width <= base.options.itemsTablet[0] && base.options.itemsTablet !== false) {
base.options.items = base.options.itemsTablet[1];
}

if (width <= base.options.itemsTabletSmall[0] && base.options.itemsTabletSmall !== false) {
base.options.items = base.options.itemsTabletSmall[1];
}

if (width <= base.options.itemsMobile[0] && base.options.itemsMobile !== false) {
base.options.items = base.options.itemsMobile[1];
}
}

//if number of items is less than declared
if (base.options.items > base.itemsAmount && base.options.itemsScaleUp === true) {
base.options.items = base.itemsAmount;
}
},

response : function () {
var base = this,
smallDelay,
lastWindowWidth;

if (base.options.responsive !== true) {
return false;
}
lastWindowWidth = $(window).width();

base.resizer = function () {
if ($(window).width() !== lastWindowWidth) {
if (base.options.autoPlay !== false) {
window.clearInterval(base.autoPlayInterval);
}
window.clearTimeout(smallDelay);
smallDelay = window.setTimeout(function () {
lastWindowWidth = $(window).width();
base.updateVars();
}, base.options.responsiveRefreshRate);
}
};
$(window).resize(base.resizer);
},

updatePosition : function () {
var base = this;
base.jumpTo(base.currentItem);
if (base.options.autoPlay !== false) {
base.checkAp();
}
},

...