Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 使用flex完成PC端三列布局，flex实现(m.php.cn)首页
Blogger Information
Blog 9
fans 0
comment 0
visits 7632
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完成PC端三列布局，flex实现(m.php.cn)首页
金牌马甲
Original
960 people have browsed it

使用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>

运行效果：

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