红色扁平风格的包装印刷企业网站源码下载



13 50 17



模板描述:红色扁平风格 包装印刷 企业网站,红色扁平风格的包装印刷企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">

2. 引入JS

<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/main.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/main.js"></script>
<script src="js/wow.min.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <title>服务模板</title>
	<!-- core CSS -->
    <!--[if lt IE 9]>
    <![endif]-->     
</head><!--/head-->
<body class="homepage">
    <header id="header">
        <div class="top-bar">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6">
                        <p>某某服务公司</p>
                    </div>
                    <div class="col-xs-6">
                       <div class="top-number pull-right"><p><i class="fa fa-phone-square"></i>  +0123 456 70 90</p></div>
                    </div>
                </div>
            </div><!--/.container-->
        </div><!--/.top-bar-->
        <nav class="navbar navbar-inverse" role="banner">
            <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>
                    <a class="navbar-brand" href="index.html"><h1>LOGO</h1></a>
                </div>
                <div class="collapse navbar-collapse navbar-right">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">网站首页</a></li>
                        <li><a href="about-us.html">关于我们</a></li>
                        <li><a href="services.html">服务介绍</a></li>
                        <li><a href="portfolio.html">案例展示</a></li>
                        <li><a href="blog.html">新闻中心</a></li> 
                        <li><a href="contact-us.html">联系我们</a></li>                        
                    </ul>
                </div>
            </div><!--/.container-->
        </nav><!--/nav-->
    </header><!--/header-->
    <section id="main-slider" class="no-margin">
        <div class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#main-slider" data-slide-to="0" class="active"></li>
                <li data-target="#main-slider" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active" style="background-image: url(images/slider/bg1.jpg)">
                    <div class="container">
                        <div class="row slide-margin">
                            <div class="col-sm-6">
                                <div class="carousel-content">
                                    <h1 class="animation animated-item-1">放心、一流的设计服务</h1>
                                    <h2 class="animation animated-item-2">高新技术、专业一流的服务,享受高档的变身服务</h2>
                                    <a class="btn-slide animation animated-item-3" href="about-us.html">查看更多</a>
                                </div>
                            </div>
                            <div class="col-sm-6 hidden-xs animation animated-item-4">
                                <div class="slider-img">
                                    <img src="images/slider/img1.png" class="img-responsive">
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--/.item-->
                <div class="item" style="background-image: url(images/slider/bg3.jpg)">
                    <div class="container">
                        <div class="row slide-margin">
                            <div class="col-sm-6">
                                <div class="carousel-content">
                                    <h1 class="animation animated-item-1">专业的包材方案供应商</h1>
                                    <h2 class="animation animated-item-2">Professional packing solution supporter</h2>
                                    <a class="btn-slide animation animated-item-3" href="about-us.html">查看更多</a>
                                </div>
                            </div>
                            <div class="col-sm-6 hidden-xs animation animated-item-4">
                                <div class="slider-img">
                                    <img src="images/slider/img3.png" class="img-responsive">
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--/.item-->
            </div><!--/.carousel-inner-->
        </div><!--/.carousel-->
        <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
            <i class="fa fa-chevron-left"></i>
        </a>
        <a class="next hidden-xs" href="#main-slider" data-slide="next">
            <i class="fa fa-chevron-right"></i>
        </a>
    </section><!--/#main-slider-->
    <section id="recent-works">
        <div class="container">
            <div class="center wow fadeInDown">
                <h2>案例展示</h2>
                <p class="lead">简洁大方的包装,给您一个高贵的感觉</p>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/case/case1.jpg" alt="">
                        <a class="overlay" href="blog-item.html">
                            <div class="recent-work-inner">
                                <h3>案例名称 </h3>
                                <p>这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍</p>
                            </div> 
                        </a>
                    </div>
                </div>   
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/case/case2.jpg" alt="">
                        <a class="overlay" href="blog-item.html">
                            <div class="recent-work-inner">
                                <h3>案例名称 </h3>
                                <p>这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍</p>
                            </div> 
                        </a>
                    </div>
                </div>   
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/case/case3.jpg" alt="">
                        <a class="overlay" href="blog-item.html">
                            <div class="recent-work-inner">
                                <h3>案例名称 </h3>
                                <p>这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍</p>
                            </div> 
                        </a>
                    </div>
                </div>     
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/case/case4.jpg" alt="">
                        <a class="overlay" href="blog-item.html">
                            <div class="recent-work-inner">
                                <h3>案例名称 </h3>
                                <p>这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍</p>
                            </div> 
                        </a>
                    </div>
                </div>   
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/case/case5.jpg" alt="">
                        <a class="overlay" href="blog-item.html">
                            <div class="recent-work-inner">
                                <h3>案例名称 </h3>
                                <p>这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍</p>
                            </div> 
                        </a>
                    </div>
                </div>   
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/case/case6.jpg" alt="">
                        <a class="overlay" href="blog-item.html">
                            <div class="recent-work-inner">
                                <h3>案例名称 </h3>
                                <p>这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍</p>
                            </div> 
                        </a>
                    </div>
                </div>    
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/case/case7.jpg" alt="">
                        <a class="overlay" href="blog-item.html">
                            <div class="recent-work-inner">
                                <h3>案例名称 </h3>
                                <p>这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍</p>
                            </div> 
                        </a>
                    </div>
                </div>    
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/case/case8.jpg" alt="">
                        <a class="overlay" href="blog-item.html">
                            <div class="recent-work-inner">
                                <h3>案例名称 </h3>
                                <p>这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍这里是案例的介绍</p>
                            </div> 
                        </a>
                    </div>
                </div>   
            </div><!--/.row-->
        </div><!--/.container-->
    </section><!--/#recent-works-->
    <section id="services" class="service-item">
	   <div class="container">
            <div class="center wow fadeInDown">
                <h2>服务介绍</h2>
                <p class="lead">全心全意为您着想,尽心尽力为您服务</p>
            </div>
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                        <div class="pull-left">
                            <img class="img-responsive" src="images/services/services1.png">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">高端印刷包装设计</h3>
                            <p>
                            	我将企业文化和品牌经营理念融合,用专业打造团队,用实力铸就辉煌
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                        <div class="pull-left">
                            <img class="img-responsive" src="images/services/services2.png">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">高端印刷包装印刷 </h3>
                            <p>我们致力为客户解决印刷和包装方面的需求同时也积极地向更加专业化的领域发展</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                        <div class="pull-left">
                            <img class="img-responsive" src="images/services/services3.png">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">高端印刷包装快递 </h3>
                            <p>免费发布,免费运输,让您一切用的舒心,用的安全,用的实在</p>
                        </div>
                    </div>
                </div>  
                <div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                        <div class="pull-left">
                            <img class="img-responsive" src="images/services/services4.png">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">高端画册设计</h3>
                            <p>我将企业文化和品牌经营理念融合,用专业打造团队,用实力铸就辉煌</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                        <div class="pull-left">
                            <img class="img-responsive" src="images/services/services5.png">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">高端画册设计</h3>
                            <p>我们致力为客户解决印刷和包装方面的需求同时也积极地向更加专业化的领域发展</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                        <div class="pull-left">
                            <img class="img-responsive" src="images/services/services6.png">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">高端画册快递</h3>
                            <p>免费发布,免费运输,免费代收,让您一切用的舒心,用的安全,用的实在</p>
                        </div>
                    </div>
                </div>                                                
            </div><!--/.row-->
        </div><!--/.container-->
    </section><!--/#services-->
    <section id="content">
        <div class="container">
        	<div class="center wow fadeInDown">
                <h2>最新资讯</h2>
                <p class="lead">从这里了解我们</p>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 wow fadeInDown">
                   <div class="tab-wrap"> 
                        <div class="media">
                            <div class="parrent pull-left">
                                <ul class="nav nav-tabs nav-stacked">
                                    <li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01">西安印刷技师学院再掀看校高潮</a></li>
                                    <li class=""><a href="#tab2" data-toggle="tab" class="analistic-02">盛通印刷三大硬伤 质疑重重</a></li>
                                    <li class=""><a href="#tab3" data-toggle="tab" class="tehnical">探析数码印刷在国内主要应用市场</a></li>
                                    <li class=""><a href="#tab4" data-toggle="tab" class="tehnical">把握印刷管理新动向</a></li>
                                </ul>
                            </div>
                            <div class="parrent media-body">
                                <div class="tab-content">
                                    <div class="tab-pane fade active in" id="tab1">
                                        <div class="media">
                                           <div class="pull-left">
                                                <img class="img-responsive" src="images/case/case1.jpg">
                                            </div>
                                            <div class="media-body">
                                                 <h2>西安印刷技师学院再掀看校高潮</h2>
                                                 <p class="ne-time"><span class="glyphicon glyphicon-calendar"></span>2017-6-8</p>
                                            	<p>
                                            		在接待队伍的带领下,来自江苏、甘肃、陕西等地及西安周边的看校学生及家长近400多人,饶有兴趣的参观了西安印刷技师学院校园。他们从师资设备、学生作品、住宿条件等多方面考察西安印刷技师学院教学设施与师资力量,在听取了专家关于印刷前景和就业情况讲解后,普遍认为西安印刷技师学院在印刷及新闻出版行业有着得天独厚的优势,孩子在这样的学习环境中一定会历练成才,参观后,许多家长们争先恐后的填写了新生报名表。
                                            	</p>     
                                            </div>
                                        </div>
                                    </div>
                                     <div class="tab-pane fade " id="tab2">
                                        <div class="media">
                                           <div class="pull-left">
                                                <img class="img-responsive" src="images/case/case1.jpg">
                                            </div>
                                            <div class="media-body">
                                                 <h2>盛通印刷三大硬伤 质疑重重</h2>
                                                 <p class="ne-time"><span class="glyphicon glyphicon-calendar"></span>2017-6-8</p>
                                            	<p>
                                            		在接待队伍的带领下,来自江苏、甘肃、陕西等地及西安周边的看校学生及家长近400多人,饶有兴趣的参观了西安印刷技师学院校园。他们从师资设备、学生作品、住宿条件等多方面考察西安印刷技师学院教学设施与师资力量,在听取了专家关于印刷前景和就业情况讲解后,普遍认为西安印刷技师学院在印刷及新闻出版行业有着得天独厚的优势,孩子在这样的学习环境中一定会历练成才,参观后,许多家长们争先恐后的填写了新生报名表。
                                            	</p>     
                                            </div>
                                        </div>
                                     </div>
                                     <div class="tab-pane fade" id="tab3">
                                        <div class="media">
                                           <div class="pull-left">
                                                <img class="img-responsive" src="images/case/case1.jpg">
                                            </div>
                                            <div class="media-body">
                                                 <h2>把握印刷管理新动向</h2>
                                                 <p class="ne-time"><span class="glyphicon glyphicon-calendar"></span>2017-6-8</p>
                                            	<p>
                                            		在接待队伍的带领下,来自江苏、甘肃、陕西等地及西安周边的看校学生及家长近400多人,饶有兴趣的参观了西安印刷技师学院校园。他们从师资设备、学生作品、住宿条件等多方面考察西安印刷技师学院教学设施与师资力量,在听取了专家关于印刷前景和就业情况讲解后,普遍认为西安印刷技师学院在印刷及新闻出版行业有着得天独厚的优势,孩子在这样的学习环境中一定会历练成才,参观后,许多家长们争先恐后的填写了新生报名表。
                                            	</p>     
                                            </div>
                                        </div>
                                     </div>
                                     <div class="tab-pane fade" id="tab4">
                                        <div class="media">
                                           <div class="pull-left">
                                                <img class="img-responsive" src="images/case/case1.jpg">
                                            </div>
                                            <div class="media-body">
                                                 <h2>西安印刷技师学院再掀看校高潮</h2>
                                                 <p class="ne-time"><span class="glyphicon glyphicon-calendar"></span>2017-6-8</p>
                                            	<p>
                                            		在接待队伍的带领下,来自江苏、甘肃、陕西等地及西安周边的看校学生及家长近400多人,饶有兴趣的参观了西安印刷技师学院校园。他们从师资设备、学生作品、住宿条件等多方面考察西安印刷技师学院教学设施与师资力量,在听取了专家关于印刷前景和就业情况讲解后,普遍认为西安印刷技师学院在印刷及新闻出版行业有着得天独厚的优势,孩子在这样的学习环境中一定会历练成才,参观后,许多家长们争先恐后的填写了新生报名表。
                                            	</p>     
                                            </div>
                                        </div>
                                     </div>
                                </div> <!--/.tab-content-->  
                            </div> <!--/.media-body--> 
                        </div> <!--/.media-->     
                    </div><!--/.tab-wrap-->               
                </div><!--/.col-sm-6-->
            </div><!--/.row-->
        </div><!--/.container-->
    </section><!--/#content-->
    <section id="partner">
        <div class="container">
            <div class="center wow fadeInDown">
                <h2>合作伙伴</h2>
               </div>    
            <div class="partners">
                <ul>
                    <li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms" src="images/partners/partner1.png"></a></li>
                    <li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms" src="images/partners/partner2.png"></a></li>
                    <li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="900ms" src="images/partners/partner3.png"></a></li>
                    <li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="1200ms" src="images/partners/partner4.png"></a></li>
                    <li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="1500ms" src="images/partners/partner5.png"></a></li>
                </ul>
            </div>        
        </div><!--/.container-->
    </section><!--/#partner-->
    <section id="conatcat-info">
        <div class="container">
            <div class="row">
                <div class="col-sm-8">
                    <div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                        <div class="pull-left">
                            <i class="fa fa-phone"></i>
                        </div>
                        <div class="media-body">
                            <h2>联系我们</h2>
                            <p>
                            	地址:江苏省XXXXXXXXXX<br /> 
                            	联系电话:123456789<br />
                            	联系邮箱:123456@123.com
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--/.container-->    
    </section><!--/#conatcat-info-->
    <div id="bottom">
        <div class=" wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
            <div class="map">
            	<iframe src="map/map.html"></iframe>
            </div>
        </div>
    </div><!--/#bottom-->
    <footer id="footer" class="midnight-blue">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    Copyright &copy; 2017.Company name All rights reserved.
                </div>
                <div class="col-sm-6">
                    <ul class="pull-right">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="about-us.html">关于</a></li>
                        <li><a href="services.html">服务</a></li>
                        <li><a href="portfolio.html">案例</a></li>
                        <li><a href="blog.html">新闻</a></li>
                        <li><a href="contact-us.html">联系</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer><!--/#footer-->
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 扁平化 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 红色 简洁 简约 简单 工厂 工业 工业产品

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到