简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >使用flex完成PC端三列布局，flex实现(m.php.cn)首页

使用flex完成PC端三列布局，flex实现(m.php.cn)首页

金牌马甲
金牌马甲原创
2020年08月17日 14:22:36943浏览

使用flex完成PC端三列布局

代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>使用flex完成PC端三列布局</title>
  7. <style>
  8.   * {
  9.     margin: 0;
  10.     padding: 0;
  11.   }
  12.   a {
  13.     text-decoration: none;
  14.     padding: 10px;
  15.     color: black;
  16.   }
  17.   body {
  18.     min-width: 1050px;
  19.     display: flex;
  20.     flex-flow: column nowrap;
  21.     margin: auto;
  22.   }
  23.   header {
  24.     height: 70px;
  25.     background-color: cyan;
  26.     display: flex;
  27.     flex-flow: row nowrap;
  28.     align-items: center;
  29.     text-align: center;
  30.   }
  31.   header > a {
  32.     flex-grow: 1;
  33.   }
  34.   header > a:first-of-type {
  35.     margin-right: 600px;
  36.   }
  37.   a:hover:not(:first-of-type) {
  38.     columns: red;
  39.   }
  40.   div {
  41.     min-height: 500px;
  42.     display: flex;
  43.     justify-content: space-between;
  44.   }
  45.   .left,
  46.   .right {
  47.     flex: 0 0 200px;
  48.   }
  49.   .content {
  50.     flex: auto;
  51.   }
  52.   footer {
  53.     display: flex;
  54.     flex-flow: column nowrap;
  55.     background-color: cyan;
  56.     align-items: center;
  57.     font-size: 0.8rem;
  58.   }
  59.   footer > p:nth-of-type(2),
  60.   p:last-of-type {
  61.     margin-top: 10px;
  62.   }
  63. </style>
  64.   </head>
  65.   <body>
  66. <header>
  67.   <a href="">LOGO</a>
  68.   <a href="">首页</a>
  69.   <a href="">关于我们</a>
  70.   <a href="">新闻资讯</a>
  71.   <a href="">产品介绍</a>
  72.   <a href="">合作伙伴</a>
  73.   <a href="">联系我们</a>
  74.   <a href="">加入我们</a>
  75. </header>
  76. <div class="container">
  77.   <aside class="left">左侧</aside>
  78.   <main class="content">主体</main>
  79.   <aside class="right">右侧</aside>
  80. </div>
  81. <footer>
  82.   <p>&copy;2020年 XXXXXX公司版本所有</p>
  83.   <p>苏ICP备10066XXX号-1</p>
  84.   <p>苏公网安备3205900200XXXX</p>
  85. </footer>
  86.   </body>
  87. </html>

运行效果：

flex实现(m.php.cn)首页

代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <link
  7.   rel="stylesheet"
  8.   href="../0808/static/font_hd6no0smwnw/iconfont.css"
  9. />
  10. <title>flex实现(m.php.cn)首页</title>
  11. <style>
  12.   * {
  13.     margin: 0;
  14.     padding: 0;
  15.     box-sizing: border-box;
  16.   }
  17.   a {
  18.     text-decoration: none;
  19.     color: #888888;
  20.   }
  21.   a:hover {
  22.     color: red;
  23.   }
  24.   html {
  25.     width: 770px;
  26.     margin: auto;
  27.     background: #edeff0;
  28.     color: #888888;
  29.   }
  30.   /* 头部 */
  31.   header {
  32.     background-color: black;
  33.     height: 42px;
  34.     display: flex;
  35.     flex-flow: row nowrap;
  36.     align-items: center;
  37.     justify-content: space-between;
  38.   }
  39.   header > .iconfont {
  40.     font-size: 2rem;
  41.   }
  42.   /* 轮播图 */
  43.   .banner {
  44.     width: 100%;
  45.     height: 150px;
  46.   }
  47.   /* 导航栏 */
  48.   nav {
  49.     height: 170px;
  50.     background-color: white;
  51.     display: flex;
  52.     align-items: center;
  53.     align-content: space-around;
  54.     margin-bottom: 30px;
  55.   }
  56.   nav > div {
  57.     display: flex;
  58.     flex-flow: row wrap;
  59.     /* flex: 0 1 25vw; */
  60.     /* justify-content: center; */
  61.     text-align: center;
  62.   }
  63.   nav > div > div {
  64.     /* align-self: center; */
  65.     width: 192.5px;
  66.     height: 75px;
  67.   }
  68.   nav > div img {
  69.     width: 45px;
  70.     height: 45px;
  71.   }
  72.   nav > div a {
  73.     text-align: center;
  74.   }
  75.   /* 推荐课程板块 */
  76.   .cource {
  77.     background: white;
  78.     padding: 10px;
  79.     display: flexbox;
  80.     flex-flow: column nowrap;
  81.   }
  82.   .cource > h3 {
  83.     margin-bottom: 10px;
  84.   }
  85.   .cource > div:first-of-type {
  86.     display: flex;
  87.     flex-flow: row nowrap;
  88.     justify-content: space-between;
  89.     margin-bottom: 10px;
  90.   }
  91.   .cource_one a img {
  92.     width: 370px;
  93.     height: 90px;
  94.     background: black;
  95.   }
  96.   .cource_two {
  97.     display: flex;
  98.     flex-flow: row nowrap;
  99.     margin-bottom: 10px;
  100.   }
  101.   .cource_two > a img {
  102.     width: 280px;
  103.     height: 80px;
  104.   }
  105.   .cource_two > a > p > span {
  106.     font-size: 0.8rem;
  107.   }
  108.   .cource_two > a > p > span:first-of-type {
  109.     background: #595757;
  110.     color: white;
  111.     border-radius: 15px;
  112.   }
  113.   .cource_two > a:last-of-type {
  114.     margin-left: 20px;
  115.   }
  116.   .cource_three {
  117.     display: flex;
  118.     flex-flow: row nowrap;
  119.   }
  120.   .cource_three > a img {
  121.     width: 280px;
  122.     height: 80px;
  123.   }
  124.   .cource_three > a > p > span {
  125.     font-size: 0.8rem;
  126.   }
  127.   .cource_three > a > p > span:first-of-type {
  128.     background: #595757;
  129.     color: white;
  130.     border-radius: 15px;
  131.   }
  132.   .cource_three > a:last-of-type {
  133.     margin-left: 20px;
  134.   }
  135.   /* 最新更新板块 */
  136.   .update {
  137.     display: flex;
  138.     flex-flow: column nowrap;
  139.   }
  140.   .update > h3 {
  141.     padding: 10px;
  142.   }
  143.   .update > div {
  144.     background: white;
  145.     height: 100px;
  146.     display: flex;
  147.     flex-flow: row nowrap;
  148.     padding-left: 10px;
  149.     align-items: center;
  150.   }
  151.   .update > div img {
  152.     height: 80px;
  153.     width: 295px;
  154.     margin-right: 10px;
  155.   }
  156.   .update_details > p:nth-of-type(2),
  157.   p:last-of-type {
  158.     font-size: 0.8rem;
  159.     white-space: nowrap;
  160.     text-overflow: ellipsis;
  161.     overflow: hidden;
  162.   }
  163.   .update_details {
  164.     min-height: 80px;
  165.     display: flex;
  166.     flex-flow: column nowrap;
  167.     justify-content: space-between;
  168.     min-width: 0;
  169.     overflow: hidden;
  170.     padding-right: 40px;
  171.   }
  172.   .update_details > p:last-of-type {
  173.     display: flex;
  174.     flex-flow: row nowrap;
  175.     justify-content: space-between;
  176.   }
  177.   .update_details > p:last-of-type > span:first-of-type {
  178.     background: #595757;
  179.     color: white;
  180.     border-radius: 15px;
  181.   }
  182.   /* 最新文章 */
  183.   .news {
  184.     display: flex;
  185.     flex-flow: column nowrap;
  186.   }
  187.   .news > h3 {
  188.     margin-top: 30px;
  189.     margin-bottom: 10px;
  190.   }
  191.   .news > div > a:last-of-type > img {
  192.     width: 220px;
  193.     height: 65px;
  194.   }
  195.   .news_div {
  196.     display: flex;
  197.     flex-flow: row nowrap;
  198.     justify-content: space-between;
  199.     background: white;
  200.     margin-bottom: 10px;
  201.     padding: 10px;
  202.   }
  203.   .more {
  204.     display: flex;
  205.     flex-flow: row nowrap;
  206.     justify-content: center;
  207.     align-items: center;
  208.     background: white;
  209.     min-height: 30px;
  210.   }
  211.   /* 最新微博 */
  212.   .newweibo {
  213.     display: flex;
  214.     flex-flow: column nowrap;
  215.   }
  216.   .newweibo > h3 {
  217.     margin-top: 20px;
  218.     margin-bottom: 10px;
  219.   }
  220.   .newweibo_detailes {
  221.     background: white;
  222.     margin-bottom: 10px;
  223.     min-height: 50px;
  224.     display: flex;
  225.     flex-flow: row nowrap;
  226.     justify-content: space-between;
  227.     align-items: center;
  228.     padding: 10px;
  229.   }
  230.   /* 最新问答 */
  231.   .newquestion {
  232.     display: flex;
  233.     flex-flow: column nowrap;
  234.   }
  235.   .newquestion > h3 {
  236.     margin-top: 20px;
  237.     margin-bottom: 10px;
  238.   }
  239.   .newquestion_detailes {
  240.     display: flex;
  241.     flex-flow: row nowrap;
  242.     background: white;
  243.     margin-bottom: 10px;
  244.     height: 50px;
  245.     align-items: center;
  246.     overflow: hidden;
  247.     padding: 10px;
  248.   }
  249.   .newquestion_detailes > h5:first-of-type {
  250.     text-overflow: ellipsis;
  251.     overflow: hidden;
  252.     white-space: nowrap;
  253.     flex: 0 500px;
  254.   }
  255.   .newquestion_detailes > h5:last-of-type {
  256.     flex-grow: 1;
  257.     justify-content: flex-end;
  258.     text-align: right;
  259.   }
  260.   /* 底部 */
  261.   footer {
  262.     border-top: 1px solid #cccccc;
  263.     display: flex;
  264.     flex-flow: row nowrap;
  265.     justify-content: space-around;
  266.     text-align: center;
  267.     color: #888888;
  268.   }
  269. </style>
  270.   </head>
  271.   <body>
  272. <!-- 头部 -->
  273. <header>
  274.   <span class="iconfont">&#xe600;</span>
  275.   <a class="logo" href=""><img src="../img/m.php.cn/logo.png" alt="" /></a>
  276.   <span class="iconfont">&#xe601;</span>
  277. </header>
  278. <!-- 轮播图 -->
  279. <div class="banner">
  280.   <span
  281.     ><img src="../img/m.php.cn/banner.png" alt="" class="banner"
  282.   /></span>
  283. </div>
  284. <!-- 导航栏 -->
  285. <nav>
  286.   <div>
  287.     <div>
  288.       <a href=""><img src="../img/m.php.cn/html.png" alt="" /><br /></a
  289.       ><a>HTML/CSS</a>
  290.     </div>
  291.     <div>
  292.       <a href=""
  293.         ><img src="../img/m.php.cn/JavaScript.png" alt="" /><br /></a
  294.       ><a>JavaScript</a>
  295.     </div>
  296.     <div>
  297.       <a href=""><img src="../img/m.php.cn/code.png" alt="" /><br /></a
  298.       ><a>服务端</a>
  299.     </div>
  300.     <div>
  301.       <a href=""><img src="../img/m.php.cn/sql.png" alt="" /><br /></a
  302.       ><a>数据库</a>
  303.     </div>
  304.     <div>
  305.       <a href=""><img src="../img/m.php.cn/app.png" alt="" /><br /></a
  306.       ><a>移动端</a>
  307.     </div>
  308.     <div>
  309.       <a href=""><img src="../img/m.php.cn/manual.png" alt="" /><br /></a
  310.       ><a>手册</a>
  311.     </div>
  312.     <div>
  313.       <a href=""><img src="../img/m.php.cn/tool2.png" alt="" /><br /></a
  314.       ><a>工具</a>
  315.     </div>
  316.     <div>
  317.       <a href=""><img src="../img/m.php.cn/live.png" alt="" /><br /></a
  318.       ><a>直播</a>
  319.     </div>
  320.   </div>
  321. </nav>
  322. <!-- 主体 -->
  323. <div class="cource">
  324.   <h3>推荐课程</h3>
  325.   <div class="cource_one">
  326.     <a href=""><img src="../img/m.php.cn/tl1.jpg" alt="" /></a>
  327.     <a href=""><img src="../img/m.php.cn/tl2.jpg" alt="" /></a>
  328.   </div>
  329.   <div class="cource_two">
  330.     <a href="">
  331.       <img src="../img/m.php.cn/yn.jpg" alt="" />
  332.     </a>
  333.     <a href="">
  334.       <p>CI框架30分钟极速入门</p>
  335.       <p>
  336.         <span>中级 </span>
  337.         <span>67494次播放</span>
  338.       </p>
  339.     </a>
  340.   </div>
  341.   <div class="cource_three">
  342.     <a href="">
  343.       <img src="../img/m.php.cn/qd.jpg" alt="" />
  344.     </a>
  345.     <a href="">
  346.       <p>2018前端入门_HTML5</p>
  347.       <p>
  348.         <span>初级 </span>
  349.         <span>674941次播放</span>
  350.       </p>
  351.     </a>
  352.   </div>
  353. </div>
  354. <div class="update">
  355.   <h3>最新更新</h3>
  356.   <div class="update_one">
  357.     <a href="">
  358.       <img src="../img/m.php.cn/1.png" alt="" />
  359.     </a>
  360.     <a href="" class="update_details">
  361.       <p>《我的十年撸码生涯》公益直播课</p>
  362.       <p>
  363.         主题：主题：《十年撸码生涯：聊聊没羞没臊的工作和生活》主讲：西门大官人(php中文网的人肉CPU)
  364.         特邀嘉宾: 灭绝小师太(php中文网唯一美女讲师) 时间：2020.7.21 晚20:00
  365.         全国直播
  366.       </p>
  367.       <p>
  368.         <span>初级</span>
  369.         <span>1693次播放</span>
  370.       </p>
  371.     </a>
  372.   </div>
  373.   <div class="update_two">
  374.     <a href="">
  375.       <img src="../img/m.php.cn/2.png" alt="" />
  376.     </a>
  377.     <a href="" class="update_details">
  378.       <p>2天速成VueJS免费公益直播课</p>
  379.       <p>
  380.         php中文网免费公益直播课：两天四个小时Vue.js速成，入门加案例演示，主讲：朱老师(
  381.         Peter Zhu) ，时间：2020.7.15 - 7.16 晚 20:00 - 22:00
  382.         ，感兴趣即可参加！学习交流QQ群：645126219
  383.       </p>
  384.       <p>
  385.         <span>初级</span>
  386.         <span>4543次播放</span>
  387.       </p>
  388.     </a>
  389.   </div>
  390.   <div class="update_three">
  391.     <a href="">
  392.       <img src="../img/m.php.cn/3.jpg" alt="" />
  393.     </a>
  394.     <a href="" class="update_details">
  395.       <p>PHP代码整洁之道</p>
  396.       <p>
  397.         本课程参考自 Robert C. Martin的Clean Code 书中的软件工程师的原则
  398.         ,适用于PHP。 这不是风格指南。
  399.         这是一个关于开发可读、可复用并且可重构的PHP软件指南。
  400.         并不是这里所有的原则都得遵循，甚至很少的能被普遍接受。
  401.         这些虽然只是指导，但是都是Clean Code作者多年总结出来的。
  402.       </p>
  403.       <p>
  404.         <span>中级</span>
  405.         <span>3337次播放</span>
  406.       </p>
  407.     </a>
  408.   </div>
  409.   <div class="update_four">
  410.     <a href="">
  411.       <img src="../img/m.php.cn/4.png" alt="" />
  412.     </a>
  413.     <a href="" class="update_details">
  414.       <p>PHP基本语法（玉女心经版）</p>
  415.       <p>
  416.         PHP是在服务器端执行的脚本语言，与C语言类似，是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及
  417.         PHP
  418.         自创的语法。利于学习，使用广泛，主要适用于Web开发领域，在互联网领域有着广泛的应用。本章学习PHP的基础语法，如变量，变量的数据类型，运算符，流程控制结构等。
  419.       </p>
  420.       <p>
  421.         <span>初级</span>
  422.         <span>305次播放</span>
  423.       </p>
  424.     </a>
  425.   </div>
  426.   <div class="update_five">
  427.     <a href="">
  428.       <img src="../img/m.php.cn/5.png" alt="" />
  429.     </a>
  430.     <a href="" class="update_details">
  431.       <p>前端课程（五郞八卦棍系列）第一棍：HTML5</p>
  432.       <p>
  433.         本视频课程是Web开发的基础课程, 主要讲解HTML5的基础应用,
  434.         适合0基础和初级同学学习观看,
  435.         如果相关同学有一定的HTML基础，也可以观看，夯实自己的基础知识!
  436.       </p>
  437.       <p>
  438.         <span>初级</span>
  439.         <span>2987次播放</span>
  440.       </p>
  441.     </a>
  442.   </div>
  443.   <div class="update_six">
  444.     <a href="">
  445.       <img src="../img/m.php.cn/6.png" alt="" />
  446.     </a>
  447.     <a href="" class="update_details">
  448.       <p>小皮面板使用视频教程</p>
  449.       <p>
  450.         小皮面板（phpstudy-linux面板
  451.         ）针对Linux服务器推出的一款服务器环境搭建以及管理工具。本课程视频包含小皮面板的的安装、站点搭建、网站备份、安全防护等一系列教程。
  452.       </p>
  453.       <p>
  454.         <span>初级</span>
  455.         <span>16644次播放</span>
  456.       </p>
  457.     </a>
  458.   </div>
  459. </div>
  460. <div class="news">
  461.   <h3>最新文章</h3>
  462.   <div class="news_div">
  463.     <a href="" class="news_details">
  464.       <h4>linux php脚本不运行怎么办</h4>
  465.       <br />
  466.       <p>发布时间：2020-08-17</p>
  467.     </a>
  468.     <a href="">
  469.       <img src="../img/m.php.cn/111.jpg" alt="" />
  470.     </a>
  471.   </div>
  472.   <div class="news_div">
  473.     <a href="" class="news_details">
  474.       <h4>PHP接收GET中文参数乱码怎么办</h4>
  475.       <br />
  476.       <p>发布时间：2020-08-17</p>
  477.     </a>
  478.     <a href="">
  479.       <img src="../img/m.php.cn/112.jpg" alt="" />
  480.     </a>
  481.   </div>
  482.   <div class="news_div">
  483.     <a href="" class="news_details">
  484.       <h4>php如何设置中文字符集</h4>
  485.       <br />
  486.       <p>发布时间：2020-08-17</p>
  487.     </a>
  488.     <a href="">
  489.       <img src="../img/m.php.cn/113.jpg" alt="" />
  490.     </a>
  491.   </div>
  492.   <div class="news_div">
  493.     <a href="" class="news_details">
  494.       <h4>php pdo.dll没有找到怎么办</h4>
  495.       <br />
  496.       <p>发布时间：2020-08-17</p>
  497.     </a>
  498.     <a href="">
  499.       <img src="../img/m.php.cn/114.jpg" alt="" />
  500.     </a>
  501.   </div>
  502.   <div class="news_div">
  503.     <a href="" class="news_details">
  504.       <h4>PHP采用get获取url汉字出现乱码怎么办</h4>
  505.       <br />
  506.       <p>发布时间：2020-08-17</p>
  507.     </a>
  508.     <a href="">
  509.       <img src="../img/m.php.cn/115.jpg" alt="" />
  510.     </a>
  511.   </div>
  512.   <div class="more">
  513.     <p>更多内容</p>
  514.   </div>
  515. </div>
  516. <div class="newweibo">
  517.   <h3>最新博文</h3>
  518.   <div class="newweibo_detailes">
  519.     <h5>火狐浏览器如何设置爬虫代理</h5>
  520.     <h5>2020-08-12</h5>
  521.   </div>
  522.   <div class="newweibo_detailes">
  523.     <h5>querylist采集</h5>
  524.     <h5>2020-08-10</h5>
  525.   </div>
  526.   <div class="newweibo_detailes">
  527.     <h5>酱茄社区论坛商城小程序pro更新与WordPress小程序源码下载</h5>
  528.     <h5>2020-08-10</h5>
  529.   </div>
  530.   <div class="newweibo_detailes">
  531.     <h5>showdoc 自动生成API文档</h5>
  532.     <h5>2020-08-07</h5>
  533.   </div>
  534.   <div class="newweibo_detailes">
  535.     <h5>私有版 showdoc 文档管理工具</h5>
  536.     <h5>2020-08-07</h5>
  537.   </div>
  538.   <div class="more">
  539.     <p>更多内容</p>
  540.   </div>
  541. </div>
  542. <div class="newquestion">
  543.   <h3>最新问答</h3>
  544.   <div class="newquestion_detailes">
  545.     <h5>使用tp3.2.3上传图片文件显示不存在的图像文件</h5>
  546.     <h5>2020-08-15</h5>
  547.   </div>
  548.   <div class="newquestion_detailes">
  549.     <h5>老师请见</h5>
  550.     <h5>2020-08-15</h5>
  551.   </div>
  552.   <div class="newquestion_detailes">
  553.     <h5>
  554.       做一个完整的动态网站出来，除了会写前后端的代码，整个网站的搭建流程是怎样的？需要准备哪些软件?
  555.     </h5>
  556.     <h5>2020-08-14</h5>
  557.   </div>
  558.   <div class="newquestion_detailes">
  559.     <h5>函数与结构体</h5>
  560.     <h5>2020-08-12</h5>
  561.   </div>
  562.   <div class="newquestion_detailes">
  563.     <h5>
  564.       我把laravel里面的东西拷贝到其他盘了，然后在浏览器输入localhost/laravel提示错误无法访问
  565.     </h5>
  566.     <h5>2020-08-11</h5>
  567.   </div>
  568.   <div class="more">
  569.     <p>更多内容</p>
  570.   </div>
  571. </div>
  572. <!-- 底部 -->
  573. <footer>
  574.   <span class="iconfont"
  575.     >&#xe8b9;<br />
  576.     <span>首页</span></span
  577.   >
  578.   <span class="iconfont"
  579.     >&#xe8c4;<br />
  580.     <span>视频</span></span
  581.   >
  582.   <span class="iconfont"
  583.     >&#xe8b8;<br />
  584.     <span>社区</span></span
  585.   >
  586.   <span class="iconfont"
  587.     >&#xe8bb;<br />
  588.     <span>我的</span></span
  589.   >
  590. </footer>
  591.   </body>
  592. </html>

运行效果：

上一条：小程序和APP相比有什么优势？下一条：Composer安装及使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议