【简单的家政服务公司响应式自适应网页】 Web前端网页制作 html5+css3+js

文章正文

发布时间：2024-11-18 13:07

欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

5000+网页案例完整代码，主题涵盖30+种类型:

二、网页简介

本实例应用html5+css3+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">

...

2.CSS

代码如下（节选示例）：

/*!
* Bootstrap v3.3.5 ()
* 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
}

...

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]);
}
}

...

六、总结

一个优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

更多优质博客文章、完整代码案例模板，点击以下链接查阅：

仙女网页设计-CSDN博客

Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻

标签