蓝色扁平风格的建筑劳务服务整站网站源码下载



6 22 8



模板描述:蓝色扁平风格 建筑劳务服务 整站网站,蓝色扁平风格的建筑劳务服务整站网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootsnav.css">
<link rel="stylesheet" href="css/swiper.min.css" type="text/css">
<link rel="stylesheet" href="css/lrtk.css">

2. 引入JS

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.slides.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/slide.js"></script>
<script src="js/tab.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootsnav.js"></script>

3. HTML代码

 <!--顶部登录-->
  <div class="top_bg">
    <div class="container  ">
    <div class="row">
     <p>欢迎访问中国建筑劳务服务企业家俱乐部官网!</p>
     <span><a href="#">设为首页</a> | <a href="#">添加收藏</a></span>
    </div>
   </div>
  </div>
  <!--logand--nav-->
  <div class="container ">
    <div class="row">
     <div class="log_nav">
     <div class="log"><img src="images/index_r1_c5.jpg"></div>
      <div class="nav_right">
       <dl>
        <dt>
         行&nbsp;业
        </dt>
        <dd>
         <a href="#">新闻资讯</a> <a href="#">政策法规</a><a href="#">行业研究</a><a href="#">明星企业</a><a href="#">劳务实名</a><a href="#">建筑招标</a>
        </dd>
       </dl>
       <dl>
        <dt>
         俱乐部
        </dt>
        <dd>
         <a href="#">机构简介</a> <a href="#">创始会员</a><a href="#">理事会员</a><a href="#">加入办法</a><a href="#">活动通知</a><a href="#">会员企业</a>
        </dd>
       </dl>
      </div>
      </div>
    </div>
  </div>
  <div class="nav_bg">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<nav class="navbar navbar-default navbar-mobile bootsnav">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
								<i class=""><img src="images/ahome_r2_c13.png"></i>&nbsp;&nbsp;&nbsp;&nbsp; <em style="font-size:16px; color:#fff; font-style:normal">网站栏目</em>
							</button>
						</div>
						<div class="collapse navbar-collapse" id="navbar-menu" >
							<ul class="nav navbar-nav " data-in="fadeInDown" data-out="fadeOutUp">
								<li><a href="#">网站首页</a></li>
                                <li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 行&nbsp;业</a>
                                    <ul class="dropdown-menu" style=" position:absolute; z-index:1000; left:0px">
										<li>
                                        <a href="#">新闻资讯</a> <a href="#">政策法规</a><a href="#">行业研究</a><a href="#">明星企业</a><a href="#">劳务实名</a><a href="#">建筑招标</a>
                                        </li>
									</ul>
								</li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">俱乐部</a>
                                    <ul class="dropdown-menu" style=" position:absolute; z-index:1000; left:0px">
										<li>
                                        <a href="#">机构简介</a> <a href="#">创始会员</a><a href="#">理事会员</a><a href="#">加入办法</a><a href="#">活动通知</a><a href="#">会员企业</a>
                                        </li>
									</ul>
								</li>
							</ul>
						</div>
					</nav>
				</div>
			</div>
		</div>
	</div>
 	</div> 
 <!--焦点图-->
 <!-- 代码 开始 -->
    <div class="slide_container" style="position:relative; z-index:1">
      <ul class="rslides" id="slider">
        <li>
         <p> <img src="images/index_r3_c1.jpg" alt=""></p>
         <div><img src="images/ad_img.jpg" alt=""></div>
        </li>
        <li>
          <p> <img src="images/index_r3_c1.jpg" alt=""></p>
          <div><img src="images/ad_img.jpg" alt=""></div>
        </li>
        <li>
          <p> <img src="images/index_r3_c1.jpg" alt=""></p>
         <div><img src="images/ad_img.jpg" alt=""></div>
        </li>
      </ul>
    </div>
<!-- 代码 结束 -->
<!--新闻-->
  <div class="container">
	<div class="row">
    <!--left-->
    <div class="js_news">
     <div id="myCarousel" class="carousel slide">
	<!-- 轮播(Carousel)指标 -->
	<ol class="carousel-indicators" style="bottom:-35px">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>   
	<!-- 轮播(Carousel)项目 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="images/index_r5_c3.jpg" alt="First slide">
			<div class="carousel-caption">标题 1</div>
		</div>
		<div class="item">
			<img src="images/index_r5_c3.jpg" alt="Second slide">
			<div class="carousel-caption">标题 2</div>
		</div>
		<div class="item">
			<img src="images/index_r5_c3.jpg" alt="Third slide">
			<div class="carousel-caption">标题 3</div>
		</div>
	</div>
	<!-- 轮播(Carousel)导航 -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	</a>
</div> 
    </div>
    <!--right-->
    <div class="news_qh">
     <div class="wrapp wow fadeInUp animated" id="wrapp">
     <div class="row">
    <ul class="tabClick">
    <div style="margin-left:-25px; margin-right:-25px">
        <li class="active">公司动态</li>
        <li>媒体报道</li>
        <ol style="float:right; margin-right:40px; margin-top:10px;"><a href="#">更多</a></ol>
        </div>
    </ul>
    </div>
    <div class="lineBorder">
        <div class="lineDiv"><!--移动的div--></div>
    </div>
    <div class="tabCon">
      <div class="inf">
        <div class="tabBox " style="width:100%">
            <div class="tabList wow fadeInUp animated">
             <div class="tabList_div">
              <h5><a href="#">什么合您什么样的网站适么样的网站您什么您</a></h5>
              <p>
              订单查询管理系统、购物车管理系统、支
付管理系统、商家管理适合您什么样的网站适么站适么样的网站适合系统<a href="#">详情></a>
              </p>
              </div>
             <dl>
              <dd>
              <p><a href="#">什么什么样的网站适合您什么样的网站适合您样的网站适合您</a></p>
               <span>02-05</span>
              </dd>
              <dd>
             <p><a href="#">什么什么样的网站适合您什么样的网站适合您样的网站适合您</a></p>
               <span>02-05</span>
              </dd>
               <dd>
             <p><a href="#">什么什么样的网站适合您什么样的网站适合您样的网站适合您</a></p>
               <span>02-05</span>
              </dd>
              <dd>
             <p><a href="#">什么什么样的网站适合您什么样的网站适合您样的网站适合您</a></p>
               <span>02-05</span>
              </dd>
               <dd>
             <p><a href="#">什么什么样的网站适合您什么样的网站适合您样的网站适合您</a></p>
               <span>02-05</span>
              </dd>
              <dd>
             <p><a href="#">什么什么样的网站适合您什么样的网站适合您样的网站适合您</a></p>
               <span>02-05</span>
              </dd>
             </dl>
            </div>
            <div class="tabList wow fadeInUp animated">
             <div class="tabList_div">
              <h5><a href="#">什么合您什么样的网站适么样的网站您什么样的网站适合您什么样的网站适合您</a></h5>
              <p>
              订单查询管理系统、购物车管理系统、支
付管理系统、商家管理适合您什么样的网站适么样的网站适合适合您什么样的网站适么样的网站站适合适合您什么样的网站适么样的网站适合系统<a href="#">详情></a>
              </p>
              </div>
             <dl>
              <dd>
              <p><a href="#">什么什么样的网站适合您什么样的网站适合您样的网站适合您</a></p>
               <span>02-05</span>
              </dd>
              <dd>
             <p><a href="#">什么什么样的网站适合您什么样的网站适合您样的网站适合您</a></p>
               <span>02-05</span>
              </dd>
               <dd>
             <p><a href="#">什么什么样的网站适合您什么样的网站适合您样的网站适合您</a></p>
               <span>02-05</span>
              </dd>
              <dd>
             <p><a href="#">什么什么样的网站适合您什么样的网站适合您样的网站适合您</a></p>
               <span>02-05</span>
              </dd>
               <dd>
             <p><a href="#">什么什么样的网站适合您什么样的网站适合您样的网站适合您</a></p>
               <span>02-05</span>
              </dd>
              <dd>
             <p><a href="#">什么什么样的网站适合您什么样的网站适合您样的网站适合您</a></p>
               <span>02-05</span>
              </dd>
             </dl>
        </div>
    </div>
</div>
 <script src="js/tab.js"></script> 
    </div>
    </div>
    </div>
  </div>
    </div>
  <!--ad-->
  <div class="container ad_show">
	<div class="row">
     <dl>
      <dd><a href="#"><img src="images/index_r9_c3.jpg"></a></dd>
      <dd><a href="#"><img src="images/index_r9_c3.jpg"></a></dd>
      <dd><a href="#"><img src="images/index_r9_c3.jpg"></a></dd>
      <dd><a href="#"><img src="images/index_r9_c3.jpg"></a></dd>
      <dd><a href="#"><img src="images/index_r9_c3.jpg"></a></dd>
     </dl>
    </div>
   </div>
   <!--信息-->
   <div class="container inf_index">
	<div class="row" >
     <!--1-->
     <div class="w25">
      <div class="w25_top">
       <p>行业政策</p>
       <span><a href="#">更多</a></span>
      </div>
      <div  class="w528_bot">
       <dl>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
       </dl>
       </div>
     </div>
     <!--2-->
     <div class="w25 w251">
      <div class="w25_top">
       <p>会员企业</p>
       <span><a href="#">更多</a></span>
      </div>
      <div  class="w528_bot">
       <dl>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
       </dl>
       </div>
     </div>
     <!--3-->
     <div class="w25 w251">
      <div class="w25_top">
       <p>劳务实名</p>
       <span><a href="#">更多</a></span>
      </div>
      <div  class="w528_bot">
       <dl>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
        <dd><a href="#">提高校企合作站位,服务国家文化发展实力</a></dd>
       </dl>
       </div>
     </div>
    </div>
   </div>
   <!--ad-->
  <div class="container ad_show1">
	<div class="row">
     <dl>
      <dd><a href="#"><img src="images/index_r11_c4.jpg"></a></dd>
      <dd><a href="#"><img src="images/index_r11_c14.jpg"></a></dd>
     </dl>
    </div>
   </div>
   <!--友情链接-->
    <div class="container ">
	<div class="row">
     <div class="links_top">
      <p>友情链接</p>
     </div>
     <div class="links_bot">
     <a href="#">百度新闻</a> <a href="#">新浪新闻</a> <a href="#">百度新闻</a> <a href="#">新浪新闻</a> <a href="#">百度新闻</a> <a href="#">新浪新闻</a> <a href="#">百度新闻</a>
     </div>
    </div>
   </div>
   <!--copy-->
   <div class="copy_bg">
    <div class="container ">
	<div class="row">
     <dl>
      <dt><img src="images/index_r13_c2.jpg"></dt>
      <dd>
       <a href="#">关于我们</a>  &nbsp;&nbsp; -  &nbsp;&nbsp;<a href="#"> 广告服务</a>&nbsp;&nbsp;   - &nbsp;&nbsp; <a href="#"> 联系我们</a> &nbsp;&nbsp;  -  &nbsp;&nbsp; <a href="#">商务合作</a> &nbsp;&nbsp;  -  &nbsp;&nbsp;<a href="#"> 免责条款</a><br>
       <p>
       中国建筑劳务企业家俱乐部  版权所有 ©2018<br>
地址:河南省郑州市金水区花园北路居易国际广场4号楼812室 邮编:4500000<br>
服务热线:0371-69103871/72    传真:0371-69103871
   </p>
      </dd>
     </dl>
     <div class="copy_bg_ol">
      <img src="images/index_r13_c21.jpg">
     </div>
    </div>
   </div>
   </div>
     <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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