博主信息
小辰
博文
26
粉丝
0
评论
2
访问量
4379
积分:0
P豆:52

仿手机端m.php.cn网站(1227前端开发作业)

2020年01月03日 13:41:05阅读数:192博客 / 小辰/ 前端学习

1.首先是我的效果图

2.下面是我的html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="css/index-hd.css">
  6. <title>m.php.cn手机端首页</title>
  7. </head>
  8. <body>
  9. <header>
  10. <img src="img/user_avatar.jpg" alt="头像">
  11. <img src="img/logo.png" alt="官网logo">
  12. <a href="">阿里图标</a>
  13. </header>
  14. <main>
  15. <header><img src="" alt=""></header>
  16. <nav>
  17. <a href="">
  18. <img src="img/html.png" alt="">
  19. <span>Html/Css</span>
  20. </a>
  21. <a href="">
  22. <img src="img/JavaScript.png" alt="">
  23. <span>JavaScript</span>
  24. </a>
  25. <a href="">
  26. <img src="img/code.png" alt="">
  27. <span>服务器端</span>
  28. </a>
  29. <a href="">
  30. <img src="img/sql.png" alt="">
  31. <span>数据库</span>
  32. </a>
  33. </nav>
  34. <nav>
  35. <a href="">
  36. <img src="img/app.png" alt="">
  37. <span>移动端</span>
  38. </a>
  39. <a href="">
  40. <img src="img/manual.png" alt="">
  41. <span>手册</span>
  42. </a>
  43. <a href="">
  44. <img src="img/tool2.png" alt="">
  45. <span>工具</span>
  46. </a>
  47. <a href="">
  48. <img src="img/live.png" alt="">
  49. <span>直播</span>
  50. </a>
  51. </nav>
  52. <section>
  53. <h2>推荐课程</h2>
  54. <div>
  55. <section><a href=""><img src="img/1230.jpg" alt=""></a></section>
  56. <section><a href=""><img src="img/1230.jpg" alt=""></a></section>
  57. </div>
  58. <article>
  59. <section><a href=""><img src="img/1231.jpg" alt=""></a></section>
  60. <section>
  61. <a href="">CI框架30分钟极速入门</a>
  62. <span><i>中级</i><a>123次播放</a></span>
  63. </section>
  64. </article>
  65. <article>
  66. <section><a href=""><img src="img/1232.jpg" alt=""></a></section>
  67. <section>
  68. <a href="">2019前端入门_HTML5</a>
  69. <span><i>初级</i><a>345播放</a></span>
  70. </section>
  71. </article>
  72. </section>
  73. </main>
  74. <footer>
  75. </footer>
  76. </body>
  77. </html>

3.下面的是我的css组件

  1. @import "reset.css";
  2. body > header {
  3. /*转为Flex*/
  4. display: flex;
  5. flex-direction: row;
  6. justify-content: space-between;
  7. align-items: center;
  8. }
  9. body > header > img:first-of-type,
  10. body > header > img:last-of-type {
  11. height: 26px;
  12. margin: 10px;
  13. }
  14. body > header > img:nth-of-type(2){
  15. height: 40px;
  16. }
  17. body > header > img:first-of-type {
  18. border-radius: 50%;
  19. }
  20. body > header > a {
  21. font-size: 17px;
  22. }
  23. body > header {
  24. background-color: #22282d;
  25. }
  26. body > main {
  27. flex-grow: 1;
  28. overflow: auto;
  29. display: flex;
  30. flex-direction: column;
  31. }
  32. /*轮播*/
  33. body > main > header > img {
  34. width: 100vw;
  35. }
  36. /*导航区*/
  37. body > main > nav {
  38. background-color: lightsteelblue;
  39. display: flex;
  40. flex-flow: row wrap;
  41. justify-content: space-between;
  42. align-content:space-between;
  43. }
  44. body > main > nav > a {
  45. display: flex;
  46. flex-flow: column wrap;
  47. align-content: center;
  48. text-align: center;
  49. margin: 5px;
  50. text-decoration: none;
  51. }
  52. body > main > nav > a > img {
  53. width: 9vh;
  54. margin: 2px;
  55. }
  56. /*主体内容区*/
  57. body > main > section {
  58. display: flex;
  59. flex-direction: column;
  60. }
  61. /*内容区的标题*/
  62. body > main > section > h2 {
  63. padding: 2vh;
  64. }
  65. /*内容区的图文列表详情*/
  66. body > main > section > article {
  67. display: flex;
  68. flex-direction: row;
  69. margin: 1vh 0;
  70. }
  71. body > main > section > div {
  72. display: flex;
  73. flex-direction: row;
  74. margin: 1vh 0;
  75. justify-content: center;
  76. }
  77. /* 2张图片对齐显示 */
  78. body > main > section > div > section {
  79. display: flex;
  80. flex-direction: column;
  81. }
  82. body > main > section > div > section > a >img {
  83. width: 50vw;
  84. padding-left: 2vw;
  85. }
  86. /* 内容区域图文列表详情 */
  87. body > main > section > article {
  88. display: flex;
  89. flex-direction: row;
  90. margin: 1vh 0;
  91. background-color: #fff;
  92. margin-left: 1vw;
  93. }
  94. body > main > section > article > section{
  95. display: flex;
  96. flex-direction: column;
  97. justify-content: space-around;
  98. flex:1;
  99. margin-left: 1vw;
  100. }
  101. body > main > section > article > section > a{
  102. margin: 1vh 1vw;
  103. }
  104. body > main > section > article > section > a > img {
  105. height: 15vh;}

4.小结

感觉自己做的比较慢,照着老师做,但还是出现一些问题,最后还好找出来了,总体的页面效果,基本已经实现,还有一些细节的东西,我还会再改进的。

批改老师:天蓬大人天蓬大人

批改状态:合格

老师批语:手机端的页面, 其实比pc端要好写多了, 有没有发现呢?

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
小辰
  • 小辰· 2020-01-03 19:08:011楼
  • 确实是的,我会继续努力的

  • 回复
  • php全栈工程师,也叫全工程师,能独立负责台、后台和迭代,根据务需要,制和程序修改。