简体中文（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月13日 19:57:50605浏览

使用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>

上一条：PHP学习 并不容易下一条：html:FLEX实战，仿php中文网手机端网站（0410）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多