博客列表 >仿php中文网

仿php中文网

喜
原创
2022年07月15日 20:34:45564浏览

1. 效果图

1.1

1.2

2.代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="stylesheet" href="./1.css">
  8. <title>仿php中文网</title>
  9. </head>
  10. <body>
  11. <div class="top">
  12. <div class="w">
  13. <span></span>
  14. <div class="toux">
  15. <a href="#"></a>
  16. <a href="#">
  17. <img src="./626ab52564749608.jpg" alt="">
  18. </a>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="nav">
  23. <div class="w">
  24. <div class="logo">
  25. <a href="#"></a>
  26. </div>
  27. <div class="middle">
  28. <a href="#" class="active">首页</a>
  29. <a href="#">视频教程
  30. <i></i>
  31. </a>
  32. <a href="#">学习路径
  33. <i></i>
  34. </a>
  35. <a href="#">PHP培训
  36. <div class="actividy">活动</div>
  37. </a>
  38. <a href="#">资源下载
  39. <i></i>
  40. </a>
  41. <a href="#">技术文章
  42. <i></i>
  43. </a>
  44. <a href="#">社区
  45. <i></i>
  46. </a>
  47. <a href="#">APP下载</a>
  48. <a href="#"></a>
  49. </div>
  50. <div class="search">
  51. <input type="search" placeholder="输入关键词搜索">
  52. <i></i>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="main w">
  57. <ul>
  58. <li><a href="#">php开发</a></li>
  59. <li><a href="#">大前端</a></li>
  60. <li><a href="#">后端开发</a></li>
  61. <li><a href="#">数据库</a></li>
  62. <li><a href="#">移动端</a></li>
  63. <li><a href="#">运维开发</a></li>
  64. <li><a href="#">UI设计</a></li>
  65. <li><a href="#">计算机基础</a></li>
  66. </ul>
  67. <div class="img">
  68. <a href="#"> <img src="./1.jpg" alt=""></a>
  69. </div>
  70. <div class="mainright">
  71. <div class="righttop">
  72. <div class="img"><a href="#">
  73. <img src="./626ab52564749608.jpg" alt="">
  74. </a></div>
  75. <div class="user">
  76. <span></span>
  77. <p>P豆 52</p>
  78. </div>
  79. <button>我的学习</button>
  80. </div>
  81. <ul class="mainbottom">
  82. <li>
  83. <span>问答社区</span>
  84. <a href="#">答疑</a>
  85. </li>
  86. <li>
  87. <span>
  88. 头条
  89. </span>
  90. <a href="#">2022年 Vue 的发展情况报告</a>
  91. </li>
  92. <li>
  93. <span>福利</span>
  94. <a href="#">限时折扣>></a>
  95. </li>
  96. <li>
  97. <span>新班</span>
  98. <a href="#">20期PHP线上班</a>
  99. </li>
  100. <li>
  101. <span>招募</span>
  102. <a href="#">课程合作计划</a>
  103. </li>
  104. <li>
  105. <span>公告</span>
  106. <a href="#">APP上线啦</a>
  107. </li>
  108. </ul>
  109. </div>
  110. </div>
  111. <div class="route w">
  112. <div class="routeleft">
  113. <div class="rleft">
  114. <p>学习路径</p>
  115. <span>全部7个 ></span>
  116. </div>
  117. <ul>
  118. <li><a href="#" class="prve">
  119. </a></li>
  120. <li><a href="#" class="content">
  121. <div class="img">
  122. <img src="./1.png" alt="">
  123. </div>
  124. <div class="kec">
  125. <p>独孤九剑</p>
  126. <span>9门课程</span>
  127. </div>
  128. </a></li>
  129. <li><a href="#" class="content">
  130. <div class="img">
  131. <img src="./2.png" alt="">
  132. </div>
  133. <div class="kec">
  134. <p>玉女心经</p>
  135. <span>5门课程</span>
  136. </div>
  137. </a></li>
  138. <li><a href="#" class="content">
  139. <div class="img">
  140. <img src="./3.png" alt="">
  141. </div>
  142. <div class="kec">
  143. <p>天龙八部</p>
  144. <span>3门课程</span>
  145. </div>
  146. </a></li>
  147. <li><a href="#" class="content">
  148. <div class="img">
  149. <img src="./4.png" alt="">
  150. </div>
  151. <div class="kec">
  152. <p>自学指南</p>
  153. <span>19门课程</span>
  154. </div>
  155. </a></li>
  156. <li><a href="#" class="content">
  157. <div class="img">
  158. <img src="./5.png" alt="">
  159. </div>
  160. <div class="kec">
  161. <p>趣味通关</p>
  162. <span>22门课程</span>
  163. </div>
  164. </a></li>
  165. <li><a href="#" class="next"></a></li>
  166. </ul>
  167. </div>
  168. <div class="routeright">
  169. <a href="#" class="wx">
  170. 官方公众号</a>
  171. <a href="#" class="qq">
  172. 官方QQ群</a>
  173. </div>
  174. </div>
  175. <div class="zbo w">
  176. <h3>直播课</h3>
  177. <button>更多 ></button>
  178. </div>
  179. <ul class="xiao w">
  180. <li>
  181. <div class="img">
  182. <a href="#"><img src="./11.jpg" alt=""></a>
  183. <p class="dw">公益直播</p>
  184. </div>
  185. <h3>
  186. <a href="#">公益直播:PHP入门到实战--实现邮箱验证(队列发送邮件)</a>
  187. </h3>
  188. <p><span class="one">精彩回放</span><span class="two"><i>11291</i>人感兴趣</span></p>
  189. </li>
  190. <li>
  191. <div class="img">
  192. <a href="#"><img src="./12.jpg" alt=""></a>
  193. <p class="dw">直播班</p>
  194. </div>
  195. <h3>
  196. <a href="#">第二期_大前端线上班</a>
  197. </h3>
  198. <p><span class="one">精彩回放</span><span class="two"><i>8948</i>人感兴趣</span></p>
  199. </li>
  200. <li>
  201. <div class="img">
  202. <a href="#"><img src="./13.png" alt=""></a>
  203. <p class="dw">直播班</p>
  204. </div>
  205. <h3>
  206. <a href="#">第二十期_前端开发</a>
  207. </h3>
  208. <p><span class="one active">即将上课</span><span class="two"><i>3483</i>人感兴趣</span></p>
  209. </li>
  210. <li class="gyzb">
  211. <div class="gy">
  212. <div class="gycontent">
  213. <span></span>
  214. <a href="#" class="first">公益直播:2022大前端凭啥拿高薪?</a>
  215. <a href="#" class="last">04月20日(周3)19:30</a>
  216. </div>
  217. <div class="gycontent">
  218. <span></span>
  219. <a href="#" class="first">公益直播:2022,PHP 王者归来!</a>
  220. <a href="#" class="last">02月24日(周4)20:00</a>
  221. </div>
  222. <div class="gycontent">
  223. <span></span>
  224. <a href="#" class="first">公益直播 | 基于TP6的门店排号系统</a>
  225. <a href="#" class="last">11月24日(周3)19:45</a>
  226. </div>
  227. </div>
  228. </li>
  229. </ul>
  230. </body>
  231. </html>

css

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. a{
  7. text-decoration: none;
  8. color: #333;
  9. }
  10. li{
  11. list-style: none;
  12. }
  13. i{
  14. font-style: normal;
  15. }
  16. body{
  17. background-color: #f3f5f7;
  18. font-size: 14px;
  19. }
  20. img{
  21. width: 100%;
  22. }
  23. .w{
  24. width: 1200px;
  25. margin: 0 auto;
  26. }
  27. .top{
  28. width: 100%;
  29. height: 40px;
  30. background: #343434;
  31. }
  32. .top .w{
  33. height: 100%;
  34. display: flex;
  35. justify-content: space-between;
  36. place-items: center;
  37. }
  38. .top .w>span{
  39. width: 230px;
  40. height: 16px;
  41. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat 0px 0px;
  42. }
  43. .top .toux {
  44. display: flex;
  45. justify-content: space-between;
  46. place-items: center;
  47. width: 74px;
  48. height: 100%;
  49. }
  50. .top .toux a:first-of-type{
  51. width: 13px;
  52. height: 14px;
  53. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat 0px -105px;
  54. }
  55. .top .toux a:last-of-type{
  56. position: relative;
  57. }
  58. .top .toux a img{
  59. width: 27px;
  60. height: 27px;
  61. border: 1px solid #343434;
  62. border-radius: 100px;
  63. }
  64. .top .toux a img:hover{
  65. border: 1px solid red;
  66. }
  67. .top .toux a::after{
  68. content: '';
  69. display: block;
  70. position: absolute;
  71. right: -2px;
  72. bottom: 4px;
  73. width: 12px;
  74. height: 11px;
  75. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -150px -105px;
  76. }
  77. .nav{
  78. width: 100%;
  79. background: #ffffff;
  80. box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 4%);
  81. }
  82. .nav>.w{
  83. height: 90px;
  84. display: grid;
  85. grid-template-columns: 140px 1fr 200px;
  86. }
  87. .nav .logo{
  88. place-self: center;
  89. }
  90. .nav .logo a{
  91. display: block;
  92. width: 140px;
  93. height: 34px;
  94. background: -webkit-image-set(url(https://www.php.cn//static/images/new/logo.png) 1x, url(https://www.php.cn//static/images/new/logo-2x.png) 2x) no-repeat;
  95. }
  96. .nav .middle {
  97. display: flex;
  98. justify-content: space-evenly;
  99. place-items: center;
  100. font-size: 16px;
  101. }
  102. .nav .middle a{
  103. display: flex;
  104. position: relative;
  105. place-items: center;
  106. }
  107. .nav .middle i{
  108. display: inline-block;
  109. width: 9px;
  110. height: 5px;
  111. margin-left: 5px;
  112. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -245px 0px;
  113. }
  114. .nav .middle a:nth-of-type(8){
  115. color: #F11716;
  116. }
  117. .nav .middle a:nth-of-type(8)::before{
  118. content: '';
  119. display: block;
  120. width: 12px;
  121. height: 18px;
  122. margin-right: 5px;
  123. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat 0px -25px;
  124. }
  125. .nav .middle .active{
  126. color: #F11716;
  127. font-weight: bold;
  128. }
  129. .nav .middle a:not(:nth-last-of-type(-n+2)):hover{
  130. color: #F11716;
  131. font-weight: bold;
  132. }
  133. .nav .middle a:last-of-type{
  134. width: 16px;
  135. height: 4px;
  136. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -20px -35px;
  137. }
  138. .nav .middle a:nth-of-type(5){
  139. padding-left: 10px;
  140. }
  141. .nav .middle a .actividy{
  142. padding: 0 5px;
  143. height: 15px;
  144. line-height: 15px;
  145. background: #fd5050;
  146. border-radius: 8px;
  147. color: #FFFFFF;
  148. position: absolute;
  149. top: -6px;
  150. right: -34px;
  151. font-size: 12px;
  152. }
  153. .nav .w .search{
  154. position: relative;
  155. place-self: center;
  156. }
  157. .nav .w .search input{
  158. width: 200px;
  159. height: 36px;
  160. border-radius: 100px;
  161. background: #f7f8fa;
  162. border: none;
  163. outline: none;
  164. padding-left: 20px;
  165. font-size: 12px;
  166. }
  167. .nav .w .search input::placeholder{
  168. color: rgb(153, 153, 153);
  169. }
  170. .nav .w .search i{
  171. position: absolute;
  172. display: block;
  173. width: 19px;
  174. height: 17px;
  175. bottom: 28%;
  176. right: 15px;
  177. border: none;
  178. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -45px -25px;
  179. }
  180. .nav .w .search:hover i{
  181. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -70px -25px;
  182. }
  183. input[type=search]::-webkit-search-cancel-button{
  184. -webkit-appearance: none;
  185. }
  186. .main{
  187. display: grid;
  188. grid-template-columns: 160px 810px 190px;
  189. gap: 0 18px ;
  190. margin-top: 30px;
  191. height: 400px;
  192. }
  193. .main>ul{
  194. display: grid;
  195. grid-template-rows: repeat(8,1fr);
  196. height: 400px;
  197. padding: 15px;
  198. background: #ffffff;
  199. border-radius: 12px;
  200. }
  201. .main>ul a{
  202. display: block;
  203. width: 126px;
  204. height: 40px;
  205. text-align: center;
  206. line-height: 40px;
  207. }
  208. .main>ul a:hover{
  209. background-color: rgb(254, 246,246);
  210. color: #F11716;
  211. border-radius: 100px;
  212. }
  213. .main>.img img{
  214. transition: all 0.5s;
  215. }
  216. .main>.img{
  217. overflow: hidden;
  218. border-radius: 10px;
  219. }
  220. .main>.img img:hover{
  221. transform: scale(1.1);
  222. }
  223. .mainright{
  224. background: #ffffff;
  225. border-radius: 12px;
  226. height: 400px;
  227. padding: 18px;
  228. padding-top: 0;
  229. }
  230. .mainright .righttop{
  231. display: grid;
  232. grid-template-columns: 40px 1fr;
  233. gap: 0 5px ;
  234. width: 100%;
  235. height: 141px;
  236. border-bottom: 1px solid #eeeeee;
  237. }
  238. .mainright .righttop img{
  239. border-radius: 100px;
  240. }
  241. .mainright .righttop .img{
  242. width: 40px;
  243. height: 40px;
  244. margin-right: 5px;
  245. margin-top: 20px;
  246. }
  247. .mainright .righttop span{
  248. font-weight: bold;
  249. }
  250. .mainright .righttop p{
  251. font-size: 12px;
  252. color: #999;
  253. margin-top: 8px;
  254. }
  255. .mainright .righttop .user{
  256. margin-top: 15px;
  257. margin-left: 8px;
  258. }
  259. .mainright .righttop button{
  260. grid-area: 2/1/span 1/span 2 ;
  261. width: 150px;
  262. height: 34px;
  263. background: #f11717;
  264. border-radius: 100px;
  265. line-height: 34px;
  266. text-align: center;
  267. color: #ffffff;
  268. border: none;
  269. cursor: pointer;
  270. }
  271. .mainright .mainbottom{
  272. display: grid;
  273. grid-template-rows: repeat(6,1fr);
  274. height: 241px;
  275. padding-top: 20px;
  276. gap:10px;
  277. }
  278. .mainright .mainbottom li{
  279. width: 100%;
  280. display: grid;
  281. grid-template-columns: 30px 1fr;
  282. gap: 10px ;
  283. }
  284. .mainright .mainbottom a{
  285. color: #b6b6b6;
  286. }
  287. .mainright .mainbottom a:hover{
  288. color: #f11717;
  289. }
  290. .mainright .mainbottom li:first-of-type a{
  291. margin-left: 30px;
  292. margin-top: 2px;
  293. width: 31px;
  294. height: 16px;
  295. background: #ff583d;
  296. border-radius: 2px;
  297. font-size: 12px;
  298. color: #ffffff;
  299. line-height: 16px;
  300. text-align: center;
  301. }
  302. .mainright .mainbottom span:first-of-type{
  303. width: 60px;
  304. }
  305. .route{
  306. height: 80px;
  307. margin-top: 18px;
  308. display: grid;
  309. grid-template-columns: 990px 190px;
  310. gap: 0 18px;
  311. }
  312. .route .routeleft{
  313. display: grid;
  314. grid-template-columns: 100px 1fr;
  315. gap: 0 10px;
  316. background: #ffffff;
  317. border-radius: 12px;
  318. }
  319. .route .routeleft .rleft{
  320. place-self: center;
  321. }
  322. .route .routeleft .rleft span{
  323. display: block;
  324. font-size: 12px;
  325. color: #999;
  326. padding-top: 6px;
  327. }
  328. .route .routeleft ul{
  329. display: flex;
  330. place-items: center;
  331. justify-content: space-between;
  332. padding-right: 30px;
  333. }
  334. .route .routeleft ul a:hover p{
  335. color: #F11716;
  336. }
  337. .route .routeleft .prve{
  338. display: block;
  339. width: 14px;
  340. height: 29px;
  341. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -313px 0px;
  342. }
  343. .route .routeleft .prve:hover{
  344. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -335px 0px;
  345. }
  346. .route .routeleft .next:hover{
  347. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -375px 0px;
  348. }
  349. .route .routeleft .next{
  350. display: block;
  351. width: 14px;
  352. height: 29px;
  353. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -355px 0px;
  354. }
  355. .route .routeleft img{
  356. width: 36px;
  357. height: 36px;
  358. }
  359. .route .routeleft .content{
  360. display: flex;
  361. }
  362. .route .routeleft .content .img{
  363. margin-right: 10px;
  364. }
  365. .route .routeleft .content .kec span{
  366. font-size: 12px;
  367. color: #999;
  368. }
  369. .route .routeright{
  370. display: flex;
  371. justify-content: space-between;
  372. place-items: center;
  373. background: #ffffff;
  374. border-radius: 12px;
  375. padding: 0 26px ;
  376. }
  377. .route .routeright .wx::before,
  378. .route .routeright .qq::before{
  379. content: '';
  380. width: 30px;
  381. height: 30px;
  382. margin-bottom: 10px;
  383. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat;
  384. }
  385. .route .routeright .wx::before{
  386. background-position: -40px -60px;
  387. }
  388. .route .routeright .qq::before{
  389. background-position: 0px -60px;
  390. }
  391. .route .routeright .wx,
  392. .route .routeright .qq{
  393. font-size: 12px;
  394. font-weight: bold;
  395. display: flex;
  396. flex-flow: column nowrap;
  397. place-items: center;
  398. }
  399. .route .routeright .wx:hover,
  400. .route .routeright .qq:hover{
  401. color: #f11717;
  402. }
  403. .zbo{
  404. display: flex;
  405. justify-content: space-between;
  406. place-items: center;
  407. margin-top: 10px;
  408. line-height: 100px;
  409. }
  410. .zbo h3{
  411. font-size: 22px;
  412. font-weight: bold;
  413. color: #333333;
  414. }
  415. .zbo button{
  416. width: 78px;
  417. height: 32px;
  418. background: #f0f1f4;
  419. color: #999;
  420. border-radius: 100px;
  421. text-align: center;
  422. line-height: 32px;
  423. border: none;
  424. cursor: pointer;
  425. }
  426. .zbo button:hover{
  427. color: #ffffff;
  428. background-color: #f11717;
  429. }
  430. ul.xiao{
  431. display: grid;
  432. grid-template-columns: repeat(4,280px);
  433. gap: 0 20px;
  434. height: 275px;
  435. }
  436. ul.xiao li{
  437. background: #ffffff;
  438. border-radius: 6px;
  439. }
  440. ul.xiao .img a{
  441. display: block;
  442. height: 160px;
  443. transition: all 0.2s;
  444. }
  445. ul.xiao .img{
  446. position: relative;
  447. overflow: hidden;
  448. border-radius: 8px 8px 0 0;
  449. }
  450. ul.xiao .dw{
  451. position: absolute;
  452. right: 8px;
  453. top: 8px;
  454. height: 22px;
  455. background: linear-gradient(to top, rgb(235, 196, 134), rgba(250, 228, 193));
  456. padding: 0px 3px 0px 3px;
  457. border-radius: 3px;
  458. color: #93652a;
  459. font-size: 12px;
  460. line-height: 22px;
  461. }
  462. ul.xiao img{
  463. width: 100%;
  464. }
  465. ul.xiao .img a:hover{
  466. transform: scale(1.1);
  467. }
  468. ul.xiao h3{
  469. height: 42px;
  470. font-size: 16px;
  471. margin: 10px 15px ;
  472. font-weight: normal;
  473. }
  474. ul.xiao h3:hover a{
  475. color: red;
  476. }
  477. ul.xiao p{
  478. display: flex;
  479. justify-content: space-between;
  480. padding: 10px 15px;;
  481. font-size: 14px;
  482. }
  483. ul.xiao .one{
  484. color: #666;
  485. }
  486. ul.xiao .two{
  487. color: #b7b7b7;
  488. }
  489. ul.xiao .active{
  490. color: #f11717;
  491. }
  492. ul.xiao .gyzb{
  493. padding: 10px;
  494. padding-bottom: 0;
  495. }
  496. ul.xiao .gy{
  497. width: 230px;
  498. border-left: 1px solid #eee;
  499. }
  500. ul.xiao .gy span{
  501. position: absolute;
  502. left: -17px;
  503. width: 14px;
  504. height: 14px;
  505. background: #d6dae8;
  506. border: 4px solid #f6f7fb;
  507. border-radius: 50%;
  508. transition: all .2s linear;
  509. display: block;
  510. }
  511. .gycontent{
  512. position: relative;
  513. height: 84px;
  514. margin-top: 3px;
  515. margin-left: 10px;
  516. white-space: nowrap;
  517. }
  518. .gycontent .last{
  519. display: block;
  520. margin-top: 5px;
  521. font-size: 14px;
  522. color: #b7b7b7;
  523. white-space: nowrap;
  524. overflow: hidden;
  525. text-overflow: ellipsis;
  526. }
  527. ul.xiao .gy:hover span{
  528. background-color: #f11717;
  529. }
  530. ul.xiao .gy:hover .first{
  531. color: #f11717;
  532. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议