简体中文（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第十期线上班

flex实战移动端页面布局—Php第十期线上班

迫
迫原创
2020年01月14日 11:37:25454浏览

2019.12.27作业

移动端m.php.cn布局(flex)实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>1227作业</title>
  6.     <link rel="stylesheet" href="../static/font/iconfont.css">
  7.     <link rel="stylesheet" href="PC-PAGE.css">
  8. </head>
  9. <body>
  10.     <header>
  11.         <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
  12.         <img src="../static/images/logo.png" alt="">
  13.         <a href=""><i class="iconfont"></i></a>
  14.     </header>
  16.     <main>
  17.         <header><img src="../static/images/ad/ad2.jpg" alt="" height="100%"></header>
  18.         <nav>
  19.               <a href=""><img src="../static/images/01.png" alt="" height="80" width="80"><span>PS</span></a>
  20.               <a href=""><img src="../static/images/02.png" alt="" height="80" width="80"><span>C++</span></a>
  21.               <a href=""><img src="../static/images/03.png" alt="" height="80" width="80"><span>ANDROID</span></a>
  22.               <a href=""><img src="../static/images/04.png" alt="" height="80" width="80"><span>JAVA</span></a>
  23.               <a href=""><img src="../static/images/01.png" alt="" height="80" width="80"><span>PS</span></a>
  24.               <a href=""><img src="../static/images/02.png" alt="" height="80" width="80"><span>C++</span></a>
  25.               <a href=""><img src="../static/images/03.png" alt="" height="80" width="80"><span>ANDROID</span></a>
  26.               <a href=""><img src="../static/images/04.png" alt="" height="80" width="80"><span>JAVA</span></a>
  27.         </nav>
  28.         <section>
  29.             <h2>最近消息</h2>
  30.             <article>
  31.                 <section><img src="../static/images/shop/9.jpg" alt="" width="100%"></section>
  32.                 <section>2020年1月十大最新热门笔记本电脑</section>
  33.             </article>
  34.             <article>
  35.                 <section><img src="../static/images/shop/9.jpg" alt="" width="100%"></section>
  36.                 <section>2020年1月十大最新热门笔记本电脑</section>
  37.             </article>
  38.             <article>
  39.                 <section><img src="../static/images/shop/9.jpg" alt="" width="100%"></section>
  40.                 <section>2020年1月十大最新热门笔记本电脑</section>
  41.             </article>
  42.             <article>
  43.                 <section><img src="../static/images/shop/9.jpg" alt="" width="100%"></section>
  44.                 <section>2020年1月十大最新热门笔记本电脑</section>
  45.             </article>
  46.             <article>
  47.                 <section><img src="../static/images/shop/9.jpg" alt="" width="100%"></section>
  48.                 <section>2020年1月十大最新热门笔记本电脑</section>
  49.             </article>
  50.             <article>
  51.                 <section><img src="../static/images/shop/9.jpg" alt="" width="100%"></section>
  52.                 <section>2020年1月十大最新热门笔记本电脑</section>
  53.             </article>
  54.             <article>
  55.                 <section><img src="../static/images/shop/9.jpg" alt="" width="100%"></section>
  56.                 <section>2020年1月十大最新热门笔记本电脑</section>
  57.             </article>
  58.             <article>
  59.                 <section><img src="../static/images/shop/9.jpg" alt="" width="100%"></section>
  60.                 <section>2020年1月十大最新热门笔记本电脑</section>
  61.             </article>
  62.         </section>
  63.     </main>
  65.     <footer>
  66.         <a href=""><i class="iconfont"></i></a>
  67.         <a href=""><i class="iconfont"></i></a>
  68.         <a href=""><i class="iconfont"></i></a>
  69.     </footer>
  70. </body>
  71. </html>

css样式

  1. *{
  2.     margin: 0;
  3.     /*padding: 0;outline: 1px dashed;*/
  4. }
  5. body{
  6.     display: flex;
  7.     flex-direction: column;
  8.     min-width: 360px;
  9.     height: 100vh;
  10.     width: 100vw;
  11. }
  13. body > header {
  14.     display: flex;
  15.     flex-direction: row;
  16.     height: 8vh;
  17.     width: 100vw;
  18.     min-width: 360px;
  19.     background-color: black;
  20.     box-sizing: border-box;
  21. }
  22. body > header >  a {
  23.     text-decoration: none;
  24.     font-size: 16px;
  25.     color: white;
  26.     flex: 1;
  27.     margin: auto;
  28. }
  30. body > header > a > i {
  31.     margin-left: 3px;
  32.     margin-right: 3px;
  33. }
  35. body > header > a:last-of-type {
  36.     display: flex;
  37.     justify-content: flex-end;
  38.     margin-right: 3px;
  39. }
  41. body > main {
  42.     flex-grow: 1;
  43.     overflow: auto;
  44.     display: flex;
  45.     flex-direction: column;
  47. }
  49. body > main > header{
  50.     display: flex;
  51.     flex-direction: column;
  52. }
  54. body > main > header > img {
  55.     align-self: center;
  56.     padding: 1px;
  57. }
  59. body > main > nav {
  60.     align-self: center;
  61.     display: flex;
  62.     flex-wrap: wrap;
  63.     flex-direction: row;
  64.     width: 400px;
  65. }
  67. body > main > nav > a {
  69.     display: flex;
  70.     flex-direction: column;
  71.     text-decoration: none;
  72.     flex-basis: 80px;
  73.     flex-grow: 1;
  75. }
  76. body > main > nav > a > img{
  77.     align-self: center;
  78. }
  80. body > main > nav > a > span{
  81.     font-size: 20px;
  82.     color: black;
  83.     align-self: center;
  84. }
  86. body > main > section {
  87.     /*display: flex;*/
  88.     border-top: 1px lightgray solid;
  89.     margin: 5px;
  90. }
  92. body > main > section > article{
  93.     background-color: lightcyan;
  94.     box-shadow: 0 0 2px #888888;
  95.     margin: 1vh 0;
  96.     display: flex;
  97. }
  99. body > main > section > article > section:first-of-type {
  100.     width: 24vw;
  101.     height: 10vh;
  102.     display: flex;
  104. }
  106. body > main > section > article > section:first-of-type>img{
  107.     align-self: center;
  108.     margin-left: 1vw;
  109.     height: 8vh;
  110. }
  113. body > main > section > article > section:last-of-type {
  114.     flex: 1;
  115.     background-color: lightcyan;
  116.     margin: 0 1vw;
  117.     box-shadow: 0 0 2px lightgray;
  118.     align-self: center;
  119.     padding-left: 30px;
  120. }
  122. body > footer {
  123.      display: flex;
  124.      flex-direction: row;
  125.      height: 8vh;
  126.      width: 100vw;
  127.      min-width: 360px;
  128.      background-color: black;
  129.      box-sizing: border-box;
  130.      justify-content: space-around;
  131.  }
  133. body > footer > a{
  134.     color: white;
  135.     align-self: center;
  136.     text-decoration: none;
  138. }

总结，移动端页面的特点是头尾固定，中间主体滑动，在设计页面的时候，要将整个页面显示高度先设定好body{height:100vh;}，再将头尾显示高度设定好，中间主体部分添加滑动轴main{overflow: auto;},一次完成基础的页面布置。注意两个单位：vh(显示高度),vw(显示宽度),二者都是百分比单位，是当前页面百分比。

上一条：PHP filter 过滤器知识下一条：php实现对图片对称加解密（适用高加密等场景)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多