简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > List of blog posts > 使用flex布局实现php中文网移动端网页布局
Blogger Information
Blog 28
fans 0
comment 0
visits 25421
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布局实现php中文网移动端网页布局
，多思曩惜，
Original
557 people have browsed it

代码

  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 rel="stylesheet" href="css/font-icon.css">
  7.     <title>实战php移动端</title>
  8.     <style>
  9.         /* 初始化 */
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         /* 定义文本 */
  16.         a {
  17.             text-decoration: none;
  18.             color: #666;
  19.         }
  21.         html {
  22.             /* vw: 可视区宽度,100vw:表示占满100份 */
  23.             width: 100vw;
  24.             height: 100vh;
  25.             /* vw: 可视区宽度,100vw:表示占满100份 */
  26.             font-size: 14px;
  27.         }
  29.         body {
  30.             /* 设置页面拉伸最大值，页面背景色，将body设置为弹性盒子，并设置不能拉升 */
  31.             min-width: 360px;
  32.             background-color: rgb(250, 227, 227);
  33.             display: flex;
  34.             flex-flow: column nowrap;
  35.         }
  37.         body>header {
  38.             /* 设置头部背景色，内容色，头部大小，头部弹性盒子，文本内容居中，
  39.             文本周围空白区域，元素填充 */
  40.             background-color: #2c2e2f;
  41.             color: white;
  42.             height: 30px;
  43.             display: flex;
  44.             align-items: center;
  45.             justify-content: space-between;
  48.             padding: 0 5px;
  49.             /* 将头部绝对定位 */
  50.             position: fixed;
  52.             width: 97vw;
  53.         }
  55.         .user {
  56.             color: rgb(151, 148, 148);
  57.             font-size: 1.7rem;
  59.         }
  61.         .user1 {
  62.             height: 50px;
  63.         }
  65.         body>.slider {
  66.             margin-top: 30px;
  67.             height: 160px;
  68.         }
  70.         .slider>img {
  71.             width: 100%;
  72.             height: 100%;
  73.         }
  75.         nav {
  76.             height: 200px;
  77.             display: flex;
  78.             flex-flow: row wrap;
  80.         }
  82.         nav>div>a {
  83.             width: 25vw;
  84.             display: flex;
  85.             flex-flow: column nowrap;
  86.             align-items: center;
  87.             margin-top: 12px;
  88.         }
  90.         nav>div>a :first-of-type {
  91.             text-align: center;
  93.         }
  95.         nav>div img {
  96.             width: 50%;
  98.         }
  100.         h2 {
  101.             padding: 3px;
  102.             margin-top: 4px;
  103.             background-color: lightgray;
  104.             font-size: 1.2rem;
  105.             color: rgb(68, 68, 67);
  106.             display: flex;
  107.             align-items: center;
  108.         }
  110.         main {
  112.             display: flex;
  113.             flex-flow: row wrap;
  114.             justify-content: space-between;
  115.         }
  117.         main>div>a {
  118.             margin-top: 5px;
  119.             width: 50vw;
  120.             display: flex;
  121.             flex-flow: column nowrap;
  122.             align-items: center;
  123.         }
  125.         main>div img {
  126.             flex: 1 0 30vw;
  127.             width: 95%;
  128.         }
  130.         .goods-desc {
  131.             height: 93.7px;
  132.             width: 100vw;
  133.             display: flex;
  134.             flex-flow: row wrap;
  135.             margin-top: 5px;
  136.             margin-left: 10px;
  137.         }
  139.         .teacher {
  140.             width: 44vw;
  141.         }
  143.         .teacher>div {
  144.             text-overflow: ellipsis;
  145.             overflow: hidden;
  146.             white-space: nowrap;
  147.         }
  149.         .goods-desc>div {
  150.             width: 45vw;
  151.             height: 80px;
  152.         }
  154.         .goods-desc>div>a img {
  155.             display: block;
  156.             width: 100%;
  157.             height: 100%;
  158.         }
  160.         .goods-desc>.teacher {
  161.             margin-top: 10px;
  162.             margin-left: 15px;
  163.             font-size: 1rem;
  164.         }
  166.         .goods-desc>.teacher>div:last-of-type {
  167.             margin-top: 5px;
  168.         }
  170.         .teacher>div:nth-of-type(2) {
  171.             margin-top: 5px;
  172.             font-size: 0.5rem;
  173.         }
  175.         .teacher>div:last-of-type {
  176.             display: flex;
  177.             justify-content: space-between;
  178.             padding: 5px 1px;
  179.         }
  181.         .answer>div {
  182.             width: 375px;
  183.         }
  185.         .answer>div>div {
  186.             margin-left: 5vw;
  187.             width: 350px;
  188.             height: 40px;
  189.             box-shadow: 2px 2px 10px #999;
  190.         }
  192.         .answer>div>div>a {
  193.             margin-top: 10px;
  194.             display: flex;
  195.             flex-flow: row nowrap;
  196.             justify-content: space-between;
  197.             padding: 0 25px;
  198.         }
  201.         .answer>div>div>a>span:first-of-type {
  202.             width: 200px;
  203.             font-size: 1.1rem;
  204.             text-overflow: ellipsis;
  205.             overflow: hidden;
  206.             white-space: nowrap;
  207.         }
  209.         .answer>div>div>a>span:last-of-type {
  210.             font-size: 0.5rem;
  211.             margin-top: 4px;
  212.         }
  214.         body>footer {
  215.             color: rgb(2, 2, 2);
  216.             background-color: #c4bfbf;
  217.             border: 1px solid rgb(233, 229, 229);
  218.             height: 55px;
  219.             position: fixed;
  220.             bottom: 0;
  221.             width: 100vw;
  222.             display: flex;
  223.             justify-content: space-around;
  224.         }
  226.         body>footer>a {
  227.             margin-top: 10px;
  228.             font-size: 1rem;
  229.             display: flex;
  230.             flex-flow: column nowrap;
  231.             align-items: center;
  232.         }
  234.         .more {
  235.             margin-top: 4px;
  236.             color: #888888;
  237.             display: flex;
  238.             font-size: 1rem;
  239.             justify-content: center;
  240.         }
  241.     </style>
  242. </head>
  244. <body>
  245.     <!-- 页眉 -->
  246.     <header>
  247.         <a href=""><span class="iconfont user">&#xe65b;</span></a>
  248.         <a href=""><img src="images/logo.png" alt="" class="user1"></a>
  249.         <a href=""><span class="iconfont user">&#xe61f;</span></a>
  250.     </header>
  251.     <!-- 头部 -->
  252.     <div class="slider">
  253.         <img src="images/3.jpg" alt="">
  254.     </div>
  257.     <!-- 菜单 -->
  258.     <menu>
  259.         <nav>
  260.             <div>
  261.                 <a href=""><img src="images/html.png" alt=""></a>
  262.                 <a href="">HTML/CSS</a>
  263.             </div>
  264.             <div>
  265.                 <a href=""><img src="images/JavaScript.png" alt=""></a>
  266.                 <a href="">JavaScript</a>
  267.             </div>
  268.             <div>
  269.                 <a href=""><img src="images/code.png" alt=""></a>
  270.                 <a href="">服务端</a>
  271.             </div>
  272.             <div>
  273.                 <a href=""><img src="images/sql.png" alt=""></a>
  274.                 <a href="">数据库</a>
  275.             </div>
  276.             <div>
  277.                 <a href=""><img src="images/app.png" alt=""></a>
  278.                 <a href="">移动端</a>
  279.             </div>
  280.             <div>
  281.                 <a href=""><img src="images/manual.png" alt=""></a>
  282.                 <a href="">手册</a>
  283.             </div>
  284.             <div>
  285.                 <a href=""><img src="images/tool2.png" alt=""></a>
  286.                 <a href="">工具</a>
  287.             </div>
  288.             <div>
  289.                 <a href=""><img src="images/live.png" alt=""></a>
  290.                 <a href="">直播</a>
  291.             </div>
  292.         </nav>
  293.     </menu>
  294.     <!-- 推荐课程 -->
  295.     <h2 class="tittle">推荐课程</h2>
  296.     <main>
  297.         <div class="class1">
  298.             <a href=""><img src="images/tianlong.jpg" alt=""></a>
  299.         </div>
  300.         <div class="class1">
  301.             <a href=""><img src="images/tianlong.jpg" alt=""></a>
  302.         </div>
  303.     </main>
  304.     <div class="goods-desc">
  305.         <div>
  306.             <a href=""><img src="images/ci.jpg" alt=""></a>
  307.         </div>
  308.         <div class="teacher">
  309.             <div>
  310.                 <a href="">CI框架30分钟极速入门</a>
  311.             </div>
  312.             <div>
  313.                 <span style="border-radius: 10px; color: white;background-color: rgb(114, 112, 112);">中级</span>
  314.                 <span style="font-size: 0.8rem;">61329次播放</span>
  315.             </div>
  316.         </div>
  317.     </div>
  318.     <div class="goods-desc">
  319.         <div>
  320.             <a href=""><img src="images/ci.jpg" alt=""></a>
  321.         </div>
  322.         <div class="teacher">
  323.             <div>
  324.                 <a href="">CI框架30分钟极速入门</a>
  325.             </div>
  326.             <div>
  327.                 <span style="border-radius: 10px; color: white;background-color: rgb(114, 112, 112);">中级</span>
  328.                 <span style="font-size: 0.8rem;">61329次播放</span>
  329.             </div>
  330.         </div>
  331.     </div>
  332.     <!-- 最新更新 -->
  333.     <h2 class="tittle">最新更新</h2>
  334.     <div class="goods-desc">
  335.         <div>
  336.             <a href=""><img src="images/excel.png" alt=""></a>
  337.         </div>
  338.         <div class="teacher">
  339.             <div>
  340.                 <a href="">PHP快速操控Excel之PhpSpreadsheet</a>
  341.             </div>
  342.             <div>
  343.                 <a href="">老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯 php
  344.                     编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：PHP运行环境需要PHP7.1以上</a>
  345.             </div>
  346.             <div>
  347.                 <span style="border-radius: 10px; color: white;background-color: rgb(114, 112, 112);">中级</span>
  348.                 <span style="font-size: 0.8rem;">61329次播放</span>
  349.             </div>
  350.         </div>
  351.     </div>
  352.     <div class="goods-desc">
  353.         <div>
  354.             <a href=""><img src="images/thinkphp.png" alt=""></a>
  355.         </div>
  356.         <div class="teacher">
  357.             <div>
  358.                 <a href="">Thinkphp6.0正式版视频教程</a>
  359.             </div>
  360.             <div>
  361.                 <a href="">Thinkphp6.0从2019年10月24日正式发布，相对测试版，有很多变动，目前TP6已经相对比较稳定了，所以php中文网在2020年再次重新录制课程，
  362.                     帮助快速入门！相关推荐： ThinkPHP6.0完全开发手册(注解版) //m.sbmmt.com/course/1049.html</a>
  363.             </div>
  364.             <div>
  365.                 <span style="border-radius: 10px; color: white;background-color: rgb(114, 112, 112);">中级</span>
  366.                 <span style="font-size: 0.8rem;">61329次播放</span>
  367.             </div>
  368.         </div>
  369.     </div>
  370.     <div class="goods-desc">
  371.         <div>
  372.             <a href=""><img src="images/Python.jpg" alt=""></a>
  373.         </div>
  374.         <div class="teacher">
  375.             <div>
  376.                 <a href="">2019python自学视频</a>
  377.             </div>
  378.             <div>
  379.                 <a href="">本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</a>
  380.             </div>
  381.             <div>
  382.                 <span style="border-radius: 10px; color: white;background-color: rgb(114, 112, 112);">中级</span>
  383.                 <span style="font-size: 0.8rem;">61329次播放</span>
  384.             </div>
  385.         </div>
  386.     </div>
  387.     <div class="goods-desc">
  388.         <div>
  389.             <a href=""><img src="images/php.png" alt=""></a>
  390.         </div>
  391.         <div class="teacher">
  392.             <div>
  393.                 <a href="">PHP开发免费公益直播课</a>
  394.             </div>
  395.             <div>
  396.                 <a href="">主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00 主题：如何高效的学习一门新技术？ 具体内容：1. 2020了,
  397.                     还有哪些值得学习的新技术?
  398.                     2.如何高效的学习前端开发? 3.如果高效的学习PHP开发?4.phpStudy V8 新功能介绍与演示 5.小皮面板功能介绍</a>
  399.             </div>
  400.             <div>
  401.                 <span style="border-radius: 10px; color: white;background-color: rgb(114, 112, 112);">中级</span>
  402.                 <span style="font-size: 0.8rem;">61329次播放</span>
  403.             </div>
  404.         </div>
  405.     </div>
  406.     <div class="goods-desc">
  407.         <div>
  408.             <a href=""><img src="images/none.jpg" alt=""></a>
  409.         </div>
  410.         <div class="teacher">
  411.             <div>
  412.                 <a href="">从零开始到WEB响应式布局</a>
  413.             </div>
  414.             <div>
  415.                 <a href="">重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</a>
  416.             </div>
  417.             <div>
  418.                 <span style="border-radius: 10px; color: white;background-color: rgb(114, 112, 112);">中级</span>
  419.                 <span style="font-size: 0.8rem;">61329次播放</span>
  420.             </div>
  421.         </div>
  422.     </div>
  423.     <div class="goods-desc">
  424.         <div>
  425.             <a href=""><img src="images/zero.png" alt=""></a>
  426.         </div>
  427.         <div class="teacher">
  428.             <div>
  429.                 <a href="">PHP文件基础操作</a>
  430.             </div>
  431.             <div>
  432.                 <a href="">好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，
  433.                     PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</a>
  434.             </div>
  435.             <div>
  436.                 <span style="border-radius: 10px; color: white;background-color: rgb(114, 112, 112);">中级</span>
  437.                 <span style="font-size: 0.8rem;">61329次播放</span>
  438.             </div>
  439.         </div>
  440.     </div>
  441.     <!-- 最近文章 -->
  442.     <!-- 最新博客 -->
  443.     <!-- 最新问答 -->
  444.     <div class="answer">
  445.         <h2 class="tittle">最新问答</h2>
  446.         <div>
  447.             <div>
  448.                 <a href="">
  449.                     <a href=""><span>快捷键</span>
  450.                         <span>2020-4-2</span>
  451.                     </a>
  452.                 </a>
  453.             </div>
  454.         </div>
  455.         <div>
  456.             <div>
  457.                 <a href="">
  458.                     <a href=""><span>后台的模板在哪里找</span>
  459.                         <span>2020-4-12</span>
  460.                     </a>
  461.                 </a>
  462.             </div>
  463.         </div>
  464.         <div>
  465.             <div>
  466.                 <a href="">
  467.                     <a href=""><span>数据库</span>
  468.                         <span>2020-4-10</span>
  469.                     </a>
  470.                 </a>
  471.             </div>
  472.         </div>
  473.         <div>
  474.             <div>
  475.                 <a href="">
  476.                     <a href=""><span>如何判断一个变量是否是变量名还是对象名</span>
  477.                         <span>2020-4-18</span>
  478.                     </a>
  479.                 </a>
  480.             </div>
  481.         </div>
  482.         <a class="more">
  483.             <p>更多内容</p>
  484.         </a>
  485.     </div>
  486.     <div style="margin-top: 65px;"></div>
  487.     <!-- 页脚 -->
  488.     <footer>
  489.         <a href="">
  490.             <span class="iconfont">&#xe60c;</span>
  491.             <span>首页</span>
  492.         </a>
  493.         <a href="">
  494.             <span class="iconfont">&#xe64b;</span>
  495.             <span>菜单</span>
  496.         </a>
  497.         <a href="">
  498.             <span class="iconfont">&#xe602;</span>
  499.             <span>购物车</span>
  500.         </a>
  501.         <a href="">
  502.             <span class="iconfont">&#xe657;</span>
  503.             <span>会员</span>
  504.         </a>
  505.     </footer>
  506. </body>
  507. </html>
  • 效果预览


总结

  • 样式使用不熟练，打代码速度不够迅速。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：能做出来就挺好
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

  • Back top