search

博客列表 >Flex实现php中文网首页

Flex实现php中文网首页

司马青衫
司马青衫原创
2020年06月30日 14:20:37712浏览

Flex实现PHP中文网首页

示例代码

HTML

  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>Document</title>
  7.     <link rel="stylesheet" href="css/common.css" />
  8.     <link rel="stylesheet" href="css/index.css" />
  9.     <link rel="stylesheet" href="iconfont/iconfont.css" />
  10.   </head>
  11.   <body class="flexDis flexDirV flexNoWrap flexAlignC">
  12.     <header class="flexDis flexDirH flexNoWrap">
  13.       <a href=""></a>
  14.       <a href="">首页</a>
  15.       <a href="">视频教程</a>
  16.       <a href="">入门教程</a>
  17.       <a href="">社区问答</a>
  18.       <a href="">技术文章</a>
  19.       <a href="">资源下载</a>
  20.       <a href="">编程词典</a>
  21.       <a href="">工具下载</a>
  22.       <a href="">php培训</a>
  23.       <a href="" class="iconfont"></a>
  24.       <a href="">登录</a>
  25.     </header>
  26.     <main class="flexDis flexDirV flexNoWrap flexAlignC">
  27.       <div class="box1 flexDis flexDirH flexNoWrap">
  28.         <ul class="flexDis flexDirV flexNoWrap flexContentV flexAlignS">
  29.           <li><a href="">php开发</a></li>
  30.           <li><a href="">前端开发</a></li>
  31.           <li><a href="">服务端开发</a></li>
  32.           <li><a href="">移动开发</a></li>
  33.           <li><a href="">数据库</a></li>
  34.           <li><a href="">服务器运维&下载</a></li>
  35.           <li><a href="">在线工具箱</a></li>
  36.           <li><a href="">常用类库</a></li>
  37.         </ul>
  38.         <div class="submeun flexDis flexDirV flexNoWrap flexContentA">
  39.           <div
  40.             class="submeun-list flexDis flexDirH flexNoWrap flexAlignC flexContentA"
  41.           >
  42.             <a href="">PHP头条</a>
  43.             <a href="">独孤九贱</a>
  44.             <a href="">学习路线</a>
  45.             <a href="">在线工具</a>
  46.             <a href="">趣味课堂</a>
  47.             <a href="">社区问答</a>
  48.             <a href="">直播课程</a>
  49.             <input type="search" name="" id="" placeholder="请输入关键词搜索" />
  50.           </div>
  51.           <div class="slider">
  52.             <img src="image/i12.png" alt="" />
  53.           </div>
  54.           <div class="submeun-buttom flexDis flexDirH flexNoWrap flexContentA">
  55.             <a href=""><img src="image/index_yunv.jpg" alt="" /></a>
  56.             <a href=""><img src="image/index_php_item2_.png" alt="" /></a>
  57.             <a href=""><img src="image/index_php_item3.jpg" alt="" /></a>
  58.             <a href=""><img src="image/index_php_new4.jpg" alt="" /></a>
  59.           </div>
  60.         </div>
  61.       </div>
  62.       <div class="box2">
  63.         <a href=""><img src="image/index_ad222.jpg" alt="" /></a>
  64.       </div>
  65.       <div class="box3 flexDis flexDirH flexNoWrap flexContentB">
  66.         <div class="box3-left flexDis flexDirV flexNoWrap flexContentB">
  67.           <h4>头条</h4>
  68.           <a href=""
  69.             >php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a
  70.           >
  71.           <a href="">php中文网《玉女心经》公益PHP培训系列课程汇总</a>
  72.           <a href="">PHP 8 来了！ PHP团队发布了首个测试版本 Alpha1</a>
  73.           <a href="">php的版本发展历史（1995-2020）</a>
  74.           <a href="">您知道吗？最好的语言：PHP 25 岁了！</a>
  75.           <a href="">史上最污技术解读，我竟然秒懂了</a>
  76.           <a href="">2020年最新5个简洁优秀的个人博客模板免费下载</a>
  77.           <a href="">5款优秀的vue后台管理系统模板推荐（免费下载）</a>
  78.           <a href="">6个大气的bootstrap后台管理系统模板推荐（免费下载）</a>
  79.           <a href="">5款简洁的layui后台管理模板推荐（免费下载）</a>
  80.           <a href="">5款个性的网页回到顶部特效代码</a>
  81.           <a href="">小皮面板 v0.53 版本今日发布！</a>
  82.         </div>
  83.         <div class="box3-center flexDis flexDirV flexNoWrap">
  84.           <h4>最新课程</h4>
  85.           <div class="center-item flexDis flexDirH flexWrap">
  86.             <a href="">
  87.               <img src="image/5eeb3345b206d506.jpg" alt="" />
  88.               <h3><i>中级</i>PHP代码整洁之道</h3>
  89.             </a>
  90.             <a href="">
  91.               <img src="image/5eec277230a4a933.png" alt="" />
  92.               <h3><i>初级</i>前端课程（五郞八卦棍系列）第一棍：HTML5</h3>
  93.             </a>
  94.             <a href="">
  95.               <img src="image/5ecbc289676f6665.png" alt="" />
  96.               <h3><i>初级</i>小皮面板使用视频教程</h3>
  97.             </a>
  98.             <a href="">
  99.               <img src="image/5eba3e40b2fc6218.jpg.png" alt="" />
  100.               <h3><i>初级</i>从零进入C语言</h3>
  101.             </a>
  102.             <a href="">
  103.               <img src="image/5eb5222662408719.jpg.png" alt="" />
  104.               <h3><i>中级</i>C语言进阶篇</h3>
  105.             </a>
  106.             <a href="">
  107.               <img src="image/5e0d6387e45cc764.png" alt="" />
  108.               <h3><i>中级</i>PHP快速操控Excel之PhpSpreadsheet</h3>
  109.             </a>
  110.           </div>
  111.         </div>
  112.         <div class="box3-right flexDis flexDirV flexNoWrap">
  113.           <h4 class="flexDis flexDirH flexNoWrap flexContentB">
  114.             常用手册<a href="">更多</a>
  115.           </h4>
  116.           <div class="right-item flexDis flexDirH flexNoWrap">
  117.             <img src="image/57d55fe881432245.jpg.png" alt="" />
  118.             <div class="item-link flexDis flexDirH flexWrap flexAlignC">
  119.               <a href="">php手册</a>
  120.               <a href="">Linux手册</a>
  121.               <a href="">ThinkPHP6.0</a>
  122.               <a href="">CI手册大全</a>
  123.             </div>
  124.           </div>
  125.           <div class="right-item flexDis flexDirH flexNoWrap">
  126.             <img src="image/57d55f537896d439.jpg.png" alt="" />
  127.             <div class="item-link flexDis flexDirH flexWrap flexAlignC">
  128.               <a href="">JavaScript中文参考手册</a>
  129.               <a href="">jQuery手册大全</a>
  130.             </div>
  131.           </div>
  132.           <div class="right-item flexDis flexDirH flexNoWrap">
  133.             <img src="image/57d560a2c0e5f831.jpg.png" alt="" />
  134.             <div class="item-link flexDis flexDirH flexWrap flexAlignC">
  135.               <a href="">MySQL参考手册大全</a>
  136.               <a href="">laravel5.8速查表</a>
  137.             </div>
  138.           </div>
  139.           <div class="right-item flexDis flexDirH flexNoWrap">
  140.             <img src="image/57d56222bfab2642.jpg.png" alt="" />
  141.             <div class="item-link flexDis flexDirH flexWrap flexAlignC">
  142.               <a href="">Python参考手册大全</a>
  143.               <a href="">Node.js中文学习手册</a>
  144.             </div>
  145.           </div>
  146.           <div class="right-item flexDis flexDirH flexNoWrap">
  147.             <img src="image/57d55f07ccfb6991.jpg.png" alt="" />
  148.             <div class="item-link flexDis flexDirH flexWrap flexAlignC">
  149.               <a href="">html手册</a>
  150.               <a href="">CSS手册</a>
  151.               <a href="">AngularJS</a>
  152.               <a href="">Ajax手册</a>
  153.             </div>
  154.           </div>
  155.           <div class="right-item flexDis flexDirH flexNoWrap">
  156.             <img src="image/5a911102396d0195.jpg" alt="" />
  157.             <div class="item-link flexDis flexDirH flexWrap flexAlignC">
  158.               <a href="">ASP参考手册大全</a>
  159.               <a href="">Bootstrap3参考手册</a>
  160.             </div>
  161.           </div>
  162.         </div>
  163.       </div>
  164.     </main>
  165.     <footer class="flexDis flexDirV flexNoWrap">
  166.       <div class="nav-bottom flexDis flexDirH flexNoWrap flexContentS">
  167.         <a href="">网站首页</a>
  168.         <a href="">PHP视频</a>
  169.         <a href="">PHP实战</a>
  170.         <a href="">PHP代码</a>
  171.         <a href="">PHP手册</a>
  172.         <a href="">词条</a>
  173.         <a href="">手记</a>
  174.         <a href="">编程词典</a>
  175.       </div>
  176.       <p>
  177.         php中文网：公益在线php培训，帮助PHP学习者快速成长！
  178.         <a href=""><img src="image/label_lg_90030.png" alt="" /></a>
  179.         合肥彼岸互联信息技术有限公司
  180.       </p>
  181.       <p>
  182.         Copyright 2014-2020 https://www.php.cn/ All Rights Reserved |
  183.         皖B2-20150071-9
  184.       </p>
  185.       <p>
  186.         座机号码：0551-64933227 安徽省合肥市政务新区置地广场D座2101
  187.       </p>
  188.     </footer>
  189.   </body>
  190. </html>

CSS

页面主体样式

  1. header {
  2.   width: 100%;
  3.   height: 60px;
  4.   background-color: #000;
  5.   box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  6. }
  7. header > a {
  8.   height: 60px;
  9.   line-height: 60px;
  10.   margin: 0 10px;
  11.   padding: 0 20px;
  12.   color: rgba(255, 255, 255, 0.7);
  13. }
  14. header > a:first-of-type {
  15.   width: 160px;
  16.   height: 60px;
  17.   background: url(../image/logo.png) no-repeat center center;
  18. }
  19. header > a:nth-last-of-type(2) {
  20.   /* 后面两项靠左 */
  21.   margin-left: auto;
  22. }
  23. header > a:not(:first-of-type):hover {
  24.   color: #fff;
  25.   border-bottom: 5px solid seagreen;
  26. }
  27. main {
  28.   width: 1200px;
  29. }
  30. main > .box1 {
  31.   width: inherit;
  32.   height: 510px;
  33.   overflow: hidden;
  34.   margin-top: 30px;
  35.   background-color: #fff;
  36.   border-radius: 8px;
  37.   box-shadow: 0 12px 24px 0 rgba(7, 17, 27, 0.2);
  38. }
  39. main > .box1 > ul {
  40.   width: 216px;
  41.   height: 510px;
  42.   background-color: #2b333b;
  43.   border-top-left-radius: 4px;
  44.   border-bottom-left-radius: 4px;
  45. }
  46. /* 左导航 */
  47. main > .box1 > ul > li {
  48.   width: 100%;
  49.   height: 60px;
  50. }
  51. main > .box1 > ul > li:hover {
  52.   color: #fff;
  53.   background-color: gray;
  54. }
  55. main > .box1 > ul > li > a {
  56.   color: rgba(255, 255, 255, 0.6);
  57.   height: 60px;
  58.   line-height: 60px;
  59.   padding: 0 16px;
  60.   font-size: 16px;
  61. }
  62. /* 上导航 */
  63. main > .box1 > .submeun > .submeun-list {
  64.   width: 100%;
  65.   height: 60px;
  66. }
  67. main > .box1 > .submeun > .submeun-list input {
  68.   width: 260px;
  69.   height: 40px;
  70.   padding-left: 12px;
  71.   background-color: #f1f0f0;
  72.   border: none 0;
  73.   font-size: 12px;
  74. }
  75. main > .box1 > .submeun > .submeun-list a:hover {
  76.   color: #777;
  77. }
  78. main > .box1 > .submeun > .submeun-buttom {
  79.   margin-bottom: 10px;
  80. }
  81. main > .box1 > .submeun > .submeun-buttom img {
  82.   border-radius: 8px;
  83. }
  84. main > .box2 img {
  85.   margin-top: 20px;
  86.   border-radius: 8px;
  87. }
  88. main > .box3 {
  89.   width: inherit;
  90.   height: 416px;
  91.   margin-top: 20px;
  92.   padding: 15px 0;
  93. }
  94. main > .box3 h4 {
  95.   height: 35px;
  96.   line-height: 35px;
  97.   margin-bottom: 10px;
  98.   padding: 0 15px;
  99.   border-bottom: 1px dotted #e9e9e9;
  100.   color: #343535;
  101.   border-radius: 2px 2px 0 0;
  102. }
  103. main > .box3 > .box3-left {
  104.   width: 300px;
  105.   height: 100%;
  106.   margin-right: 10px;
  107.   padding: 0 10px 10px 10px;
  108.   box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
  109.   border-radius: 8px;
  110.   background: #fff;
  111. }
  112. main > .box3 > .box3-left > a {
  113.   width: 100%;
  114.   overflow: hidden;
  115.   margin-bottom: 10px;
  116.   white-space: nowrap;
  117. }
  118. main a:hover {
  119.   color: #777;
  120. }
  121. main > .box3 > .box3-center {
  122.   width: 620px;
  123.   height: 100%;
  124.   padding: 0 20px 20px 20px;
  125.   box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
  126.   border-radius: 8px;
  127.   background: #fff;
  128. }
  129. main > .box3 > .box3-center a {
  130.   width: 172px;
  131.   height: 140px;
  132.   margin: 10px 10px 20px 10px;
  133.   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  134.   border-radius: 8px;
  135.   position: relative;
  136. }
  137. main > .box3 > .box3-center img {
  138.   width: 170px;
  139.   height: 90px;
  140.   margin-bottom: 10px;
  141.   border-radius: 8px;
  142. }
  143. main > .box3 > .box3-center h3 {
  144.   width: 100%;
  145.   height: 144px;
  146.   background-color: #fff;
  147.   border-radius: 8px;
  148.   padding-left: 10px;
  149.   font-size: 14px;
  150.   max-height: 40px;
  151.   line-height: 21px;
  152.   position: absolute;
  153.   top: 70px;
  154. }
  155. main > .box3 > .box3-center h3 > i {
  156.   font-style: normal;
  157.   font-size: 12px;
  158.   line-height: 12px;
  159.   border-radius: 1px;
  160.   background-color: #93999f;
  161.   margin-right: 4px;
  162. }
  163. main > .box3 > .box3-right {
  164.   width: 260px;
  165.   padding: 5px 15px 15px 15px;
  166.   box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
  167.   border-radius: 8px;
  168.   background: #fff;
  169. }
  170. main > .box3 > .box3-right .right-item {
  171.   padding-bottom: 20px;
  172. }
  173. main > .box3 > .box3-right > .right-item img {
  174.   width: 40px;
  175.   margin-right: 10px;
  176. }
  177. main > .box3 > .box3-right .item-link > a {
  178.   font-size: 12px;
  179.   margin-right: 15px;
  180. }
  181. footer {
  182.   width: 100%;
  183.   background-color: #393d49;
  184. }
  185. footer > * {
  186.   width: 1200px;
  187.   margin: auto;
  188. }
  189. .nav-bottom > a {
  190.   height: 50px;
  191.   line-height: 50px;
  192.   font-size: 12px;
  193.   color: #c8cdd2;
  194.   margin: 0 8px;
  195. }
  196. .nav-bottom > a:hover {
  197.   color: #fff;
  198. }
  199. footer > p {
  200.   font-size: 11px;
  201.   color: #787d82;
  202.   padding: 12px;
  203. }
  204. footer > p img {
  205.   width: 50px;
  206. }

flex通用布局样式

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. html,
  8. body {
  9.   width: 100%;
  10.   height: 100%;
  11.   overflow: hidden;
  12.   overflow-y: auto;
  13.   background-color: #f3f5f7;
  14.   font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial,
  15.     sans-serif;
  16. }
  17. a {
  18.   color: #444;
  19.   text-decoration: none;
  20. }
  21. li,
  22. dd {
  23.   list-style: none;
  24. }
  25. button,
  26. img {
  27.   border: none;
  28.   outline: none;
  29. }
  31. .flexDis {
  32.   display: -webkit-flex;
  33.   display: -moz-flex;
  34.   display: -o-flex;
  35.   display: -ms-flexbox;
  36.   display: flex;
  37. }
  39. .flexShrinkStatic {
  40.   flex-shrink: 0;
  41. }
  43. .flexShrinkAuto {
  44.   flex-shrink: 1;
  45. }
  47. .flexDirV {
  48.   flex-direction: column;
  49. }
  51. .flexDirH {
  52.   flex-direction: row;
  53. }
  55. .flexWrap {
  56.   flex-wrap: wrap;
  57. }
  59. .flexNoWrap {
  60.   flex-wrap: nowrap;
  61. }
  63. .flexContentS {
  64.   justify-content: flex-start;
  65. }
  67. .flexContentC {
  68.   justify-content: center;
  69. }
  71. .flexContentV {
  72.   justify-content: space-evenly;
  73. }
  75. .flexContentA {
  76.   justify-content: space-around;
  77. }
  79. .flexContentB {
  80.   justify-content: space-between;
  81. }
  83. .flexAlignS {
  84.   align-items: flex-start;
  85. }
  87. .flexAlignC {
  88.   align-items: center;
  89. }
  91. .flexAlignE {
  92.   align-items: flex-end;
  93. }
  95. .flexAlignB {
  96.   align-items: baseline;
  97. }
  99. .flexAlignT {
  100.   align-items: stretch;
  101. }

实际效果

总结

  • PHP中文网的内容很多，在此只实现了页眉页脚以及简单的主体部分网页设计
  • 还有一些弹出菜单没有做到
  • 使用flex布局能够快速实现项目的分布对齐等操作
  • CSS样式表还需要多练习 部分语句还可以精简
上一条：仿php中文网课程模块grid布局下一条：flex布局基础知识和常见属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多