Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 1227作业+Flex实现移动端的布局+10期线上班
Blogger Information
Blog 25
fans 1
comment 1
visits 17500
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
1227作业+Flex实现移动端的布局+10期线上班
江川林
Original
774 people have browsed it

1227日作业——Flex实现手机端的布局

1、本次手机端用flex实现，我觉得是对之前知识的综合运用考验，其中包括了：
flex容器的6属性运用和flex项目的6属性运用

2、在做本次作业的时候，多看多记多练是关键，之前自己没看作业视频的时候，经常容易卡壳，有时候一个小小的细节，就要耽搁半个小时以上，可能都还做不出来

3、本次的页面依然有很多不足之处，继续努力

感谢老师的辛勤付出！

以下是实现图片

以下是代码（包含）CSS

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex移动端布局</title>
  6.     <style>
  7.             * {
  8.                 padding: 0;
  9.                 margin-top: 0;
  10.                 /*outline: 1px dashed red;*/
  11.             }
  13.             a {
  14.                 text-decoration: none;
  15.                 color: #555555;
  16.             }
  18.             ul , li {
  19.                 list-style: none;
  20.             }
  22.             img {
  23.                 width: 100%;
  24.                 height: 100%;
  25.             }
  28.             body {
  29.                 min-width: 320px;
  30.                 max-width: 768px;
  31.                 width: 100vw;
  32.                 height: 100vh;
  33.                 display: flex;
  34.                 flex-direction: column;
  35.                 overflow-x: hidden ;
  36.                 margin: auto;
  37.             }
  38.             body header , body footer {
  39.                 height: 8vh;
  40.             }
  41.             body > header  {
  42.                 display: flex;
  43.                 justify-content: space-between;
  44.                 background-color: black;
  45.             }
  47.             body > header  > img {
  48.                 height: inherit;
  49.                 width: 5vw;
  50.             }
  52.             body > header > a >img {
  53.                 height: 100%;
  54.                 width: 8vw;
  55.             }
  57.             body > main {
  58.                 flex-grow: 1;
  59.                 overflow: auto;
  60.             }
  61.             /*轮播图*/
  62.             body > main > div {
  63.                 height: 40vh;
  64.                 width: 100%;
  65.             }
  66.             body > main > .banner > img {
  67.                 height: inherit;
  68.                 width: 100%;
  69.             }
  71.             body > main > nav {
  72.                 display: flex;
  73.                 flex-flow: column nowrap;
  74.                 background-color: wheat;
  75.             }
  77.             body > main > nav > ul {
  78.                 display: flex;
  79.             }
  80.             body > main > nav > ul > li {
  81.                 flex-grow: 1;
  82.                 width: 25%;
  83.             }
  84.             body > main > nav > ul > li > a {
  85.                 display: flex;
  86.                 flex-flow: column wrap;
  87.                 align-items: center;
  88.                 margin-top: 5px;
  89.             }
  91.             body > main > nav > ul > li > a > img {
  92.                 height: 40px;
  93.                 width: 40px;
  94.             }
  95.         /*推荐课程*/
  96.             body > main > section {
  97.                 display: flex;
  98.                 flex-direction: column;
  99.             }
  101.             body > main > section > .picture {
  102.                 display: flex;
  103.                 flex-direction: row;
  104.                 flex-wrap: nowrap;
  105.             }
  106.             body > main > section > .picture img {
  107.                 height: 20vh;
  108.                 width: 50%;
  109.                 margin: 5px;
  110.             }
  112.             body > main > section > .comment > section {
  113.                 display: flex;
  114.                 flex-flow: row nowrap;
  115.                 height: 20vh;
  116.             }
  118.             body > main > section > .comment > section img {
  119.                 width: 250px;
  120.                 padding: 5px;
  121.                 box-sizing: border-box;
  122.             }
  123.             body > main > section > .comment > section > div {
  124.                 display: flex;
  125.                 flex-direction: column;
  126.                 flex-grow: 1;
  127.                 justify-content:space-around ;
  128.                 margin-left: 5px;
  129.             }
  130.             body > main > section > .comment > section > div> div {
  131.                 display: flex;
  132.                 /*flex-grow: 1;*/
  133.             }
  134.             body > main > section > .comment > section > div> div span:first-of-type{
  135.                 background-color: black;
  136.                 color: white;
  137.                 border-radius: 5px;
  138.             }
  140.             footer  {
  141.                 display: flex;
  142.                 justify-content: space-between;
  143.                 background-color: #555555;
  144.                 flex-grow: 1;
  145.             }
  146.         footer > span {
  147.             color: white;
  148.             margin: auto;
  150.         }
  151.     </style>
  152. </head>
  153. <body>
  154. <!--        头部-->
  155.         <header>
  156.                 <img src="icon_fh1ahalyzh/bussiness-man.png" alt="">
  157.                 <a href=""><img src="1225/static/images/logo.png" alt=""></a>
  158.                 <img src="icon_fh1ahalyzh/bussiness-man.png" alt="">
  159.         </header>
  160. <!--        主体-->
  161.         <main>
  162. <!--            轮播图-->
  163.             <div class="banner">
  164.                     <img src="1225/static/images/5.jpg" alt="">
  165.             </div>
  166. <!--            导航-->
  167.             <nav>
  168.                 <ul>
  169.                     <li>
  170.                         <a href="">
  171.                             <img src="icon_fh1ahalyzh/all.png" alt="">
  172.                             <span>HTML/CSS</span>
  173.                         </a>
  174.                     </li>
  175.                     <li>
  176.                         <a href="">
  177.                         <img src="icon_fh1ahalyzh/auto.png" alt="">
  178.                         <span>JavaScript</span>
  179.                         </a>
  180.                     </li>
  181.                     <li>
  182.                         <a href="">
  183.                         <img src="icon_fh1ahalyzh/code.png" alt="">
  184.                         <span>服务器</span>
  185.                         </a>
  186.                     </li>
  187.                     <li>
  188.                         <a href="">
  189.                         <img src="icon_fh1ahalyzh/component.png" alt="">
  190.                         <span>数据库</span>
  191.                         </a>
  192.                     </li>
  193.                 </ul>
  194.                 <ul>
  195.                     <li>
  196.                         <a href="">
  197.                         <img src="icon_fh1ahalyzh/copy.png" alt="">
  198.                         <span>移动端</span>
  199.                         </a>
  200.                     </li>
  201.                     <li>
  202.                         <a href="">
  203.                         <img src="icon_fh1ahalyzh/editor.png" alt="">
  204.                         <span>手册</span>
  205.                         </a>
  206.                     </li>
  207.                     <li>
  208.                         <a href="">
  209.                         <img src="icon_fh1ahalyzh/history.png" alt="">
  210.                         <span>工具</span>
  211.                         </a>
  212.                     </li>
  213.                     <li>
  214.                         <a href="">
  215.                         <img src="icon_fh1ahalyzh/bussiness-man.png" alt="">
  216.                         <span>直播</span>
  217.                         </a>
  218.                     </li>
  219.                 </ul>
  220.             </nav>
  221. <!--            推荐课程-->
  222.             <section>
  223.                     <h2>推荐课程</h2>
  224.                     <div class="picture">
  225.                             <img src="1225/static/images/img3.jpg" alt="">
  226.                             <img src="1225/static/images/img4.jpg" alt="">
  227.                     </div>
  228.                     <div class="comment">
  229.                             <section>
  230.                                 <img src="1225/static/images/img1.jpg" alt="">
  231.                                 <div>
  232.                                     <span>CI框架30分钟极速入门</span>
  233.                                     <div>
  234.                                         <span>中级</span>
  235.                                         <span>2187次播放</span>
  236.                                     </div>
  237.                                 </div>
  238.                             </section>
  239.                             <section>
  240.                                 <img src="1225/static/images/img1.jpg" alt="">
  241.                                 <div>
  242.                                     <span>CI框架30分钟极速入门</span>
  243.                                     <div>
  244.                                     <span>中级</span>
  245.                                     <span>2187次播放</span>
  246.                                     </div>
  247.                                 </div>
  248.                             </section>
  249.                     </div>
  250.             </section>
  251.         </main>
  252.         <footer>
  253.             <span>首页</span>
  254.             <span>视频</span>
  255.             <span>社区</span>
  256.             <span>我的</span>
  257.         </footer>
  258. </body>
  259. </html>
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