Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1227作业-用Flex布局实现m.php.cn移动端页面布局-php培训十期线上班
Blogger Information
Blog 22
fans 1
comment 0
visits 20236
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1227作业-用Flex布局实现m.php.cn移动端页面布局-php培训十期线上班
Dseven
Original
974 people have browsed it

1仿写目标

2.页面分析

1.1整体分三部分头部、底部和主体，呈纵向排列，其中头部和底部是相对浏览器固定不动的。因此主体可以设置弹性盒子纵向排列。

1.2主体内容分四大块，呈纵向排列的。因此主体同样可以设置弹性盒子纵向排列

1.3导航区有8个导航链接，呈两列每列4个排布。可以用两个垂直排列的无序列表来完成，其中的列表项需要水平排列。

1.4推荐课程区由一个大标题，两个横向图片链接和三个纵向的图片链接构成，可以将其分为三块，纵向排列，再细分其中的项目

1.5最新文章于最新更新两个板块的结构基本相似，可先分为大标题和无序列表两块，将其纵向排列，然后将里面的每个小板块文章链接均作为无序列表项，垂直排列。

3.仿写代码

3.1html代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <link rel="stylesheet" href="mphp.css">
  9.     <link rel="stylesheet" href="../static/font/iconfont.css">
  10.     <title>仿PHP中文网手机端页面</title>
  11. </head>
  12. <body>
  13.     <header>
  14.         <a href=""><img src="../static/images/phone/a%20(5).jpg" alt=""></a>
  15.         <a href=""><img src="../static/images/phone/log.png" alt=""></a>
  16.         <a href="" class="iconfont icon-gongdan"></a>
  17.     </header>
  18.     <main>
  19.         <div class="pic">
  20.             <a href=""><img src="../static/images/phone/p1.png" alt=""></a>
  21.         </div>
  22.         <div class="nav">
  23.             <ul>
  24.                 <li>
  25.                     <a href="">
  26.                     <img src="../static/images/phone/n2.png" alt="">
  27.                     <span>HTML/CSS</span>
  28.                     </a>
  29.                 </li>
  30.                 <li>
  31.                     <a href="">
  32.                     <img src="../static/images/phone/n3.png" alt="">
  33.                     <span>JavaScript</span>
  34.                     </a>
  35.                 </li>
  36.                 <li>
  37.                     <a href="">
  38.                     <img src="../static/images/phone/n1.png" alt="">
  39.                     <span>服务端</span>
  40.                     </a>
  41.                 </li>
  42.                 <li>
  43.                     <a href="">
  44.                     <img src="../static/images/phone/n6.png" alt="">
  45.                     <span>数据库</span>
  46.                     </a>
  47.                 </li>
  48.             </ul>
  49.             <ul>
  50.                 <li>
  51.                     <a href="">
  52.                     <img src="../static/images/phone/n8.png" alt="">
  53.                     <span>移动端</span>
  54.                     </a>
  55.                 </li>
  56.                 <li>
  57.                     <a href="">
  58.                     <img src="../static/images/phone/n5.png" alt="">
  59.                     <span>手册</span>
  60.                     </a>
  61.                 </li>
  62.                 <li>
  63.                     <a href="">
  64.                     <img src="../static/images/phone/n7.png" alt="">
  65.                     <span>工具</span>
  66.                     </a>
  67.                 </li>
  68.                 <li>
  69.                     <a href="">
  70.                     <img src="../static/images/phone/n4.png" alt="">
  71.                     <span>直播</span>
  72.                     </a>
  73.                 </li>
  74.             </ul>
  75.         </div>
  76.         <div class="recommend">
  77.             <h4>推荐课程</h4>
  78.             <div>
  79.                 <a href=""><img src="../static/images/phone/t1.jpg" alt=""></a>
  80.                 <a href=""><img src="../static/images/phone/t2.jpg" alt=""></a>
  81.             </div>
  82.             <ul>
  83.                 <li>
  84.                     <a href="">
  85.                         <img src="../static/images/phone/t3.jpg" alt="">
  86.                     </a>
  87.                     <div>
  88.                         <a href=""><h5>CI框架30分钟极速入门</h5></a>
  89.                         <span>中级</span>
  90.                         <span>55701次播放</span>
  91.                     </div>
  92.                 </li>
  93.                 <li>
  94.                         <a href="">
  95.                             <img src="../static/images/phone/t4.jpg" alt="">
  96.                         </a>
  97.                         <div>
  98.                             <a href=""><h5>2019前端入门_HTML5</h5></a>
  99.                             <span>初级</span>
  100.                             <span>257421次播放</span>
  101.                         </div>
  102.                     </li>
  103.             </ul>
  104.             </div>
  105.         <div class="update">
  106.             <h4>最新更新</h4>
  107.             <ul>
  108.                 <li>
  109.                     <a href=""><img src="../static/images/phone/u1.jpg" alt=""></a>
  110.                     <div>
  111.                         <a href=""><h5>2019python自学视频</h5></a>
  112.                         <span>本课程适合想从零开始学习Python编程语言的开发人员，由浅入深的进入等等等等等等</span>
  113.                         <div>
  114.                             <span>初级</span>
  115.                             <span>12447次播放</span>
  116.                         </div>
  117.                     </div>
  118.                 </li>
  119.                 <li>
  120.                     <a href=""><img src="../static/images/phone/u2.png" alt=""></a>
  121.                     <div>
  122.                         <a href=""><h5>PHP开发免费公益直播课</h5></a>
  123.                         <span>主讲：php中文网-朱老师（Peter Zhu）时间：2019.10.17晚20:00-22:00 主题是等等等等等等</span>
  124.                         <div>
  125.                             <span>初级</span>
  126.                             <span>3699次播放</span>
  127.                         </div>
  128.                     </div>
  129.                 </li>
  130.                 <li>
  131.                     <a href=""><img src="../static/images/phone/u3.jpg" alt=""></a>
  132.                     <div>
  133.                         <a href=""><h5>从零开始到WEB响应式布局</h5></a>
  134.                         <span>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用H等等等等等等</span>
  135.                         <div>
  136.                             <span>初级</span>
  137.                             <span>11910次播放</span>
  138.                         </div>
  139.                     </div>
  140.                 </li>
  141.                 <li> <a href=""><img src="../static/images/phone/u4.png" alt=""></a>
  142.                     <div>
  143.                         <a href=""><h5>PHP文件基础操作</h5></a>
  144.                         <span>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家等等等等等等</span>
  145.                         <div>
  146.                             <span>中级</span>
  147.                             <span>4393次播放</span>
  148.                         </div>
  149.                     </div>
  150.                 </li>
  151.                 <li>
  152.                     <a href=""><img src="../static/images/phone/u5.jpg" alt=""></a>
  153.                     <div>
  154.                         <a href=""><h5>memcache</h5></a>
  155.                         <span>本课程带你从零认识memcache，让你在一小时左右轻松掌握memcache在windo等等等等等等</span>
  156.                         <div>
  157.                             <span>初级</span>
  158.                             <span>11864次播放</span>
  159.                         </div>
  160.                     </div>
  161.                 </li>
  162.                 <li><a href=""><img src="../static/images/phone/u6.png" alt=""></a>
  163.                     <div>
  164.                         <a href=""><h5>微信小程序-企业微网站</h5></a>
  165.                         <span>1，介绍小程序、开发者工具 2，介绍小程序文档 3，微官网项目 4，首页、产等等等等等等</span>
  166.                         <div>
  167.                             <span>初级</span>
  168.                             <span>8295次播放</span>
  169.                         </div>
  170.                     </div></li>
  171.             </ul>
  172.         </div>
  173.         <div class="article">
  174.             <h4>最新文章</h4>
  175.             <ul>
  176.                 <li>
  177.                     <a href="">
  178.                     <span>利用CSRF令牌验证机制漏洞验证受害者账户</span>
  179.                     <span>发布时间：2019-12-28</span>
  180.                     </a>
  181.                     <a href="">
  182.                         <img src="../static/images/phone/z1.jpg" alt="">
  183.                     </a>
  184.                 </li>
  185.                 <li>
  186.                     <a href="">
  187.                         <span>vscode是开源的吗</span>
  188.                         <span>发布时间：2019-12-28</span>
  189.                     </a>
  190.                     <a href="">
  191.                         <img src="../static/images/phone/z2.jpg" alt="">
  192.                     </a>
  193.                 </li>
  194.                 <li>
  195.                     <a href="">
  196.                         <span>利用反射型XSS漏洞劫持Facebook账户</span>
  197.                         <span>发布时间：2019-12-28</span>
  198.                     </a>
  199.                     <a href="">
  200.                         <img src="../static/images/phone/z3.jpg" alt="">
  201.                     </a>
  202.                 </li>
  203.                 <li>
  204.                     <a href="">
  205.                         <span>vscode怎么安装</span>
  206.                         <span>发布时间：2019-12-28</span>
  207.                     </a>
  208.                     <a href="">
  209.                         <img src="../static/images/phone/z2.jpg" alt="">
  210.                     </a>
  211.                 </li>
  212.                 <li>
  213.                     <a href="">
  214.                         <span>vscode如何运行js文件</span>
  215.                         <span>发布时间：2019-12-28</span>
  216.                     </a>
  217.                     <a href="">
  218.                         <img src="../static/images/phone/z2.jpg" alt="">
  219.                     </a>
  220.                 </li>
  221.             </ul>
  222.         </div>
  224.     </main>
  225.     <footer>
  226.         <ul>
  227.             <li>
  228.                 <a href="">
  229.                 <span class="iconfont icon-daohangshouye"></span>
  230.                 <span>首页</span>
  231.                 </a>
  232.             </li>
  233.             <li>
  234.                 <a href="">
  235.                 <span class="iconfont icon-yunhang"></span>
  236.                 <span>运行</span>
  237.                 </a>
  238.             </li>
  239.             <li>
  240.                 <a href="">
  241.                     <span class="iconfont icon-icon_qq_fill"></span>
  242.                     <span>社区</span>
  243.                 </a>
  244.             </li>
  245.             <li>
  246.                 <a href="">
  247.                     <span class="iconfont icon-huiyuan2"></span>
  248.                     <span>我的</span>
  249.                 </a>
  250.             </li>
  251.         </ul>
  252.     </footer>
  254. </body>
  255. </html>

3.2CSS代码

  1. @import "../public/reset.css";
  2. img {
  3.     width: 100%;
  4.     display: block;
  5. }
  6. a {
  7.     color: gray;
  8.     text-decoration: none;
  9. }
  10. ul,li{
  11.     margin: 0;
  12.     padding: 0;
  13. }
  14. li {
  15.     list-style: none;
  16. }
  17. h5 {
  18.     font-size: 16px;
  19. }
  21. /*主体样式*/
  22. body {
  23.     /*设置弹性盒子，盒内项目纵向排列*/
  24.     display: flex;
  25.     flex-direction: column;
  26.     /*设定最大和最小宽度*/
  27.     max-width: 768px;
  28.     min-width: 320px;
  29.     /*控制盒子尺寸*/
  30.     box-sizing: border-box;
  31.     /*设置背景色*/
  32.     background-color: #edeff0;
  33.     /*设置页面居中*/
  34.     margin: 0 auto;
  35. }
  36. /*头部样式开始*/
  37. header{
  38.     /*设定最大和最小宽度*/
  39.     max-width: 768px;
  40.     min-width: 320px;
  41.     /*宽度自适应*/
  42.     width: 100%;
  43.     /*固定定位，脱离文档流，相对于浏览器一直停留在顶部*/
  44.     position: fixed;
  45.     /*设置容器为弹性盒子，主轴为行轴*/
  46.     display: flex;
  47.     flex-direction: row;
  48.     /*设置盒子高度*/
  49.     height: 42px;
  50.     /*设置盒子背景色*/
  51.     background-color: #444444;
  52.     /*设置弹性容器内图标、logo、和头像三个弹性项目两端对齐*/
  53.     justify-content: space-between;
  54. }
  55. /*设置图标、logo、头像三个弹性项目在交叉轴上居中，在此处为垂直居中*/
  56. header a{
  57.     align-self: center;
  58. }
  59. /*设置header中头像的样式*/
  60. header:first-child img{
  61.     /*宽高一样时这样可设置为圆形*/
  62.     border-radius: 50%;
  63.     width: 26px;
  64.     height: 26px;
  65.     margin-left: 5px;
  66.     /*去除图片的白边*/
  67.     display: block;
  68. }
  69. header a:nth-of-type(2) img{
  70.     width: 92px;
  71.     height: 45px;
  72.     display: block;
  73. }
  74. header a:last-of-type {
  75.     font-size: 26px;
  76.     color: white;
  77.     margin-right: 5px;
  78. }
  79. /*头部样式结束*/
  81. /*设置主体区样式*/
  82. main{
  83. /*主体区为弹性盒子，主轴为纵轴*/
  84.     display: flex;
  85.     flex-direction: column;
  86. }
  87. /*设置主体区中不同栏目的标题样式*/
  88. h4{
  89.     font-size: 18px;
  90.     font-weight: bold;
  91.     padding-bottom: 10px;
  92.     color: gray;
  93. }
  95. /*设置轮播图样式，此处仅一张图片代替*/
  96. .pic img {
  97.     height: 200px;
  98. }
  101. /*导航区样式开始*/
  102. /*设置导航链接为弹性盒子，方便控制图标和文字上下排列*/
  103. .nav ul,li,a {
  104.      display: flex;
  105.  }
  106. /*设置导航区图标的样式和位置*/
  107. .nav img {
  108.     height: 45px;
  109.     width: 45px;
  110.     align-self: center;
  111. }
  112. /*项目在主轴上空间分布一样，
  113.    尤其是两边的空间和项目之间的空间一样*/
  114. .nav ul {
  115.     justify-content: space-evenly;
  116. }
  117. .nav li {
  118.     margin-top: 10px;
  119. }
  120. .nav a {
  121.     flex-direction: column;
  122.     width: 75px;
  123.     height: 65px;
  124. }
  125. .nav span {
  126.     color: gray;
  127.     align-self: center;
  128. }
  129. /*导航区样式结束*/
  131. /*推荐课程区样式开始*/
  132. .recommend {
  133.     margin-top: 20px;
  134.     display: flex;
  135.     flex-direction: column;
  136.     padding: 10px;
  137. }
  138. /*横排之天龙八部课程样式*/
  139. .recommend > div:first-of-type {
  140.     display: flex;
  141.     flex-direction: row;
  142.     justify-content: space-between;
  143.     margin-bottom: 20px;
  144. }
  145. .recommend > div  a{
  146.    width: 49%;
  147. }
  148. .recommend > div img  {
  149.     height: 90px;
  150. }
  152. /*纵排之玉女心经样式*/
  153. .recommend  ul {
  154.     display: flex;
  155.     flex-direction: column;
  156. }
  157. .recommend  li {
  158.     display: flex;
  159.     flex-direction: row;
  160.     padding: 10px;
  161.     margin-bottom: 20px;
  162.     background-color: white;
  163. }
  164. .recommend  li > a {
  165.     flex: 1;
  166.     height: 80px;
  167. }
  168. .recommend  li > div {
  169.     flex: 2;
  170. }
  171. .recommend  li > div a {
  172.     font-size: 16px;
  173. }
  174. .recommend  li > div > span:first-of-type {
  175.     background-color: #595757;
  176.     border-radius: 8px;
  177.     color: white;
  178.     padding: 3px;
  179.     font-size: 10px;
  180. }
  181. .recommend  li > div > span:last-of-type {
  182.     font-size: 10px;
  183. }
  184. /*课程推荐区结束*/
  186. /*最新更新区样式*/
  187. .update {
  188.     padding: 10px;
  189. }
  190. .update ul {
  191.     display: flex;
  192.     flex-direction: column;
  193.     /*overflow: hidden;*/
  194. }
  195. .update ul li {
  196.     display: flex;
  197.     flex-direction: row;
  198.     padding: 10px;
  199.     margin-bottom: 20px;
  200.     background-color: white;
  201. }
  202. .update ul li > a {
  203.     display: flex;
  204.     height:80px;
  205.     width: 116px;
  206.     flex: 1;
  207. }
  208. .update ul li > div {
  209.     display: flex;
  210.     height: 80px;
  211.     width: 164px;
  212.     flex-flow: column nowrap;
  213.     margin-left: 10px;
  214.     justify-content: space-between;
  215.     overflow: hidden;
  216.     text-overflow: ellipsis;
  217.     flex: 1;
  218. }
  220. .update ul li > div a{
  221.     display: flex;
  222.     overflow: hidden;
  223.     height: 20px;
  224. }
  226. .update ul li > div > span {
  227.     overflow: hidden;
  228.     text-overflow: ellipsis;
  229.     height: 15px;
  230. }
  231. .update ul li  div div span:first-of-type {
  232.     background-color: #595757;
  233.     border-radius: 8px;
  234.     color: white;
  235.     padding: 3px;
  236.     font-size: 10px;
  237. }
  238. .update ul li  div div span:last-of-type {
  239.     font-size: 10px;
  240. }
  241. /*最新更新区块样式设置结束*/
  243. /*设置最新文章区块样式*/
  244. .article{
  245.     padding: 10px;
  246.     display: flex;
  247.     flex-flow: column nowrap;
  249. }
  250. .article > ul {
  251.     display: flex;
  252.     flex-flow: column;
  253. }
  254. .article > ul > li {
  255.     display: flex;
  256.     flex-flow: row nowrap;
  257.     background-color: white;
  258.     height: 85px;
  259.     padding: 10px;
  260.     margin-bottom: 10px;
  261.     justify-content: space-between;
  262. }
  264. .article > ul > li > a:first-of-type {
  265.     display: flex;
  266.     flex-direction: column;
  267.     height: 65px;
  268.     width: 215px;
  269.     overflow: hidden;
  270.     text-overflow: ellipsis;
  271.     flex: 2;
  272. }
  273. .article > ul > li > a:first-of-type span:first-child{
  274.     height: 20px;
  275.     margin-bottom: 10px;
  276.     font-size: 14px;
  277.     overflow: hidden;
  278.     text-overflow: ellipsis;
  279.     width: 180px;
  281. }
  282. .article > ul > li > a:last-of-type{
  283.     height: 65px;
  284.     width: 85px;
  285.     flex: 1;
  286. }
  287. .article > ul > li > a:last-of-type > img {
  288.     height: 65px;
  289. }
  291. /*页脚样式*/
  292. footer {
  293.     /*相对于浏览器固定定位，*/
  294.     position: fixed;
  295.     margin: 0 auto;
  296.     bottom: 0;
  297.     background-color: #edeff0;
  298.     border-top:1px solid #ccc;
  299.     max-width: 768px;
  300.     min-width: 320px;
  301.     width: 100%;
  302.     height: 42px;
  303. }
  304. footer ul{
  305.     display: flex;
  306.     flex-flow: row nowrap;
  307.     width: 100%;
  308.     padding: 0 10px;
  309.     justify-content: space-between;
  310.     box-sizing: border-box;
  311. }
  312. footer ul li {
  313.     width: 25%;
  314.     justify-content: center;
  315. }
  317. footer ul li a{
  318.     display: flex;
  319.     flex-flow: column;
  320.     align-items: center;
  321.     color: gray;
  322. }
  323. footer ul li a:hover{
  324.     color: red;
  325. }
  326. footer ul li a span:first-child {
  327.     font-size: 20px;
  328. }

4效果图

5.小结

5.1模仿网页布局先要分析整体网页结构，观察其布局思路；再要注意细节查看哪些是链接、哪些是固定不动的等等。

5.2在具体操作中可以将相似板块用无序列表来表达，提高代码逻辑，简化代码数量。

5.3写代码的过程中要时刻保持清醒，把握整体结构，搞清楚一个元素到底是项目还是容器，而且要想清楚到底哪些容器需要设置为弹性盒子，哪些不需要。

5.4疑问：这个仿写的网页中部分文字后面应该出现省略号，但是没有实现，还未分析出问题出在哪里。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：对于出现省略号, 那是字符串截取函数完成的事, 等学了php就会了
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
1 comments
晓刚 2019-12-31 10:08:31
朱老师，网页中的文字显示不开，后面变成省略号，这个css应该可以控制overflow:hidden;text-overflow:ellipsis;有些地方比如标题，用php字符串截取函数，感觉PHP不用处理，用css处理要更好些，在这个问题上想问下，执行效率或其它方面，那个要更优的，另外我的像这位同学学习，作业写的真优秀，大写的赞！
1 floor
Author's latest blog post