search

博客列表 >第十期FLEX防PHP中文网移动端首页布局（2019-12-27）

第十期FLEX防PHP中文网移动端首页布局（2019-12-27）

齐齐
齐齐原创
2019年12月30日 18:37:26557浏览

PHP中文网首页

首先打开网页m.php.cn对网页结构进行布局分页，整体分为三大部分，头部，主体，和底部。

头部部分，采用左中右。使用两端对齐，实现展示效果。主体部分，幻灯采用一张图片。导航栏分为2个ul垂直排列，然后再对里面的li进行水平平均对齐。

推荐课程分为三部分，上中下，中间部分是为2张可点击的图片，水平排列在一起。图文列表采用左右排列，然后再对右侧进行划分，进行垂直排列。最新更新类似推荐课程图文部分，只是改变左右项目order值。

底部为分为四分，水平排列，再对里面的flex项目进行垂直排列对齐。

页面的主要html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>php中文网手机首页</title>
  6.     <style>
  7.         /*样式初始化*/
  9.         *:not(body){
  10.             padding:0;
  11.             margin: 0;
  12.             font-size: 13px;
  13.         }
  14.         i{font-style: normal}
  15.         ul,li{list-style: none;}
  16.         a{text-decoration:none;color:#777}
  17.         img{width:100%;}
  18.         body{
  19.             display: flex;
  20.             flex-direction: column;
  21.             min-width: 320px;
  22.             max-width: 640px;
  23.             background-color: #edeff0;
  24.             margin: auto;
  25.             color: #888;
  26.         }
  27.         /*网站头部*/
  28.        body > header{
  29.            padding: 0 5px;
  30.            box-sizing: border-box;
  31.             display: flex;
  32.             background:#2d353c;
  33.             justify-content: space-between;
  34.            align-items: center;
  35.            height: 6vh;
  36.            position: fixed;
  37.            width: 100vw;
  38.            margin-bottom: 6vh;
  40.         }
  41.         body > header img{
  42.             width: 26px;
  43.         }
  44.         body > header > :nth-child(2) img{
  45.             width: 70px;}
  46.         body > header > a:first-child img{border-radius: 50%;}
  47.         /*主体部分*/
  48.         body > main{
  49.             display: flex;
  50.             flex-direction: column;
  51.         }
  52.         /*导航区*/
  53.         body > main > nav{
  54.             display: flex;
  55.             flex-direction: column;
  56.             background: #fff;
  57.         }
  58.         body > main > nav >ul{
  59.             display: flex;
  60.             justify-content: space-evenly;
  63.         }
  64.         body > main > nav >ul >li{
  65.             flex: 1;
  66.         }
  68.         body > main > nav >ul >li img{
  69.             width: 45px;
  70.             height: 49px;
  71.             margin-bottom: 10px;
  73.         }
  74.         body > main > nav >ul >li >a{
  75.             margin: 8px;
  76.             display: flex;
  77.             flex-direction: column;
  78.             align-items: center;
  79.         }
  80.         /*推荐课程*/
  81.         main > section{
  82.             display: flex;
  83.             flex-direction: column;
  84.             padding: 5px;
  85.         }
  86.         main > section > h3{font-size: 20px;margin: 10px 0;color: #888}
  87.         main > section > div{
  88.             display: flex;
  89.             justify-content: space-between;
  90.         }
  91.         main > section > div a{
  92.             width: 49%;
  93.         }
  94.         main > section > div a img{
  95.             height: 100px;}
  96.         main > section > article{
  97.             display: flex;
  98.             padding: 8px;
  99.             background: #fff;
  100.             justify-content: space-between;
  101.             margin-bottom: 10px;
  103.         }
  104.         main > section > article > img {width:35%;height: 80px;
  105.             }
  106.         main > section > article > div{
  107.             display: flex;
  108.             flex-direction: column;
  109.             flex: 0.98;
  110.             justify-content: space-around;
  112.         }
  113.         main > section > article > div >p{font-size:11px}
  114.         main > section > article > div >a {font-size: 15px}
  115.         main > section > article > div  i{font-size:11px;font-style: normal;background:#595757;border-radius: 3px;padding: 0 5px;color:#fff;margin-right: 8px;}
  116.         main > section > article > div >div{
  117.             display: flex;
  118.             justify-content: space-between;
  119.         }
  120.         /*最新文章*/
  121.         main > section:nth-of-type(4) img{ order: 3;height: 60px;}
  122.         main > section:nth-of-type(4) div{ order: 2}
  123.         main > section:nth-of-type(4) div a{font-weight:700;font-size: 13px;}
  124.         main > section >a{background: #fff;text-align: center;padding: 3px 0}
  125.         /*最新博文*/
  126.         main > section:nth-of-type(5)>article >a,main > section:nth-of-type(6)>article >a{
  127.             flex: auto;
  128.             display: flex;
  129.             justify-content: space-between;
  130.         }
  131.         main > section:last-of-type> a:last-of-type{margin-bottom: 50px;}
  132.         /*网站底部*/
  133.          footer{
  134.              display: flex;
  135.              background: #edeff0;
  136.              border-top: 1px solid #ccc;
  137.              margin-top: 10px;
  138.              position: fixed;
  139.              bottom: 0;
  140.              width: 100vw;
  142.          }
  143.         footer>a>img{width: 20px;padding: 6px 0}
  144.         footer>a{
  145.             display: flex;
  146.               flex-direction: column;
  147.             flex: auto;
  148.             justify-content:space-evenly;
  149.             align-items: center;
  150.         }
  151.     </style>
  153. </head>
  154. <body>
  155. <header>
  156.     <a href=""><img src="static/images/user-pic.jpeg" alt=""></a>
  157.     <a href="" class="logo"><img src="static/images/logo.png" alt=""></a>
  158.    <img src="static/images/user-nav.jpg" alt="">
  159. </header>
  160. <main>
  161.     <header><a href=""><img src="static/images/banner.jpg" alt=""></a></header>
  162.     <nav>
  163.         <ul>
  164.             <li><a href=""><img src="static/images/html.png"><span>HTML/CSS</span></a></li>
  165.             <li><a href=""><img src="static/images/JavaScript.png"><span>JavaScript</span></a></li>
  166.             <li><a href=""><img src="static/images/code.png"><span>服务端</span></a></li>
  167.             <li><a href=""><img src="static/images/sql.png"><span>数据库</span></a></li>
  168.         </ul>
  169.         <ul>
  170.             <li><a href=""><img src="static/images/html.png"><span>HTML/CSS</span></a></li>
  171.             <li><a href=""><img src="static/images/JavaScript.png"><span>JavaScript</span></a></li>
  172.             <li><a href=""><img src="static/images/code.png"><span>服务端</span></a></li>
  173.             <li><a href=""><img src="static/images/sql.png"><span>数据库</span></a></li>
  174.         </ul>
  175.     </nav>
  176.     <section>
  177.         <h3>推荐课程</h3>
  178.          <div>
  179.              <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
  180.              <a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
  181.          </div>
  182.     </section>
  183.     <section>
  184.         <article>
  185.             <img src="static/images/tjkc3.jpg" alt="">
  186.             <div>
  187.                 <a href="">CI框架30分钟极速入门</a>
  188.                 <span><i>中级</i>55749次播放</span>
  189.             </div>
  190.         </article>
  191.         <article>
  192.             <img src="static/images/tjkc4.jpg" alt="">
  193.             <div>
  194.                 <a href="">2019前端入门_HTML5</a>
  195.                 <span><i>初级</i>557925次播放</span>
  196.             </div>
  197.         </article>
  198.     </section>
  199.     <section>
  200.         <h3>最新更新</h3>
  201.         <article>
  202.             <img src="static/images/tjkc3.jpg" alt="">
  203.             <div>
  204.                 <a href="">2019python自学视频</a>
  205.                 <p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅。。。</p>
  206.                 <div><i>初级</i><span>12702次播放</span></div>
  207.             </div>
  208.         </article>
  209.         <article>
  210.             <img src="static/images/tjkc4.jpg" alt="">
  211.             <div>
  212.                 <a href="">PHP开发免费公益直播课</a>
  213.                 <p>本课程适合想从零开始学习 Python 编程语言的开发人员。你进入pyt。。。</p>
  214.                 <div><i>初级</i><span>3749次播放</span></div>
  215.             </div>
  216.         </article>
  217.         <article>
  218.             <img src="static/images/tjkc3.jpg" alt="">
  219.             <div>
  220.                 <a href="">2019python自学视频</a>
  221.                 <p>本课程适合想从零开始学习 开发人员。由浅入深的带你进入pyt。。。</p>
  222.                 <div><i>初级</i><span>12702次播放</span></div>
  223.             </div>
  224.         </article>
  225.         <article>
  226.             <img src="static/images/tjkc4.jpg" alt="">
  227.             <div>
  228.                 <a href="">PHP开发免费公益直播课</a>
  229.                 <p>本课程适合想从零开始学习 P语言的开发人员。由浅入深的带你进入pyt。。。</p>
  230.                 <div><i>初级</i><span>3749次播放</span></div>
  231.             </div>
  232.         </article>
  233.     </section>
  234.     <section>
  235.         <h3>最新文章</h3>
  236.         <article>
  237.             <img src="static/images/wz.jpg" alt="">
  238.             <div>
  239.                 <a href="">PHP 闭包之变量作用域</a>
  240.                 <span>发布时间：2019-12-30</span>
  241.             </div>
  242.         </article>
  243.         <article>
  244.             <img src="static/images/tjkc4.jpg" alt="">
  245.             <div>
  246.                 <a href="">vscode中无法使用npm命令</a>
  247.                 <span>发布时间：2019-12-30</span>
  248.             </div>
  249.         </article>
  250.         <article>
  251.             <img src="static/images/wz.jpg" alt="">
  252.             <div>
  253.                 <a href="">PHP 闭包之变量作用域</a>
  254.                 <span>发布时间：2019-12-30</span>
  255.             </div>
  256.         </article>
  257.         <article>
  258.             <img src="static/images/tjkc4.jpg" alt="">
  259.             <div>
  260.                 <a href="">vscode中无法使用npm命令</a>
  261.                 <span>发布时间：2019-12-30</span>
  262.             </div>
  263.         </article>
  264.         <a href="">更多内容</a>
  265.     </section>
  266.     <section>
  267.     <h3>最新博文</h3>
  268.     <article>
  269.         <a href="">
  270.             <span>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器</span>
  271.             <i>2019-12-27</i>
  272.         </a>
  273.     </article>
  274.     <article>
  275.         <a href="">
  276.             <span>转载《PHP安全之道》学习笔记1：PHP项目安全设置</span>
  277.             <i>2019-12-25</i>
  278.         </a>
  279.     </article>
  280.     <article>
  281.         <a href="">
  282.             <span>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器</span>
  283.             <i>2019-12-27</i>
  284.         </a>
  285.     </article>
  286.     <article>
  287.         <a href="">
  288.             <span>转载《PHP安全之道》学习笔记1：PHP项目安全设置</span>
  289.             <i>2019-12-25</i>
  290.         </a>
  291.     </article>
  292.     <a href="">更多内容</a>
  293. </section>
  294.     <section>
  295.         <h3>最新问答</h3>
  296.         <article>
  297.             <a href="">
  298.                 <span>thinkphp5.1学习时遇到session问题</span>
  299.                 <i>2019-12-27</i>
  300.             </a>
  301.         </article>
  302.         <article>
  303.             <a href="">
  304.                 <span>提交之后显示PHP代码</span>
  305.                 <i>2019-12-25</i>
  306.             </a>
  307.         </article>
  308.         <article>
  309.             <a href="">
  310.                 <span>thinkphp5.1学习时遇到session问题</span>
  311.                 <i>2019-12-27</i>
  312.             </a>
  313.         </article>
  314.         <article>
  315.             <a href="">
  316.                 <span>提交之后显示PHP代码</span>
  317.                 <i>2019-12-25</i>
  318.             </a>
  319.         </article>
  321.         <a href="">更多内容</a>
  322.     </section>
  323. </main>
  324. <footer>
  325.     <a href=""><img src="static/font-icon/zhuye.png" alt=""><span>主页</span></a>
  326.     <a href=""><img src="static/font-icon/video.png" alt=""><span>视频</span></a>
  327.     <a href=""><img src="static/font-icon/luntan.png" alt=""><span>社区</span></a>
  328.     <a href=""><img src="static/font-icon/geren.png" alt=""><span>我的</span></a>
  329. </footer>
  330. </body>
  331. </html>

页面的运行整个效果图

总结：flex成功干掉浮动元素，但是使用上还是会经常犯糊涂。代码中直接用选择器来实现，会在选择元素上出现一点问题。flex弹性布局，动手起来并没有想的那么简单。只有不断的练习中，才能轻松自如的驾驭。flex容器属性和flex项目属性知识掌握，才是学好flex至关重要的第一步。

上一条：2019-12-29 留言及评论(Grid实现)-PHP培训十期下一条：flex实现php中文网手机端首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多