detail.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>详情</title>
  7. <link rel="stylesheet" href="css/index.css">
  8. </head>
  9. <style>
  10. .search_left{
  11. width: 30%;
  12. }
  13. .search_left .list li{
  14. width: 100%;
  15. }
  16. .part{
  17. border-radius: 5px;
  18. }
  19. .search input{
  20. width: 100%;
  21. height: 30px;
  22. border: 1px solid #ccc;
  23. border-radius: 3px;
  24. padding: 0 10px;
  25. margin-bottom: 15px;
  26. outline: none;
  27. text-align: center;
  28. }
  29. .detail_right{
  30. width: 69%;
  31. }
  32. .tag{
  33. margin-top: 10px;
  34. padding-left: 20px;
  35. }
  36. .tag span{
  37. background-color: #000;
  38. color: #fff;
  39. display: inline-block;
  40. padding: 2px 5px;
  41. margin-right: 10px;
  42. font-size: 12px;
  43. border-radius: 2px;
  44. }
  45. .tag a{
  46. color: #333;
  47. float: right;
  48. }
  49. .discuss{
  50. text-align: center;
  51. background-color: #f5f5f5;
  52. padding: 40px 20px;
  53. border: 1px solid #ccc;
  54. }
  55. .detail_right button{
  56. width: 150px;
  57. height: 40px;
  58. border: none;
  59. background-color: #000;
  60. color: #fff;
  61. font-weight: 600;
  62. border-radius: 3px;
  63. outline: none;
  64. }
  65. .user{
  66. margin-bottom: 10px;
  67. color: #999;
  68. font-size: 13px;
  69. }
  70. .ans{
  71. line-height: 25px;
  72. margin-bottom: 10px;
  73. color: #333;
  74. }
  75. .login_div{
  76. height: 300px;
  77. background-image: linear-gradient(90deg,#0B0B0A,#E1CAA0);
  78. text-align: center;
  79. padding-top: 140px;
  80. border-radius: 10px;
  81. }
  82. </style>
  83. <body>
  84. <header>
  85. <img class="logo" src="img/logo.jpg" alt="logo">
  86. <div class="nav">
  87. <a class="act" href="">猿人学面试</a>
  88. <a href="">爬虫比赛</a>
  89. <a href="">关于猿人学</a>
  90. </div>
  91. <div class="login">
  92. <img width="30px" src="img/logo.jpg" alt="logo">
  93. <a href="#">请先登录</a>
  94. </div>
  95. </header>
  96. <div class="content">
  97. <p class="navtation"><a href="">回到首页</a> - <a href="">爬虫面试题</a> - 用哪些库用于数据库解析</p>
  98. <div class="left search_left">
  99. <div class="part">
  100. <p class="search">
  101. <input type="text" placeholder="题目搜索">
  102. </p>
  103. <ul class="list">
  104. <li><a href="">讲讲对script的理解</a></li>
  105. <li><a href="">讲讲对script的理解</a></li>
  106. <li><a href="">讲讲对script的理解</a></li>
  107. <li><a href="">讲讲对script的理解</a></li>
  108. <li><a href="">讲讲对script的理解</a></li>
  109. <li><a href="">讲讲对script的理解</a></li>
  110. </ul>
  111. </div>
  112. <div class="part">
  113. <h2 class="sec_title"><span>贡献面试题</span></h2>
  114. <form class="form" action="">
  115. <input type="text" placeholder="面试题目">
  116. <textarea></textarea>
  117. <button>提交</button>
  118. </form>
  119. </div>
  120. </div>
  121. <div class="right detail_right">
  122. <div class="part">
  123. <b>51.用哪些库用于数据解析</b>
  124. <p class="tag">
  125. <span>tag</span><span>tag</span><span>tag</span>
  126. <a href="">分享给朋友</a>
  127. </p>
  128. </div>
  129. <div class="part">
  130. <h2 class="sec_title"><span>答题讨论</span></h2>
  131. <div class="discuss">
  132. <button>请登录</button>
  133. </div>
  134. </div>
  135. <div class="part">
  136. <h2 class="sec_title"><span>网友热议</span></h2>
  137. <p class="user">
  138. 蛋黄酱 2025.11.1
  139. </p>
  140. <p class="ans">
  141. vfbjosehuaoehvuhqaauihuoihcfuahqcuidhui
  142. </p>
  143. <div class="login_div">
  144. <button>登录后查看全部</button>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. </body>
  150. </html>