手机站常用 代码

顶部导航


  

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_22130_9yw3j39lz0s.css">
<script>
      var is_m;
      if (screen && screen.width > 680) {
         is_m = false;
      } else {
         is_m = true;
      }
script>
<div class="m_nav_btn pc_none iconfont icon-weibiaoti15">div>
   <div class="m_nav pc_none">
      <ul>
         <li><a class="cur" href="{APP_PATH}">HOMEa>li>
         {pc:content action="category" catid="0" num="8" siteid="$siteid" return="data2"}
         {loop $data2 $r}
         <li><a href="{$r[url]}">{$r[catname]}a>
            {if $r['child']}
            <span class="iconfont icon-plus-select-down" j="{$r['catid']}">span>          
            <dl class="head_prol_dl{$r['catid']}">
               {pc:content action="category" catid="$r[catid]" num="8" siteid="$siteid" return="data3"}
            {loop $data3 $rr}
               <dd><a href="{$rr[url]}">{$rr[catname]}a>dd>
               {/loop}
            {/pc}
            dl>
            {/if}
         li>
         {/loop}
         {/pc}
      ul>
   div>
   <div class="m_nav_bg pc_none">div>




      $(".m_nav_btn").click(function () {


         $(".m_nav").animate({
            right: 0
         }, 500);
         $(".m_nav_bg").animate({
            left: 0
         }, 500);




      })
      $(".m_nav_bg").click(function () {




         $(".m_nav").animate({
            right: -70 + "%"
         }, 500);
         $(".m_nav_bg").animate({
            left: -30 + "%"
         }, 500);
      })




      $(".m_nav li span").click(function () {




         var j = $(this).attr("j");
         $(".m_nav li .head_prol_dl" + j).slideToggle();
         $(this).parent().siblings().find("dl").slideUp();
      })
   
 





 



 底部导航



<div class="phonefooternav pc_none">
  <ul class="clearfix">
      <li>
          <a href="tel:" title="Tel">
              <i class="iconfont icon-tell">i>
              <span>Phonespan>
          a>
      li>
      <li>
          <a href="mailto:">
              <i class="iconfont icon-email1">i>
              <span>Emailspan>
          a>
      li>
      <li>
          <a href="whatsapp://send?phone=" class="whatsapp-address ">
              <i class="iconfont icon-whatsapp">i>
              <span>Whatsappspan>
          a>
      li>
  ul>
div>
.phonefooternav {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99999;
}

.phonefooternav ul li {
    width: 33.1298%;
    background: #494949;
    float: left;
}

.phonefooternav ul li:nth-of-type(2) {
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}

.phonefooternav ul li a {
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px 0;
}

.phonefooternav ul li a i {
    margin-right: 5px;
}

						  
					  

						
							


						

							
							
			htmlcss							
						



						

						
						


						

						
					

					

					
					

						
相关

						

				
						
			

																
								

										
html css js书写规范

									
									

								 

        

								

							
							

																
								

										
html css 文本分散对齐，两端对齐

									
									

								 

        

								

							
							
            
            
            
                                    
           
  			
						

					

					
				


				

														
					
					

					
									

					
									   
标签