博客列表 >仿html.cn-PC页面-web前端第11章6.24

仿html.cn-PC页面-web前端第11章6.24

希望
希望原创
2020年06月29日 17:56:19729浏览

一.仿html.cn-PC页面

  1. 效果图如下:
    仿html.cn-PC页面
  2. 代码如下:
  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. <link href="./css/common.css" type="text/css" rel="stylesheet" />
  7. <link href="./css/index.css" type="text/css" rel="stylesheet" />
  8. <title>仿html.cn-PC页面</title>
  9. </head>
  10. <body>
  11. <header id="mainHeader" class="flexDis">
  12. <div class="logo" >
  13. <a title="htlm中文网" href="/">
  14. <img src="./images/logo.png" alt="logo" />
  15. </a>
  16. </div>
  17. <ul>
  18. <li><a href="#">首页</a></li>
  19. <li><a href="#">课程</a></li>
  20. <li><a href="#">路径</a></li>
  21. <li><a href="#">资源</a></li>
  22. <li><a href="#">文章</a></li>
  23. </ul>
  24. <div class="searchInfo">
  25. <input type="text" placeholder="请输入关键字" value="" /><a
  26. href="#"
  27. ></a>
  28. </div>
  29. <p><a href="#">登录</a><a href="#">注册</a></p>
  30. </header>
  31. <header id="mainHeader1" class="flexDis">
  32. <ul>
  33. <li>
  34. <a class="all" href="#">全部课程</a>
  35. </li>
  36. <li><a href="#">视频</a></li>
  37. <li><a href="#">手册</a></li>
  38. <li><a href="#">直播</a></li>
  39. <li><a href="#">技术</a></li>
  40. <li><a href="#">工具</a></li>
  41. </ul>
  42. </header>
  43. <section class="contrain secCon1 flexDis">
  44. <ul>
  45. <li><a href="#">HTML html html5</a></li>
  46. <li><a href="#">CSS css css3</a></li>
  47. <li><a href="#">JS javaScript Ajax</a></li>
  48. <li><a href="#">JS框架 jQuery Vue.js</a></li>
  49. <li><a href="#">前端框架 Bootstrap Layui</a></li>
  50. <li><a href="#">移动开发 小程序开发</a></li>
  51. <li><a href="#">开发工具</a></li>
  52. <li><a href="#">软件下载</a></li>
  53. </ul>
  54. <!-- 图片父容器给个类名,preview -->
  55. <div class="preview applyFlex">
  56. <p><a href="#"></a><a href="#"></a></p>
  57. <!-- 把图片应用flex,进行自由伸缩,图片给个类名 -->
  58. <div class="applyFlex">
  59. <img src="./images/banner2.jpg" alt="" />
  60. <img src="./images/banner5.jpg" alt="" />
  61. <img src="./images/banner6.jpg" alt="" />
  62. </div>
  63. <div class="img1 " >
  64. <img src="./images/1.jpg" alt="" />
  65. <img src="./images/1.jpg" alt="" />
  66. <img src="./images/1.jpg" alt="" />
  67. <img src="./images/1.jpg" alt="" />
  68. </div>
  69. </div>
  70. </section>
  71. <!-- 实战课程 -->
  72. <section class="secCon2 contrain">
  73. <h1 class="flexDis flexAlignC">
  74. 实战课程 | <small>全程实战学习,快速掌握web前端开发技术</small>
  75. <p><a href="#">更多</a></p>
  76. </h1>
  77. <!-- 水平居中对齐 -->
  78. <div class="flexDis flexContentB">
  79. <div class="img2">
  80. <img src="./images/2.jpg" alt="" />
  81. <br>
  82. <span>内容1的文字介绍</span>
  83. </div>
  84. <div class="img2">
  85. <img src="./images/2.jpg" alt="" />
  86. <br>
  87. <span>内容1的文字介绍</span>
  88. </div>
  89. <div class="img2">
  90. <img src="./images/2.jpg" alt="" />
  91. <br>
  92. <span>内容1的文字介绍</span>
  93. </div>
  94. <div class="img2">
  95. <img src="./images/2.jpg" alt="" />
  96. <br>
  97. <span>内容1的文字介绍</span>
  98. </div>
  99. </div>
  100. </section>
  101. <!-- 三列布局 -->
  102. <div class="container">
  103. <div class="left">
  104. <h3>
  105. <a href="#">前端工具</a>
  106. </h3>
  107. <ul>
  108. <div class="img3">
  109. <li>
  110. <div class="flexDis flexAlignC">
  111. <img src="./images/3.jpg" alt="" />
  112. <a href="#">Notepad++</a>
  113. </li>
  114. </div>
  115. <div class="img3">
  116. <li>
  117. <div class="flexDis flexAlignC">
  118. <img src="./images/3.jpg" alt="" />
  119. <a href="#">Notepad++</a>
  120. </li>
  121. </div>
  122. <div class="img3">
  123. <li>
  124. <div class="flexDis flexAlignC">
  125. <img src="./images/3.jpg" alt="" />
  126. <a href="#">Notepad++</a>
  127. </li>
  128. </div>
  129. <div class="img3">
  130. <li>
  131. <div class="flexDis flexAlignC">
  132. <img src="./images/3.jpg" alt="" />
  133. <a href="#">Notepad++</a>
  134. </li>
  135. </div>
  136. <div class="img3">
  137. <li>
  138. <div class="flexDis flexAlignC">
  139. <img src="./images/3.jpg" alt="" />
  140. <a href="#">Notepad++</a>
  141. </li>
  142. </div>
  143. <div class="img3">
  144. <li>
  145. <div class="flexDis flexAlignC">
  146. <img src="./images/3.jpg" alt="" />
  147. <a href="#">Notepad++</a>
  148. </li>
  149. </div>
  150. <div class="img3">
  151. <li>
  152. <div class="flexDis flexAlignC">
  153. <img src="./images/3.jpg" alt="" />
  154. <a href="#">Notepad++</a>
  155. </li>
  156. </div>
  157. <div class="img3">
  158. <li>
  159. <div class="flexDis flexAlignC">
  160. <img src="./images/3.jpg" alt="" />
  161. <a href="#">Notepad++</a>
  162. </li>
  163. </div>
  164. <div class="img3">
  165. <li>
  166. <div class="flexDis flexAlignC">
  167. <img src="./images/3.jpg" alt="" />
  168. <a href="#">Notepad++</a>
  169. </li>
  170. </div>
  171. <div class="img3">
  172. <li>
  173. <div class="flexDis flexAlignC">
  174. <img src="./images/3.jpg" alt="" />
  175. <a href="#">Notepad++</a>
  176. </li>
  177. </div>
  178. </ul>
  179. </div>
  180. <div class="main">
  181. <h3>
  182. <a href="#">文章</a><a href="#">视频</a> <a href="#">资源</a
  183. ><a href="#">教程</a>
  184. </h3>
  185. <ul>
  186. <li>
  187. <a href="#">CSS教程</a>
  188. <a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧!</a>
  189. <input type="date" name="birthday" />
  190. </li>
  191. <li>
  192. <a href="#">CSS教程</a>
  193. <a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧!</a>
  194. <input type="date" name="birthday" />
  195. </li>
  196. <li>
  197. <a href="#">CSS教程</a>
  198. <a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧!</a>
  199. <input type="date" name="birthday" />
  200. </li>
  201. <li>
  202. <a href="#">CSS教程</a>
  203. <a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧!</a>
  204. <input type="date" name="birthday" />
  205. </li>
  206. <li>
  207. <a href="#">CSS教程</a>
  208. <a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧!</a>
  209. <input type="date" name="birthday" />
  210. </li>
  211. <li>
  212. <a href="#">CSS教程</a>
  213. <a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧!</a>
  214. <input type="date" name="birthday" />
  215. </li>
  216. <li>
  217. <a href="#">CSS教程</a>
  218. <a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧!</a>
  219. <input type="date" name="birthday" />
  220. </li>
  221. <li>
  222. <a href="#">CSS教程</a>
  223. <a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧!</a>
  224. <input type="date" name="birthday" />
  225. </li>
  226. <li>
  227. <a href="#">CSS教程</a>
  228. <a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧!</a>
  229. <input type="date" name="birthday" />
  230. </li>
  231. <li>
  232. <a href="#">CSS教程</a>
  233. <a href="#">神奇的CSS3混合模式---制作高级特效的必备技巧!</a>
  234. <input type="date" name="birthday" />
  235. </li>
  236. </ul>
  237. </div>
  238. <div class="right">
  239. <h3>
  240. <a href="#">前端手册</a>
  241. </h3>
  242. <ul>
  243. <div class="img3">
  244. <li>
  245. <div class="flexDis flexAlignC">
  246. <img src="./images/4.jpg" alt="" />
  247. <a href="#">html中文参考手册</a>
  248. </li>
  249. </div>
  250. <div class="img3">
  251. <li>
  252. <div class="flexDis flexAlignC">
  253. <img src="./images/4.jpg" alt="" />
  254. <a href="#">html中文参考手册</a>
  255. </li>
  256. </div>
  257. <div class="img3">
  258. <li>
  259. <div class="flexDis flexAlignC">
  260. <img src="./images/4.jpg" alt="" />
  261. <a href="#">html中文参考手册</a>
  262. </li>
  263. </div>
  264. <div class="img3">
  265. <li>
  266. <div class="flexDis flexAlignC">
  267. <img src="./images/4.jpg" alt="" />
  268. <a href="#">html中文参考手册</a>
  269. </li>
  270. </div>
  271. <div class="img3">
  272. <li>
  273. <div class="flexDis flexAlignC">
  274. <img src="./images/4.jpg" alt="" />
  275. <a href="#">html中文参考手册</a>
  276. </li>
  277. </div>
  278. <div class="img3">
  279. <li>
  280. <div class="flexDis flexAlignC">
  281. <img src="./images/4.jpg" alt="" />
  282. <a href="#">html中文参考手册</a>
  283. </li>
  284. </div>
  285. <div class="img3">
  286. <li>
  287. <div class="flexDis flexAlignC">
  288. <img src="./images/4.jpg" alt="" />
  289. <a href="#">html中文参考手册</a>
  290. </li>
  291. </div>
  292. <div class="img3">
  293. <li>
  294. <div class="flexDis flexAlignC">
  295. <img src="./images/4.jpg" alt="" />
  296. <a href="#">html中文参考手册</a>
  297. </li>
  298. </div>
  299. <div class="img3">
  300. <li>
  301. <div class="flexDis flexAlignC">
  302. <img src="./images/4.jpg" alt="" />
  303. <a href="#">html中文参考手册</a>
  304. </li>
  305. </div>
  306. <div class="img3">
  307. <li>
  308. <div class="flexDis flexAlignC">
  309. <img src="./images/4.jpg" alt="" />
  310. <a href="#">html中文参考手册</a>
  311. </li>
  312. </div>
  313. </ul>
  314. </div>
  315. </div>
  316. </div>
  317. </div>
  318. <section class="secCon3 contrain">
  319. <h1 class="flexDis flexAlignC">
  320. 课程推荐 | <small>定期课程推荐,只推荐优质的WEB开发课程</small>
  321. <p><a href="#">更多</a></p>
  322. </h1>
  323. <!-- 水平居中对齐 -->
  324. <div class="flexDis flexContentB">
  325. <div class="img2">
  326. <img src="./images/5.jpg" alt="" />
  327. <br>
  328. <span>内容1的文字介绍</span>
  329. </div>
  330. <div class="img2">
  331. <img src="./images/5.jpg" alt="" />
  332. <br>
  333. <span>内容1的文字介绍</span>
  334. </div>
  335. <div class="img2">
  336. <img src="./images/5.jpg" alt="" />
  337. <br>
  338. <span>内容1的文字介绍</span>
  339. </div>
  340. <div class="img2">
  341. <img src="./images/5.jpg" alt="" />
  342. <br>
  343. <span>内容1的文字介绍</span>
  344. </div>
  345. </div>
  346. <div class="flexDis flexContentB">
  347. <div class="img2">
  348. <img src="./images/5.jpg" alt="" />
  349. <br>
  350. <span>内容1的文字介绍</span>
  351. </div>
  352. <div class="img2">
  353. <img src="./images/5.jpg" alt="" />
  354. <br>
  355. <span>内容1的文字介绍</span>
  356. </div>
  357. <div class="img2">
  358. <img src="./images/5.jpg" alt="" />
  359. <br>
  360. <span>内容1的文字介绍</span>
  361. </div>
  362. <div class="img2">
  363. <img src="./images/5.jpg" alt="" />
  364. <br>
  365. <span>内容1的文字介绍</span>
  366. </div>
  367. </div>
  368. </section>
  369. <section class="secCon4 contrain">
  370. <h1 class="flexDis flexAlignC">
  371. 最新课程 | <small>前端学习路径,助力web前端工程师快速成长</small>
  372. <p><a href="#">更多</a></p>
  373. </h1>
  374. <!-- 水平居中对齐 -->
  375. <div class="flexDis flexContentB">
  376. <div class="img2">
  377. <img src="./images/5.jpg" alt="" />
  378. <br>
  379. <span>内容1的文字介绍</span>
  380. </div>
  381. <div class="img2">
  382. <img src="./images/5.jpg" alt="" />
  383. <br>
  384. <span>内容1的文字介绍</span>
  385. </div>
  386. <div class="img2">
  387. <img src="./images/5.jpg" alt="" />
  388. <br>
  389. <span>内容1的文字介绍</span>
  390. </div>
  391. <div class="img2">
  392. <img src="./images/5.jpg" alt="" />
  393. <br>
  394. <span>内容1的文字介绍</span>
  395. </div>
  396. </div>
  397. </div>
  398. </section>
  399. <section class="secCon5 contrain">
  400. <h1 class="flexDis flexAlignC">
  401. 学习路径 | <small>前端学习路径,助力web前端工程师快速成长</small>
  402. <p><a href="#">更多</a></p>
  403. </h1>
  404. <!-- 水平居中对齐 -->
  405. <div class="flexDis flexContentB">
  406. <div class="img2">
  407. <img src="./images/6.jpg" alt="" />
  408. <br>
  409. <span>内容1的文字介绍</span>
  410. </div>
  411. <div class="img2">
  412. <img src="./images/6.jpg" alt="" />
  413. <br>
  414. <span>内容1的文字介绍</span>
  415. </div>
  416. <div class="img2">
  417. <img src="./images/6.jpg" alt="" />
  418. <br>
  419. <span>内容1的文字介绍</span>
  420. </div>
  421. <div class="img2">
  422. <img src="./images/6.jpg" alt="" />
  423. <br>
  424. <span>内容1的文字介绍</span>
  425. </div>
  426. </div>
  427. </div>
  428. </section>
  429. </body>
  430. <div class="panel-title">
  431. <p>友情链接(QQ:123456)</p>
  432. <div class="frendlink_second flexDis flexAlignC">
  433. <ul>
  434. <li>
  435. <a href="#" target="_blank">链接1</a>
  436. <a href="#" target="_blank">链接1</a>
  437. <a href="#" target="_blank">链接1</a>
  438. <a href="#" target="_blank">链接1</a>
  439. <a href="#" target="_blank">链接1</a>
  440. <a href="#" target="_blank">链接1</a>
  441. <a href="#" target="_blank">链接1</a>
  442. <a href="#" target="_blank">链接1</a>
  443. <a href="#" target="_blank">链接1</a>
  444. </li>
  445. </ul>
  446. </div>
  447. </div>
  448. <div class="mainFooter ">
  449. <div class="main-widt ">
  450. <dl class="logo2">
  451. <dd>
  452. <img src="images/logo.png">
  453. </dd>
  454. <dd></dd>
  455. <dd>HTML中文网</dd>
  456. <dd></dd>
  457. <dd>联系QQ:88526</dd>
  458. <dd></dd>
  459. </dl>
  460. </div>
  461. <dl class="docs">
  462. <dt>网站导航</dt>
  463. <dd>
  464. <a href="/sitemap.html" target="_blank">标签地图</a>
  465. </dd>
  466. <dd></dd>
  467. <dd>
  468. <a href="/path/" target="_blank">学习路径</a>
  469. </dd>
  470. <dd></dd>
  471. <dd>
  472. <a href="/study/" target="_blank">视频教程</a>
  473. </dd>
  474. <dd></dd>
  475. <dd>
  476. <a href="/down/" target="_blank">开发软件</a>
  477. </dd>
  478. <dd></dd>
  479. </dl>
  480. <dl class="docs">
  481. <dt>旗下子站</dt>
  482. <dd></dd>
  483. <dd>
  484. <a href="#" target="_blank">phpstudy</a>
  485. </dd>
  486. <dd></dd>
  487. <dd>
  488. <a href="#" target="_blank">php中文网</a>
  489. </dd>
  490. <dd></dd>
  491. <dd>
  492. <a href="#" target="_blank">技术文章</a>
  493. </dd>
  494. <dd></dd>
  495. <dd>
  496. <a href="#" target="_blank">文档工具</a>
  497. </dd>
  498. <dd></dd>
  499. </dl>
  500. <dl class="tool">
  501. <dt>关于我们</dt>
  502. <dd></dd>
  503. <dd>
  504. <a href="#" target="_blank">企业合作</a>
  505. </dd>
  506. <dd></dd>
  507. <dd>
  508. <a href="#" target="_blank">人才招聘</a>
  509. </dd>
  510. <dd></dd>
  511. <dd>
  512. <a href="#" target="_blank">联系我们</a>
  513. </dd>
  514. <dd></dd>
  515. <dd>
  516. <a href="#" target="_blank">讲师招募</a>
  517. </dd>
  518. <dd></dd>
  519. </dl>
  520. <dl class="about-us">
  521. <dt>QQ交流群</dt>
  522. <img src="./images/qq.png" alt="QQ官方交流群" width="110">
  523. </dl>
  524. <dl class="qcode">
  525. <dt>微信公众号</dt>
  526. <img src="./images/weixin.png" alt="QQ官方交流群" width="110">
  527. </dl>
  528. </div>
  529. <div class="footer">
  530. <div class="content">
  531. <p>Copyright ©2018-2020 html中文网 All Rights html中文网,专注于大前端知识,一站式WEB前端开发自学平台! </p>
  532. <p>工信部备案号: 皖ICP备18014864号-5 </p>
  533. </footer>
  534. </div>
  535. </html>
  1. 部分功能目前掌握的知识,实现不了,比如文章发布时间
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议