search

博客列表 >flex实战

flex实战

xiaosheng
xiaosheng原创
2019年12月30日 14:42:54915浏览

总结:

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. }
上一条：干货 | PHP就该这么学！下一条：使用flex布局，模仿m.php.cn首页----PHP培训十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多