search

博客列表 >12月27日作业：pnp中文网移动端布局案例（flex）

12月27日作业：pnp中文网移动端布局案例（flex）

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2019年12月28日 13:57:001065浏览

作业一：
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>
  35.     </nav>
  36.     <nav>
  37.         <div>
  38.             <img src="images/m-nav5.png" alt="">
  39.             <span>移动端</span>
  40.         </div>
  41.         <div>
  42.             <img src="images/m-nav6.png" alt="">
  43.             <span>手册</span>
  44.         </div>
  45.         <div>
  46.             <img src="images/m-nav7.png" alt="">
  47.             <span>工具</span>
  48.         </div>
  49.         <div>
  50.             <img src="images/m-nav8.png" alt="">
  51.             <span>直播</span>
  52.         </div>
  53.     </nav>
  55.     <article>
  56.         <div class="hot">
  57.             <h2>推荐课程</h2>
  58.             <section>
  59.                 <a href=""><img src="images/m-hot1.jpg" alt=""></a>
  60.                 <a href=""><img src="images/m-hot2.jpg" alt=""></a>
  61.             </section>
  62.             <div class="article">
  63.                 <div class="details">
  64.                     <a href=""><img src="images/m-hot3.jpg" alt=""></a>
  65.                     <div>
  66.                         <a href=""><span>主标题</span></a>
  67.                         <div>
  68.                             <span>中级</span>
  69.                             <span>2345次播放</span>
  70.                         </div>
  71.                     </div>
  72.                 </div>
  73.                 <div class="details">
  74.                     <a href=""><img src="images/m-hot4.jpg" alt=""></a>
  75.                     <div>
  76.                         <a href=""><span>主标题</span></a>
  77.                         <div>
  78.                             <span>中级</span>
  79.                             <span>2345次播放</span>
  80.                         </div>
  81.                     </div>
  82.                 </div>
  83.             </div>
  84.         </div>
  85.         <div class="newest">
  86.             <h2>最新更新</h2>
  87.             <div class="article">
  88.                 <div class="details">
  89.                     <a href=""><img src="images/m-new1.jpg" alt=""></a>
  90.                     <div>
  91.                         <a href=""><span>主标题</span></a>
  92.                         <span>副标题</span>
  93.                         <div>
  94.                             <span>初级</span>
  95.                             <span>2345次播放</span>
  96.                         </div>
  97.                     </div>
  98.                 </div>
  99.                 <div class="details">
  100.                     <a href=""><img src="images/m-new2.png" alt=""></a>
  101.                     <div>
  102.                         <a href=""><span>主标题</span></a>
  103.                         <span>副标题</span>
  104.                         <div>
  105.                             <span>初级</span>
  106.                             <span>2345次播放</span>
  107.                         </div>
  108.                     </div>
  109.                 </div>
  110.                 <div class="details">
  111.                     <a href=""><img src="images/m-new3.jpg" alt=""></a>
  112.                     <div>
  113.                         <a href=""><span>主标题</span></a>
  114.                         <span>副标题</span>
  115.                         <div>
  116.                             <span>初级</span>
  117.                             <span>2345次播放</span>
  118.                         </div>
  119.                     </div>
  120.                 </div>
  121.                 <div class="details">
  122.                     <a href=""><img src="images/m-new4.png" alt=""></a>
  123.                     <div>
  124.                         <a href=""><span>主标题</span></a>
  125.                         <span>副标题</span>
  126.                         <div>
  127.                             <span>初级</span>
  128.                             <span>2345次播放</span>
  129.                         </div>
  130.                     </div>
  131.                 </div>
  132.                 <div class="details">
  133.                     <a href=""><img src="images/m-new5.jpg" alt=""></a>
  134.                     <div>
  135.                         <a href=""><span>主标题</span></a>
  136.                         <span>副标题</span>
  137.                         <div>
  138.                             <span>初级</span>
  139.                             <span>2345次播放</span>
  140.                         </div>
  141.                     </div>
  142.                 </div>
  143.                 <div class="details">
  144.                     <a href=""><img src="images/m-new6.png" alt=""></a>
  145.                     <div>
  146.                         <a href=""><span>主标题</span></a>
  147.                         <span>副标题</span>
  148.                         <div>
  149.                             <span>初级</span>
  150.                             <span>2345次播放</span>
  151.                         </div>
  152.                     </div>
  153.                 </div>
  154.             </div>
  155.         </div>
  156.     </article>
  157. </main>
  158. <footer>
  159.     <div>
  160.         <a href="">
  161.             <span class="iconfont icon-daohangshouye"></span>
  162.             <span>首页</span>
  163.         </a>
  164.     </div>
  165.     <div>
  166.         <a href="">
  167.             <span class="iconfont icon-guanggao"></span>
  168.             <span>视频</span>
  169.         </a>
  170.     </div>
  171.     <div>
  172.         <a href="">
  173.             <span class="iconfont icon-jishufuwu"></span>
  174.             <span>社区</span>
  175.         </a>
  176.     </div>
  177.     <div>
  178.         <a href="">
  179.             <span class="iconfont icon-huiyuan2"></span>
  180.             <span>个人</span>
  181.         </a>
  182.     </div>
  183. </footer>
  184. </body>
  185. </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. }
  30. header > a > img {
  31.     align-self:center;
  32.     height: 8vh;
  33. }
  34. header > a > .iconfont {
  35.     color:#ffffff;
  36.     line-height: 8vh;
  37.     align-self:center;
  38.     font-size:40px;
  39.     margin: auto 1vw;
  40. }
  41. /*主体部分*/
  42. main {
  43.     /*width: 100vw;*/
  44.     display: flex;
  45.     flex-flow:column nowrap;
  46.     overflow: auto;
  47. }
  48. /*1、轮播图*/
  49. main > img {
  50.     width: 100vw;
  51.     height: 35vh;
  52. }
  53. main > nav {
  54.     display: flex;
  55.     flex-flow:row wrap;
  56.     justify-content: space-around;
  57.     background-color: #fff;
  58.     padding-top: 1vh;
  59. }
  60. main > nav img {
  61.     width: 80px;
  62.     height: 80px;
  64. }
  65. main >nav > div {
  66.     display: flex;
  67.     flex-flow:column nowrap;
  69. }
  70. main > nav > div > * {
  71.     align-self: center;
  72. }
  73. main > nav > div > span {
  74.     font-weight: bold;
  75.     color:#666666;
  76. }
  77. /*文章主体*/
  78. article {
  79.     display: flex;
  80.     flex-flow:column nowrap;
  81.     margin-top:2vh;
  82. }
  83. article > .hot {
  84.     display: flex;
  85.     flex-direction: column;
  86. }
  87. article  h2 {
  88.     color:#666666;
  89.     margin-left: 1vw;
  90. }
  91. article > .hot > section {
  92.     padding-top:1vh;
  93.     display: flex;
  94.     justify-content: space-around;
  95. }
  96. article > .hot > section img {
  97.     width: 47vw;
  98. }
  99. article  .article {
  100.     display: flex;
  101.     flex-direction: column;
  102. }
  103. article .article > .details {
  104.     display: flex;
  105.     margin:1vh 1vw 0;
  106.     background-color: #fff;
  107. }
  108. article  .article > .details img {
  109.     width: 40vw;
  110.     height: 80px;
  111.     display: block;
  112.     align-self:center;
  113. }
  114. article .article > .details > div {
  115.     flex-grow:1;
  116.     display: flex;
  117.     flex-direction: column;
  118.     /*justify-content: space-between;*/
  119. }
  120. article  .article > .details > div > a  span {
  121.     font-size: 20px;
  122.     color:#666666;
  123. }
  124. article  .article > .details > div >div {
  125.     margin-top: 10px;
  126.     display: flex;
  127. }
  128. article  .article > .details > div > div > :first-child {
  129.     background-color: #666666;
  130.     border-radius:5px;
  131.     margin-right: 5px;
  132. }
  133. article > .newest {
  134.     margin-top: 2vh;
  135. }
  137. article > .newest >.article > .details > div {
  139.     justify-content: space-between;
  140. }
  141. article > .newest>.article > .details > div >div {
  142.     margin-top: 0;
  143.     justify-content: space-between;
  144. }
  145. footer {
  146.     height: 18vh;
  147.     display: flex;
  148.     justify-content: space-evenly;
  149.     background-color: #EFEFEF;
  150. }
  151. footer div {
  152.     display: flex;
  153.     flex-direction: column;
  154.     justify-content: center;
  155.     align-self: center;
  156. }
  157. footer div > a {
  158.     display: flex;
  159.     flex-direction: column;
  160. }
  161. footer div > a > span {
  162.     align-self:center;
  163.     font-size: 14px;
  164. }
  165. footer div > a > .iconfont {
  166.     font-size: 25px;
  167. }
  168. footer > div > a:hover {
  169.     color:#ff0000;
  170. }
  171. /*footer > div > a:visited {*/
  172. /*    color:#ff0000;*/
  173. /*}*/

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;

上一条：12.27每周的大作业，仿PHP中文网移动端布局（主要运用FLEX弹性盒子）下一条：12.20作业网页传统布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
李**¹⁸⁰³⁹⁵⁴⁰¹²⁰2019-12-28 14:00:151楼
为什么header和footer设置同样的可见视图高度：显示不一样，是不是因为main主体中有些元素设置可见视图高度挤压造成的？？？

相关文章

查看更多