简体中文（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

博客列表 >2020年4月12日作业--flex布局仿php手机端主页

2020年4月12日作业--flex布局仿php手机端主页

暴宇
暴宇原创
2020年04月16日 22:25:34571浏览

flex布局仿php手机端主页
http://211.149.185.34:90/m.php.html

html代码

  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>m.php.cn</title>
  7.     <link rel="stylesheet" href="css/font.css" />
  8.     <style>
  9.       /* 页面初始化 */
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.       }
  14.       /* 页面宽高设置为屏幕大小 */
  15.       html {
  16.         width: 100vw;
  17.         height: 100vh;
  18.         font-size: 14px;
  19.         max-width: 800px;
  20.       }
  22.       body {
  23.         display: flex;
  24.         flex-flow: column nowrap;
  25.         min-width: 360px;
  26.         background-color: #edeff0;
  27.         color: #777;
  28.       }
  29.       /* 头部 */
  30.       header {
  31.         background-color: #131313;
  32.         color: #ffff;
  33.         height: 50px;
  34.         display: flex;
  35.         align-items: center;
  36.         justify-content: center;
  37.         padding: 5px;
  38.         font-size: 2rem;
  39.         position: fixed;
  40.         top: 0;
  41.         width: 100vw;
  42.       }
  43.       header > span:first-of-type {
  44.         margin-left: 10px;
  45.         margin-right: auto;
  46.       }
  47.       header > span:last-of-type {
  48.         margin-right: 10px;
  49.         margin-left: auto;
  50.       }
  52.       /* 轮播图 */
  53.       .lunboimg {
  54.         height: 150px;
  55.       }
  56.       .lunboimg > img {
  57.         width: 100%;
  58.         height: 100%;
  59.       }
  60.       /* 导航 */
  61.       nav {
  62.         height: 200px;
  63.         display: flex;
  64.         flex-flow: row wrap;
  65.         margin: 10px 0;
  66.         background-color: #fff;
  67.         /* justify-content: center; */
  68.         align-items: center;
  69.       }
  70.       nav > div {
  71.         width: 25%;
  72.         display: flex;
  73.         flex-flow: column nowrap;
  74.         align-items: center;
  75.       }
  76.       nav > div > a > img {
  77.         height: 50px;
  78.       }
  79.       a {
  80.         text-decoration: none;
  81.         color: #131313;
  82.       }
  83.       nav a:hover {
  84.         color: red;
  85.         font-size: 1.2rem;
  86.       }
  87.       /* 所有p标签和h2标签里的字体颜色设置 */
  88.       p,
  89.       h2,
  90.       h3 {
  91.         color: #777;
  92.       }
  93.       /* 主体内容区 */
  95.       .container {
  96.         display: flex;
  97.         flex-flow: column nowrap;
  98.         width: 100%;
  99.       }
  100.       /* 上下布局 */
  101.       .up-down {
  102.         display: flex;
  103.         flex-flow: column nowrap;
  104.         margin: 0;
  105.         padding: 0;
  106.       }
  107.       /* 左右布局 */
  108.       .left-right {
  109.         display: flex;
  110.         flex-flow: row nowrap;
  111.         margin: 0;
  112.         padding: 0;
  113.       }
  114.       /* 高度 */
  115.       .h100 {
  116.         height: 100px;
  117.       }
  118.       .h150 {
  119.         height: 150px;
  120.       }
  121.       .h200 {
  122.         height: 200px;
  123.       }
  124.       /* 宽度 */
  125.       .w40 {
  126.         width: 40%;
  127.       }
  128.       .w50 {
  129.         width: 50%;
  130.       }
  131.       .w60 {
  132.         width: 60%;
  133.       }
  134.       .w100 {
  135.         width: 100%;
  136.       }
  137.       /* 内边距 */
  138.       .p10 {
  139.         padding: 10px;
  140.       }
  141.       .lrp10 {
  142.         padding-left: 10px;
  143.         padding-right: 10px;
  144.       }
  145.       .udp10 {
  146.         padding-top: 10px;
  147.         padding-bottom: 10px;
  148.       }
  149.       /* 外边距 */
  150.       .m10 {
  151.         margin: 10px;
  152.       }
  153.       .lrm10 {
  154.         margin-left: 10px;
  155.         margin-right: 10px;
  156.       }
  157.       .udm10 {
  158.         margin-top: 10px;
  159.         margin-bottom: 10px;
  160.       }
  161.       /* 背景色 */
  162.       .bg {
  163.         background-color: #fff;
  164.       }
  166.       /* 文字超出隐藏并显示... */
  167.       .texthidden {
  168.         white-space: nowrap;
  169.         overflow: hidden;
  170.         text-overflow: ellipsis;
  171.       }
  172.       /* 主轴分散对齐 */
  173.       .divaround {
  174.         justify-content: space-around;
  175.       }
  176.       /* 主轴两端对齐 */
  177.       .divbetween {
  178.         justify-content: space-between;
  179.       }
  180.       /* 主轴居中对齐 */
  181.       .divcenter {
  182.         justify-content: center;
  183.       }
  184.       /* 交叉轴居中 */
  185.       .itemcenter {
  186.         align-items: center;
  187.       }
  188.       /* 交叉轴居中 */
  189.       .itemend {
  190.         align-items: flex-end;
  191.       }
  193.       .level {
  194.         background: #595757;
  195.         color: #fff;
  196.         border-radius: 10px;
  197.         padding: 3px 6px;
  198.         font-size: 10px;
  199.       }
  201.       /* 底部 */
  202.       footer {
  203.         position: fixed;
  204.         bottom: 0;
  205.         display: flex;
  206.         flex-flow: row nowrap;
  207.         justify-content: space-around;
  208.         background-color: #edeff0;
  209.         height: 50px;
  210.         width: 100vw;
  211.         align-items: center;
  212.         max-width: 800px;
  213.         padding: 0;
  214.       }
  215.       footer > a {
  216.         display: flex;
  217.         flex-flow: column nowrap;
  218.         align-items: center;
  219.         box-sizing: border-box;
  220.         width: 25%;
  221.         padding: 5px;
  222.       }
  223.       footer .iconfont {
  224.         font-size: 17px;
  225.       }
  226.       footer > a:hover {
  227.         background-color: #ff80ff;
  228.       }
  229.       footer > a:first-of-type {
  230.         color: red;
  231.       }
  232.     </style>
  233.   </head>
  234.   <body>
  235.     <!-- 头部 -->
  236.     <header>
  237.       <span>LOGN</span>
  238.       <img src="img/logo.png" alt="LOGO" />
  239.       <span class="iconfont"></span>
  240.     </header>
  241.     <!-- 轮播图 -->
  242.     <div class="lunboimg">
  243.       <img src="img/11.png" alt="" />
  244.     </div>
  245.     <!-- 导航区 -->
  246.     <nav>
  247.       <div>
  248.         <a href="" class="up-down itemcenter">
  249.           <img src="img/html.png" alt="" />HTML/CSS
  250.         </a>
  251.       </div>
  252.       <div>
  253.         <a href="" class="up-down itemcenter">
  254.           <img src="img/JavaScript.png" alt="" />JavaScript
  255.         </a>
  256.       </div>
  257.       <div>
  258.         <a href="" class="up-down itemcenter">
  259.           <img src="img/code.png" alt="" />服务端
  260.         </a>
  261.       </div>
  262.       <div>
  263.         <a href="" class="up-down itemcenter">
  264.           <img src="img/sql.png" alt="" />数据库
  265.         </a>
  266.       </div>
  267.       <div>
  268.         <a href="" class="up-down itemcenter">
  269.           <img src="img/app.png" alt="" />移动端
  270.         </a>
  271.       </div>
  272.       <div>
  273.         <a href="" class="up-down itemcenter">
  274.           <img src="img/manual.png" alt="" />手册
  275.         </a>
  276.       </div>
  277.       <div>
  278.         <a href="" class="up-down itemcenter">
  279.           <img src="img/tool2.png" alt="" />工具
  280.         </a>
  281.       </div>
  282.       <div>
  283.         <a href="" class="up-down itemcenter">
  284.           <img src="img/live.png" alt="" />直播
  285.         </a>
  286.       </div>
  287.     </nav>
  288.     <!-- 主体内容区 -->
  289.     <div class="up-down lrm10">
  290.       <h2>推荐课程</h2>
  292.       <div class="up-down">
  293.         <div class="left-right udm10">
  294.           <a href="" style="margin-right: 5px;" class="w50">
  295.             <img src="img/5d242759adb88970.jpg" alt="" class="h150 w100" />
  296.           </a>
  297.           <a href="" style="margin-left: 5px;" class="w50">
  298.             <img src="img/5d2426f409839992.jpg" alt="" class="h150 w100" />
  299.           </a>
  300.         </div>
  302.         <div class="left-right udm10 bg p10">
  303.           <img src="img/5d2941e265889366.jpg" alt="" class="h150 w40" />
  304.           <div class="up-down lrm10">
  305.             <a href=""><h3 style="height: 65px;">CI框架30分钟极速入门</h3></a>
  306.             <div class="left-right">
  307.               <p><span class="level">中级</span><span>61462次播放</span></p>
  308.             </div>
  309.           </div>
  310.         </div>
  311.         <div class="left-right udm10 bg p10">
  312.           <img src="img/5d2941e265889366.jpg" alt="" class="h150 w40" />
  313.           <div class="up-down lrm10">
  314.             <a href=""><h3 style="height: 65px;">CI框架30分钟极速入门</h3></a>
  315.             <div class="left-right">
  316.               <p><span class="level">中级</span><span>61462次播放</span></p>
  317.             </div>
  318.           </div>
  319.         </div>
  320.       </div>
  322.       <h2>最新更新</h2>
  323.       <div class="up-down">
  324.         <div class="left-right bg p10 udm10">
  325.           <img src="img/php.png" alt="" class="h150 w40" />
  326.           <div class="up-down lrp10 texthidden divaround">
  327.             <a href=""
  328.               ><h3 class="texthidden">PHP快速操控Excel之PhpSpreadsheet</h3></a
  329.             >
  330.             <p class="texthidden">
  331.               老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSreadsheet
  332.             </p>
  333.             <div class="left-right divbetween">
  334.               <span class="level">中级</span><span>15672次播放</span>
  335.             </div>
  336.           </div>
  337.         </div>
  338.         <div class="left-right bg p10 udm10">
  339.           <img src="img/thinkphp.png" alt="" class="h150 w40" />
  340.           <div class="up-down lrp10 texthidden divaround">
  341.             <a href=""><h3 class="texthidden">Thinkphp6.0正式版视频教程</h3></a>
  342.             <p class="texthidden">
  343.               Thinkphp6.0从2019年10月24日正式发布，相对测试版，有很多变
  344.             </p>
  345.             <div class="left-right divbetween">
  346.               <span class="level">中级</span><span>50478次播放</span>
  347.             </div>
  348.           </div>
  349.         </div>
  350.         <div class="left-right bg p10 udm10">
  351.           <img src="img/python.jpg" alt="" class="h150 w40" />
  352.           <div class="up-down lrp10 texthidden divaround">
  353.             <a href=""><h3 class="texthidden">2019python自学视频</h3></a>
  354.             <p class="texthidden">
  355.               本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深
  356.             </p>
  357.             <div class="left-right divbetween">
  358.               <span class="level">初级</span><span>37739次播放</span>
  359.             </div>
  360.           </div>
  361.         </div>
  362.       </div>
  363.       <h2>最新文章</h2>
  364.       <div class="up-down">
  365.         <div class="left-right bg p10 udm10 divbetween">
  366.           <div class="up-down texthidden">
  367.             <a href="">
  368.               <h3 class="texthidden">
  369.                 二进制数 01100011 转换成的十进制数是什么？
  370.               </h3>
  371.             </a>
  372.             <p class="udm10">
  373.               发布时间：2020-04-16
  374.             </p>
  375.           </div>
  376.           <img src="img/python.jpg" alt="" class="w40 h100" />
  377.         </div>
  378.         <div class="left-right bg p10 udm10 divbetween">
  379.           <div class="up-down texthidden">
  380.             <a href="">
  381.               <h3 class="texthidden">
  382.                 二进制数 01100011 转换成的十进制数是什么？
  383.               </h3>
  384.             </a>
  385.             <p class="udm10">
  386.               发布时间：2020-04-16
  387.             </p>
  388.           </div>
  389.           <img src="img/python.jpg" alt="" class="w40 h100" />
  390.         </div>
  391.         <div class="left-right bg p10 udm10 divbetween">
  392.           <div class="up-down texthidden">
  393.             <a href="">
  394.               <h3 class="texthidden">
  395.                 二进制数 01100011 转换成的十进制数是什么？
  396.               </h3>
  397.             </a>
  398.             <p class="udm10">
  399.               发布时间：2020-04-16
  400.             </p>
  401.           </div>
  402.           <img src="img/python.jpg" alt="" class="w40 h100" />
  403.         </div>
  404.         <div class="left-right divcenter bg udm10 p10"><p>更多内容</p></div>
  405.       </div>
  407.       <h2>最新博文</h2>
  408.       <div class="up-down">
  409.         <div class="left-right texthidden bg udm10 p10">
  410.           <a href="" class="w60">
  411.             <h3 class="texthidden">
  412.               二进制数 01100011 转换成的十进制数是什么？
  413.             </h3>
  414.           </a>
  415.           <div class="w40 up-down divcenter itemend">
  416.             <p>2020-04-16</p>
  417.           </div>
  418.         </div>
  419.         <div class="left-right texthidden bg udm10 p10">
  420.           <a href="" class="w60">
  421.             <h3 class="texthidden">
  422.               二进制数 01100011 转换成的十进制数是什么？
  423.             </h3>
  424.           </a>
  425.           <div class="w40 up-down divcenter itemend">
  426.             <p>2020-04-16</p>
  427.           </div>
  428.         </div>
  429.         <div class="left-right texthidden bg udm10 p10">
  430.           <a href="" class="w60">
  431.             <h3 class="texthidden">
  432.               二进制数 01100011 转换成的十进制数是什么？
  433.             </h3>
  434.           </a>
  435.           <div class="w40 up-down divcenter itemend">
  436.             <p>2020-04-16</p>
  437.           </div>
  438.         </div>
  439.         <div class="left-right divcenter bg udm10 p10"><p>更多内容</p></div>
  440.       </div>
  442.       <div style="height: 50px;"></div>
  443.     </div>
  444.     <!-- 页脚 -->
  445.     <footer>
  446.       <!-- <div> -->
  447.       <a href=""><span class="iconfont"></span><span>首页</span></a>
  448.       <a href=""><span class="iconfont"></span><span>视频</span></a>
  449.       <a href=""><span class="iconfont"></span><span>社区</span></a>
  450.       <a href=""><span class="iconfont"></span><span>我的</span></a>
  451.       <!-- </div> -->
  452.     </footer>
  453.   </body>
  454. </html>

效果图：

上一条：PHP基础知识与代码实例（一）下一条：（一）laravel安装
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多