search

博客列表 >使用flex完成PHP中文网（移动端）的布局--PHP线上培训第十期1227

使用flex完成PHP中文网（移动端）的布局--PHP线上培训第十期1227

高的PHP十期培训学习笔记
高的PHP十期培训学习笔记原创
2020年01月02日 09:40:25532浏览

通过flex来完成一个移动端首页的布局练习

目标效果图（因为页面太大，缩小截图有点问题，可以看下面的分析图）

页面结构分析

按照结构分析图来写HTML架构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>使用flex完成PHP中文网（移动端）的布局</title>
  6.     <link rel="stylesheet" href="index.css">
  7.     <link rel="stylesheet" href="static/font/iconfont.css">
  8. </head>
  9. <body>
  10. <!--头部-->
  11. <header>
  12.     <a href=""><img src="static/images/user.jpg" alt=""></a>
  13.     <a href=""><img src="static/images/logo.png" alt=""></a>
  14.     <a href=""><i class="iconfont icon-ai-list"></i></a>
  15. </header>
  19. <!--    轮播图-->
  20. <div class="banner">
  21.     <img src="static/images/banner.jpg" alt="">
  22. </div>
  24. <!--    导航菜单-->
  25.     <nav>
  26.         <ul>
  27.             <li>
  28.                 <a href="">
  29.                 <img src="static/images/html.png" alt="">
  30.                     <span>HTML/CSS</span>
  31.                 </a>
  32.             </li>
  33.             <li>
  34.                 <a href="">
  35.                     <img src="static/images/JavaScript.png" alt="">
  36.                     <span>JavaScipt</span>
  37.                 </a>
  38.             </li>
  39.             <li>
  40.                 <a href="">
  41.                     <img src="static/images/code.png" alt="">
  42.                     <span>服务器端</span>
  43.                 </a>
  44.             </li>
  45.             <li>
  46.                 <a href="">
  47.                     <img src="static/images/sql.png" alt="">
  48.                     <span>数据库</span>
  49.                 </a>
  50.             </li>
  51.             </ul>
  52.             <ul>
  53.             <li>
  54.                 <a href="">
  55.                     <img src="static/images/app.png" alt="">
  56.                     <span>移动端</span>
  57.                 </a>
  58.             </li>
  59.             <li>
  60.                 <a href="">
  61.                     <img src="static/images/manual.png" alt="">
  62.                     <span>手册</span>
  63.                 </a>
  64.             </li>
  65.             <li>
  66.                 <a href="">
  67.                     <img src="static/images/tool2.png" alt="">
  68.                     <span>工具</span>
  69.                 </a>
  70.             </li>
  71.             <li>
  72.                 <a href="">
  73.                     <img src="static/images/live.png" alt="">
  74.                     <span>直播</span>
  75.                 </a>
  76.             </li>
  77.         </ul>
  78.     </nav>
  81. <!--主体-->
  82. <main>
  83. <!--    推荐课程-->
  85. <div class="kecheng">
  86.     <h3>推荐课程</h3>
  87.     <div>
  88.         <a href=""><img src="static/images/tl1.jpg" alt=""></a>
  89.         <a href=""><img src="static/images/tl2.jpg" alt=""></a>
  90.     </div>
  91.     <div>
  92.     <div>
  93.         <a href=""><img src="static/images/wz1.jpg" alt=""></a>
  94.         <div>
  95.             <a href="">CI框架30分钟极速入门</a>
  96.             <div>
  97.             <span>中级</span>
  98.             <span>55871次播放</span>
  99.             </div>
  100.         </div>
  101.     </div>
  102.     <div>
  103.         <a href=""><img src="static/images/wz2.jpg" alt=""></a>
  104.         <div>
  105.             <a href="">2018前端入门_HTML5</a>
  106.             <div>
  107.                 <span>中级</span>
  108.                 <span>55871次播放</span>
  109.             </div>
  110.         </div>
  111.     </div>
  112.     </div>
  113. </div>
  117. <!--最新更新-->
  119.     <div class="new">
  120.         <h3>最新更新</h3>
  121.         <div>
  122.             <a href=""><img src="static/images/wz3.jpg" alt=""></a>
  123.             <div>
  124.                 <a href="">2019python自学视频</a>
  125.                 <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的</span>
  126.                 <div>
  127.                     <span>初级</span>
  128.                     <span>3654播放</span>
  129.                 </div>
  130.             </div>
  131.         </div>
  132.         <div>
  133.             <a href=""><img src="static/images/wz4.png" alt=""></a>
  134.             <div>
  135.                 <a href="">PHP开发免费公益直播课</a>
  136.                 <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的</span>
  137.                 <div>
  138.                     <span>初级</span>
  139.                     <span>3654播放</span>
  140.                 </div>
  141.             </div>
  142.         </div>
  143.         <div>
  144.             <a href=""><img src="static/images/wz5.jpg" alt=""></a>
  145.             <div>
  146.                 <a href="">从零开始到WEB响应式布局</a>
  147.                 <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的</span>
  148.                 <div>
  149.                     <span>初级</span>
  150.                     <span>3654播放</span>
  151.                 </div>
  152.             </div>
  153.         </div>
  154.         <div>
  155.             <a href=""><img src="static/images/wz6.png" alt=""></a>
  156.             <div>
  157.                 <a href="">PHP文件基础操作</a>
  158.                 <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的</span>
  159.                 <div>
  160.                     <span>初级</span>
  161.                     <span>3654播放</span>
  162.                 </div>
  163.             </div>
  164.         </div>
  165.     </div>
  167. <!--最新文章-->
  168. <div class="article">
  169.     <h3>最新文章</h3>
  170.     <div>
  171.         <div>
  172.             <a href="">5个PHP开发者应该知道的Composer小技巧</a>
  173.             <span>发布时间：2019-12-31</span>
  174.         </div>
  175.         <a href=""><img src="static/images/wz1.jpg" alt=""></a>
  176.     </div>
  177.     <div>
  178.         <div>
  179.             <a href="">解决PHP中Web程序中shell_exec()执行Shell脚本不成功问题</a>
  180.             <span>发布时间：2019-12-31</span>
  181.         </div>
  182.         <a href=""><img src="static/images/wz2.jpg" alt=""></a>
  183.     </div>
  184.     <div>
  185.         <div>
  186.             <a href="">PHP执行Linux命令的两个有用的函数exec和shell_exec</a>
  187.             <span>发布时间：2019-12-31</span>
  188.         </div>
  189.         <a href=""><img src="static/images/wz3.jpg" alt=""></a>
  190.     </div>
  191.     <div>
  192.         <div>
  193.             <a href="">php实现利用expat方式解析xml文件</a>
  194.             <span>发布时间：2019-12-31</span>
  195.         </div>
  196.         <a href=""><img src="static/images/wz4.png" alt=""></a>
  197.     </div>
  198. <h4><a href="">更多内容</a></h4>
  199. </div>
  201. <!--    最新博文-->
  202.     <div class="blog">
  203.         <h3>最新博文</h3>
  204.         <div>
  205.             <a href="">composer安装laravel，nginx服务器路配置解决404问题，创建简单的</a>
  206.             <span>2019-12-27</span>
  207.         </div>
  208.         <div>
  209.             <a href="">composer安装laravel，nginx服务器路配置解决404问题，创建简单的</a>
  210.             <span>2019-12-27</span>
  211.         </div>
  212.         <div>
  213.             <a href="">composer安装laravel，nginx服务器路配置解决404问题，创建简单的</a>
  214.             <span>2019-12-27</span>
  215.         </div>
  216.         <div>
  217.             <a href="">composer安装laravel，nginx服务器路配置解决404问题，创建简单的</a>
  218.             <span>2019-12-27</span>
  219.         </div>
  220.         <h4><a href="">更多内容</a></h4>
  221.     </div>
  224.     <!--    最新问答-->
  225.     <div class="wd">
  226.         <h3>最新问答</h3>
  227.         <div>
  228.             <a href="">composer安装laravel，nginx服务器路配置解决404问题，创建简单的</a>
  229.             <span>2019-12-27</span>
  230.         </div>
  231.         <div>
  232.             <a href="">composer安装laravel，nginx服务器路配置解决404问题，创建简单的</a>
  233.             <span>2019-12-27</span>
  234.         </div>
  235.         <div>
  236.             <a href="">composer安装laravel，nginx服务器路配置解决404问题，创建简单的</a>
  237.             <span>2019-12-27</span>
  238.         </div>
  239.         <div>
  240.             <a href="">composer安装laravel，nginx服务器路配置解决404问题，创建简单的</a>
  241.             <span>2019-12-27</span>
  242.         </div>
  243.         <h4><a href="">更多内容</a></h4>
  244.     </div>
  245. </main>
  248. <!--尾部-->
  249. <footer>
  250.     <a href="" ><i class="iconfont icon-shouye"></i>首页</a>
  251.     <a href="" ><i class="iconfont icon-bofang"></i>视频</a>
  252.     <a href="" ><i class="iconfont icon--shequ"></i>社区</a>
  253.     <a href="" ><i class="iconfont icon-renyuanguanli"></i>我的</a>
  254. </footer>
  256. </body>
  257. </html>

运行效果如下（没有添加样式表）：

根据页面架构按顺序写样式表

index样式表

  1. @import "public_reset.css";
  3. /*头部*/
  4. header {
  5.     /*固定在顶部不动*/
  6.     position: fixed;
  7.     top: 0;
  8.     width: 100%;
  9.     max-width: 768px;
  10.     height: 44px;
  13.     background-color: #282828;
  15.     display: flex;
  16.     /*垂直居中对齐*/
  17.     align-items: center;
  18.     /*两端对齐*/
  19.     justify-content: space-between;
  23. }
  24. header > a > i {
  25.     color: #ffffff;
  26.     /*默认字体的1.2倍*/
  27.     font-size: 1.2rem;
  28.     margin-right: 10px;
  29. }
  30. header > a > img:first-of-type,
  31. header > img:last-of-type {
  32.     width: 28px;
  33.     height: 28px;
  34.     margin: 5px;
  35. }
  36. header > a > img:first-of-type {
  37.     border-radius: 50%;
  38. }
  40. header a:nth-of-type(2) img{
  41.     width: 92px;
  42.     height: 44px;
  43.     display: block;
  44. }
  46. /*轮播图*/
  47. .banner {
  48.     display: flex;
  49.     height: 200px;
  50.     margin-top: 44px;
  51. }
  53. /*导航菜单*/
  54. nav {
  55.     background-color: #ffffff;
  56.     display: flex;
  57.     flex-flow: column nowrap;
  58. }
  60. nav img {
  61.     width: 48px;
  62.     height: 48px;
  63. }
  64. nav > ul {
  65.     display: flex;
  66. }
  67. nav > ul > li {
  68.     /*分配全部剩余空间*/
  69.     flex: 1;
  70. }
  71. nav > ul > li > a {
  72.     display: flex;
  73.     /*列对齐允许换行*/
  74.     flex-flow: column wrap;
  75.     /*垂直居中*/
  76.     align-items: center;
  77.     margin: 10px;
  78. }
  79. nav > ul > li > a {
  80.     margin-top: 5px;
  81. }
  82. /*主体*/
  84. main {
  85.     display: flex;
  86.     flex-direction: column;
  87. }
  89. /*推荐课程*/
  90. /*天龙八部*/
  91. main > .kecheng > div:first-of-type {
  92.     display: flex;
  93. }
  94. main > .kecheng > div:first-of-type > a {
  95.     margin: 5px;
  96.     flex: 1;
  97. }
  98. main > .kecheng > div:first-of-type > a  > img {
  99.     height: 90px;
  100. }
  102. /*带标题的课程*/
  103. main > .kecheng > div:last-of-type {
  104.     display: flex;
  105.     flex-flow: column;
  106. }
  107. main > .kecheng > div:last-of-type > div {
  108.     background-color: #fff;
  109.     margin: 5px;
  110.     height: 100px;
  111.     display: flex;
  112. }
  113. main > .kecheng > div:last-of-type > div img {
  114.     width: 350px;
  115.     height: 100px;
  116. }
  117. main > .kecheng > div:last-of-type > div > div {
  118.     display: flex;
  119.     flex: 1;
  120.     flex-direction: column;
  121.     margin-top: 10px;
  122.     padding-left: 10px;
  123. }
  124. main > .kecheng > div:last-of-type > div > div a {
  125.     font-size: 16px;
  126. }
  127. main > .kecheng > div:last-of-type > div > div {
  128.     display: flex;
  129.     color: #888888;
  130. }
  131. main > .kecheng > div:last-of-type > div > div span:first-of-type {
  132.     background-color: #dddddd;
  133.     color: #ffffff;
  134.     border-radius: 3px;
  135.     padding: 0 5px;
  136. }
  138. /*最新更新*/
  139. main > .new {
  140.     display: flex;
  141.     flex-direction: column;
  142. }
  143. main > .new > div {
  144.     display: flex;
  145.     justify-content: space-between;
  146.     background-color: #fff;
  147.     margin: 5px;
  148.     height: 100px;
  149. }
  150. main > .new > div img {
  151.     width: 350px;
  152.     height: 100px;
  153. }
  154. main > .new > div > div {
  155.     display: flex;
  156.     flex-direction: column;
  157.     margin: 5px;
  158. }
  159. main > .new > div > div a {
  160.     font-size: 16px;
  161. }
  162. main > .new > div > div span {
  163.     color: #666666;
  164. }
  165. main > .new > div > div > div span:first-of-type {
  166.     background-color: #dddddd;
  167.     color: #ffffff;
  168.     border-radius: 3px;
  169.     padding: 0 5px;
  170. }
  173. /*最新文章*/
  174. main > .article {
  175.     display: flex;
  176.     flex-direction: column;
  177. }
  178. main > .article > div {
  179.     display: flex;
  180.     background-color: #fff;
  181.     margin: 5px;
  182.     height: 100px;
  183.     justify-content: space-between;
  185. }
  186. main > .article > div img {
  187.     width: 350px;
  188.     height: 100px;
  189. }
  190. main > .article > div > div {
  191.     display: flex;
  192.     flex-direction: column;
  193.     margin: 5px;
  194. }
  195. main > .article > div > div a {
  196.     font-size: 16px;
  197. }
  198. main > .article > div > div span {
  199.     color: #666666;
  200. }
  202. /*最新博文*/
  203. main > .blog >
  204. {
  205.     display: flex;
  206.     flex-direction: column;
  207. }
  208. main > .blog > div {
  209.     display: flex;
  210.     background-color: #fff;
  211.     margin: 5px;
  212.     padding: 10px;
  213.     box-sizing: border-box;
  214.     height: 50px;
  215.     justify-content: space-between;
  216.     align-items: center;
  217.     box-shadow: 0 2px 4px #888888;
  219. }
  222. /*最新问答*/
  223. main > .wd >
  224. {
  225.     display: flex;
  226.     flex-direction: column;
  227. }
  228. main > .wd > div {
  229.     display: flex;
  230.     background-color: #fff;
  231.     margin: 5px;
  232.     padding: 10px;
  233.     box-sizing: border-box;
  234.     height: 50px;
  235.     justify-content: space-between;
  236.     align-items: center;
  237.     box-shadow: 0 2px 4px #888888;
  240. }
  242. h4 {
  243.     display: block;
  244.     line-height: 10px;
  245.     text-align: center;
  246.     background: #fff;
  247.     padding: 10px 0;
  249. }
  251. /*尾部*/
  252. footer {
  253.     display: flex;
  254.     justify-content: space-around;
  255.     position: fixed;
  256.     bottom: 0;
  257.     width: 100%;
  258.     max-width: 768px;
  259.     height: 50px;
  260.     border-top: 1px solid #ccc;
  261.     margin-top: 10px;
  262.     background-color: #ffffff;
  263. }
  264. footer > a {
  265.     display: flex;
  266.     flex-direction: column;
  267.     justify-content: center;
  268.     align-items: center;
  269. }

公共样式表

  1. /*初始化浏览器*/
  3. body {
  5.     background-color: #cccccc;
  6.     /*设置页面宽度*/
  7.     max-width: 768px;
  8.     /*设置居中*/
  9.     margin: 0 auto;
  11. }
  15. a {
  16.     color: #282828;
  17.     /*去掉字体下划线*/
  18.     text-decoration: none;
  19.     font-size: 14px;
  20. }
  21. img {
  22.     width: 100%;
  23. }
  24. ul, li {
  25.     margin: 0;
  26.     padding: 0;
  27. }
  28. li  {
  29.     list-style: none;
  30. }

最终效果

最后总结

1、初学者（尤其是英语不好的）一定要做好笔记和注释，这样记不得时可以翻看前面的笔记
2、在写HTML之前一定要把页面的架构理清，区块划分好，这样写的代码更清晰
3、在写这个页面时出现一个问题，页面中最后的两个区块（最新博文和最新问答）的样式一样，我想使用

  1. main > .blog >,
  2. main > .wd >
  3. {}

这种写法，但运行时不生效（只有一个区块生效），是什么原因？

上一条：12月31日—laravel框架的使用查询构造器对数据库进行增删查改操作下一条：《Flex实战操作》2019-12-25作业笔记
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
昵称要长长长长长长长..高2020-01-02 14:21:071楼
我说的是英语不好，要记好笔记和注释，方便复习；使用英语单词更易以后学习别人的代码，所以一些英语还是要记的

相关文章

查看更多