Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex实战
Blogger Information
Blog 6
fans 1
comment 0
visits 5726
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实战
xiaosheng
Original
916 people have browsed it

总结:

1 . flex布局确实比普通布局好用些,但是这对应着,在写之前需要构思好,特别是在横向布局和纵向布局交叉使用的时候,其实写多了也是其中也是有规律可循的

2 . 布局的时候使用定位比flex更直接,但是个人感觉定位如果页面大小不变的话还很不错,如果需要适配移动端或者窗口大小变化的话,这个时候flex反而更直接些

3 . 写之前一定要做好充分的准备工作,否则在写样式的时候,不仅思路会慢慢的混乱,同时代码也会出现大量的冗余

页面效果如下

页面主体

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>php中文网-教程</title>
  6.     <link rel="stylesheet" href="./static/font/iconfont.css">
  7. </head>
  8. <body>
  9.     <header>
  10.         <img src="./images/ia_100000000.jpg" alt="">
  11.         <div class="logo">
  12.             <img src="./images/ia_100000001.png" alt="">
  13.         </div>
  14.         <div class="setting">
  15.             <i class="iconfont icon-yingyongguanli"></i>
  16.         </div>
  17.     </header>
  18.     <div class="lunbo">
  19.         <img src="./images/ia_100000002.png" alt="">
  20.     </div>
  21.     <div class="nav">
  22.         <div class="option">
  23.             <div>
  24.                 <img src="./images/ia_100000006.png" alt="" class="icon">
  25.             </div>
  26.             <span>HTML/CSS</span>
  27.         </div>
  28.         <div class="option">
  29.             <div>
  30.                 <img src="./images/ia_100000007.png" alt="" class="icon">
  31.             </div>
  32.             <span>JavaScript</span>
  33.         </div>
  34.         <div class="option">
  35.             <div>
  36.                 <img src="./images/ia_100000008.png" alt="" class="icon">
  37.             </div>
  38.             <span>服务端</span>
  39.         </div>
  40.         <div class="option">
  41.             <div>
  42.                 <img src="./images/ia_100000009.png" alt="" class="icon">
  43.             </div>
  44.             <span>数据库</span>
  45.         </div>
  46.         <div class="option">
  47.             <div>
  48.                 <img src="./images/ia_100000010.png" alt="" class="icon">
  49.             </div>
  50.             <span>移动端</span>
  51.         </div>
  52.         <div class="option">
  53.             <div>
  54.                 <img src="./images/ia_100000011.png" alt="" class="icon">
  55.             </div>
  56.             <span>手册</span>
  57.         </div>
  58.         <div class="option">
  59.             <div>
  60.                 <img src="./images/ia_100000012.png" alt="" class="icon">
  61.             </div>
  62.             <span>工具</span>
  63.         </div>
  64.         <div class="option">
  65.             <div>
  66.                 <img src="./images/ia_100000013.png" alt="" class="icon">
  67.             </div>
  68.             <span>直播</span>
  69.         </div>
  70.     </div>
  71.     <div class="content">
  72.         <span>推荐课程</span>
  73.         <div class="courses">
  74.             <div class="course1">
  75.                 <img src="./images/ia_100000014.jpg" alt="">
  76.                 <img src="./images/ia_100000015.jpg" alt="">
  77.             </div>
  78.             <div class="course2">
  79.                 <img src="./images/ia_100000016.jpg" alt="">
  80.                 <div>
  81.                     <span class="title">CI框架30分钟极速入门</span>
  82.                     <span class="level">中级</span>
  83.                     <span class="times">55748次播放</span>
  84.                 </div>
  86.             </div>
  87.             <div class="course2">
  88.                 <img src="./images/ia_100000017.jpg" alt="">
  89.                 <div>
  90.                     <span class="title">2018前端入门_HTML5</span>
  91.                     <span class="level">初级</span>
  92.                     <span class="times">257922次播放</span>
  93.                 </div>
  94.             </div>
  95.         </div>
  96.         <span>最新更新</span>
  97.         <div class="update">
  98.             <div class="clear-mt update1 course2">
  99.                 <img src="./images/ia_100000018.jpg" alt="">
  100.                 <div>
  101.                     <span class="title">2019python自学视频</span>
  102.                     <span class="introduce">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你...</span>
  103.                     <span class="level">初级</span>
  104.                     <span class="times times-right">257922次播放</span>
  105.                 </div>
  106.             </div>
  107.             <div class=" clear-mtupdate1 course2">
  108.                 <img src="./images/ia_100000018.jpg" alt="">
  109.                 <div>
  110.                     <span class="title">2019python自学视频</span>
  111.                     <span class="introduce">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你...</span>
  112.                     <span class="level">初级</span>
  113.                     <span class="times times-right">257922次播放</span>
  114.                 </div>
  115.             </div>
  116.             <div class="clear-mt update1 course2">
  117.                 <img src="./images/ia_100000018.jpg" alt="">
  118.                 <div>
  119.                     <span class="title">2019python自学视频</span>
  120.                     <span class="introduce">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你...</span>
  121.                     <span class="level">初级</span>
  122.                     <span class="times times-right">257922次播放</span>
  123.                 </div>
  124.             </div>
  125.             <div class="clear-mt update1 course2">
  126.                 <img src="./images/ia_100000018.jpg" alt="">
  127.                 <div>
  128.                     <span class="title">2019python自学视频</span>
  129.                     <span class="introduce">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你...</span>
  130.                     <span class="level">初级</span>
  131.                     <span class="times times-right">257922次播放</span>
  132.                 </div>
  133.             </div>
  134.             <div class="clear-mt update1 course2">
  135.                 <img src="./images/ia_100000018.jpg" alt="">
  136.                 <div>
  137.                     <span class="title">2019python自学视频</span>
  138.                     <span class="introduce">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你...</span>
  139.                     <span class="level">初级</span>
  140.                     <span class="times times-right">257922次播放</span>
  141.                 </div>
  142.             </div>
  143.             <div class="clear-mt update1 course2">
  144.                 <img src="./images/ia_100000018.jpg" alt="">
  145.                 <div>
  146.                     <span class="title">2019python自学视频</span>
  147.                     <span class="introduce">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你...</span>
  148.                     <span class="level">初级</span>
  149.                     <span class="times times-right">257922次播放</span>
  150.                 </div>
  151.             </div>
  152.         </div>
  153.         <span>最新文章</span>
  154.         <div class="articles">
  155.             <div class="clear-mt article1 course2">
  156.                 <div>
  157.                     <span class="title">怎么在linux下载文件</span>
  158.                     <span class="times">发布时间：</span>
  159.                     <span class="times">2019-12-30</span>
  160.                 </div>
  161.                 <img src="./images/ia_100000024.jpg" alt="">
  162.             </div>
  163.             <div class="clear-mt article1 course2">
  164.                 <div>
  165.                     <span class="title">怎么在linux下载文件</span>
  166.                     <span class="times">发布时间：</span>
  167.                     <span class="times">2019-12-30</span>
  168.                 </div>
  169.                 <img src="./images/ia_100000024.jpg" alt="">
  170.             </div>
  171.             <div class="clear-mt article1 course2">
  172.                 <div>
  173.                     <span class="title">怎么在linux下载文件</span>
  174.                     <span class="times">发布时间：</span>
  175.                     <span class="times">2019-12-30</span>
  176.                 </div>
  177.                 <img src="./images/ia_100000024.jpg" alt="">
  178.             </div>
  179.             <div class="clear-mt article1 course2">
  180.                 <div>
  181.                     <span class="title">怎么在linux下载文件</span>
  182.                     <span class="times">发布时间：</span>
  183.                     <span class="times">2019-12-30</span>
  184.                 </div>
  185.                 <img src="./images/ia_100000024.jpg" alt="">
  186.             </div>
  187.             <div class="clear-mt article1 course2">
  188.                 <div>
  189.                     <span class="title">怎么在linux下载文件</span>
  190.                     <span class="times">发布时间：</span>
  191.                     <span class="times">2019-12-30</span>
  192.                 </div>
  193.                 <img src="./images/ia_100000024.jpg" alt="">
  194.             </div>
  195.         </div>
  196.         <div class="more">更多内容</div>
  197.         <span>最新博文</span>
  198.         <div class="blogs">
  199.             <div class="blog">
  200.                 <span>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器...</span>
  201.                 <span>2019-12-27</span>
  202.             </div>
  203.             <div class="blog">
  204.                 <span>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器...</span>
  205.                 <span>2019-12-27</span>
  206.             </div>
  207.             <div class="blog">
  208.                 <span>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器...</span>
  209.                 <span>2019-12-27</span>
  210.             </div>
  211.             <div class="blog">
  212.                 <span>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器...</span>
  213.                 <span>2019-12-27</span>
  214.             </div>
  215.         </div>
  216.         <div class="more">更多内容</div>
  217.         <span>最新问答</span>
  218.         <div class="replys blogs">
  219.             <div class="blog">
  220.                 <span>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 -</span>
  221.                 <span>2019-12-27</span>
  222.             </div>
  223.             <div class="blog">
  224.                 <span>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 -</span>
  225.                 <span>2019-12-27</span>
  226.             </div>
  227.             <div class="blog">
  228.                 <span>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 -</span>
  229.                 <span>2019-12-27</span>
  230.             </div>
  231.             <div class="blog">
  232.                 <span>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 -</span>
  233.                 <span>2019-12-27</span>
  234.             </div>
  235.             <div class="blog">
  236.                 <span>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器 -</span>
  237.                 <span>2019-12-27</span>
  238.             </div>
  239.         </div>
  240.         <div class="more">更多内容</div>
  241.     </div>
  242.     <footer>
  243.         <div>
  244.             <i class="iconfont icon-daohangshouye"></i>
  245.             <span>首页</span>
  246.         </div>
  247.         <div>
  248.             <i class="iconfont icon-daohangshouye"></i>
  249.             <span>首页</span>
  250.         </div>
  251.         <div>
  252.             <i class="iconfont icon-daohangshouye"></i>
  253.             <span>首页</span>
  254.         </div>
  255.         <div>
  256.             <i class="iconfont icon-daohangshouye"></i>
  257.             <span>首页</span>
  258.         </div>
  259.     </footer>
  260. </body>
  261. </html>

CSS样式

  1.  * {
  2.      margin: 0;
  3.      padding: 0;
  4.  }
  5.  body {
  6.      width: 768px;
  7.      margin: 0 auto;
  8.      background-color: #cccccc;
  9.  }
  10.  header {
  11.      width: 768px;
  12.      height: 45px;
  13.      background-color: RGB(47, 53, 60);
  14.      padding: 0 10px;
  15.      box-sizing: border-box;
  16.      display: flex;
  17.      justify-content: space-between;
  18.      align-items: center;
  19.      position: fixed;
  20.      top: 0;
  21.      z-index: 999;
  22. }
  23. header > img {
  24.     width: 23px;
  25.     height: 23px;
  26.     border-radius: 50%;
  27. }
  28. header > .logo > img {
  29.     width: 95px;
  30.     height: 45px;
  31. }
  32. header > .setting > i {
  33.     font-size: 19px;
  34.     color: #ffffff;
  35. }
  36. .lunbo > img {
  37.     margin-top: 45px;
  38.     width: 768px;
  39.     height: 150px;
  40. }
  41. .nav {
  42.     width: 768px;
  43.     height: 170px;
  44.     background-color: #fff;
  45.     padding-top: 5px;
  46.     -webkit-box-sizing: border-box;
  47.     -moz-box-sizing: border-box;
  48.     box-sizing: border-box;
  49.     display: flex;
  50.     flex-wrap: wrap;
  51. }
  52. .nav > .option {
  53.     width: 192px;
  54.     height: 75px;
  55.     display: flex;
  56.     justify-content: center;
  57.     align-content: center;
  58.     position: relative;
  59.     flex-wrap: wrap;
  60. }
  62. .nav > .option > div {
  63.     height: 45px;
  64.     flex-basis: 192px;
  65.     display: flex;
  66.     justify-content: center;
  67. }
  69. .nav > .option > div > img {
  70.     width: 45px;
  71.     height: 45px;
  72. }
  74. .nav > .option > span {
  75.     font-size: 14px;
  76.     color: rgb(120,120,120);
  77. }
  79. .content {
  80.     width: 748px;
  81.     margin: 30px auto 75px auto;
  82. }
  83. .content > span {
  84.     display: block;
  85.     width: 748px;
  86.     height: 30px;
  87.     font-size: 18px;
  88.     color: rgb(135,135,135);
  89. }
  90. .content > .courses {
  91.     width: 748px;
  92.     height: 371px;
  93. }
  94. .content > .courses > .course1 {
  95.     display: flex;
  96.     justify-content: space-between;
  97. }
  98. .content > .courses > .course1 > img {
  99.     width: 366.5px;
  100.     height: 90px;
  101. }
  102. .course2 {
  103.     width: 728px;
  104.     height: 80px;
  105.     background-color: #fff;
  106.     padding: 10px;
  107.     margin-top: 25px;
  108.     display: flex;
  109. }
  111. .course2 > img {
  112.     width: 295.1px;
  113.     height: 80px;
  114. }
  116. .course2 > div {
  117.     width: 405px;
  118.     display: flex;
  119.     flex-wrap: wrap;
  120.     margin-left: 5px;
  121. }
  123. .course2 > div > .title {
  124.     width: 410px;
  125.     height: 23px;
  126.     font-size: 16.5px;
  127.     color: rgb(135,135,135);
  128. }
  129. .course2 > div > .level {
  130.     height: 20px;
  131.     line-height: 20px;
  132.     padding: 0 5px;
  133.     -webkit-box-sizing: border-box;
  134.     -moz-box-sizing: border-box;
  135.     box-sizing: border-box;
  136.     font-size: 12px;
  137.     color: rgb(255,255,255);
  138.     background-color: rgb(89,87,87);
  139.     border-radius: 8px;
  140. }
  141. .course2 > div > .times {
  142.     height: 20px;
  143.     line-height: 20px;
  144.     font-size: 12px;
  145.     color: rgb(135,135,135);
  146. }
  147. .content > .update > .update1 > div {
  148.     justify-content: space-between;
  149.     align-content: space-between;
  150. }
  151. .clear-mt {
  152.     margin: 0 0 25px 0;
  153. }
  154. .content > .update > .update1 > div > .introduce {
  155.     font-size: 12px;
  156.     color: rgb(135,135,135);
  157.     width: 410px;
  158. }
  159. .content > .update > .update1 > div > .times-right {
  160.     margin-right: 0;
  161. }
  163. .content > .articles {
  164.     height: 536px;
  165. }
  166. .content > .articles > .course2 {
  167.     justify-content: space-between;
  168. }
  170. .content > .articles > .article1 > img {
  171.     width: 218.3px;
  172.     height: 65px;
  173. }
  174. .content .more {
  175.     width: 748px;
  176.     height: 30px;
  177.     line-height: 30px;
  178.     font-size: 14px;
  179.     margin: 10px 0 25px 0;
  180.     text-align: center;
  181.     background-color: #fff;
  182.     color: rgb(120,120,120);
  183. }
  184. .content > .articles > .clear-mt {
  185.     margin: 0 0 10px 0;
  186. }
  188. .content > .blogs > .blog {
  189.     width: 748px;
  190.     height: 40px;
  191.     background-color: #fff;
  192.     display: flex;
  193.     justify-content: space-between;
  194.     padding: 5px 5px 10px 5px;
  195.     box-sizing: border-box;
  196.     color: rgb(120,120,120);
  197.     font-size: 14px;
  198.     margin-bottom: 10px;
  199. }
  200. footer {
  201.     width: 768px;
  202.     height: 50px;
  203.     padding-top: 5px;
  204.     box-sizing: border-box;
  205.     border-top: 1px solid rgb(120,120,120);
  206.     display: flex;
  207.     justify-content: space-around;
  208.     position: fixed;
  209.     bottom: 0;
  210.     background-color: #cccccc;
  211.     z-index: 100;
  212. }
  213. footer > div {
  214.     width: 192px;
  215.     height: 40px;
  216.     display: flex;
  217.     flex-direction: column;
  218.     justify-content: center;
  219.     align-items: center;
  220.     font-size: 14px;
  221.     color: rgb(120,120,120);
  222. }
  223. footer > div:first-child{
  224.     color: red;
  225. }
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