2020-05-23

简洁纯Css无感点击footer菜单

<!--footer-->
<div class="f_1">
    <div class="f_2">    
        <li class="f_li_img">
            <a class="a_hover" href="forum.php" target＝_blank>
            <img src="ico_1.png"  height="25" />
            </a>
        </li>    
        <li class="f_li_img">
            <a class="a_hover" href="forum.php" target＝_blank>
            <img src="ico_2.png"  height="25" />
            </a>
        </li>    
        <li class="f_li_img">
            <a class="a_hover" href="misc.php" target＝_blank>
            <img src="ico_3.png"  height="25" />
            </a>
        </li>    
        <li class="f_li_img">
            <a class="a_hover" href="group.php" target＝_blank>
            <img src="ico_4.png"  height="25" />
            </a>
        </li>    
        <li class="f_li_img">
            <a class="a_hover" href="home.php" target＝_blank>
            <img src="ico_5.png"  height="25" />
            </a>
        </li>
    </div>
    <div class="f_3" >    
        <li class="f_li_a">
            <a class="a_hover" href="forum.php">首 页</a>
         </li>    
<li class="f_li_a">
<a class="a_hover" href="forum.php">社 区</a>
</li>    
<li class="f_li_a">
<a class="a_hover" href="misc.php">热 门</a>
</li>    
<li class="f_li_a">
<a class="a_hover" href="group.php">圈 子</a>
</li>    
<li class="f_li_a">
<a class="a_hover" href="home.php">我 的</a>
</li>
</div>
</div>```
CSS:
```Jaⅴa
<style type="text/css">
 .f_1{
     position:fixed;
     bottom:0;    
     background:#00BFFF;    
     margin-left:-7px;    
     width:100%;    
     height:47px;    
     margin-bottom:0px;    
     font-size:14px;    
     color:#fff;
}
.f_2{    
     width:100%;
     margin-top:-2px;
}
.f_3{    
     width:100%;
}
li{
     float:left;
     list-style:none;
}
.f_li_img{ 
     width:20%;                       
}
.f_li_a{    
     width:20%;    
     margin-top:-24px;
}
.a_hover{    
     text-align:justify;    
     a.hover{color: #fff};    
     text-decoretion:none;    
     color:#fff;
}
</style>