Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex布局实现PHP中文网移动端-20191227作业
Blogger Information
Blog 7
fans 0
comment 0
visits 4787
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Flex布局实现PHP中文网移动端-20191227作业
涡流
Original
486 people have browsed it

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--引入阿里字体图标库的css-->
  6.     <link rel="stylesheet" href="../iconfont/iconfont.css">
  7.     <link rel="stylesheet" href="mobile.css">
  8.     <title>移动端布局</title>
  9. </head>
  10. <body>
  12.     <!-- 页眉，使用字体图标代替右上角图片 -->
  13.     <header>
  14.         <img src="img/user.jpg" alt="">
  15.         <img src="img/logo.png" alt="">
  16.         <i class="iconfont icon-icon_shezhi"></i>
  17.     </header>
  19.     <!-- 主体，有三部分内容 -->
  20.     <main>
  21.         <!-- 第一段：轮播图和课程图标 -->
  22.         <div class="nav">
  23.             <img src="img/nav.jpg" alt="">
  24.             <div class="subject">
  25.                 <a href=""><i class="iconfont icon-html"></i>HTML/CSS</a>
  26.                 <a href=""><i class="iconfont icon-js"></i>javaScript</a>
  27.                 <a href=""><i class="iconfont icon-icon_shezhi"></i>服务端</a>
  28.                 <a href=""><i class="iconfont icon-fenzuguanli"></i>数据库</a>
  29.                 <a href=""><i class="iconfont icon-APPkaifa"></i>移动端</a>
  30.                 <a href=""><i class="iconfont icon-icon_bangzhuwendang"></i>手册</a>
  31.                 <a href=""><i class="iconfont icon-bianji"></i>工具</a>
  32.                 <a href=""><i class="iconfont icon-yunhang"></i>直播</a>
  33.             </div>
  34.         </div>
  35.         <h3>推荐课程</h3>
  36.         <!-- 推荐课程两张图片 -->
  37.         <div class="class">
  38.             <img src="img/class.jpg" alt="">
  39.             <img src="img/class.jpg" alt="">
  40.         </div>
  41.         <h3>最新更新</h3>
  42.         <div class="content">
  43.             <img src="img/nav.jpg" alt="">
  44.             <div class="detail">
  45.                 <span>PHP开发免费公益直播课</span>
  46.                 <span>主讲：php中文网-朱老师（Peter Zhu），时间：2019年12月18日起</span>
  47.                 <div class="status">
  48.                     <span>初级</span>
  49.                     <span>3671次播放</span>
  50.                 </div>
  51.             </div>
  52.         </div>
  53.         <div class="content">
  54.             <img src="img/nav.jpg" alt="">
  55.             <div class="detail">
  56.                 <span>PHP开发免费公益直播课</span>
  57.                 <span>主讲：php中文网-朱老师（Peter Zhu），时间：2019年12月18日起</span>
  58.                 <div class="status">
  59.                     <span>初级</span>
  60.                     <span>3671次播放</span>
  61.                 </div>
  62.             </div>
  63.         </div>
  64.         <div class="content">
  65.             <img src="img/nav.jpg" alt="">
  66.             <div class="detail">
  67.                 <span>PHP开发免费公益直播课</span>
  68.                 <span>主讲：php中文网-朱老师（Peter Zhu），时间：2019年12月18日起</span>
  69.                 <div class="status">
  70.                     <span>初级</span>
  71.                     <span>3671次播放</span>
  72.                 </div>
  73.             </div>
  74.         </div>
  75.                 <div class="content">
  76.             <img src="img/nav.jpg" alt="">
  77.             <div class="detail">
  78.                 <span>PHP开发免费公益直播课</span>
  79.                 <span>主讲：php中文网-朱老师（Peter Zhu），时间：2019年12月18日起</span>
  80.                 <div class="status">
  81.                     <span>初级</span>
  82.                     <span>3671次播放</span>
  83.                 </div>
  84.             </div>
  85.         </div>
  86.         <h3>最新文章</h3>
  87.         <div class="article">
  88.             <div class="detail">
  89.                 <span>linux的终端是什么？</span>
  90.                 <span>发布时间：2019-12-17</span>
  91.             </div>
  92.             <img src="img/nav.jpg" alt="">
  93.         </div>
  94.         <div class="article">
  95.             <div class="detail">
  96.                 <span>linux的终端是什么？</span>
  97.                 <span>发布时间：2019-12-17</span>
  98.             </div>
  99.             <img src="img/nav.jpg" alt="">
  100.         </div>
  101.         <div class="article">
  102.             <div class="detail">
  103.                 <span>linux的终端是什么？</span>
  104.                 <span>发布时间：2019-12-17</span>
  105.             </div>
  106.             <img src="img/nav.jpg" alt="">
  107.         </div>
  108.     </main>
  109.     <!-- 页脚，采用字体图标和文字 -->
  110.     <footer>
  111.         <span><i class="iconfont icon-daohangshouye"></i>首页</span>
  112.         <span><i class="iconfont icon-yunhang"></i>视频</span>
  113.         <span><i class="iconfont icon-quanxianshenpi"></i>社区</span>
  114.         <span><i class="iconfont icon-huiyuan2"></i>我的</span>
  115.     </footer>
  116. </body>
  117. </html>

CSS代码

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     /* outline: 1px solid green; */
  5. }
  7. a {
  8.     text-decoration: none;
  9.     color: grey;
  10. }
  12. img {
  13.     width: 100%;
  14. }
  16. /* body设置为flex，垂直排列不换行 */
  17. body {
  18.     /* min-width: 360px; */
  19.     /* max-width: 768px; */
  20.     width: 100vw;
  21.     height: 100vh;
  22.     display: flex;
  23.     flex-flow: column nowrap;
  24. }
  26. /* 页眉样式，黑色背景，FLEX，水平排列不换行，两端对齐，垂直居中 */
  27. header {
  28.     height: 40px;
  29.     background-color: black;
  30.     display: flex;
  31.     justify-content: space-between;
  32.     align-items: center;
  33. }
  35. header > img:first-of-type {
  36.     width: 30px;
  37.     height: 30px;
  38.     border-radius: 50%;
  39.     margin: 0 0 0 5px;
  40. }
  42. header > img:last-of-type {
  43.     width: 94px;
  44. }
  46. header > i {
  47.     margin: 0 5px 0 0;
  48. }
  50. header > .iconfont {
  51.     font-size: 2rem;
  52.     color: white;
  53. }
  55. /* 主体，水平方向无滚动条，垂直方向自动滚动，水平居中FLEX，垂直排列不换行 */
  56. main {
  57.     overflow-y: auto;
  58.     overflow-x: hidden;
  59.     display: flex;
  60.     flex-flow: column nowrap;
  61.     margin: 0 auto;
  62. }
  64. /* NAV包含轮播图和图标链接，FLEX，垂直不换行 */
  65. main > .nav {
  66.     display: flex;
  67.     flex-flow: column nowrap;
  68. }
  70. main > .nav > img {
  71.     height: 120px;
  72. }
  74. /* 图标链接8个，FLEX水平换行，每个图标宽21VW，保持一行4个，两端对齐 */
  75. main > .nav > .subject {
  76.     width: 100vw;
  77.     display: flex;
  78.     flex-flow: row wrap;
  79.     justify-content: space-around;
  80. }
  82. main > .nav > .subject > a {
  83.     display: flex;
  84.     flex-flow: column nowrap;
  85.     width: 21vw;
  86.     height: 8vh;
  87.     justify-content: center;
  88.     text-align: center;
  89. }
  91. main > .nav > .subject > a > .iconfont {
  92.     font-size: 2rem;
  93.     text-align: center;
  94. }
  96. main > h3 {
  97.     margin: 15px 0 5px 10px;
  98. }
  100. /* 推荐课程两张图片，FLEX水平不换行，分散对齐 */
  101. main > .class {
  102.     display: flex;
  103.     flex-flow: row nowrap;
  104.     justify-content: space-around;
  105. }
  107. main > .class > img {
  108.     width: 45vw;
  109.     border-radius: 3px;
  110. }
  112. main > .content {
  113.     display: flex;
  114.     flex-flow: row nowrap;
  115.     margin: 5px;
  116. }
  118. main > .content > img {
  119.     width: 30vw;
  120.     margin: 0 5px;
  121.     border-radius: 3px;
  122. }
  124. main > .content > .detail {
  125.     display: flex;
  126.     flex-flow: column nowrap;
  127.     color: #666666;
  128. }
  130. main > .content > .detail > .status {
  131.     display: flex;
  132.     flex-flow: row nowrap;
  133.     justify-content: space-between;
  134. }
  136. main > .content > .detail span:nth-child(2) {
  137.     font-size: 0.8rem;
  138. }
  140. main > .content > .detail > .status span:first-of-type {
  141.     background-color: #cccccc;
  142.     padding: 3px 5px;
  143.     border-radius: 8px;
  144. }
  146. main > .article {
  147.     display: flex;
  148.     justify-content: space-between;
  149.     margin: 5px;
  150. }
  152. main > .article > .detail {
  153.     display: flex;
  154.     flex-direction: column;
  155.     flex-grow: auto;
  156.     margin: 0 5px;
  157. }
  159. main > .article > .detail > span:last-of-type {
  160.     font-size: 0.8rem;
  161. }
  163. main > .article > img {
  164.     width: 20vw;
  165.     margin: 0 5px;
  166.     border-radius: 3px;
  167. }
  169. footer {
  170.     /* position: fixed; */
  171.     display: flex;
  172.     height: 50px;
  173.     justify-content: space-between;
  174.     background-color: #cccccc;
  175. }
  177. footer span {
  178.     display: flex;
  179.     flex-flow: column nowrap;
  180.     margin: 0 20px;
  181. }
  183. footer > span > .iconfont {
  184.     text-align: center;
  185. }
  187. footer > span:first-of-type {
  188.     color: red;
  189. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：你的这个页面, 看上去非常的舒服, 相信你也有这样的感觉吧... 加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post