简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 使用flex布局实现PHP中文网移动端网页布局
Blogger Information
Blog 14
fans 0
comment 1
visits 12732
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
606 people have browsed it

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

  1. <html>
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <link rel="stylesheet" href="static/css/font-icon.css" />
  6.     <title>PHP中文网</title>
  7.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.         color: #666;
  16.       }
  18.       html {
  19.         /* vw: 可视区宽度,100vw:表示占满100份 */
  20.         width: 100vw;
  21.         height: 100vh;
  22.         /* 在html中设置字体大小, 给后的rem单位用 */
  23.         font-size: 14px;
  24.       }
  26.       body {
  27.         min-width: 360px;
  28.         background-color: #fff;
  29.         display: flex;
  30.         flex-flow: column nowrap;
  31.       }
  33.       body > header {
  34.         background-color: #333;
  35.         color: white;
  36.         height: 30px;
  37.         display: flex;
  38.         align-items: center;
  39.         justify-content: space-between;
  40.         padding: 0 15px;
  41.         position: fixed;
  42.         width: 95vw;
  43.       }
  44.       body > header > a:first-of-type {
  45.         width: 15%;
  46.       }
  47.       body > header > a > img:last-of-type {
  48.         width: 50%;
  49.       }
  50.       body > .slider {
  51.           padding: 15px 0;
  52.         height: 150px;
  53.       }
  54.       body > .slider > img {
  55.         width: 100%;
  56.       }
  57.       /* 主导航区 */
  58.       nav {
  59.         height: 200px;
  60.         display: flex;
  61.         /* 变成多行容器 */
  62.         flex-flow: row wrap;
  63.       }
  65.       nav > div {
  66.         /* 占宽度四分之一 */
  67.         width: 25vw;
  68.         display: flex;
  69.         flex-flow: column nowrap;
  70.         align-items: center;
  71.       }
  73.       nav > div > a:first-of-type {
  74.         text-align: center;
  75.       }
  77.       nav > div img {
  78.         width: 50%;
  79.       }
  80.       .hot {
  81.         color: coral;
  82.       }
  83.       .title {
  84.         font-size: 1.2rem;
  85.         font-weight: normal;
  86.         text-align: center;
  87.         margin-top: 10px;
  88.       }
  89.       /* 推荐课程 */
  90.       .hot-goods {
  91.         border: 1px solid #cfcfcf;
  92.         margin-top: 10px;
  93.         font-size: 0.8rem;
  94.         display: flex;
  95.         flex-flow: row wrap;
  96.       }
  97.       .hot-goods img {
  98.         width: 90%;
  99.       }
  101.       .hot-goods > .goods-img {
  102.         padding: 10px;
  103.         box-sizing: border-box;
  104.         flex: 1 0 100vw;
  106.         display: flex;
  107.         flex-flow: row nowrap;
  108.         justify-content: center;
  109.       }
  111.       .hot-goods > .goods-img > div {
  112.         display: flex;
  113.         justify-content: space-around;
  114.       }
  115.       /* 最新课程 */
  116.       .list-goods {
  117.         padding: 10px;
  118.         box-sizing: border-box;
  119.         border: 1px solid #cfcfcf;
  120.         font-size: 0.8rem;
  121.         margin-top: 10px;
  123.         display: flex;
  124.         flex-flow: column nowrap;
  125.         height: 100px;
  126.       }
  128.       .list-goods > .goods-desc {
  129.         display: flex;
  130.         margin: 5px 0;
  131.       }
  133.       .list-goods img {
  134.         width: 45vw;
  135.         height: 70%;
  136.       }
  138.       .list-goods > .goods-desc > a {
  139.         padding: 5px;
  140.         box-sizing: border-box;
  141.       }
  142.       .list-goods > .goods-desc > a:hover {
  143.         color: lightseagreen;
  144.       }
  145.            /* 页脚 */
  146.            body > footer {
  147.         color: #666;
  148.         background-color: #efefef;
  149.         border-top: 1px solid #ccc;
  150.         height: 55px;
  152.         position: fixed;
  153.         bottom: 0;
  154.         width: 100vw;
  156.         display: flex;
  157.         justify-content: space-around;
  158.       }
  160.       body > footer > a {
  161.         margin-top: 10px;
  162.         font-size: 0.8rem;
  163.         display: flex;
  164.         flex-flow: column nowrap;
  165.         align-items: center;
  166.       }
  168.       body > footer > a > span:first-of-type {
  169.         font-size: 1.6rem;
  170.       }
  171.     </style>
  172.   </head>
  173.   <body>
  174.     <!-- 页眉 -->
  175.     <header>
  176.       <a href=""><img src="static/images/phpcn/login.png" alt="" /></a>
  177.       <a href=""><img src="static/images/phpcn/logo.png" alt="" /></a>
  178.       <span class="iconfont"></span>
  179.     </header>
  181.     <!-- 轮播图 -->
  182.     <div class="slider">
  183.       <img src="static/images/phpcn/banner.png" alt="" />
  184.     </div>
  185.     <!--主导航区-->
  186.     <nav>
  187.       <div>
  188.         <a href=""><img src="static/images/phpcn/nav1.png" alt="" /></a>
  189.         <a href="">HTML/CSS</a>
  190.       </div>
  191.       <div>
  192.         <a href=""><img src="static/images/phpcn/nav2.png" alt="" /></a>
  193.         <a href="">JavaScript</a>
  194.       </div>
  195.       <div>
  196.         <a href=""><img src="static/images/phpcn/nav3.png" alt="" /></a>
  197.         <a href="">服务端</a>
  198.       </div>
  199.       <div>
  200.         <a href=""><img src="static/images/phpcn/nav4.png" alt="" /></a>
  201.         <a href="">数据库</a>
  202.       </div>
  203.       <div>
  204.         <a href=""><img src="static/images/phpcn/nav5.png" alt="" /></a>
  205.         <a href="">移动端</a>
  206.       </div>
  207.       <div>
  208.         <a href=""><img src="static/images/phpcn/nav6.png" alt="" /></a>
  209.         <a href="">手册</a>
  210.       </div>
  211.       <div>
  212.         <a href=""><img src="static/images/phpcn/nav7.png" alt="" /></a>
  213.         <a href="">工具</a>
  214.       </div>
  215.       <div>
  216.         <a href=""><img src="static/images/phpcn/nav8.png" alt="" /></a>
  217.         <a href="">直播</a>
  218.       </div>
  219.     </nav>
  220.     <!--推荐课程-->
  221.     <h2 class="title">推荐课程</h2>
  222.     <div class="hot-goods">
  223.       <div class="goods-img">
  224.         <a href=""><img src="static/images/phpcn/hot1.jpg" alt="" /></a>
  225.         <a href=""><img src="static/images/phpcn/hot2.jpg" alt="" /></a>
  226.       </div>
  227.     </div>
  228.     <!-- 最新更新 -->
  229.     <h2 class="title">最新更新</h2>
  231.     <div class="list-goods">
  232.       <div class="goods-desc">
  233.         <a href=""><img src="static/images/phpcn/new1.png" alt="" /></a>
  234.         <a href=""
  235.           >PHP快速操控Excel之PhpSpreadsheet老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsh<span
  236.             class="iconfont hot"
  237.             style="vertical-align: middle;"
  238.             ></span
  239.           ></a
  240.         >
  241.       </div>
  242.     </div>
  243.     <div class="list-goods">
  244.       <div class="goods-desc">
  245.         <a href=""><img src="static/images/phpcn/new3.jpg" alt="" /></a>
  246.         <a href=""
  247.           >2019python自学视频 本课程适合想从零开始学习 Python
  248.           编程语言的开发人员。由浅入深的带你进入py<span
  249.             class="iconfont hot"
  250.             style="vertical-align: middle;"
  251.             ></span
  252.           ></a
  253.         >
  254.       </div>
  255.     </div>
  256.     <div class="list-goods">
  257.       <div class="goods-desc">
  258.         <a href=""><img src="static/images/phpcn/new2.png" alt="" /></a>
  259.         <a href=""
  260.           >Thinkphp6.0正式版视频教程
  261.           Thinkphp6.0从2019年10月24日正式发布，相对测试版，有很多变动，目前TP<span
  262.             class="iconfont hot"
  263.             style="vertical-align: middle;"
  264.             ></span
  265.           ></a
  266.         >
  267.       </div>
  268.     </div>
  269.         <!--页脚-->
  270.         <footer>
  271.             <a href="">
  272.                 <span class="iconfont hot"></span>
  273.                 <span>首页</span>
  274.             </a>
  275.             <a href="">
  276.                 <span class="iconfont hot"></span>
  277.                 <span>视频</span>
  278.             </a>
  279.             <a href="">
  280.                 <span class="iconfont hot"></span>
  281.                 <span>社区</span>
  282.             </a>
  283.             <a href="">
  284.                 <span class="iconfont hot"></span>
  285.                 <span>我的</span>
  286.             </a>
  287.         </footer>
  288.   </body>
  289. </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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！