直接使用代码

图片素材

无

css代码

  <style>
   .itop { width:100%; height:34px;line-height:34px; border-bottom:1px solid #e5e5e5; }
    .itopcl { width:400px; height:34px; float:left; font-size:12px; color:#333; }
    .itopcr { width:600px; float:right; font-size:12px; color:#333;}
    .itopcr a { float: right; color:#333; margin-right:10px;}
    .itopcr span { font-size:12px; float:right; margin-right:10px;}
    a:hover{text-decoration: none!important}


    .ilogo { width:100%; height:auto; }
    .ilogoc { height:auto; padding:20px 15px;}
    .ilogoc img.ycdh { margin-top:8px;}
    .ilogol { width:650px; height:auto; float:left;}
    .ilogol img { float:left;}
    .ilogol p {  color:#006635; font-weight:bold;  line-height:26px; font-weight:100; margin:0px; padding:2px 12px; float:left;}
    .ilogol p strong {  color:#0168b7; font-size:22px; font-weight:500;}
    .ilogol p span { color:#0168b7; font-size:18px;}
    .ilogor { width:auto; float:right; margin-right:0px; margin-top:0px; background: url(http://www.bootfastui.cn/img/2020/0425/fuxing_06.gif) no-repeat left 12px; padding-left:50px; padding-top:5px;}
    .ilogor p { font-size:14px; color:#373736; line-height:25px; font-weight:100;}
    .ilogor p strong { font-size:25px; color:#0168b7; font-weight:100;}
    .ilogor p span { font-size:16px; color:#0168b7;}

    .inav { width:100%; height:45px; background-color:#0168b7;}
    .inavc ul li { width:125px; height:45px; text-align:center;font-size:20px; line-height:45px; float:left; background: url(http://www.bootfastui.cn/img/2020/0425/fuxing_11.gif) no-repeat right center;}
    .inavc ul li a { display:block; color:#FFF;}
    .inavc ul li a:visited{text-decoration:none;}
    .inavc ul li a:hover { background-color:#006635; text-decoration:none;}
    .inavc ul li a.tsy { background-color:#006635; text-decoration:none;}
    
    /* 轮播图圆点 */
    .carousel-indicators{ bottom:20px; }
    .carousel-indicators li{ background:#999; border:none;margin-right:10px}
    .carousel-indicators li.active{ background:red;margin-right:10px}


     </style>

HTML+JS代码

   
  <!--新头部的开始-->
  <div class="itop">
    <div class="container">
      <div class='row'>
        <div class="itopcl"><span>欢迎进入CPBA中国建筑节能协会被动式超低能耗建筑分会官网!</span></div>
        <div class="itopcr hidden-xs"><a href="/arctype/63">会员服务</a><span>|</span><a href="/gallery/74">会员单位</a></div>
      </div>

    </div>
  </div>
  <div class="ilogo hidden-xs">
    <div class="ilogoc container">
      <div class='row'>
        <div class="ilogol"><img src="/Public/images/img11.jpg" width="60" height="60" />
          <p class="">
            <strong>中国建筑节能协会被动式超低能耗建筑分会</strong><br>
            <span>China Passive Building Alliance</span></p>
        </div>
        <div class="ilogor">
          <p>入会申请热线：<br>
            <strong>010-64693038</strong></p>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
  <div class="inav hidden-xs">
    <div class="inavc container">
      <div class='row'>
        <ul>
          <!-- <li><a href="index.html"  class="tsy">网站首页</a></li> -->
          <li><a href="/"  class="tsy"  >网站首页</a></li>
         
          <li><a href="/gallery/79"  >战略合作</a></li>
          <li><a href="/gallery/50"  >副理事长</a></li>
          <li><a href="/gallery/77"  >会员单位</a></li>
          <li><a href="/list/45"  >新闻动态</a></li>
          <li><a href="/list/51"  >行业研究</a></li>
          <li><a href="/list/57"  >项目认证</a></li>
          <li><a href="/list/80"  >国际合作</a></li>
          <li><a href="/arctype/68"  >联系我们</a></li>
        </ul>
      </div>
    </div>
  </div>

  <!--新头部的结束-->




  <!-- 轮播图 -->

<div class="container">
	<div class='row'>
		<div id="myCarousel" class="carousel slide">
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<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="/Public/images/banner1.jpg" alt="Second slide">

				</div>
				<div class="item ">
					<img src="/Public/images/banner2.jpg" alt="First slide">

				</div>

				<div class="item">
					<img src="/Public/images/banner3.jpg" alt="Third slide">

				</div>
			</div>
			<!-- 轮播（Carousel）导航 -->
			<!-- <a class="carousel-control left" href="#myCarousel"  data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="carousel-control right" href="#myCarousel"  data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
          </a> -->

		</div>
	</div>
	<!-- 轮播图结束 -->