微商城导航

直接使用代码

图片素材

css代码

 <style>
.header .hdr{height:100px;overflow:hidden;position:relative;background-color:#fff}
.logo{float:left;overflow:hidden;height:100px;line-height:100px}
.logo1{display:none}
.logo img{display:inline-block;vertical-align:middle;max-width:100%;max-height:100%}
.header .hdr .r .pic{overflow:hidden;float:left;margin-top:11px;margin-right:12px}
.header .hdr .r .top{margin-top:4px;text-align:right}
.header .hdr .r .top a:hover{color:#f77026}
.header .hdr .r .top a{font-size:14px;color:#666;line-height:1.2;position:relative;padding-right:16px;margin-right:10px}
.header .hdr .r .top a:last-child{padding-right:0;margin-right:0}
.header .hdr .r .top a:after{content:'';display:block;position:absolute;right:0;top:4px;width:1px;height:10px;background-color:#c3c3c3}
.header .hdr .r .top a:last-child:after{display:none}
.header .hdr .r .txt{overflow:hidden}
.header .hdr .r .txt .bom{overflow:hidden;padding-top:11px}
.header .hdr .r .txt .bom .p{float:left;width:58px;font-size:13px;line-height:17px;color:#000;padding-right:18px;position:relative;overflow:hidden;margin-right:15px}
.header .hdr .r .txt .bom .p:after{content:'';display:block;position:absolute;right:0;top:4px;width:1px;height:44px;background-color:#c3c3c3}
.header .hdr .r .txt .bom .tel{float:left;display:block;height:40px;margin-top:8px}
.header .hdr .r .txt .bom .tel img{display:block;height:100%;width:auto;max-width:none}
.navcon .tel{background:url(http://www.bootfastui.cn/img/2021/0513-3/h29.png) center center no-repeat #fff;-webkit-background-size:cover;background-size:cover;width:178px;height:40px;position:fixed;top:70px;left:60px;z-index:10;display:none}
.navcon{background-color:#f77026;height:40px}
.nav ul{overflow:hidden}
.nav ul li{float:left}
.nav ul li.on a,.nav ul li:hover a{background-color:#ffb11b}
.nav ul li:last-child{margin-right:0}
.nav ul li a{display:block;line-height:40px;font-size:16px;color:#fff;padding:0 20px}
.nav ul li a i{display:inline-block;vertical-align:middle;width:25px;height:25px;background:url(http://www.bootfastui.cn/img/2021/0513-3/h14.png) no-repeat;margin-top:-2px;margin-right:6px}
.navcon .r .so{float:left;margin-right:16px}
.navcon .r .so span{display:block;float:left;font-size:14px;color:#fff;margin-right:10px;line-height:40px}
.navcon .r .so .form{float:left;width:156px;height:26px;background:#fff;border-radius:13px;overflow:hidden;position:relative;padding-right:25px;margin-top:7px}
.navcon .r .so .form .inp{display:block;width:100%;height:24px;padding:0 11px;border:none}
.navcon .r .so .form .inp::placeholder{font-size:14px;color:#ccc}
.navcon .r .so .form .sub{position:absolute;top:2px;right:3px;width:22px;height:22px;background:url(http://www.bootfastui.cn/img/2021/0513-3/h4.png) no-repeat;border:none;font-size:0;border-radius:50%;display:block;overflow:hidden}
.navcon .r .gm{display:block;overflow:hidden;width:126px;height:45px;background:url(http://www.bootfastui.cn/img/2021/0513-3/h1.png) no-repeat;text-align:center;line-height:45px;color:#fff;font-size:18px;font-weight:700;position:relative;margin-top:-5px;z-index:3}
.menuBtn{display:none;position:fixed;top:54px;left:12px;width:50px;height:50px;z-index:11;padding:10px;cursor:pointer;transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;-o-transition:.3s;background-color:#f77026}
.menuBtn b{display:block;height:4px;background-color:#fff;margin:4px 0;transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;-o-transition:.3s}


</style>

HTML+JS代码

 <div class="header">
  <span class="menuBtn"></span>
  <div class="hdr">
    <div class="container">
      <div class="logo">
        <a href="http://www.bootfastui.cn"><img src="http://www.bootfastui.cn/img/2021/0513-3/logo.png" alt="" /></a>
      </div>
      <div class="logo logo1">
        <a href="http://www.bootfastui.cn"><img src="http://www.bootfastui.cn/img/2021/0513-3/logo1.png" alt="" /></a>
      </div>
      <div class="r">
        <div class="pic">
          <img src="http://www.bootfastui.cn/img/2021/0513-3/h2.png" alt="" />
        </div>
        <div class="txt">
          <div class="top">
            <a href="http://www.bootfastui.cn">内容预览</a>
            <a href="http://www.bootfastui.cn">常见问题</a>
            <a href="http://www.bootfastui.cn">学校合作</a>
          </div>
          <div class="bom">
            <div class="p">艺考生随身学小程序</div>
            <a href="http://www.bootfastui.cn" class="tel">
              <img src="http://www.bootfastui.cn/img/2021/0513-3/h29.png" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="navcon">
    <div class="container">
      <div class="r fright">
        <div class="so">
          <div class="ss">
            <span>订单查询:</span>
            <div class="form">
              <form action="/order_info" method="post">
                <input type="hidden" name="_token" value="pu0GZ9nF2vUiWZm8ourIA7PxC50U0c3f7gSMX602">
                <input type="submit" class="sub" />
                <input type="text" name='tel' class="inp" placeholder="请输入您的手机号" />
              </form>
            </div>
          </div>
        </div>
        <a href="http://www.bootfastui.cn" class="gm">立即购买</a>
      </div>
      <div class="nav">
        <ul>
          <li class="on">
            <a href="http://www.bootfastui.cn">首页</a>
          </li>
          <li>
            <a href="http://www.bootfastui.cn">艺考政策</a>
          </li>
          <li>
            <a href="http://www.bootfastui.cn">机构合作</a>
          </li>

          <li class="">
            <a href="http://www.bootfastui.cn" target="_blank">随身学案系列</a>
          </li>
          <li class="">
            <a href="http://www.bootfastui.cn" target="_blank"><i></i>淘宝官方旗舰店</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>