- 1【Microsoft Azure 的1024种玩法】四. 利用Azure Virtual machines 打造个人专属云盘，速度吊打某云盘...
- 2etcd 与 Zookeeper、Consul 等其它 kv 组件的对比
- 3低代码平台全套源码，支持二次开发_nodejs能开发 低代码
- 4【批处理DOS-CMD命令-汇总和小结】-上网和网络通信相关命令-用户账户管理-文件（夹）共享（net）_udk用户服务
- 5RabbitMQ - 基于 SpringAMQP 带你实现五种消息队列模型_spring消息队列
- 6【C语言】动态内存_c语言动态内存
- 7微信小程序刮刮乐_小程序刮刮乐逻辑
- 8大数据技术原理与应用第10讲：Spark_spark不提供下面哪种语言的ap? () python c++ scala java
- 9Matlab第二章矩阵处理内容整理_matlab矩阵整理
- 10＜ 数据结构 ＞ 堆的应用 --- 堆排序和Topk问题_堆排序topk问题
88. Web前端网页制作 简洁高端大气的智能家居公司网页实例大学生期末大作业 html+css+js_家具网网页制作html
赞
踩
目录
一、前言
简洁高端大气的智能家居公司网页实例，应用html+css+js，适用于企业网站设计、大学生网页课程作业设计等，供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
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" />
<title>xxx智能科技有限公司、xxx智能家居、xxx智能家居</title>
<meta name="description" content="xxx智能科技有限公司、xxx智能家居、xxx智能家居、智能家居、xxx科技" />
<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/plugins/FlexSlider/jquery.flexslider.js"></script>
<link rel="stylesheet" type="text/css" href="Assets/plugins/FlexSlider/flexslider.css">
<script type="text/javascript" src="Assets/js/js_z.js"></script>
<link rel="stylesheet" type="text/css" href="Assets/css/thems.css">
<script language="javascript">
$(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</head>
<body>
<div class="t_bg">
<div class="top">
<span class="mail">欢迎进入xxx智能家居官网！</span>
<div class="top_r">
<span class="tel">服务热线：400-xxxx-xxx</span>
</div>
</div>
</div>
<div class="header">
<div class="head clearfix">
<div class="logo"><a href="index.html"></a></div>
<ul class="nav clearfix">
<li>
<a href="html/about_a.html">
<p>别墅智能</p>
Products
</a>
<div class="er_bg">
<ul class="er clearfix">
<li>
<b><a href="html/about_a.html">智能别墅</a></b>
<p><a href="html/about_a.html">智能灯光</a></p>
<p><a href="#">智能电动窗帘</a></p>
<p><a href="#">监控管理</a></p>
<p><a href="#">中央空调控制</a></p>
<p><a href="#">门禁管理</a></p>
<p><a href="#">中央背景音乐</a></p>
<p><a href="#">专业安防</a></p>
<p><a href="#">地暖智能控制</a></p>
<p><a href="#">家庭影院控制</a></p>
</li>
</ul>
</div>
</li>
<li>
<a href="html/about_b.html">
<p>大众智能</p>
Service
</a>
<div class="er_bg">
<ul class="er clearfix">
<li>
<b><a href="html/about_b.html">大众智能</a></b>
<p><a href="#">智能灯光</a></p>
<p><a href="#">智能电动窗帘</a></p>
<p><a href="#">监控安防</a></p>
<p><a href="#">分体式背景音乐</a></p>
<p><a href="#">门禁管理</a></p>
</li>
</ul>
</div>
</li>
<li>
<a href="html/about_c.html">
<p>家庭影院</p>
Service
</a>
<div class="er_bg">
<ul class="er clearfix">
<li>
<b><a href="html/about_c.html">家庭影院</a></b>
<p><a href="#">专业影音院</a></p>
<p><a href="#">英爵客厅式影院</a></p>
<p><a href="#">音丽士影音室</a></p>
<p><a href="#">KTV</a></p>
</li>
</ul>
</div>
</li>
<li>
<a href="html/about_d.html">
<p>弱电工程</p>
Service
</a>
<div class="er_bg">
<ul class="er clearfix">
<li>
<b><a href="html/about_d.html">弱电工程</a></b>
<p><a href="#">弱电工程</a></p>
</li>
</ul>
</div>
</li>
<li>
<a href="html/project.html">
<p>工程案例</p>
Case
</a>
<div class="er_bg">
<ul class="er clearfix">
<li>
<b><a href="html/project.html">工程案例</a></b>
<p><a href="html/project.html">家庭影院案例</a></p>
<p><a href="#">背景音乐案例</a></p>
<p><a href="#">全宅系列</a></p>
<p><a href="#">弱电工程案例</a></p>
<p><a href="#">其余案例</a></p>
<p><a href="#">服务与技术支持</a></p>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<p>关于我们</p>
About
</a>
<div class="er_bg">
<ul class="er clearfix">
<li>
<b><a href="#">关于我们</a></b>
<p><a href="#">公司概况</a></p>
<p><a href="#">公司文化</a></p>
<p><a href="#">招才纳贤</a></p>
<p><a href="#">办公平台</a></p>
<p><a href="#">联系我们</a></p>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<p>新闻中心</p>
New
</a>
<div class="er_bg">
<ul class="er clearfix">
<li>
<b><a href="#">新闻中心</a></b>
<p><a href="#">公司动态</a></p>
<p><a href="#">行业热点</a></p>
<p><a href="#">技术探讨</a></p>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="banner" >
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li><a href="#"><img src="Assets/upload/banner02.jpg" alt=""/></a></li>
<li><a href="#"><img src="Assets/upload/banner.jpg" alt=""/></a></li>
<li><a href="#"><img src="Assets/upload/banner01.jpg" alt=""/></a></li>
<li><a href="#"><img src="Assets/upload/banner03.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</div>
<div class="space_hx"> </div>
<div class="i_ma clearfix">
<div class="i_mam i_mal">
<div class="tu">
<a href="#">
<img src="Assets/images/icon6.jpg" alt=""/>
<p>欧仕尼·新闻中心</p>
<p><span>OCEANEAR NEWS</span></p>
<div class="line"> </div>
</a>
<i> </i>
</div>
<div class="wen">
<div class="name">CeBIT 2015</div>
<dl class="clearfix">
<dt><a href="#"><img src="Assets/upload/pic1.jpg" alt=""/></a></dt>
<dd>
<p><a href="#">市场主流影音中控系统全扫描 悉数智能家居系统十大必备要素</a></p>
<p>3月16日-20日</p>
</dd>
</dl>
<ul class="i_news">
<li><a href="#">走进xxx智能家居体验馆</a></li>
<li><a href="#">10款智能家居免费APP 让你腕上的......</a></li>
<li><a href="#">影音房中控系统集成解决方案</a></li>
</ul>
</div>
</div>
<div class="i_mam i_mac">
<div class="tu">
<a href="#">
<img src="Assets/images/icon7.jpg" alt=""/>
<p>欧仕尼·新品推荐</p>
<p><span>OCEANEAR NEW ARRIVALS</span></p>
<div class="line"> </div>
</a>
<i> </i>
</div>
<div class="wen">
<div class="i_pro">
<div class="mainPhoto"> <span class="goleft nextPage"><a href="javascript:void(0)"><img src="Assets/images/prev.jpg" alt="" /></a></span>
<div class="go slidegrid">
<ul class="slideitems">
<li>
<a href="#">
<img src="Assets/upload/pic2.jpg" alt=""/>
<div class="title">安防监控</div>
<p>xxx智能摄像头，百万高清</p>
</a>
</li>
<li>
<a href="#">
<img src="Assets/upload/pic2.jpg" alt=""/>
<div class="title">安防监控</div>
<p>xxx智能摄像头，百万高清</p>
</a>
</li>
<li>
<a href="#">
<img src="Assets/upload/pic2.jpg" alt=""/>
<div class="title">安防监控</div>
<p>xxx智能摄像头，百万高清</p>
</a>
</li>
<li>
<a href="#">
<img src="Assets/upload/pic2.jpg" alt=""/>
<div class="title">安防监控</div>
<p>xxx智能摄像头，百万高清</p>
</a>
</li>
</ul>
</div>
<span class="goright prevPage"><a href="javascript:void(0)"><img src="Assets/images/next.jpg" alt=""/></a></span> </div>
<script>
$(function(){
$('.mainPhoto .slidegrid').scrollable({size:1,circular:true,next:'.nextPage',prev:'.prevPage'}).autoscroll();
});
</script>
</div>
</div>
</div>
<div class="i_mam i_mar">
<div class="tu">
<a href="#">
<img src="Assets/images/icon8.jpg" alt=""/>
<p>xxx·典型案例</p>
<p><span>xxx CASE</span></p>
<div class="line"> </div>
</a>
<i> </i>
</div>
<div class="wen">
<div class="i_about">
<img src="Assets/upload/pic3.jpg" alt=""/>
<div class="des">
<p>"xxx"品牌是xxx智能科技有限公司推出的自有品牌</p>
</div>
</div>
</div>
</div>
</div>
<div class="space_hx"> </div>
<div class="i_mbt">
<b>xxx· 掌控智能家居新生活</b>
<div class="line"> </div>
</div>
<div class="bg_b"> </div>
<div class="lini">
<div class="zhent"><img src="Assets/images/sixx.png" width="1050" height="700"></div>
</div>
<div class="space_hx"> </div>
<div class="i_mbt">
<b>xxx· 科技生活让爱无限连接</b>
<div class="line"> </div>
</div>
<div class="bg_b"> </div>
<div class="linn">
<div class="zhent"><img src="Assets/images/seven.jpg" width="1050" height="700"></div>
</div>
<div class="space_hx"> </div>
<div class="i_mbt">
<b>xxx智能家居· 让管理没有距离</b>
<div class="line"> </div>
</div>
<div class="bg_b"> </div>
<div class="lins">
<div class="zhent"><img src="Assets/images/eit.png" width="1050" height="700"></div>
</div>
<div class="space_hx"> </div>
<div class="i_mbt">
<b>xxx · 私人定制 轻松享受</b>
<div class="line"> </div>
</div>
<div class="bg_b"> </div>
<div class="linc">
<div class="zhent"><img src="Assets/images/lx.png" width="1050" height="700"></div>
</div>
<div class="space_hx"> </div>
<div class="i_mbt">
<b>xxx· 技术保障 品质生活</b>
<div class="line"> </div>
</div>
<div class="bg_b"> </div>
<div class="linw">
<div class="zhent"><img src="Assets/images/dss.png" width="1051" height="700"></div>
</div>
<div class="space_hx"> </div>
<div class="i_mbt">
<b>更多体验</b>
<div class="line"> </div>
</div>
<div class="bg_b"> </div>
<div class="i_mb clearfix">
<dl class="clearfix">
<a href="#">
<dt><img src="Assets/images/icon12.png" alt=""/></dt>
<dd>
<b>视频中心</b>
<p>video</p>
</dd>
</a>
</dl>
<dl class="clearfix">
<a href="#">
<dt><img src="Assets/images/icon13.png" alt=""/></dt>
<dd>
<b>体验中心</b>
<p>experience</p>
</dd>
</a>
</dl>
<dl class="clearfix">
<a href="#">
<dt><img src="Assets/images/icon14.png" alt=""/></dt>
<dd>
<b>下载中心</b>
<p>down</p>
</dd>
</a>
</dl>
<dl class="clearfix">
<a href="#">
<dt><img src="Assets/images/icon15.png" alt=""/></dt>
<dd>
<b>服务热线</b>
<p>400-xxxx-xxx</p>
</dd>
</a>
</dl>
</div>
<div class="space_hx"> </div>
<div class="bg_a"> </div>
<div class="f_nbg">
<ul class="f_nav clearfix">
<li>
<b><a href="#">产品中心</a></b>
<p><a href="#">别墅智能</a></p>
<p><a href="#">大众智能</a></p>
<p><a href="#">家庭影院</a></p>
<p><a href="#">弱电工程</a></p>
</li>
<li>
<b><a href="#">服务支持</a></b>
<p><a href="#">服务与技术</a></p>
<p><a href="#">售后服务</a></p>
<p><a href="#">下载中心</a></p>
</li>
<li>
<b><a href="#">工程案例</a></b>
<p><a href="#">家庭影院案例</a></p>
<p><a href="#">背景音乐案例</a></p>
<p><a href="#">全宅系列</a></p>
<p><a href="#">弱电工程案例</a></p>
<p><a href="#">其他案例</a></p>
</li>
<li>
<b><a href="#">新闻中心</a></b>
<p><a href="#">公司动态</a></p>
<p><a href="#">行业热点</a></p>
<p><a href="#">技术探讨</a></p>
</li>
<li class="noline">
<b><a href="#">关于我们</a></b>
<p><a href="#">公司概况</a></p>
<p><a href="#">公司文化</a></p>
<p><a href="#">招才纳贤</a></p>
<p><a href="#">办公平台</a></p>
<p><a href="#">联系我们</a></p>
</li>
<li>
<b><a href="#">友情链接</a></b>
<p><a href="#">智能家居</a></p>
<p><a href="#">中国家装网</a></p>
<p><a href="#">百度装饰</a></p>
</li>
<li class="code">
<img src="Assets/upload/code.jpg" alt=""/>
<p>微信号 js-osn</p>
</li>
</ul>
</div>
<div class="bq_bg">
<div class="bq">
<span>版权所有 © 2015-2025 xxx智能科技有限公司 苏ICP备xxx号</span>
<a href="http://www.pinsuer.com/" title="忆素津歌" target="_blank">技术支持 |</a>
<a href="#">网站统计</a>
</div>
</div>
</body>
</html>
......
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* css 重置 */
body,div,ul,li,dl,dt,dd,h2,p{padding:0;margin:0;font-family:"微软雅黑";}
ul{list-style:none ;}
img{border:none;}
a{blr:expression(this.onFocus=this.blur());outline:none;}
/* banner-box */
.banner-box{min-width:100%;height:560px;position:relative;overflow:hidden;}
.banner-box .bd{ width:100% !important;}
.banner-box .bd li .m-width {width:100%;margin:0 auto;overflow:hidden;}
.banner-box .bd li{width:100% !important;height:560px;}
.banner-box .bd li a{display:block;background-size:auto;}
.banner-btn{width:1210px;position:absolute;top:120px;left:50%;margin-left:-605px;}
.banner-btn a{display:block;width:49px;height:104px;position:absolute;top:0;filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;}
.banner-btn a.prev{left:20px;background:url(../images/foot.png) no-repeat 0 0;}
.banner-btn a.next{right:20px;background:url(../images/foot.png) no-repeat -49px 0;}
.banner-box .hd {position:absolute;top:210px;left:537px;}
.banner-box .hd ul li{width:12px;height:12px;border-radius :50%;text-indent:-9999px;margin-right:20px;background:#ccc;float:left;cursor:pointer;}
.banner-box .hd ul li.on{background:#DA324D;}
......
3.JS
代码如下（节选示例）：
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
......
五 、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
