简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Flex布局实现PHP中文网移动端-20191227作业

Flex布局实现PHP中文网移动端-20191227作业

涡流
涡流原创
2019年12月29日 16:20:48473浏览

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. }
上一条：flex项目的6个属性学习总结下一条：12月23日_ Jquery文档处理、筛选和一些其他的方法 - 九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多