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

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

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

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





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


3.总结:

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议