目录
前言
简洁大气的灭蚊器公司网页设计实例，应用html+css+js： Div、导航栏、banner、图片轮翻效果、留言表单、搜索等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。
一、网页概述
网页布局为“同字型”的响应式布局，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底。
支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含8个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>博远</title>
<link rel="stylesheet" type="text/css" href="Assets/css/reset.css"/>
<script type="text/javascript" src="Assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Assets/js/js_z.js"></script>
<script type="text/javascript" src="Assets/js/banner.js"></script>
<link rel="stylesheet" type="text/css" href="Assets/css/thems.css">
<script language="javascript">
$(function(){
$('#owl-demo').owlCarousel({
items: 1,
navigation: true,
navigationText: ["上一个","下一个"],
autoPlay: true,
stopOnHover: true
}).hover(function(){
$('.owl-buttons').show();
}, function(){
$('.owl-buttons').hide();
});
});
</script>
</head>
<body>
<!--头部-->
<div class="header">
<div class="head clearfix">
<div class="logo"><a href="">logo</a></div>
<ul class="nav clearfix">
<li class="now"><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="product.html">产品展示</a></li>
<li><a href="service.html">服务中心</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
<div class="head_r">
<div class="lang">
<a href="">中文</a><span>|</span><a href="">English</a>
</div>
<div class="search">
<input name="" type="text" placeholder="Search…">
<input name="" type="submit" value="">
</div>
</div>
</div>
</div>
<!--头部-->
<!--幻灯片-->
<div id="banner" class="banner">
<div id="owl-demo" class="owl-carousel">
<a class="item" target="_blank" href="" style="background-image:url(Assets/upload/banner.jpg)">
<img src="Assets/upload/banner.jpg" alt="">
</a>
<a class="item" target="_blank" href="" style="background-image:url(Assets/upload/banner.jpg)">
<img src="Assets/upload/banner.jpg" alt="">
</a>
<a class="item" target="_blank" href="" style="background-image:url(Assets/upload/banner.jpg)">
<img src="Assets/upload/banner.jpg" alt="">
</a>
</div>
</div>
<!--幻灯片-->
<div class="space_hx"> </div>
<div class="i_name">
<div class="kuang">
<div class="n_m">
<p>WHAT WE DO</p>
我们做什么
</div>
</div>
</div>
<ul class="i_m i_ma clearfix">
<li>
<a href="">
<div class="tu">
<img src="Assets/images/d1.png" class="hei" alt=""/>
<img src="Assets/images/d1_1.png" class="bai" alt=""/>
</div>
<div class="title">产品研发</div>
<div class="des">专业研发生产各类除害产品，产品有驱鼠器，灭蚊器，驱虫器等</div>
</a>
</li>
<li>
<a href="">
<div class="tu">
<img src="Assets/images/d2.png" class="hei" alt=""/>
<img src="Assets/images/d2_1.png" class="bai" alt=""/>
</div>
<div class="title">定制产品</div>
<div class="des">根据客户需求定制各类产品</div>
</a>
</li>
<li>
<a href="">
<div class="tu">
<img src="Assets/images/d3.png" class="hei" alt=""/>
<img src="Assets/images/d3_1.png" class="bai" alt=""/>
</div>
<div class="title">生产加工</div>
<div class="des">批量生产加工驱鼠器，灭蚊器，驱虫器等</div>
</a>
</li>
<li>
<a href="">
<div class="tu">
<img src="Assets/images/d4.png" class="hei" alt=""/>
<img src="Assets/images/d4_1.png" class="bai" alt=""/>
</div>
<div class="title">出口运输</div>
<div class="des">公司进出口驱鼠器，灭蚊器，驱虫器等</div>
</a>
</li>
</ul>
<div class="space_hx"> </div>
<div class="hui_bg">
<div class="space_hx"> </div>
<div class="i_name">
<div class="kuang">
<div class="n_m bg">
<p>WHY CHOOSE US</p>
为什么选择我们
</div>
</div>
</div>
<ul class="i_m i_mb clearfix">
<li>
<b>45</b>
<p>出口45个国家</p>
</li>
<li>
<b>100</b>
<p>100%出货前验货</p>
</li>
<li>
<b>55</b>
<p>超过55份认证报告</p>
</li>
<li>
<b>24</b>
<p>24个月保质期</p>
</li>
</ul>
</div>
<div class="i_name">
<div class="kuang">
<div class="n_m">
<p>PRODUCTS</p>
产品展示
</div>
</div>
</div>
<ul class="i_m i_mc clearfix">
<li>
<a href="">
<div class="tu"><img src="Assets/upload/pic1.jpg" alt=""/></div>
<div class="name">驱鼠器</div>
</a>
</li>
<li>
<a href="">
<div class="tu"><img src="Assets/upload/pic2.jpg" alt=""/></div>
<div class="name">驱虫器</div>
</a>
</li>
<li>
<a href="">
<div class="tu"><img src="Assets/upload/pic3.jpg" alt=""/></div>
<div class="name">驱动物器</div>
</a>
</li>
<li>
<a href="">
<div class="tu"><img src="Assets/upload/pic4.jpg" alt=""/></div>
<div class="name">灭蚊灯</div>
</a>
</li>
<li>
<a href="">
<div class="tu"><img src="Assets/upload/pic5.jpg" alt=""/></div>
<div class="name">驱蛇器</div>
</a>
</li>
</ul>
<div class="space_hx"> </div>
<div class="hui_bg">
<div class="space_hx"> </div>
<div class="i_name">
<div class="kuang">
<div class="n_m bg">
<p>SERVICES</p>
服务中心
</div>
</div>
</div>
<ul class="i_m i_md clearfix">
<li>
<a href="">
<div class="tu"><img src="Assets/images/f1.png" alt=""/></div>
<p>售后服务</p>
</a>
</li>
<li>
...
2.CSS
代码如下（节选示例）：
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, em, th, var {
font-style: normal;
font-weight: normal;
}
ol, ul {
list-style: none;
}
caption, th {
text-align: left;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
/*通用父子盒子嵌套浮动问题解决，开始*/
.clear {
margin: 0px auto;
width: 100%;
height: 1px;
font-size: 1px;
clear: both;
background: none;
overflow: hidden;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/*通用父子盒子嵌套浮动问题解决，结束*/
/*间隙层开始*/
.space_hx { /*横向间隙*/
clear: both;
width: 100%;
height: 20px;
font-size: 1px;
overflow: hidden;
}
.space_zx { /*纵向间隙*/
float: left;
width: 10px;
font-size: 1px;
overflow: hidden;
}
/*间隙层结束*/
...
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;
function getData(data) {
var i, content = "";
if (typeof base.options.jsonSuccess === "function") {
base.options.jsonSuccess.apply(this, [data]);
} else {
for (i in data.owl) {
if (data.owl.hasOwnProperty(i)) {
content += data.owl[i].item;
}
}
base.$elem.html(content);
}
base.logIn();
}
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();
}
},
logIn : function () {
var base = this;
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];
}
...
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
