直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

 <style>
.header{overflow:hidden;width:100%;height:122px;position:relative;min-width:1200px;}
.headerbgz{width:55%;height:122px;background:#fff;float:left;}
.headerbgy{width:45%;height:122px;background:#ffc702;float:left;}
.headerbgc{width:122px;height:122px;position:absolute;left:55%;margin-left:-91px;overflow:hidden;}
.headerbgc div{width:122px;height:122px;background:#fff;position:relative;overflow:hidden;}
.headerbgc div span{display:block;width:250px;height:250px;background:#ffc702;position:absolute;left:30px;top:20px;transform:rotate(-55deg);transform:rotate(-55deg);-ms-transform:rotate(-55deg);-moz-transform:rotate(-55deg);-webkit-transform:rotate(-55deg);-o-transform:rotate(-55deg);}
/* 顶部信息 */
.headBox{height:122px;overflow:hidden;position:absolute;}
.headl{float:left;width:296px;height:122px;margin-top:25px;display:inline;overflow:hidden;}
.headl a,.headl a img{display:block;}
.headl2{text-align:center;float:left;width:180px;height:45px;margin-top:42px;display:inline;overflow:hidden;}
.headl2 span{display:block;width:100%;height:25px;line-height:25px;margin-top:2px;background:#0168b7;color:#fff;overflow:hidden;font-size:13px;}
.headl2 p{letter-spacing:4px;margin:0}
.headR{float:right;width:550px;height:122px;margin-top:25px;display:inline;overflow:hidden;}
.head_tel{float:right;height:100px;width:320px;background:url(http://www.bootfastui.cn/img/2021/0517/h_tel.png) no-repeat 0px 5px;padding-left:81px;line-height:35px;font-family:"Microsoft Yahei";font-size:16px;}
.head_tel span{color:red;line-height:30px;height:30px;display:block;font-size:33px;}
/* 导航 */
.h_nav{background:#2d3e50;height:58px;z-index:100;}
.h_nav li{float:left;height:58px;width:100px;position:relative;}
.h_nav li a{color:#fff;display:block;font-size:16px;line-height:58px;height:58px;width:100%;overflow:hidden;text-align:center;}
.h_nav li.cur a,.h_nav li.curj a,.h_nav li:hover a{text-decoration:none;color:#fff;background:#ffc602;}
.erj{background:#ffc602;display:none;left:0;position:absolute;top:58px;right:0;z-index:999;width:100%;overflow:hidden;}



</style>

HTML+JS代码

 
<div class="header">

  <div class="headerbgz"></div>
  <div class="headerbgy"></div>
  <div class="headerbgc">
    <div><span></span></div>
  </div>
  <div class="container">
    <div class="headBox">
      <div class="headl">
        <a href="http://www.bootfastui.cn"><img src='http://www.bootfastui.cn/img/2021/0517/logo.png?t=885' alt='' height="68" /></a>
      </div>

      <div class="headl2">
        <p>中华商标协会理事单位</p>
        <span>2019年度优秀商标代理机构</span>
      </div>

      <div class="headR">
        <div class="head_tel">全国免费服务热线：<span>400-181-5155</span>
        </div>
      </div>
      <div class="clear"></div>
    </div>

    <div class="clear"></div>
  </div>
</div>




<!-- 导航-->
<div class="h_nav" id="h_nav">
  <div class="container">
    <ul class="hunav">
      <li  class="cur"><a href="http://www.bootfastui.cn" title="首页">首页</a></li>
      <li ><a href="http://www.bootfastui.cn" title="商标注册">商标注册</a></li>
      <li ><a href="http://www.bootfastui.cn" title="商标案件">商标案件</a></li>
      <li ><a href="http://www.bootfastui.cn" title="商标交易">商标交易</a></li>
      <li ><a href="http://www.bootfastui.cn" title="专利申请">专利申请</a></li>
      <li ><a href="http://www.bootfastui.cn" title="版权登记">版权登记</a></li>
      <li ><a href="http://www.bootfastui.cn" title="项目申报">项目申报</a></li>
      <li ><a href="http://www.bootfastui.cn" title="新闻资讯">新闻资讯</a></li>
      <li ><a href="http://www.bootfastui.cn">成功案例</a></li>
      <li ><a href="http://www.bootfastui.cn" title="关于咕咕狗">关于咕咕狗</a></li>
    </ul>
    </li>
  </div>
  </ul>
</div>
<!-- 导航 -->