search

博客列表 >1227作业+Flex实现移动端的布局+10期线上班

1227作业+Flex实现移动端的布局+10期线上班

江川林
江川林原创
2019年12月30日 17:05:32767浏览

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>
上一条：Grid复写二手交易模块（1228）下一条：2019年12月28日 作业 grid布局了解+布局实现
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多