Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿php中文网手机版首页 九期第九棵
Blogger Information
Blog 37
fans 1
comment 0
visits 27043
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
仿php中文网手机版首页 九期第九棵
叮叮当当
Original
899 people have browsed it

1. 将php中文网移动端剩余部分的内容写完

  1. <!--最新更新-->
  2.     <div class="update">
  3.         <h3>最新更新</h3>
  4.         <div>
  5.             <a href=""><img src="static/images/1.png" alt=""></a>
  6.             <span>
  7.                 <a href="">2019python自学视频</a>
  8.                 <p>本课程适合想从零开始学习 Python...</p>
  9.                 <span>
  10.                     <i>初级</i>
  11.                     <span>1979次播放</span>
  12.                 </span>
  13.              </span>
  14.         </div>
  15.         <div>
  16.             <a href=""><img src="static/images/2.png" alt=""></a>
  17.             <span>
  18.                 <a href="">PHP开发免费公益直播课</a>
  19.                 <p>主讲：php中文网-朱老师( Peter Zhu...</p>
  20.                 <span>
  21.                     <i>初级</i>
  22.                     <span>1707次播放</span>
  23.                 </span>
  24.             </span>
  25.         </div>
  26.         <div>
  27.             <a href=""><img src="static/images/3.png" alt=""></a>
  28.             <span>
  29.                 <a href="">从零开始到WEB响应式布局</a>
  30.                 <p>重点介绍了HTML、CSS、web布局...</p>
  31.                 <span>
  32.                     <i>初级</i>
  33.                     <span>3158次播放</span>
  34.                 </span>
  35.             </span>
  36.         </div>
  37.         <div>
  38.             <a href=""><img src="static/images/4.png " alt=""></a>
  39.             <span>
  40.                 <a href="">PHP文件基础操作</a>
  41.                 <p>好多同学在PHP基础的时候对PHP文...</p>
  42.                 <span>
  43.                     <i>中级</i>
  44.                     <span>1682次播放</span>
  45.                 </span>
  46.             </span>
  47.         </div>
  48.         <div>
  49.             <a href=""><img src="static/images/5.png" alt=""></a>
  50.             <span>
  51.                 <a href="">memcache基础课程</a>
  52.                 <p>本课程带你从零认识memcache，让...</p>
  53.                 <span>
  54.                     <i>初级</i>
  55.                     <span>794次播放</span>
  56.                 </span>
  57.             </span>
  58.         </div>
  59.         <div>
  60.             <a href=""><img src="static/images/6.png" alt=""></a>
  61.             <span>
  62.                 <a href="">微信小程序--企业微网站</a>
  63.                 <p>1，介绍小程序、开发者工具...</p>
  64.                 <span>
  65.                     <i>初级</i>
  66.                     <span>3615次播放</span>
  67.                 </span>
  68.             </span>
  69.         </div>
  70.     </div>
  72.     <!--最新文章-->
  73.     <div class="newarticle">
  74.         <h3>最新文章</h3>
  75.         <div>
  76.             <a href="">
  77.                 <div>
  78.                     <h2>PHP中self与this关键字的区别</h2>
  79.                     <span>发布时间：2019-11-08</span>
  80.                 </div>
  81.                 <img src="static/images/7.png" alt="">
  82.             </a>
  83.         </div>
  84.         <div>
  85.             <a href="">
  86.                 <div>
  87.                     <h2>php 安装zip模块</h2>
  88.                     <span>发布时间：2019-11-06</span>
  89.                 </div>
  90.                 <img src="static/images/7.png" alt="">
  91.             </a>
  92.         </div>
  93.         <div>
  94.             <a href="">
  95.                 <div>
  96.                     <h2>PHP mysqli操作数据库</h2>
  97.                     <span>发布时间：2019-11-07</span>
  98.                 </div>
  99.                 <img src="static/images/8.png" alt="">
  100.             </a>
  101.         </div>
  102.         <div>
  103.             <a href="">
  104.                 <div>
  105.                     <h2>ThinkPHP 5.x 远程命令执行漏洞分析与复现</h2>
  106.                     <span>发布时间：2019-08-20</span>
  107.                 </div>
  108.                 <img src="static/images/9.png" alt="">
  109.             </a>
  110.         </div>
  111.         <div>
  112.             <a href="">
  113.                 <div>
  114.                     <h2>基于 ThinkPHP5.1 实现的海豚后台登录源码分析</h2>
  115.                     <span>发布时间：2019-09-18</span>
  116.                 </div>
  117.                 <img src="static/images/10.png" alt="">
  118.             </a>
  119.         </div>
  120.         <div>
  121.             <a href="https://m.php.cn/article.html">更多内容</a>
  122.         </div>
  123.     </div>
  125.     <!--最新博文-->
  126.     <div class="blog">
  127.         <h3>最新博文</h3>
  128.         <div>
  129.             <a href="">
  130.                 <h2>移动端 、手机端、去掉横向滚动条 亲测生效...</h2>
  131.                 <span>2019-11-08</span>
  132.             </a>
  133.         </div>
  134.         <div>
  135.             <a href="">
  136.                 <h2>PHP学习第一天:软件安装篇</h2>
  137.                 <span>2019-11-08</span>
  138.             </a>
  139.         </div>
  140.         <div>
  141.             <a href="">
  142.                 <h2>thinkphp5.0.24前置操作的大小写问题</h2>
  143.                 <span>2019-11-07</span>
  144.             </a>
  145.         </div>
  146.         <div>
  147.             <a href="">
  148.                 <h2>laravel-创建“控制器”和“模型”，使用...</h2>
  149.                 <span>2019-11-04</span>
  150.             </a>
  151.         </div>
  152.         <div>
  153.             <a href="hhttps://m.php.cn/blog.html">更多内容</a>
  154.         </div>
  155.     </div>
  157.    <!--最新问答-->
  158.     <div class="answer">
  159.         <h3>最新问答</h3>
  160.         <div>
  161.             <a href="">
  162.                 <h2>老师这样写还会出现错误，是为什么呀</h2>
  163.                 <span>2019-11-08</span>
  164.             </a>
  165.         </div>
  166.         <div>
  167.             <a href="">
  168.                 <h2>我写的哪里有错？请大神帮忙查看一下</h2>
  169.                 <span>2019-11-08</span>
  170.             </a>
  171.         </div>
  172.         <div>
  173.             <a href="">
  174.                 <h2>为什么我的 Mac电脑用 safari看...</h2>
  175.                 <span>2019-11-08</span>
  176.             </a>
  177.         </div>
  178.         <div>
  179.             <a href="">
  180.                 <h2>html翻译环境</h2>
  181.                 <span>2019-11-08</span>
  182.             </a>
  183.         </div>
  184.         <div>
  185.             <a href="https://m.php.cn/wenda.html">更多内容</a>
  186.         </div>
  187.     </div>
  1. /*************** 最新更新 ***************/
  3. .update {
  4.     padding: 10px;
  5.     display: flex;
  6.     flex-flow: column nowrap;
  7. }
  9. .update > h3 {
  10.     padding: 0 0 10px;
  11. }
  13. .update img {
  14.     width: 200px;
  15.     height: 80px;
  16. }
  18. .update > div {
  19.     box-sizing: border-box;
  20.     margin: 0 0 10px 0;
  21.     padding: 9px 0 9px 10px;
  22.     font-size: 0.7rem;
  23.     background-color: #fff;
  24.     display: flex;
  25. }
  27. /*设置图片右侧*/
  28. .update > div > span {
  29.     margin-left: 10px;
  31.     flex:1;
  32.     display: flex;
  33.     flex-flow: column nowrap;
  34. }
  36. .update > div > span a {
  37.     /*字体设回初始值*/
  38.     font-size:1rem;
  39. }
  41. .update > div > span i {
  42.     font-style: normal;
  43.     background-color: #333333;
  44.     color: white;
  45.     border-radius: 8px;
  46.     padding: 0 5px;
  47.     font-size: smaller;
  48. }
  50. /*播放次数 浮到右边去*/
  51. .update > div > span > span > span {
  52.     float: right;
  53.     padding-right: 20px;
  54. }
  57. /*************** 最新文章 ***************/
  59. .newarticle {
  60.     padding: 10px;
  61.     display: flex;
  62.     flex-flow: column nowrap;
  63. }
  65. .newarticle > h3 {
  66.     padding: 0 0 10px;
  67. }
  69. .newarticle img {
  70.     width: 150px;
  71.     height: 70px;
  72. }
  74. .newarticle > div > a {
  75.     box-sizing: border-box;
  76.     margin-bottom: 10px;
  77.     padding: 10px 10px 8px;
  78.     font-size: 0.7rem;
  79.     background-color: #fff;
  81.     display: flex;
  82. }
  84. .newarticle > div > a h2{
  85.     margin: 0 0 10px ;
  86. }
  88. .newarticle > div > a > div{
  89.     /*充满除右边图片的所有空间*/
  90.     flex:1;
  91. }
  94. /*************** 最新博文 ***************/
  96. .blog {
  97.     padding: 10px;
  98.     display: flex;
  99.     flex-flow: column nowrap;
  100. }
  102. .blog > h3 {
  103.     padding: 0 0 10px;
  104. }
  106. .blog > div {
  107.     box-sizing: border-box;
  108.     height: 45px;
  109.     margin-bottom: 10px;
  110.     padding: 10px 10px 8px;
  111.     font-size: 0.7rem;
  112.     background-color: #fff;
  113. }
  115. .blog > div > a {
  116.     flex:1;
  117. }
  119. .blog > div > a h2{
  120.     margin: 0 0 10px;
  121.     padding: 0;
  122.     font-size:0.9rem;
  123. }
  125. .blog > div > a span{
  126.     float: right;
  127.     position: relative;
  128.     right: 0;
  129.     top:-30px;
  130. }
  132. .blog > div:last-of-type {
  133.     text-align: center;
  134. }

（ps: 最新问答与最新博文css一样，区别就是answer框margin-bottom为50px，这样footer才不会盖住有效内容 )





2. 将中间导航菜单区的代码手抄至少一遍, 并给每一行代码加上注释


3.总结：

（1）一旦元素转为弹性盒子，不用之前是什么类型，通通块级；
（2）弹性容器的子元素, 都自动成为弹性元素，可以享用其多样的布局属性；
（2）有了弹性盒子，布局更加简单粗暴，且盒子里可以嵌套盒子，更灵活，更多样。

Correction status：qualified

Teacher's comments：每一个属性的注释, 怎么看上去这么舒服呢.... , 真香
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