关于前端:高端大气的前端响应式黑色装饰公司网站模板

在上面，您能够看到我创立的演示：

https://www.bilibili.com/vide…

一个基于 HTML，CSS，JS 的高端大气的前端响应式彩色装璜公司网站模板，文章中给出了残缺的源码

因为页面较多，这里我只展现了 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 &copy; 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>

少的都有两千多行，我就不一一列举进去了，违心钻研的下载下来缓缓看

和后面一样，我只列出 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 酷炫的登陆注册表单

最初，不要忘了❤或📑反对一下哦，别的我都不图什么，你们的反对就是我最大的能源

关于前端:高端大气的前端响应式黑色装饰公司网站模板

演示成果：

截图

代码块截图

局部页面截图

代码展现

HTML

CSS

JS

关注公众号收费下载

相干内容

Just My Socks（注册教程内含优惠码）

关于前端:高端大气的前端响应式黑色装饰公司网站模板

演示成果：

截图

代码块截图

局部页面截图

代码展现

HTML

CSS

JS

关注公众号收费下载

相干内容

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）