登录  /  注册
博主信息
博文 145
粉丝 7
评论 7
访问量 157907
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
12月27日作业:pnp中文网移动端布局案例(flex)
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
原创
1028人浏览过

作业一:
php中文网代码:
1、html代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="Mphp.css">
  6. <link rel="stylesheet" href="static/font/iconfont.css">
  7. <title>php中文网首页</title>
  8. </head>
  9. <body>
  10. <header>
  11. <a href=""><span class="iconfont icon-huiyuan2"></span></a>
  12. <a href=""><img src="static/images/logo.png" alt=""></a>
  13. <a href=""><span class="iconfont icon-tianshenpi"></span></a>
  14. </header>
  15. <main>
  16. <img src="images/m5.jpg" alt="">
  17. <nav>
  18. <div>
  19. <img src="images/m-nav1.png" alt="">
  20. <span>HTML/CSS</span>
  21. </div>
  22. <div>
  23. <img src="images/m-nav2.png" alt="">
  24. <span>JavaScript</span>
  25. </div>
  26. <div>
  27. <img src="images/m-nav3.png" alt="">
  28. <span>服务端</span>
  29. </div>
  30. <div>
  31. <img src="images/m-nav4.png" alt="">
  32. <span>数据库</span>
  33. </div>
  34. </nav>
  35. <nav>
  36. <div>
  37. <img src="images/m-nav5.png" alt="">
  38. <span>移动端</span>
  39. </div>
  40. <div>
  41. <img src="images/m-nav6.png" alt="">
  42. <span>手册</span>
  43. </div>
  44. <div>
  45. <img src="images/m-nav7.png" alt="">
  46. <span>工具</span>
  47. </div>
  48. <div>
  49. <img src="images/m-nav8.png" alt="">
  50. <span>直播</span>
  51. </div>
  52. </nav>
  53. <article>
  54. <div class="hot">
  55. <h2>推荐课程</h2>
  56. <section>
  57. <a href=""><img src="images/m-hot1.jpg" alt=""></a>
  58. <a href=""><img src="images/m-hot2.jpg" alt=""></a>
  59. </section>
  60. <div class="article">
  61. <div class="details">
  62. <a href=""><img src="images/m-hot3.jpg" alt=""></a>
  63. <div>
  64. <a href=""><span>主标题</span></a>
  65. <div>
  66. <span>中级</span>
  67. <span>2345次播放</span>
  68. </div>
  69. </div>
  70. </div>
  71. <div class="details">
  72. <a href=""><img src="images/m-hot4.jpg" alt=""></a>
  73. <div>
  74. <a href=""><span>主标题</span></a>
  75. <div>
  76. <span>中级</span>
  77. <span>2345次播放</span>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. <div class="newest">
  84. <h2>最新更新</h2>
  85. <div class="article">
  86. <div class="details">
  87. <a href=""><img src="images/m-new1.jpg" alt=""></a>
  88. <div>
  89. <a href=""><span>主标题</span></a>
  90. <span>副标题</span>
  91. <div>
  92. <span>初级</span>
  93. <span>2345次播放</span>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="details">
  98. <a href=""><img src="images/m-new2.png" alt=""></a>
  99. <div>
  100. <a href=""><span>主标题</span></a>
  101. <span>副标题</span>
  102. <div>
  103. <span>初级</span>
  104. <span>2345次播放</span>
  105. </div>
  106. </div>
  107. </div>
  108. <div class="details">
  109. <a href=""><img src="images/m-new3.jpg" alt=""></a>
  110. <div>
  111. <a href=""><span>主标题</span></a>
  112. <span>副标题</span>
  113. <div>
  114. <span>初级</span>
  115. <span>2345次播放</span>
  116. </div>
  117. </div>
  118. </div>
  119. <div class="details">
  120. <a href=""><img src="images/m-new4.png" alt=""></a>
  121. <div>
  122. <a href=""><span>主标题</span></a>
  123. <span>副标题</span>
  124. <div>
  125. <span>初级</span>
  126. <span>2345次播放</span>
  127. </div>
  128. </div>
  129. </div>
  130. <div class="details">
  131. <a href=""><img src="images/m-new5.jpg" alt=""></a>
  132. <div>
  133. <a href=""><span>主标题</span></a>
  134. <span>副标题</span>
  135. <div>
  136. <span>初级</span>
  137. <span>2345次播放</span>
  138. </div>
  139. </div>
  140. </div>
  141. <div class="details">
  142. <a href=""><img src="images/m-new6.png" alt=""></a>
  143. <div>
  144. <a href=""><span>主标题</span></a>
  145. <span>副标题</span>
  146. <div>
  147. <span>初级</span>
  148. <span>2345次播放</span>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </article>
  155. </main>
  156. <footer>
  157. <div>
  158. <a href="">
  159. <span class="iconfont icon-daohangshouye"></span>
  160. <span>首页</span>
  161. </a>
  162. </div>
  163. <div>
  164. <a href="">
  165. <span class="iconfont icon-guanggao"></span>
  166. <span>视频</span>
  167. </a>
  168. </div>
  169. <div>
  170. <a href="">
  171. <span class="iconfont icon-jishufuwu"></span>
  172. <span>社区</span>
  173. </a>
  174. </div>
  175. <div>
  176. <a href="">
  177. <span class="iconfont icon-huiyuan2"></span>
  178. <span>个人</span>
  179. </a>
  180. </div>
  181. </footer>
  182. </body>
  183. </html>

2、CSS代码:

  1. /*重置属性*/
  2. * {
  3. padding: 0;
  4. margin:0;
  5. /*outline:1px dashed #ff0000;*/
  6. }
  7. a {
  8. text-decoration: none;
  9. color:#222222;
  10. }
  11. body {
  12. background-color: #e7e1cd;
  13. display: flex;
  14. flex-direction: column;
  15. min-width: 360px;
  16. width: 100vw;
  17. height: 100vh;
  18. }
  19. /*头部css*/
  20. header {
  21. width: 100vw;
  22. height: 8vh;
  23. display: flex;
  24. flex-flow:row nowrap;
  25. justify-content:space-between;
  26. background-color: #222222;
  27. z-index: -1;
  28. }
  29. header > a > img {
  30. align-self:center;
  31. height: 8vh;
  32. }
  33. header > a > .iconfont {
  34. color:#ffffff;
  35. line-height: 8vh;
  36. align-self:center;
  37. font-size:40px;
  38. margin: auto 1vw;
  39. }
  40. /*主体部分*/
  41. main {
  42. /*width: 100vw;*/
  43. display: flex;
  44. flex-flow:column nowrap;
  45. overflow: auto;
  46. }
  47. /*1、轮播图*/
  48. main > img {
  49. width: 100vw;
  50. height: 35vh;
  51. }
  52. main > nav {
  53. display: flex;
  54. flex-flow:row wrap;
  55. justify-content: space-around;
  56. background-color: #fff;
  57. padding-top: 1vh;
  58. }
  59. main > nav img {
  60. width: 80px;
  61. height: 80px;
  62. }
  63. main >nav > div {
  64. display: flex;
  65. flex-flow:column nowrap;
  66. }
  67. main > nav > div > * {
  68. align-self: center;
  69. }
  70. main > nav > div > span {
  71. font-weight: bold;
  72. color:#666666;
  73. }
  74. /*文章主体*/
  75. article {
  76. display: flex;
  77. flex-flow:column nowrap;
  78. margin-top:2vh;
  79. }
  80. article > .hot {
  81. display: flex;
  82. flex-direction: column;
  83. }
  84. article h2 {
  85. color:#666666;
  86. margin-left: 1vw;
  87. }
  88. article > .hot > section {
  89. padding-top:1vh;
  90. display: flex;
  91. justify-content: space-around;
  92. }
  93. article > .hot > section img {
  94. width: 47vw;
  95. }
  96. article .article {
  97. display: flex;
  98. flex-direction: column;
  99. }
  100. article .article > .details {
  101. display: flex;
  102. margin:1vh 1vw 0;
  103. background-color: #fff;
  104. }
  105. article .article > .details img {
  106. width: 40vw;
  107. height: 80px;
  108. display: block;
  109. align-self:center;
  110. }
  111. article .article > .details > div {
  112. flex-grow:1;
  113. display: flex;
  114. flex-direction: column;
  115. /*justify-content: space-between;*/
  116. }
  117. article .article > .details > div > a span {
  118. font-size: 20px;
  119. color:#666666;
  120. }
  121. article .article > .details > div >div {
  122. margin-top: 10px;
  123. display: flex;
  124. }
  125. article .article > .details > div > div > :first-child {
  126. background-color: #666666;
  127. border-radius:5px;
  128. margin-right: 5px;
  129. }
  130. article > .newest {
  131. margin-top: 2vh;
  132. }
  133. article > .newest >.article > .details > div {
  134. justify-content: space-between;
  135. }
  136. article > .newest>.article > .details > div >div {
  137. margin-top: 0;
  138. justify-content: space-between;
  139. }
  140. footer {
  141. height: 18vh;
  142. display: flex;
  143. justify-content: space-evenly;
  144. background-color: #EFEFEF;
  145. }
  146. footer div {
  147. display: flex;
  148. flex-direction: column;
  149. justify-content: center;
  150. align-self: center;
  151. }
  152. footer div > a {
  153. display: flex;
  154. flex-direction: column;
  155. }
  156. footer div > a > span {
  157. align-self:center;
  158. font-size: 14px;
  159. }
  160. footer div > a > .iconfont {
  161. font-size: 25px;
  162. }
  163. footer > div > a:hover {
  164. color:#ff0000;
  165. }
  166. /*footer > div > a:visited {*/
  167. /* color:#ff0000;*/
  168. /*}*/

3、效果图:


总结问题知识点:
1、引用阿里图标问题:
<span class="iconfont icon-huiyuan2"></span>
无法通过span标签调整字体图标大小等属性,需要通过 .iconfont类选择器调整
2、a的伪类选择器:
(1)a:link {} 默认状态
(2)a:hover {} 鼠标悬停状态
(3)a:visited {} 访问过后的状态 (问题如果a标签无链接地址,是不是直接就显示访问过后的状态)
(4)a:active{} 长按的状态
3、img图片标签在div中底部白边处理了办法:display:block
4、阿里字体图片可以像img设置width:20vh;``height:20vh:增加弹性属性吗?
5、可见视图属性 width:10vw; heigth:10vh;

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:检查header/footer中的内容高度
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
1条评论
李**¹⁸⁰³⁹⁵⁴⁰¹²⁰ 2019-12-28 14:00:15
为什么header和footer设置同样的可见视图高度:显示不一样,是不是因为main主体中有些元素设置可见视图高度挤压造成的???
1楼
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学