search

博客列表 >仿php中文网移动端布局实战

仿php中文网移动端布局实战

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年04月11日 15:32:481020浏览

仿PHP中文网移动端实战

PHP中文网移动网页分析


1、首先分析网页，把网页简单分解，把整体当成一个盒子，分解部分当成子项目，来进行排版
2、把每个部分当成一个盒子，逐级分解，每一部分利用flex单行盒子进行布局
3、每个盒子的布局中占的比例的单位计算，以防止盒子撑大；
4、php中文网头部和底部属于固定不动的可以用position:fixed布局

php中文网移动端代码实现：

  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.       }
  14.       a {
  15.         text-decoration: none;
  16.       }
  17.       html {
  18.         width: 100vw;
  19.         height: 100vh;
  20.         font-size: 14px;
  21.         background-color: #e6e6e6;
  22.       }
  23.       ul {
  24.         list-style: none;
  25.       }
  26.       a {
  27.         text-decoration: none;
  28.         font-size: 14px;
  29.         color: darkgrey;
  30.       }
  31.       h2 {
  32.         color: darkgrey;
  33.         margin-left: 10px;
  34.         margin-top: 10px;
  35.         font-weight: 500;
  36.         font-size: 20px;
  37.       }
  38.       /* 头部样式 */
  39.       header {
  40.         width: 100vw;
  41.         height: 5vh;
  42.         display: flex;
  43.         background-color: #2d2d2d;
  44.         justify-content: space-between;
  45.         align-items: center;
  46.         padding: 0 1vw;
  47.         box-sizing: border-box;
  48.         color: darkgray;
  49.         position: fixed;
  50.         top:0;
  51.       }
  52.       header > a > img {
  53.         width: 30px;
  54.         vertical-align: middle;
  55.         border-radius: 50%;
  56.       }
  57.       header > a:last-of-type > img {
  58.         width: 28vw;
  59.         height: 7vh;
  60.       }
  61.       header > button {
  62.         width: 30px;
  63.         height: 30px;
  64.         border: none;
  65.         background-color: rgba(0, 0, 0, 0);
  66.         color: darkgray;
  67.       }
  68.       .container{
  69.         padding-bottom:7vh ;
  70.       }
  71.       /* 轮播图 */
  72.       .container > .banner img {
  73.         width: 100vw;
  74.         height: 24vh;
  75.         vertical-align: middle;
  76.         /* margin: 0 auto;   */
  77.       }
  78.       nav {
  79.         width: 100vw;
  80.         height: 25vh;
  81.         display: flex;
  82.         flex-flow: row wrap;
  83.         margin: auto;
  84.         padding: 5px;
  85.         justify-content: space-around;
  86.         align-items: center;
  87.         box-sizing: border-box;
  88.         background-color: #fff;
  89.       }
  90.       nav img {
  91.         width: 40px;
  92.       }
  93.       nav > div {
  94.         width: 25%;
  95.         display: flex;
  96.         flex-flow: column nowrap;
  97.         align-items: center;
  98.       }
  99.       /* 推荐课程 */
  100.       .container > .hot-courser {
  101.         margin: 5px auto;
  102.         display: flex;
  103.         flex-flow: column nowrap;
  104.         padding-top: 5px;
  105.         box-sizing: border-box;
  106.         background-color: #fff;
  107.       }
  108.       .container > .hot-courser > .one {
  109.         margin: 0 10px;
  110.         display: flex;
  111.         flex-flow: row nowrap;
  112.         justify-content: space-between;
  113.         /* background-color: #fff; */
  114.       }
  115.       .container > .hot-courser > .one img {
  116.         width: 45vw;
  117.         height: 15vh;
  118.         vertical-align: middle;
  119.       }
  120.       .container > .hot-courser > .two {
  121.         display: flex;
  122.         margin: 5px 10px;
  123.         flex-flow: row nowrap;
  124.         justify-content: flex-start;
  125.         background-color: #fff;
  126.       }
  127.       .container > .hot-courser > .two img {
  128.         width: 30vw;
  129.         height: 20vw;
  130.         vertical-align: middle;
  131.       }
  132.       .container > .hot-courser > .two > div {
  133.         padding: 5px;
  134.         display: flex;
  135.         flex-flow: column nowrap;
  136.         justify-content: space-between;
  137.       }
  138.       .container > .hot-courser > .two > div > div > span:first-of-type {
  139.         background-color: #808080;
  140.         border-radius: 25%;
  141.         font-size: 1rem;
  142.         color: lightgray;
  143.       }
  144.       .container > .hot-courser > .two > div > div > span:last-of-type {
  145.         color: darkgrey;
  146.         margin: 5px;
  147.       }
  148.       /* 最新更新样式 */
  149.       .container > .new-courser {
  150.         width: 100vw;
  151.         /* margin: 5px 10px; */
  152.       }
  153.       .container > .new-courser > .courser {
  154.         width: 100vw;
  155.         height: 20vh;
  156.         margin-top: 10px;
  157.         display: flex;
  158.         flex-flow: row nowrap;
  159.         background-color: #fff;
  160.         justify-content: space-between;
  161.         align-items: center;
  162.       }
  163.       .container > .new-courser img {
  164.         width: 30vw;
  165.         height: 120px;
  166.         vertical-align: middle;
  167.         margin: 5px 10px;
  168.         align-self: flex-end;
  169.       }
  170.       .container > .new-courser > .courser > div {
  171.         width: 70vw;
  172.         height: 120px;
  173.         display: flex;
  174.         flex-flow: column nowrap;
  175.         justify-content: space-between;
  176.       }
  177.       .container > .new-courser > .courser > div > :first-child {
  178.         font-size: 1.2rem;
  179.         color: #454545;
  180.         font-weight: bold;
  181.       }
  182.       .container > .new-courser > .courser > div > :last-child {
  183.         display: flex;
  184.         justify-content: space-between;
  185.         margin-right: 10px;
  186.         color: darkgray;
  187.       }
  188.       .container > .new-courser > .courser > div > :last-child > :first-child {
  189.         background-color: #6e6e6e;
  190.         border-radius: 25%;
  191.         color: lightgray;
  192.       }
  193.       /* 最新文章 */
  194.       .container > .articles > .article {
  195.         margin: 8px 10px;
  196.         display: flex;
  197.         flex-flow: row nowrap;
  198.         background-color: #fff;
  199.         box-shadow: 0 0 8px #777777;
  200.         justify-content: space-between;
  201.         padding: 10px 5px;
  202.       }
  203.       .container > .articles > .article img {
  204.         width: 40vw;
  205.         height: 80px;
  206.         vertical-align: middle;
  207.       }
  208.       .container > .articles > .article > div {
  209.         height: 80px;
  210.         display: flex;
  211.         flex-flow: column nowrap;
  212.         justify-content: space-evenly;
  213.       }
  214.       .container > .articles > .article > div > p {
  215.         font-size: 1.1rem;
  216.         font-weight: 550;
  217.         color:rgb(107, 103, 103)
  218.       }
  219.       footer {
  220.         width: 100vw;
  221.         height: 6vh;
  222.         background-color: rgb(90, 89, 89);
  223.         display: flex;
  224.         justify-content: space-evenly;
  225.         align-items: center;
  226.         box-sizing: border-box;
  227.         position: fixed;
  228.         bottom: 0;
  229.       }
  230.       footer>div{
  231.         display: flex;
  232.         flex-flow:column nowrap;
  233.         color:lightgray;
  234.         align-items: center;
  235.         font-size: 0.8rem;
  236.         margin: 1vh 0;
  237.       }
  238.       footer>div>:first-of-type{
  239.         font-size: 2rem;
  240.       }
  241.       footer>div:hover{
  242.         color:lightsalmon;
  243.       }
  244.     </style>
  245.   </head>
  246.   <body>
  247.     <!-- 头部 -->
  248.     <header>
  249.       <a href=""><img src="images/user_avatar.jpg" alt="" /></a>
  250.       <a href=""><img src="images/logo.png" alt="" /></a>
  251.       <button
  252.         class="iconfont"
  253.         style="font-size: 2.4rem; text-align: center; line-height: 30px;"
  254.       >
  256.       </button>
  257.     </header>
  258.     <!-- 主体 -->
  259.     <div class="container">
  260.       <!-- 轮播图 -->
  261.       <div class="banner">
  262.         <a href=""><img src="images/banner.jpg" alt="" /></a>
  263.       </div>
  264.       <!-- 导航区 -->
  265.       <nav>
  266.         <div>
  267.           <a href=""><img src="images/html.png" alt="" /></a>
  268.           <a href="">HTML/CSS</a>
  269.         </div>
  270.         <div>
  271.           <a href=""><img src="images/JavaScript.png" alt="" /></a>
  272.           <a href="">HTML/CSS</a>
  273.         </div>
  274.         <div>
  275.           <a href=""><img src="images/sql.png" alt="" /></a>
  276.           <a href="">HTML/CSS</a>
  277.         </div>
  278.         <div>
  279.           <a href=""><img src="images/app.png" alt="" /></a>
  280.           <a href="">HTML/CSS</a>
  281.         </div>
  282.         <div>
  283.           <a href=""><img src="images/code.png" alt="" /></a>
  284.           <a href="">HTML/CSS</a>
  285.         </div>
  286.         <div>
  287.           <a href=""><img src="images/live.png" alt="" /></a>
  288.           <a href="">HTML/CSS</a>
  289.         </div>
  290.         <div>
  291.           <a href=""><img src="images/manual.png" alt="" /></a>
  292.           <a href="">HTML/CSS</a>
  293.         </div>
  294.         <div>
  295.           <a href=""><img src="images/tool2.png" alt="" /></a>
  296.           <a href="">HTML/CSS</a>
  297.         </div>
  298.       </nav>
  299.       <!--  推荐课程 -->
  300.       <h2>推荐课程</h2>
  301.       <div class="hot-courser">
  302.         <div class="one">
  303.           <a href=""><img src="images/5d242759adb88970.jpg" alt="" /></a>
  304.           <a href=""><img src="images/5d2941e265889366.jpg" alt="" /></a>
  305.         </div>
  306.         <div class="two">
  307.           <a href=""><img src="images/5e0d6387e45cc764.png" alt="" /></a>
  308.           <div>
  309.             <p>CI框架30分钟极速入门</p>
  310.             <div><span>中级</span><span>61221次播放</span></div>
  311.           </div>
  312.         </div>
  313.         <div class="two">
  314.           <a href=""><img src="images/5e0d6387e45cc764.png" alt="" /></a>
  315.           <div>
  316.             <p>CI框架30分钟极速入门</p>
  317.             <div><span>中级</span><span>61221次播放</span></div>
  318.           </div>
  319.         </div>
  320.         <div class="two">
  321.           <a href=""><img src="images/5e0d6387e45cc764.png" alt="" /></a>
  322.           <div>
  323.             <p>CI框架30分钟极速入门</p>
  324.             <div><span>中级</span><span>61221次播放</span></div>
  325.           </div>
  326.         </div>
  327.       </div>
  328.       <!-- 最新更新 -->
  329.       <h2>最新更新</h2>
  330.       <div class="new-courser">
  331.         <div class="courser">
  332.           <a href=""><img src="images/5e911ce209457935.jpg" alt="" /></a>
  333.           <div>
  334.             <a href=""><span>2019python自学视频</span></a>
  335.             <p>
  336.               本课程适合想从零开始学习 Python
  337.               编程语言的开发人员。由浅入深的带你进入
  338.             </p>
  339.             <div><span>初级</span><span>36167次播放</span></div>
  340.           </div>
  341.         </div>
  342.         <div class="courser">
  343.           <a href=""><img src="images/5e911ce209457935.jpg" alt="" /></a>
  344.           <div>
  345.             <a href=""><span>2019python自学视频</span></a>
  346.             <p>
  347.               本课程适合想从零开始学习 Python
  348.               编程语言的开发人员。由浅入深的带你进入
  349.             </p>
  350.             <div><span>初级</span><span>36167次播放</span></div>
  351.           </div>
  352.         </div>
  353.         <div class="courser">
  354.           <a href=""><img src="images/5e911ce209457935.jpg" alt="" /></a>
  355.           <div>
  356.             <a href=""><span>2019python自学视频</span></a>
  357.             <p>
  358.               本课程适合想从零开始学习 Python
  359.               编程语言的开发人员。由浅入深的带你进入
  360.             </p>
  361.             <div><span>初级</span><span>36167次播放</span></div>
  362.           </div>
  363.         </div>
  364.         <div class="courser">
  365.           <a href=""><img src="images/5e911ce209457935.jpg" alt="" /></a>
  366.           <div>
  367.             <a href=""><span>2019python自学视频</span></a>
  368.             <p>
  369.               本课程适合想从零开始学习 Python
  370.               编程语言的开发人员。由浅入深的带你进入
  371.             </p>
  372.             <div><span>初级</span><span>36167次播放</span></div>
  373.           </div>
  374.         </div>
  375.         <div class="courser">
  376.           <a href=""><img src="images/5e911ce209457935.jpg" alt="" /></a>
  377.           <div>
  378.             <a href=""><span>2019python自学视频</span></a>
  379.             <p>
  380.               本课程适合想从零开始学习 Python
  381.               编程语言的开发人员。由浅入深的带你进入
  382.             </p>
  383.             <div><span>初级</span><span>36167次播放</span></div>
  384.           </div>
  385.         </div>
  386.       </div>
  387.       <!-- 最新文章 -->
  388.       <h2>最新文章</h2>
  389.       <div class="articles">
  390.         <div class="article">
  391.           <div>
  392.             <p>php操控Excel的方法和函数</p>
  393.             <span>发布时间：<time>2020-04-12</time></span>
  394.           </div>
  395.           <a href=""><img src="images/5e0d6387e45cc764.png" alt="" /></a>
  396.         </div>
  397.         <div class="article">
  398.             <div>
  399.               <p>php操控Excel的方法和函数</p>
  400.               <span>发布时间：<time>2020-04-12</time></span>
  401.             </div>
  402.             <a href=""><img src="images/5e0d6387e45cc764.png" alt="" /></a>
  403.           </div>
  404.           <div class="article">
  405.           <div>
  406.             <p>php操控Excel的方法和函数</p>
  407.             <span>发布时间：<time>2020-04-12</time></span>
  408.           </div>
  409.           <a href=""><img src="images/5e0d6387e45cc764.png" alt="" /></a>
  410.         </div>
  411.       </div>
  413.     </div>
  415.     </div>
  416.     <!-- 底部 -->
  417.     <footer>
  418.         <div>
  419.             <span class="iconfont"></span>
  420.             <span>首页</span>
  421.         </div>
  422.         <div>
  423.             <span class="iconfont"></span>
  424.             <span>视频</span>
  425.         </div>
  426.         <div>
  427.             <span class="iconfont"></span>
  428.             <span>社区</span>
  429.         </div>
  430.         <div>
  431.             <span class="iconfont"></span>
  432.             <span>我的</span>
  433.         </div>
  434.     </footer>
  435.   </body>
  436. </html>

php中文网移动端代码效果展示：

服务器云展示（移动端）：http://www.zhongyequan.com/php/php.html
截屏效果展示：

实战总结：

1、在实战过程中，每个元素大小单位的设置，需要考虑页面的的需求去设置（vh|vw % 以及px等单位灵活运用 ）
2、在设置position:fixed固定位置市，相对应的元素（盒子）必须设置宽度和高度；
3、在网页中链接大量存在，所以a标签要经常使用
4、在实战中，网页公用部分css代码的公用，以及父代元素对子代元素的影响要考虑进去，避免几个子代元素的重复设置
5、考虑到底部的固定后对主体的遮挡，可以适当设置主体底部的内边距和外边距避免遮挡

上一条：html:Flex布局：容器属性和项目属性（4月9日）下一条：PHP小技巧分享（21个）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多