Bez popisu

friends.html 3.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  7. <title>我的好友</title>
  8. <link rel="stylesheet" type="text/css" href="../public/public_css.css"/>
  9. <link rel="stylesheet" type="text/css" href="css/friends.css"/>
  10. <script type="text/javascript">
  11. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  12. window.onresize = function(){
  13. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  14. }
  15. </script>
  16. </head>
  17. <body>
  18. <div class="container">
  19. <div class="header">我的好友</div>
  20. <!--导航-->
  21. <div id="tab_warp" class="wrap">
  22. <!-- 最外层导航 -->
  23. <ul id="tab_one">
  24. <li class="active">全部好友</li>
  25. <li>全部好友</li>
  26. <li>全部好友</li>
  27. <li>全部好友</li>
  28. </ul>
  29. <div class="tab1_con" style="display:block;">
  30. <!-- 默认选中哪个,就让哪个block -->
  31. <div id="tab2" class="wrap">
  32. <!-- 第二层导航 -->
  33. <ul id="tab_two">
  34. <li class="active">全部:6位</li>
  35. <!-- 默认选中哪个,就让哪个active -->
  36. <li>超级会员:2位</li>
  37. <li>会员:4位</li>
  38. </ul>
  39. <div class="tab2_con" style="display:block;">
  40. <div class="item">
  41. <img src="" alt="头像" class="touxiang" />
  42. <div class="right">
  43. <span class="name">我是你</span><i class="member">会员</i><br />
  44. <span class="tel">183****7777</span><span class="time">2018-04-30</span></p>
  45. </div>
  46. <div class="see">查看上一级</div>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="tab2_con">2222222222</div>
  51. <div class="tab2_con">3333333333333</div>
  52. </div>
  53. </div>
  54. <div class="tab1_con">
  55. <div id="tab2" class="wrap">
  56. <!-- 第二层导航 -->
  57. <ul id="tab_two">
  58. <li class="active">全部:2位</li>
  59. <!-- 默认选中哪个,就让哪个active -->
  60. <li>超级会员:2位</li>
  61. <li>会员:0位</li>
  62. </ul>
  63. <div class="tab2_con" style="display:block;">---111</div>
  64. </div>
  65. <div class="tab2_con">2---2222</div>
  66. <div class="tab2_con">33----333333333</div>
  67. </div>
  68. <div class="tab1_con"><div class="tit">第一层</div>333333333333333333333333内容内容</div>
  69. <div class="tab1_con"><div class="tit">第一层</div>333333333333333333333333内容内容</div>
  70. </div>
  71. </div>
  72. </body>
  73. </html>
  74. <script type="text/javascript" src="../public/jquery-2.1.0.js"></script>
  75. <script type="text/javascript" src="js/friends.js"></script>