Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12.27每周的大作业，仿PHP中文网移动端布局（主要运用FLEX弹性盒子）
Blogger Information
Blog 30
fans 0
comment 1
visits 24098
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
12.27每周的大作业，仿PHP中文网移动端布局（主要运用FLEX弹性盒子）
曾
Original
690 people have browsed it

一下是整段HTML代码，修改过很多次，看上去还是有点乱，需要在实践过程中去逐渐优化代码，与言简意赅的类名。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="font/iconfont.css">
  6.     <link rel="stylesheet" href="m.php.cn.css">
  7.     <title>仿m.php.cn练习</title>
  8. </head>
  9. <body>
  10. <header>
  11.         <a href=""><i class="iconfont icon-huiyuan3"></i></a>
  12.         <div>
  13.             <img src="images/logo.png" alt="">
  14.         </div>
  15.         <div>
  16.             <img src="images/cebian.png" alt="">
  17.         </div>
  18. </header>
  19. <main>
  20.     <nav>
  21.         <img src="images/6.png" alt="">
  22.         <div class="quick-entry">
  23.             <a href=""><img src="images/html.png" alt=""><p>HTML/CSS</p></a>
  24.             <a href=""><img src="images/JavaScript.png" alt=""><p>JavaScript</p></a>
  25.             <a href=""><img src="images/code.png" alt=""><p>服务端</p></a>
  26.             <a href=""><img src="images/sql.png" alt=""><p>数据库</p></a>
  27.             <a href=""><img src="images/app.png" alt=""><p>移动端</p></a>
  28.             <a href=""><img src="images/manual.png" alt=""><p>手册</p></a>
  29.             <a href=""><img src="images/tool2.png" alt=""><p>工具</p></a>
  30.             <a href=""><img src="images/live.png" alt=""><p>直播</p></a>
  31.         </div>
  32.     </nav>
  33.     <aside>
  34.         <h3>推荐课程</h3>
  35.         <section class="recommend">
  36.             <a href=""><img src="images/img1.jpg" alt=""></a>
  37.             <a href=""><img src="images/img2.jpg" alt=""></a>
  38.         </section>
  39.         <section class="course">
  40.             <img src="images/img3.jpg" alt="">
  41.             <div class="course-brief">
  42.                 <a href="">CI框架30分钟极速入门</a>
  43.                 <div>
  44.                     <span class="level">初级</span>
  45.                     <span>55643次播放</span>
  46.                 </div>
  47.             </div>
  48.         </section>
  49.         <section class="course">
  50.             <img src="images/img4.jpg" alt="">
  51.             <div class="course-brief">
  52.                 <a href="">CI框架30分钟极速入门</a>
  53.                 <div>
  54.                     <span class="level">初级</span>
  55.                     <span>55643次播放</span>
  56.                 </div>
  57.             </div>
  58.         </section>
  59.     </aside>
  60.     <article>
  61.         <h3>最新更新</h3>
  62.         <section class="renew">
  63.             <img src="images/img5.jpg" alt="">
  64.             <div class="renew-box1">
  65.                 <a href="">2019python自学视频</a>
  66.                 <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带</span>
  67.                 <div class="renew-text">
  68.                     <span>初级</span>
  69.                     <span>257125次播放</span>
  70.                 </div>
  71.             </div>
  72.         </section>
  73.         <section class="renew">
  74.             <img src="images/img6.png" alt="">
  75.             <div class="renew-box1">
  76.                 <a href="">PHP开发免费公益直播课</a>
  77.                 <span>主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00 主题</span>
  78.                 <div class="renew-text">
  79.                     <span>初级</span>
  80.                     <span>257125次播放</span>
  81.                 </div>
  82.             </div>
  83.         </section>
  84.         <section class="renew">
  85.             <img src="images/img7.png" alt="">
  86.             <div class="renew-box1">
  87.                 <a href="">从零开始到WEB响应式布局</a>
  88.                 <span>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利</span>
  89.                 <div class="renew-text">
  90.                     <span>初级</span>
  91.                     <span>257125次播放</span>
  92.                 </div>
  93.             </div>
  94.         </section>
  95.         <section class="renew">
  96.             <img src="images/img8.jpg" alt="">
  97.             <div class="renew-box1">
  98.                 <a href="">PHP文件基础操作</a>
  99.                 <span>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家</span>
  100.                 <div class="renew-text">
  101.                     <span>初级</span>
  102.                     <span>257125次播放</span>
  103.                 </div>
  104.             </div>
  105.         </section>
  106.         <section class="renew">
  107.             <img src="images/img9.png" alt="">
  108.             <div class="renew-box1">
  109.                 <a href="">memcache基础课程</a>
  110.                 <span>本课程带你从零认识memcache，让你在一小时左右轻松掌握memcache在windows和</span>
  111.                 <div class="renew-text">
  112.                     <span>初级</span>
  113.                     <span>257125次播放</span>
  114.                 </div>
  115.             </div>
  116.         </section>
  117.         <section class="renew">
  118.             <img src="images/img10.jpg" alt="">
  119.             <div class="renew-box1">
  120.                 <a href="">微信小程序--企业微网站</a>
  121.                 <span>1，介绍小程序、开发者工具 2，介绍小程序文档 3，微官网项目 4，首页、产品</span>
  122.                 <div class="renew-text">
  123.                     <span>初级</span>
  124.                     <span>257125次播放</span>
  125.                 </div>
  126.             </div>
  127.         </section>
  128.     </article>
  129.     <section class="new-essay">
  130.         <h3>最新文章</h3>
  131.         <div class="new-essay-box1">
  132.                 <div class="new-essay-box2">
  133.                     <a href=""><b>13个加速开发效率的现代CSS框架</b></a>
  134.                     <a href="">发布时间：2019-12-27</a>
  135.                 </div>
  136.                 <img src="images/img12.jpg" alt="">
  137.         </div>
  138.         <div class="new-essay-box1">
  139.             <div class="new-essay-box2">
  140.                 <a href=""><b>13个加速开发效率的现代CSS框架</b></a>
  141.                 <a href="">发布时间：2019-12-27</a>
  142.             </div>
  143.             <img src="images/img12.jpg" alt="">
  144.         </div>
  145.         <div class="new-essay-box1">
  146.             <div class="new-essay-box2">
  147.                 <a href=""><b>13个加速开发效率的现代CSS框架</b></a>
  148.                 <a href="">发布时间：2019-12-27</a>
  149.             </div>
  150.             <img src="images/img12.jpg" alt="">
  151.         </div>
  152.         <a href="">更多内容</a>
  153.     </section>
  154. </main>
  155. <footer>
  156.     <a href="">
  157.         <i class="iconfont icon-daohangshouye"></i>
  158.         <span>首页</span>
  159.     </a>
  161.     <a href="">
  162.         <i class="iconfont icon-yunhang"></i>
  163.         <span>视频</span>
  164.     </a>
  165.     <a href="">
  166.         <i class="iconfont icon-guangbo"></i>
  167.         <span >社区</span>
  168.     </a>
  169.     <a href="">
  170.         <i class="iconfont icon-huiyuan2"></i>
  171.         <span >我的</span>
  172.     </a>
  173. </footer>
  174. </body>
  175. </html>

以下是CSS代码，相对以前的代码来说，比较工整有一定进步，还需要努力

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     font-size: 13px;
  5.     /*outline: 1px dashed red ;*/
  6. }
  8. a{
  9.     text-decoration: none;
  10.     color: black;
  11. }
  13. body{
  14.     max-width: 760px;
  15.     min-width: 360px;
  16.     overflow: auto;
  17.     display: flex;
  18.     flex-direction: column;
  19.     margin: 0 auto;
  20.     height: 100vh;
  21.     background-color: #edeff0;
  22. }
  24. body>header{
  25.     background-color: #2c2e2f;
  26.     display: flex;
  27.     flex-direction: row;
  28.     justify-content: space-between;
  29.     align-items: center;
  30. }
  32. body>header>a{
  33.     margin-left: 5px;
  34.     box-sizing: border-box;
  35. }
  37. body>header>div:first-of-type>img{
  38.     height: 5vh;
  40. }
  42. .icon-huiyuan3{
  43.     font-size: 20px;
  44.     color: white;
  45. }
  47. body>main{
  48.     flex: 1;
  49.     display: flex;
  50.     flex-direction: column;
  51.     overflow: auto;
  52. }
  54. body>main>nav{
  55.     display: flex;
  56.     flex-direction: column;
  57. }
  58. body>main>nav>img{
  59.     height: 24vh;
  60. }
  61. body>main>nav>.quick-entry{
  62.     display: flex;
  63.     background-color: white;
  64.     flex-flow: row wrap;
  65.     justify-content: space-between;
  66. }
  68. body>main>nav>.quick-entry>a{
  69.     width: 180px;
  70.     text-align: center;
  71.     padding: 1vh 0;
  72.     box-sizing: border-box;
  73. }
  75. body>main>nav>.quick-entry>a>img{
  76.     /*width: 45px;*/
  77.     height: 6vh;
  79. }
  81. body>main>aside{
  82.     margin: 1vh;
  83.     /*padding: 1vh;*/
  84.     box-sizing: border-box;
  85.     display: flex;
  86.     flex-direction: column;
  87. }
  89. h3{
  90.     font-size: 16px;
  91.     padding: 1vh;
  92. }
  94. body>main>aside>.recommend{
  95.     margin: 1vh 0;
  96.     display: flex;
  97.     justify-content:space-between;
  98. }
  100. body>main>aside>.recommend>a>img{
  101.     box-sizing: border-box;
  102.     display: block;
  103.     height: 15vh;
  104.     width: 21vw;
  105. }
  107. body>main>aside>.course{
  108.     margin: 1vh 0;
  109.     display: flex;
  110.     background-color: #fff;
  111. }
  113. body>main>aside>.course>img{
  114.     height: 11vh;
  115.     width: 20vw;
  116.     padding: 1vh;
  117.     box-sizing: border-box;
  118. }
  120. body>main>aside>.course>.course-brief{
  121.     flex: 1;
  122.     display: flex;
  123.     flex-direction: column;
  125. }
  127. body>main>aside>.course>.course-brief>a{
  128.     padding-top: 1vh;
  129.     font-size: 16px;
  130.     color: #777;
  131.     margin-bottom: 1vh;
  132. }
  134. body>main>aside>.course>.course-brief>div>.level{
  135.     font-size: 11px;
  136.     color: white;
  137.     border-radius: 8px;
  138.     background-color: #595757;
  139.     padding: 2px;
  140. }
  142. body>main>aside>.course>.course-brief>div>.level + span{
  143.     font-size: 12px;
  144.     color: #777;
  145. }
  147. body>main>article{
  148.     margin: 1vh;
  149.     box-sizing: border-box;
  150.     display: flex;
  151.     flex-direction: column;
  152. }
  153. body>main>article>.renew{
  154.     margin: 1vh 0;
  155.     display: flex;
  156.     background-color: #fff;
  157.     /*align-items: center;*/
  158. }
  160. body>main>article>.renew>img{
  161.     height: 11vh;
  162.     width: 20vw;
  163.     padding: 1vh;
  164.     box-sizing: border-box;
  165. }
  167. body>main>article>.renew>.renew-box1{
  168.     margin-right: 2vw;
  169.     flex: 1;
  170.     display: flex;
  171.     flex-direction: column;
  172.     justify-content: space-around;
  173. }
  175. body>main>article>.renew>.renew-box1>a{
  176.     font-size: 16px;
  177.     color: #777;
  178. }
  180. body>main>article>.renew>.renew-box1>span{
  181.     font-size: 11px;
  182.     color: #777;
  183. }
  185. body>main>article>.renew>.renew-box1>.renew-text{
  186.     display: flex;
  187.     justify-content: space-between;
  188. }
  190. body>main>article>.renew>.renew-box1>.renew-text>span:first-child{
  191.     font-size: 11px;
  192.     color: white;
  193.     border-radius: 8px;
  194.     background-color: #595757;
  195.     padding: 2px;
  196. }
  198. body>main>article>.renew>.renew-box1>.renew-text>span:nth-last-child(1){
  199.     font-size: 11px;
  200.     color: #777;
  201. }
  203. body>main>.new-essay{
  204.     margin: 1vh;
  205.     box-sizing: border-box;
  206.     display: flex;
  207.     flex-direction: column;
  208. }
  210. body>main>.new-essay>.new-essay-box1{
  211.     box-shadow: 0 0 10px lightgray;
  212.     margin: 1vh 0;
  213.     display: flex;
  214.     background-color: white;
  215. }
  217. body>main>.new-essay>.new-essay-box1>.new-essay-box2{
  218.     flex:1;
  219.     display: flex;
  220.     flex-direction: column;
  221. }
  224. body>main>.new-essay>.new-essay-box1>img{
  225.     height: 9vh;
  226.     width: 14vw;
  227.     padding: 1vh;
  228.     box-sizing: border-box;
  229. }
  231. body>main>.new-essay>.new-essay-box1>.new-essay-box2>a{
  232.     padding: 1vh ;
  233.     font-size: 13px;
  234.     color: #777;
  235. }
  237. body>main>.new-essay>a{
  238.     background-color: white;
  239.     flex: 1;
  240.     text-align: center;
  241. }
  243. body>footer{
  244.     display: flex;
  245.     height: 5vh;
  246.     border-top: 2px solid lightgray;
  247.     box-sizing: border-box;
  248.     /*background-color: lightblue;*/
  249. }
  251. body>footer>a:first-of-type{
  252.     display: flex;
  253.     flex-direction: column;
  254.     flex: 1;
  255.     text-align: center;
  256.     padding: 1vh 0;
  257. }
  259. body>footer>a:nth-of-type(2){
  260.     display: flex;
  261.     flex-direction: column;
  262.     flex: 1;
  263.     text-align: center;
  264.     padding: 1vh 0;
  265. }
  267. body>footer>a:nth-of-type(3){
  268.     display: flex;
  269.     flex-direction: column;
  270.     flex: 1;
  271.     text-align: center;
  272.     padding: 1vh 0;
  273. }
  275. body>footer>a:last-of-type{
  276.     display: flex;
  277.     flex-direction: column;
  278.     flex: 1;
  279.     text-align: center;
  280.     padding: 1vh 0;
  281. }

实际效果图上部分

实际效果图下部分

进过一周的学习对于前端布局思路比才开始的时候清晰多了，大概思路就是，拿到整张设计图，想构思布局，把整个网页分成几个部分，每个部分有拆卸成几块（几个盒子），越拆越细的时候整体思路就会越来越清晰，想把HTML大概框架写出来，然后再去分析CSS的布局与写法。（前期分析得越详细，后期写起来越轻松）
另外有个问题想请教下老师，我写的页面滚动条就在内容旁边

而中文网移动端的滚动条却在浏览器的旁边，而不是内容的旁边

我在BODY上设置了overflow:auto滚动条显示也是在内容的旁边，不会移到浏览器边上

然后我padding后面的属性也是用1vh这样写的 不知道这样对不起。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：vh只是一个普通的单位而已, 可以用在所有能用单位的地方, 当然包括padding
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
0 comments
Author's latest blog post