search

博客列表 >仿php中文网手机版首页 九期第九棵

仿php中文网手机版首页 九期第九棵

叮叮当当
叮叮当当原创
2019年11月09日 13:26:44900浏览

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）有了弹性盒子，布局更加简单粗暴，且盒子里可以嵌套盒子，更灵活，更多样。

上一条：phpcnUi用flex布局---PHP九期线上班下一条：1108作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多