简体中文（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布局实现php中文网移动端网页布局

使用flex布局实现php中文网移动端网页布局

，多思曩惜，
，多思曩惜，原创
2020年04月20日 01:52:05577浏览

代码

  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完全开发手册(注解版) https://www.php.cn/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>
  • 效果预览


总结

  • 样式使用不熟练，打代码速度不够迅速。
上一条：php变量作用域过滤器与常量下一条：4.6前端入门之CSS选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多