search

博客列表 >1227作业-用Flex布局实现m.php.cn移动端页面布局-php培训十期线上班

1227作业-用Flex布局实现m.php.cn移动端页面布局-php培训十期线上班

Dseven
Dseven原创
2019年12月30日 22:52:46973浏览

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

上一条：1226-二手商品列表与评论与回复下一条：1226作业-用Flex布局实现二手商品组件和评论回复组件的思路与实现过程-php培训十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
晓刚2019-12-31 10:08:311楼
朱老师，网页中的文字显示不开，后面变成省略号，这个css应该可以控制overflow:hidden;text-overflow:ellipsis;有些地方比如标题，用php字符串截取函数，感觉PHP不用处理，用css处理要更好些，在这个问题上想问下，执行效率或其它方面，那个要更优的，另外我的像这位同学学习，作业写的真优秀，大写的赞！

相关文章

查看更多