演示效果：
在下面，您可以看到我創建的演示：
<iframe id="gVyiTSht-1619529253856" src="https://live.csdn.net/v/embed/160246" allowfullscreen="true" data-mediaembed="csdn"></iframe>
高端大氣的前端回應式黑色裝飾公司網站模板
一個基于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);
}
}
1.CSDN積分下載
https://download.csdn.net/download/qq_44273429/18180098
2.關注公眾號免費下載
關注微信公眾號【啦啦啦好想biu點什么】回復【黑色裝飾公司網站模板】免費獲取
后面我還會持續更新類似免費好玩的H5小游戲、Java小游戲、好玩、實用的專案和軟體等等
相關內容
- 勇敢的兔子瘋狂奔跑小游戲
- 用HTML實作簡單的下雪特效
- 基于HTML/CSS/JS的動態元素周期表
- 基于HTML/CSS/JS的愛吹風的獅子小游戲
- 100個最常問的JavaScript面試問答
- java五子棋小游戲含免費原始碼
- 一個基于HTML/CSS/JS酷炫的登陸注冊表單
最后，不要忘了?或📑支持一下哦，別的我都不圖什么，你們的支持就是我最大的動力
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/281281.html
標籤：其他
上一篇：JS案例：將前端頁面匯出為PDF
下一篇：Ajax學習筆記第01天