博客列表 >12.27每周的大作业,仿PHP中文网移动端布局(主要运用FLEX弹性盒子)

12.27每周的大作业,仿PHP中文网移动端布局(主要运用FLEX弹性盒子)

曾
原创
2019年12月28日 14:17:05695浏览

一下是整段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>
  160. <a href="">
  161. <i class="iconfont icon-yunhang"></i>
  162. <span>视频</span>
  163. </a>
  164. <a href="">
  165. <i class="iconfont icon-guangbo"></i>
  166. <span >社区</span>
  167. </a>
  168. <a href="">
  169. <i class="iconfont icon-huiyuan2"></i>
  170. <span >我的</span>
  171. </a>
  172. </footer>
  173. </body>
  174. </html>

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

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

实际效果图上部分

实际效果图下部分

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

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

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

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

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