简洁纯CSS+html实现网站APP底部菜单HTML5和PHP通用

admin

原创双<li>竖排无视差简洁网站底部footer菜单,适合HTML5和PHP
作者:青花
转载请注明:https://wdc.store

1. <!--footer-->
   
2. <div class="f_1">
   
3. <div class="f_2">
   
4.     <li class="f_li_img"><a class="a_hover" href="forum.php" target＝_blank><img src="ico_1.png"  height="25" /></a></li>
   
5.     <li class="f_li_img"><a class="a_hover" href="forum.php" target＝_blank><img src="ico_2.png"  height="25" /></a></li>
   
6.     <li class="f_li_img"><a class="a_hover" href="misc.php" target＝_blank><img src="ico_3.png"  height="25" /></a></li>
   
7.     <li class="f_li_img"><a class="a_hover" href="group.php" target＝_blank><img src="ico_4.png"  height="25" /></a></li>
   
8.     <li class="f_li_img"><a class="a_hover" href="home.php" target＝_blank><img src="ico_5.png"  height="25" /></a></li>
   
9. </div>
   
10. <div class="f_3" >
    
11.     <li class="f_li_a"><a class="a_hover" href="forum.php">首 页</a></li>
    
12.     <li class="f_li_a"><a class="a_hover" href="forum.php">社 区</a></li>
    
13.     <li class="f_li_a"><a class="a_hover" href="misc.php">热 门</a></li>
    
14.     <li class="f_li_a"><a class="a_hover" href="group.php">圈 子</a></li>
    
15.     <li class="f_li_a"><a class="a_hover" href="home.php">我 的</a></li>
    
16. </div>
    
17. </div>
    
18. <style type="text/css">
    
19. .f_1{
    
20.     position:fixed;
    
21.     bottom:0;
    
22.     background:#00BFFF;
    
23.     margin-left:-7px;
    
24.     width:100%;
    
25.     height:47px;
    
26.     margin-bottom:0px;
    
27.     font-size:14px;
    
28.     color:#fff;
    
29. }
    
30. .f_2{
    
31.     width:100%;
    
32.     margin-top:-2px;
    
33. }
    
34. .f_3{
    
35.     width:100%;
    
36. }
    
37. .f_li_img{
    
38.         width:20%;                           
    
39. }
    
40. .f_li_a{
    
41.     width:20%;
    
42.     margin-top:-24px;
    
43. }
    
44. .a_hover{
    
45.     text-align:justify;
    
46.     a.hover{color: #fff};
    
47.     text-decoretion:none;
    
48.     color:#fff;
    
49. }
    
50. 
    
51. </style>

复制代码