博客列表 >1227作业-用Flex布局实现m.php.cn移动端页面布局-php培训十期线上班

1227作业-用Flex布局实现m.php.cn移动端页面布局-php培训十期线上班

Dseven
Dseven原创
2019年12月30日 22:52:46968浏览

1仿写目标

2.页面分析

1.1整体分三部分头部、底部和主体,呈纵向排列,其中头部和底部是相对浏览器固定不动的。因此主体可以设置弹性盒子纵向排列。

1.2主体内容分四大块,呈纵向排列的。因此主体同样可以设置弹性盒子纵向排列

1.3导航区有8个导航链接,呈两列每列4个排布。可以用两个垂直排列的无序列表来完成,其中的列表项需要水平排列。

1.4推荐课程区由一个大标题,两个横向图片链接和三个纵向的图片链接构成,可以将其分为三块,纵向排列,再细分其中的项目

1.5最新文章于最新更新两个板块的结构基本相似,可先分为大标题和无序列表两块,将其纵向排列,然后将里面的每个小板块文章链接均作为无序列表项,垂直排列。

3.仿写代码

3.1html代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <link rel="stylesheet" href="mphp.css">
  9. <link rel="stylesheet" href="../static/font/iconfont.css">
  10. <title>仿PHP中文网手机端页面</title>
  11. </head>
  12. <body>
  13. <header>
  14. <a href=""><img src="../static/images/phone/a%20(5).jpg" alt=""></a>
  15. <a href=""><img src="../static/images/phone/log.png" alt=""></a>
  16. <a href="" class="iconfont icon-gongdan"></a>
  17. </header>
  18. <main>
  19. <div class="pic">
  20. <a href=""><img src="../static/images/phone/p1.png" alt=""></a>
  21. </div>
  22. <div class="nav">
  23. <ul>
  24. <li>
  25. <a href="">
  26. <img src="../static/images/phone/n2.png" alt="">
  27. <span>HTML/CSS</span>
  28. </a>
  29. </li>
  30. <li>
  31. <a href="">
  32. <img src="../static/images/phone/n3.png" alt="">
  33. <span>JavaScript</span>
  34. </a>
  35. </li>
  36. <li>
  37. <a href="">
  38. <img src="../static/images/phone/n1.png" alt="">
  39. <span>服务端</span>
  40. </a>
  41. </li>
  42. <li>
  43. <a href="">
  44. <img src="../static/images/phone/n6.png" alt="">
  45. <span>数据库</span>
  46. </a>
  47. </li>
  48. </ul>
  49. <ul>
  50. <li>
  51. <a href="">
  52. <img src="../static/images/phone/n8.png" alt="">
  53. <span>移动端</span>
  54. </a>
  55. </li>
  56. <li>
  57. <a href="">
  58. <img src="../static/images/phone/n5.png" alt="">
  59. <span>手册</span>
  60. </a>
  61. </li>
  62. <li>
  63. <a href="">
  64. <img src="../static/images/phone/n7.png" alt="">
  65. <span>工具</span>
  66. </a>
  67. </li>
  68. <li>
  69. <a href="">
  70. <img src="../static/images/phone/n4.png" alt="">
  71. <span>直播</span>
  72. </a>
  73. </li>
  74. </ul>
  75. </div>
  76. <div class="recommend">
  77. <h4>推荐课程</h4>
  78. <div>
  79. <a href=""><img src="../static/images/phone/t1.jpg" alt=""></a>
  80. <a href=""><img src="../static/images/phone/t2.jpg" alt=""></a>
  81. </div>
  82. <ul>
  83. <li>
  84. <a href="">
  85. <img src="../static/images/phone/t3.jpg" alt="">
  86. </a>
  87. <div>
  88. <a href=""><h5>CI框架30分钟极速入门</h5></a>
  89. <span>中级</span>
  90. <span>55701次播放</span>
  91. </div>
  92. </li>
  93. <li>
  94. <a href="">
  95. <img src="../static/images/phone/t4.jpg" alt="">
  96. </a>
  97. <div>
  98. <a href=""><h5>2019前端入门_HTML5</h5></a>
  99. <span>初级</span>
  100. <span>257421次播放</span>
  101. </div>
  102. </li>
  103. </ul>
  104. </div>
  105. <div class="update">
  106. <h4>最新更新</h4>
  107. <ul>
  108. <li>
  109. <a href=""><img src="../static/images/phone/u1.jpg" alt=""></a>
  110. <div>
  111. <a href=""><h5>2019python自学视频</h5></a>
  112. <span>本课程适合想从零开始学习Python编程语言的开发人员,由浅入深的进入等等等等等等</span>
  113. <div>
  114. <span>初级</span>
  115. <span>12447次播放</span>
  116. </div>
  117. </div>
  118. </li>
  119. <li>
  120. <a href=""><img src="../static/images/phone/u2.png" alt=""></a>
  121. <div>
  122. <a href=""><h5>PHP开发免费公益直播课</h5></a>
  123. <span>主讲:php中文网-朱老师(Peter Zhu)时间:2019.10.17晚20:00-22:00 主题是等等等等等等</span>
  124. <div>
  125. <span>初级</span>
  126. <span>3699次播放</span>
  127. </div>
  128. </div>
  129. </li>
  130. <li>
  131. <a href=""><img src="../static/images/phone/u3.jpg" alt=""></a>
  132. <div>
  133. <a href=""><h5>从零开始到WEB响应式布局</h5></a>
  134. <span>重点介绍了HTML、CSS、web布局前端核心技术,通过视频讲解,了解可以利用H等等等等等等</span>
  135. <div>
  136. <span>初级</span>
  137. <span>11910次播放</span>
  138. </div>
  139. </div>
  140. </li>
  141. <li> <a href=""><img src="../static/images/phone/u4.png" alt=""></a>
  142. <div>
  143. <a href=""><h5>PHP文件基础操作</h5></a>
  144. <span>好多同学在PHP基础的时候对PHP文件的操作了解的不够多,本节课就带着大家等等等等等等</span>
  145. <div>
  146. <span>中级</span>
  147. <span>4393次播放</span>
  148. </div>
  149. </div>
  150. </li>
  151. <li>
  152. <a href=""><img src="../static/images/phone/u5.jpg" alt=""></a>
  153. <div>
  154. <a href=""><h5>memcache</h5></a>
  155. <span>本课程带你从零认识memcache,让你在一小时左右轻松掌握memcache在windo等等等等等等</span>
  156. <div>
  157. <span>初级</span>
  158. <span>11864次播放</span>
  159. </div>
  160. </div>
  161. </li>
  162. <li><a href=""><img src="../static/images/phone/u6.png" alt=""></a>
  163. <div>
  164. <a href=""><h5>微信小程序-企业微网站</h5></a>
  165. <span>1,介绍小程序、开发者工具 2,介绍小程序文档 3,微官网项目 4,首页、产等等等等等等</span>
  166. <div>
  167. <span>初级</span>
  168. <span>8295次播放</span>
  169. </div>
  170. </div></li>
  171. </ul>
  172. </div>
  173. <div class="article">
  174. <h4>最新文章</h4>
  175. <ul>
  176. <li>
  177. <a href="">
  178. <span>利用CSRF令牌验证机制漏洞验证受害者账户</span>
  179. <span>发布时间:2019-12-28</span>
  180. </a>
  181. <a href="">
  182. <img src="../static/images/phone/z1.jpg" alt="">
  183. </a>
  184. </li>
  185. <li>
  186. <a href="">
  187. <span>vscode是开源的吗</span>
  188. <span>发布时间:2019-12-28</span>
  189. </a>
  190. <a href="">
  191. <img src="../static/images/phone/z2.jpg" alt="">
  192. </a>
  193. </li>
  194. <li>
  195. <a href="">
  196. <span>利用反射型XSS漏洞劫持Facebook账户</span>
  197. <span>发布时间:2019-12-28</span>
  198. </a>
  199. <a href="">
  200. <img src="../static/images/phone/z3.jpg" alt="">
  201. </a>
  202. </li>
  203. <li>
  204. <a href="">
  205. <span>vscode怎么安装</span>
  206. <span>发布时间:2019-12-28</span>
  207. </a>
  208. <a href="">
  209. <img src="../static/images/phone/z2.jpg" alt="">
  210. </a>
  211. </li>
  212. <li>
  213. <a href="">
  214. <span>vscode如何运行js文件</span>
  215. <span>发布时间:2019-12-28</span>
  216. </a>
  217. <a href="">
  218. <img src="../static/images/phone/z2.jpg" alt="">
  219. </a>
  220. </li>
  221. </ul>
  222. </div>
  223. </main>
  224. <footer>
  225. <ul>
  226. <li>
  227. <a href="">
  228. <span class="iconfont icon-daohangshouye"></span>
  229. <span>首页</span>
  230. </a>
  231. </li>
  232. <li>
  233. <a href="">
  234. <span class="iconfont icon-yunhang"></span>
  235. <span>运行</span>
  236. </a>
  237. </li>
  238. <li>
  239. <a href="">
  240. <span class="iconfont icon-icon_qq_fill"></span>
  241. <span>社区</span>
  242. </a>
  243. </li>
  244. <li>
  245. <a href="">
  246. <span class="iconfont icon-huiyuan2"></span>
  247. <span>我的</span>
  248. </a>
  249. </li>
  250. </ul>
  251. </footer>
  252. </body>
  253. </html>

3.2CSS代码

  1. @import "../public/reset.css";
  2. img {
  3. width: 100%;
  4. display: block;
  5. }
  6. a {
  7. color: gray;
  8. text-decoration: none;
  9. }
  10. ul,li{
  11. margin: 0;
  12. padding: 0;
  13. }
  14. li {
  15. list-style: none;
  16. }
  17. h5 {
  18. font-size: 16px;
  19. }
  20. /*主体样式*/
  21. body {
  22. /*设置弹性盒子,盒内项目纵向排列*/
  23. display: flex;
  24. flex-direction: column;
  25. /*设定最大和最小宽度*/
  26. max-width: 768px;
  27. min-width: 320px;
  28. /*控制盒子尺寸*/
  29. box-sizing: border-box;
  30. /*设置背景色*/
  31. background-color: #edeff0;
  32. /*设置页面居中*/
  33. margin: 0 auto;
  34. }
  35. /*头部样式开始*/
  36. header{
  37. /*设定最大和最小宽度*/
  38. max-width: 768px;
  39. min-width: 320px;
  40. /*宽度自适应*/
  41. width: 100%;
  42. /*固定定位,脱离文档流,相对于浏览器一直停留在顶部*/
  43. position: fixed;
  44. /*设置容器为弹性盒子,主轴为行轴*/
  45. display: flex;
  46. flex-direction: row;
  47. /*设置盒子高度*/
  48. height: 42px;
  49. /*设置盒子背景色*/
  50. background-color: #444444;
  51. /*设置弹性容器内图标、logo、和头像三个弹性项目两端对齐*/
  52. justify-content: space-between;
  53. }
  54. /*设置图标、logo、头像三个弹性项目在交叉轴上居中,在此处为垂直居中*/
  55. header a{
  56. align-self: center;
  57. }
  58. /*设置header中头像的样式*/
  59. header:first-child img{
  60. /*宽高一样时这样可设置为圆形*/
  61. border-radius: 50%;
  62. width: 26px;
  63. height: 26px;
  64. margin-left: 5px;
  65. /*去除图片的白边*/
  66. display: block;
  67. }
  68. header a:nth-of-type(2) img{
  69. width: 92px;
  70. height: 45px;
  71. display: block;
  72. }
  73. header a:last-of-type {
  74. font-size: 26px;
  75. color: white;
  76. margin-right: 5px;
  77. }
  78. /*头部样式结束*/
  79. /*设置主体区样式*/
  80. main{
  81. /*主体区为弹性盒子,主轴为纵轴*/
  82. display: flex;
  83. flex-direction: column;
  84. }
  85. /*设置主体区中不同栏目的标题样式*/
  86. h4{
  87. font-size: 18px;
  88. font-weight: bold;
  89. padding-bottom: 10px;
  90. color: gray;
  91. }
  92. /*设置轮播图样式,此处仅一张图片代替*/
  93. .pic img {
  94. height: 200px;
  95. }
  96. /*导航区样式开始*/
  97. /*设置导航链接为弹性盒子,方便控制图标和文字上下排列*/
  98. .nav ul,li,a {
  99. display: flex;
  100. }
  101. /*设置导航区图标的样式和位置*/
  102. .nav img {
  103. height: 45px;
  104. width: 45px;
  105. align-self: center;
  106. }
  107. /*项目在主轴上空间分布一样,
  108. 尤其是两边的空间和项目之间的空间一样*/
  109. .nav ul {
  110. justify-content: space-evenly;
  111. }
  112. .nav li {
  113. margin-top: 10px;
  114. }
  115. .nav a {
  116. flex-direction: column;
  117. width: 75px;
  118. height: 65px;
  119. }
  120. .nav span {
  121. color: gray;
  122. align-self: center;
  123. }
  124. /*导航区样式结束*/
  125. /*推荐课程区样式开始*/
  126. .recommend {
  127. margin-top: 20px;
  128. display: flex;
  129. flex-direction: column;
  130. padding: 10px;
  131. }
  132. /*横排之天龙八部课程样式*/
  133. .recommend > div:first-of-type {
  134. display: flex;
  135. flex-direction: row;
  136. justify-content: space-between;
  137. margin-bottom: 20px;
  138. }
  139. .recommend > div a{
  140. width: 49%;
  141. }
  142. .recommend > div img {
  143. height: 90px;
  144. }
  145. /*纵排之玉女心经样式*/
  146. .recommend ul {
  147. display: flex;
  148. flex-direction: column;
  149. }
  150. .recommend li {
  151. display: flex;
  152. flex-direction: row;
  153. padding: 10px;
  154. margin-bottom: 20px;
  155. background-color: white;
  156. }
  157. .recommend li > a {
  158. flex: 1;
  159. height: 80px;
  160. }
  161. .recommend li > div {
  162. flex: 2;
  163. }
  164. .recommend li > div a {
  165. font-size: 16px;
  166. }
  167. .recommend li > div > span:first-of-type {
  168. background-color: #595757;
  169. border-radius: 8px;
  170. color: white;
  171. padding: 3px;
  172. font-size: 10px;
  173. }
  174. .recommend li > div > span:last-of-type {
  175. font-size: 10px;
  176. }
  177. /*课程推荐区结束*/
  178. /*最新更新区样式*/
  179. .update {
  180. padding: 10px;
  181. }
  182. .update ul {
  183. display: flex;
  184. flex-direction: column;
  185. /*overflow: hidden;*/
  186. }
  187. .update ul li {
  188. display: flex;
  189. flex-direction: row;
  190. padding: 10px;
  191. margin-bottom: 20px;
  192. background-color: white;
  193. }
  194. .update ul li > a {
  195. display: flex;
  196. height:80px;
  197. width: 116px;
  198. flex: 1;
  199. }
  200. .update ul li > div {
  201. display: flex;
  202. height: 80px;
  203. width: 164px;
  204. flex-flow: column nowrap;
  205. margin-left: 10px;
  206. justify-content: space-between;
  207. overflow: hidden;
  208. text-overflow: ellipsis;
  209. flex: 1;
  210. }
  211. .update ul li > div a{
  212. display: flex;
  213. overflow: hidden;
  214. height: 20px;
  215. }
  216. .update ul li > div > span {
  217. overflow: hidden;
  218. text-overflow: ellipsis;
  219. height: 15px;
  220. }
  221. .update ul li div div span:first-of-type {
  222. background-color: #595757;
  223. border-radius: 8px;
  224. color: white;
  225. padding: 3px;
  226. font-size: 10px;
  227. }
  228. .update ul li div div span:last-of-type {
  229. font-size: 10px;
  230. }
  231. /*最新更新区块样式设置结束*/
  232. /*设置最新文章区块样式*/
  233. .article{
  234. padding: 10px;
  235. display: flex;
  236. flex-flow: column nowrap;
  237. }
  238. .article > ul {
  239. display: flex;
  240. flex-flow: column;
  241. }
  242. .article > ul > li {
  243. display: flex;
  244. flex-flow: row nowrap;
  245. background-color: white;
  246. height: 85px;
  247. padding: 10px;
  248. margin-bottom: 10px;
  249. justify-content: space-between;
  250. }
  251. .article > ul > li > a:first-of-type {
  252. display: flex;
  253. flex-direction: column;
  254. height: 65px;
  255. width: 215px;
  256. overflow: hidden;
  257. text-overflow: ellipsis;
  258. flex: 2;
  259. }
  260. .article > ul > li > a:first-of-type span:first-child{
  261. height: 20px;
  262. margin-bottom: 10px;
  263. font-size: 14px;
  264. overflow: hidden;
  265. text-overflow: ellipsis;
  266. width: 180px;
  267. }
  268. .article > ul > li > a:last-of-type{
  269. height: 65px;
  270. width: 85px;
  271. flex: 1;
  272. }
  273. .article > ul > li > a:last-of-type > img {
  274. height: 65px;
  275. }
  276. /*页脚样式*/
  277. footer {
  278. /*相对于浏览器固定定位,*/
  279. position: fixed;
  280. margin: 0 auto;
  281. bottom: 0;
  282. background-color: #edeff0;
  283. border-top:1px solid #ccc;
  284. max-width: 768px;
  285. min-width: 320px;
  286. width: 100%;
  287. height: 42px;
  288. }
  289. footer ul{
  290. display: flex;
  291. flex-flow: row nowrap;
  292. width: 100%;
  293. padding: 0 10px;
  294. justify-content: space-between;
  295. box-sizing: border-box;
  296. }
  297. footer ul li {
  298. width: 25%;
  299. justify-content: center;
  300. }
  301. footer ul li a{
  302. display: flex;
  303. flex-flow: column;
  304. align-items: center;
  305. color: gray;
  306. }
  307. footer ul li a:hover{
  308. color: red;
  309. }
  310. footer ul li a span:first-child {
  311. font-size: 20px;
  312. }

4效果图

5.小结

5.1模仿网页布局先要分析整体网页结构,观察其布局思路;再要注意细节查看哪些是链接、哪些是固定不动的等等。

5.2在具体操作中可以将相似板块用无序列表来表达,提高代码逻辑,简化代码数量。

5.3写代码的过程中要时刻保持清醒,把握整体结构,搞清楚一个元素到底是项目还是容器,而且要想清楚到底哪些容器需要设置为弹性盒子,哪些不需要。

5.4疑问:这个仿写的网页中部分文字后面应该出现省略号,但是没有实现,还未分析出问题出在哪里。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
晓刚2019-12-31 10:08:311楼
朱老师,网页中的文字显示不开,后面变成省略号,这个css应该可以控制overflow:hidden;text-overflow:ellipsis;有些地方比如标题,用php字符串截取函数,感觉PHP不用处理,用css处理要更好些,在这个问题上想问下,执行效率或其它方面,那个要更优的,另外我的像这位同学学习,作业写的真优秀,大写的赞!