Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex实战移动端页面布局—Php第十期线上班
Blogger Information
Blog 22
fans 0
comment 0
visits 11791
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第十期线上班
迫
Original
459 people have browsed it

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(显示宽度),二者都是百分比单位，是当前页面百分比。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：前端的作业先放放, 假期再补, 先跟上php的课程
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