演示成果：
在上面，您能够看到我创立的演示：
https://www.bilibili.com/vide...
一个基于HTML，CSS，JS的高端大气的前端响应式彩色装璜公司网站模板，文章中给出了残缺的源码
截图
代码块截图
局部页面截图
代码展现
HTML
因为页面较多，这里我只展现了index.html，残缺代码我已打包上传，获取形式见文章开端。
index.html
<!DOCTYPE html><html lang="zh-CN"><head><meta 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, user-scalable=no"><meta http-equiv="Cache-Control" content="no-transform" /><meta http-equiv="Cache-Control" content="no-siteapp" /><title>劣势_啦啦啦好想biu点什么</title><meta name="keywords" content="" /><meta name="description" content="" /><link rel="stylesheet" href="skin/css/bootstrap.min.css"><link rel="stylesheet" href="skin/css/animate.min.css"><link rel="stylesheet" href="skin/css/style.css"></head><body id="moar"><header class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <h1 class="logo"><a class="navbar-brand" href="javascript:;">啦啦啦好想biu点什么</a></h1> </div> <nav class="collapse navbar-right navbar-collapse" role="navigation"> <ul class="list-inline navbar-nav"> <li> <a href="index.html">首页</a> </li> <li> <a href="design.html">设计</a> </li> <li class="hover"> <a href="youshi.html">劣势</a> </li> <li> <a href="case.html">案例</a> </li> <li> <a href="team.html">团队</a> </li> <li> <a href="about.html">对于</a> </li> <li> <a href="news.html">资讯</a> </li> <li> <a href="contact.html">分割</a> </li> <li class="tel visible-lg-inline-block"><a href="javascript:;"><span class="icon-page-lianxi"></span> 027-88888888</a></li> </ul> </nav> </div></header> <!--end--><section class="banner"> <div class="banner-page" style="background-image:url(skin/images/1-1P3210U605101.jpg)"><img src="skin/images/banner-height-page.gif" class="center-block" alt=""/></div></section><!--end--><section class="design-page sx-jianju"> <div class="container"> <ul class="list-inline menu-kj2 text-center wow animated fadeInUp"> </ul> <ul class="list-inline menu-kj2 text-center wow animated fadeInUp"> </ul> <div class="row design"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 wow animated fadeInUp"> <figure style="background-image:url(skin/images/1-1P3211044180-L.jpg)"> <a href="javascript:;" title="售后服务"> <h3>售后服务</h3> <p class="hg-2">空间应用正当布局及划分，从空间的实用性登程。 空间布局策动关乎设计学、人体工程学、统计学及美妙独特的结合体，...</p> <p><span class="icon-next"></span></p> </a> </figure> </div><div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 wow animated fadeInUp"> <figure style="background-image:url(skin/images/1-1P3211044070-L.jpg)"> <a href="javascript:;" title="一站式配套"> <h3>一站式配套</h3> <p class="hg-2">空间应用正当布局及划分，从空间的实用性登程。 空间布局策动关乎设计学、人体工程学、统计学及美妙独特的结合体，...</p> <p><span class="icon-next"></span></p> </a> </figure> </div><div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 wow animated fadeInUp"> <figure style="background-image:url(skin/images/1-1P3211043470-L.jpg)"> <a href="javascript:;" title="服务流程"> <h3>服务流程</h3> <p class="hg-2">空间应用正当布局及划分，从空间的实用性登程。 空间布局策动关乎设计学、人体工程学、统计学及美妙独特的结合体，...</p> <p><span class="icon-next"></span></p> </a> </figure> </div><div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 wow animated fadeInUp"> <figure style="background-image:url(skin/images/1-1P3211043130-L.jpg)"> <a href="javascript:;" title="环保劣势"> <h3>环保劣势</h3> <p class="hg-2">空间布局策动关乎设计学、人体工程学、统计学及美妙独特的结合体，咱们从以下几个点来理解空间布局的重要性。 空间...</p> <p><span class="icon-next"></span></p> </a> </figure> </div> </div> <div class="list-page"> <ul class="pagination"> <li class="active"><a href="javascript:;">1</a></li> </ul> </div> </div> </div></section><!--end--> <footer class="foot text-center"> <div class="addess"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <dl class="dl-horizontal list-unstyled"> <dt><span class="icon-foot-addess"></span></dt> <dd> <h3>中国·武汉市</h3> <p>武昌区经济开发区</p> </dd> </dl> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <dl class="dl-horizontal list-unstyled"> <dt><span class="icon-foot-tel"></span></dt> <dd> <h3>24小时服务</h3> <p>027-88888888</p> </dd> </dl> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <dl class="dl-horizontal list-unstyled"> <dt><span class="icon-foot-map"></span></dt> <dd> <h3><a href="javascript:;" target="_blank">在地图上找到咱们</a></h3> <p>欢送阁下光临公司参观指导！</p> </dd> </dl> </div> </div> </div> </div> <div class="copy container"> <ul class="list-inline menu-kj list-paddingleft-2"> <li> <p> <a href="javascript:;">设计</a> </p> </li> <li> <p> <a href="javascript:;">劣势</a> </p> </li> <li> <p> <a href="javascript:;">案例</a> </p> </li> <li> <p> <a href="javascript:;">团队</a> </p> </li> <li> <p> <a href="javascript:;">对于</a> </p> </li> <li> <p> <a href="javascript:;">资讯</a> </p> </li> <li> <p> <a href="javascript:;">分割</a> </p> </li> </ul> <p> Copyright © 2002-2018 某某装璜有限公司 版权所有 <span class="hidden-xs"><a href="javascript:;" target="_blank">备案号：鄂ICP备88888888号</a></span></p> <ul class="list-inline kjcd"> <li class="qq"><a href="javascript:;" target="_blank"><span class="icon-qq"></span></a></li> <li class="weixin"><a href="javascript:;" data-toggle="modal" data-target="#foot-weixin"><span class="icon-weixin"></span></a></li> <li class="weibo"><a href="javascript:;" target="_blank"><span class="icon-weibo"></span></a></li> </ul> <div class="well hidden-xs"> 友情链接： <a href="http://www.mycodes.net/" target="_blank">源码之家</a> / <a href="http://#" target='_blank'>源码商城</a> / <a href="http://#" target='_blank'>DedeCMS模板</a> / <a href="http://#" target='_blank'>响应式模板</a> / <a href="http://#" target='_blank'>企业网站模板</a> / 链接替换QQ：1236549 </div> <div class="modal fade" id="foot-weixin" tabindex="-1" role="dialog" aria-labelledby="myweixin" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content text-center"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myweixin">微信扫一扫，关注咱们</h4> </div> <div class="modal-body"> <img src="skin/images/weixin-pic.jpg" alt="微信公众号" /> <p>关上微信，应用扫一扫即可关注咱们。</p> </div> </div> </div> </div> </div></footer><!--end--><ul class="list-unstyled kefu visible-xs-block"> <li><a class="gt" href="javascript:;" title="在线沟通" target="_blank"><span class="icon-goutong"></span></a></li> <li class="hidden-xs"><a class="lx" href="javascript:;" title="分割"><span class="icon-page-lianxi"></span></a></li> <li class="visible-xs-inline-block"><a class="lx" href="javascript:;" title="拔打电话"><span class="icon-page-lianxi"></span></a></li> <li><a id="top" class="top" href="javascript:;" title="回顶部"><span class="icon-top"></span></a></li></ul><!--end--> <script src="skin/js/jquery.min.js"></script> <script src="skin/js/wow.min.js"></script> <script src="skin/js/base.js"></script> <script src="skin/js/sdcms.hits.js"></script> <script src="skin/js/bootstrap.min.js"></script> <script>wow = new WOW({animateClass: 'animated',offset:100});wow.init();document.getElementById('moar').onclick = function() {var section = document.createElement('section');section.className = 'section--purple wow fadeInDown';this.parentNode.insertBefore(section, this);};</script> <script src="skin/js/fastclick.min.js"></script></body></html>CSS
少的都有两千多行，我就不一一列举进去了，违心钻研的下载下来缓缓看
JS
和后面一样，我只列出base.js
base.js
function SetHome(obj,url){ try{ obj.style.behavior='url(#default#homepage)'; obj.setHomePage(url); }catch(e){ if(window.netscape){ try{ netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); }catch(e){ alert("道歉，此操作被浏览器回绝！\n\n请在浏览器地址栏输出“about:config”并回车而后将[signed.applets.codebase_principal_support]设置为'true'"); } }else{ alert("道歉，您所应用的浏览器无奈实现此操作。\n\n您须要手动将【"+url+"】设置为首页。"); } }}function AddFavorite(title, url) { try { window.external.addFavorite(url, title); }catch (e) { try { window.sidebar.addPanel(title, url, ""); } catch (e) { alert("道歉，您所应用的浏览器无奈实现此操作。\n\n加入收藏失败，请进入新网站后应用Ctrl+D进行增加"); } }}function DY_scroll(wraper,prev,next,img,speed,or) { var wraper = $(wraper); var prev = $(prev); var next = $(next); var img = $(img).find('ul'); var w = img.find('li').outerWidth(true); var s = speed; next.click(function() { img.animate({'margin-left':-w},function() { img.find('li').eq(0).appendTo(img); img.css({'margin-left':0}); }); }); prev.click(function() { img.find('li:last').prependTo(img); img.css({'margin-left':-w}); img.animate({'margin-left':0}); }); if (or == true) { ad = setInterval(function() { next.click();},s*1000); wraper.hover(function(){clearInterval(ad);},function(){ad = setInterval(function() { next.click();},s*1000);}); } } $(function(){ var cname=""; $("#topnav li").hover(function(){ cname=$(this).attr("class"); if(!cname){$(this).addClass("hover");} $("dl",this).show(); },function(){ $("dl",this).hide(); if(!cname){$(this).removeClass("hover");} }); // DY_scroll('.pro_width','.arrow_left','.arrow_right','.pro_width',5,true);})function checksearch(the){ if ($.trim(the.key.value)=='') { alert('请输出关键字'); the.key.focus(); the.key.value=''; return false } if ($.trim(the.key.value)=='请输出关键字') { alert('请输出关键字'); the.key.focus(); the.key.value=''; return false }}//回顶部window.onload = function () { var topbtn = document.getElementById("top"); var timer = null; var pagelookheight = document.documentElement.clientHeight; topbtn.onclick = function () { timer = setInterval(function () { var backtop = document.body.scrollTop; var speedtop = backtop/4; document.body.scrollTop = backtop -speedtop; if(backtop ==0){ clearInterval(timer); } }, 20); }}关注公众号收费下载
关注微信公众号【啦啦啦好想biu点什么】回复【彩色装璜公司网站模板】收费获取
前面我还会继续更新相似收费好玩的H5小游戏、Java小游戏、好玩、实用的我的项目和软件等等
相干内容
- 怯懦的兔子疯狂奔跑小游戏
用HTML实现简略的下雪特效
- 基于HTML/CSS/JS的动静元素周期表
- 基于HTML/CSS/JS的爱吹风的狮子小游戏
- 100个最常问的JavaScript面试问答
- java五子棋小游戏含收费源码
- 一个基于HTML/CSS/JS酷炫的登陆注册表单
最初，不要忘了❤或反对一下哦，别的我都不图什么，你们的反对就是我最大的能源