Blogger Information
Blog 10
fans 0
comment 0
visits 4978
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
9.26作业-仿站php.cn手机端
鬼才哥-秋兜
Original
552 people have browsed it

仿站效果图

仿PHP中文网手机端首页代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>php中文网</title>
  6. <meta
  7. name="viewport"
  8. content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"
  9. />
  10. <meta name="applicable-device" content="mobile" />
  11. <link rel="canonical" href="https://www.php.cn/" />
  12. <link rel="stylesheet" href="static/css/layui.css" />
  13. <link rel="stylesheet" href="static/css/style.css" />
  14. <style>
  15. .layui-carousel .layui-this a {
  16. height: 100%;
  17. }
  18. .course-list ul li:last-child {
  19. margin-bottom: 10px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div class="public-top">
  25. <li class="f-left login">
  26. <a href="#">
  27. <img src="static/picture/login.png" />
  28. </a>
  29. </li>
  30. <li class="logo">
  31. <a href="/">
  32. <img
  33. class="f-fl img"
  34. src="static/picture/logo.png"
  35. height="45"
  36. width="94"
  37. />
  38. </a>
  39. </li>
  40. </div>
  41. <div class="layui-carousel mt-40" id="banner">
  42. <div carousel-item>
  43. <div class="index">
  44. <a href="https://www.php.cn/mk.html?t=4">
  45. <img
  46. src="static/picture/612c7ec3a7d83959.png"
  47. height="100%"
  48. width="100%"
  49. alt="php中文网线上直播班"
  50. />
  51. </a>
  52. </div>
  53. <div>
  54. <a href="/app/">
  55. <img
  56. src="static/picture/608a641a44d26281.png"
  57. height="100%"
  58. width="100%"
  59. alt="php中文网APP下载"
  60. />
  61. </a>
  62. </div>
  63. <div>
  64. <a href="/map/dugu.html">
  65. <img
  66. src="static/picture/1.jpg"
  67. width="100%"
  68. height="100%"
  69. alt="《独孤九贱》系列php web开发视频教程"
  70. />
  71. </a>
  72. </div>
  73. <div>
  74. <a href="/toutiao.html">
  75. <img
  76. src="static/picture/2.jpg"
  77. width="100%"
  78. height="100%"
  79. alt="PHP资讯头条"
  80. />
  81. </a>
  82. </div>
  83. </div>
  84. </div>
  85. <div class="menu layui-clear" id="menu">
  86. <ul class="php-left-li layui-clear">
  87. <li>
  88. <a href="#">
  89. <img src="static/picture/html.png" />
  90. HTML/CSS
  91. </a>
  92. </li>
  93. <li>
  94. <a href="#">
  95. <img src="static/picture/javascript.png" />
  96. JavaScript
  97. </a>
  98. </li>
  99. <li>
  100. <a href="#">
  101. <img src="static/picture/code.png" />
  102. 服务端
  103. </a>
  104. </li>
  105. <li>
  106. <a href="#">
  107. <img src="static/picture/sql.png" />
  108. 数据库
  109. </a>
  110. </li>
  111. <li>
  112. <a href="#">
  113. <img src="static/picture/app.png" />
  114. 移动端
  115. </a>
  116. </li>
  117. <li>
  118. <a href="#">
  119. <img src="static/picture/manual.png" />
  120. 手册
  121. </a>
  122. </li>
  123. <li>
  124. <a href="#">
  125. <img src="static/picture/tool2.png" />
  126. 工具
  127. </a>
  128. </li>
  129. <li>
  130. <a href="#">
  131. <img src="static/picture/live.png" />
  132. 直播
  133. </a>
  134. </li>
  135. </ul>
  136. </div>
  137. <div class="course-list layui-clear mt-20">
  138. <h3>推荐课程</h3>
  139. <div class="course-box">
  140. <div class="box f-left">
  141. <a href="#">
  142. <img src="static/picture/5e0d82773b4fe808.png" />
  143. <h2>
  144. <a href="#"> Thinkphp6.0正式版视频教程 </a>
  145. </h2>
  146. </a>
  147. </div>
  148. <div class="box f-right">
  149. <a href="#">
  150. <img src="static/picture/5f606a9a7fe99960.jpg" />
  151. <h2>
  152. <a href="#"> TP6.0 搭建个人博客实战(玉女心经版) </a>
  153. </h2>
  154. </a>
  155. </div>
  156. </div>
  157. <ul>
  158. <li class="layui-clear">
  159. <a href="#" class="course-intro-img">
  160. <img src="static/picture/6049da2b3898c385.jpg" width="100%" />
  161. </a>
  162. <div class="course-intro">
  163. <h2>
  164. <a href="#"> php8,我来也 </a>
  165. </h2>
  166. <p>
  167. <span class="level"> 初级 </span>
  168. <span> 48832次播放 </span>
  169. </p>
  170. </div>
  171. </li>
  172. </ul>
  173. </div>
  174. <div class="course-list layui-clear">
  175. <h3>最新更新</h3>
  176. <ul>
  177. <li class="layui-clear">
  178. <a href="#" class="course-intro-img">
  179. <img src="static/picture/61500a97859e7795.jpg" width="100%" />
  180. </a>
  181. <div class="course-intro">
  182. <h2>
  183. <a href="#"> 通用后台管理系统实战开发 </a>
  184. </h2>
  185. <p class="course-intro-info">
  186. 使用thinkphp6和layui 搭建的一套后台管理系统,属于实战进阶课程
  187. </p>
  188. <p>
  189. <span class="level"> 初级 </span>
  190. <span class="count"> 152次播放 </span>
  191. </p>
  192. </div>
  193. </li>
  194. </ul>
  195. </div>
  196. <div class="course-list layui-clear">
  197. <h3>最新文章</h3>
  198. <div class="article mb-10 layui-clear">
  199. <a href="#" title="教你怎么仿做得物APP微信小程序">
  200. <div class="title f-left">
  201. <h2 class="mb-10">教你怎么仿做得物APP微信小程序</h2>
  202. <span> 发布时间:2021-08-23 </span>
  203. </div>
  204. <img
  205. class="f-right"
  206. src="static/picture/61230ff149494468.jpg"
  207. alt="教你怎么仿做得物APP微信小程序"
  208. />
  209. </a>
  210. </div>
  211. <a href="#" class="more"> 更多内容 </a>
  212. </div>
  213. <div class="course-list layui-clear">
  214. <h3>最新博文</h3>
  215. <div class="article mb-10 layui-clear">
  216. <a href="#" title="云服务器的操作系统一般怎么选?选错了可以重装吗?">
  217. <div class="title f-left">
  218. <h2 class="mb-10">
  219. 云服务器的操作系统一般怎么选?选错了可以重装吗?
  220. </h2>
  221. </div>
  222. <span style="float: right"> 2021-09-27 </span>
  223. </a>
  224. </div>
  225. <a href="#" class="more"> 更多内容 </a>
  226. </div>
  227. <div class="course-list layui-clear mt-10">
  228. <h3>最新问答</h3>
  229. <div class="article mb-10 layui-clear">
  230. <a href="#">
  231. <div class="title f-left">
  232. <h2 class="mb-10">无法输出数据</h2>
  233. </div>
  234. <span style="float: right"> 2021-09-26 </span>
  235. </a>
  236. </div>
  237. <a href="#" class="more"> 更多内容 </a>
  238. </div>
  239. <div class="layui-clear mt-50"></div>
  240. <footer>
  241. <a href="/" class="on">
  242. <i class="layui-icon layui-icon-home"> </i>
  243. 首页
  244. </a>
  245. <a href="#">
  246. <i class="layui-icon layui-icon-play"> </i>
  247. 视频
  248. </a>
  249. <a href="#">
  250. <img src="static/picture/gif_live.gif" />
  251. 直播
  252. </a>
  253. <a href="#">
  254. <i class="layui-icon layui-icon-code-circle"> </i>
  255. 社区
  256. </a>
  257. <a href="#">
  258. <i class="layui-icon layui-icon-username"> </i>
  259. 我的
  260. </a>
  261. </footer>
  262. <script>
  263. isLogin = 0;
  264. </script>
  265. <script type="text/javascript" src="static/js/jquery.min.js"></script>
  266. <script type="text/javascript" src="static/js/layui.js"></script>
  267. <script type="text/javascript" src="static/js/global.js"></script>
  268. </body>
  269. </html>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post