search

博客列表 >CSS应用实战之仿PHP中文网移动端

CSS应用实战之仿PHP中文网移动端

马晓宁
马晓宁原创
2020年04月14日 09:26:35569浏览

仿ＰＨＰ中文网移动端

代码

  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="static/css/font-icon.css" />
  7.     <title>仿PHP中文网移动端</title>
  8.     <style>
  9.        * {
  10.       margin: 0;
  11.       padding: 0;
  12.        }
  13.       a {
  14.         text-decoration: none;
  15.       }
  16.       html {
  17.         width: 100vw;
  18.         height: 100vh;
  19.         font-size: 14px;
  20.         background-color: lightgray;
  21.       }
  22.       /* 头部样式 */
  23.       header {
  24.         width: 100vw;
  25.         height: 5vh;
  26.         display: flex;
  27.         background-color: #3d3737;
  28.         justify-content: space-between;
  29.         align-items: center;
  30.         padding: 0 1vw;
  31.         box-sizing: border-box;
  32.         color: darkgray;
  33.         position: fixed;
  34.         top:0;
  35.       }
  36.       header > a > img {
  37.         width: 30px;
  38.         vertical-align: middle;
  39.         border-radius: 50%;
  40.       }
  41.       header > a:last-of-type > img {
  42.         width: 28vw;
  43.         height: 7vh;
  44.       }
  45.       /* 轮播图 */
  46.       .banner img {
  47.         width: 100vw;
  48.         height: 35vh;
  49.         vertical-align: middle;
  50.       }
  51.       nav {
  52.         width: 100vw;
  53.         height: 25vh;
  54.         display: flex;
  55.         flex-flow: row wrap;
  56.         margin: auto;
  57.         padding: 5px;
  58.         justify-content: space-around;
  59.         align-items: center;
  60.         box-sizing: border-box;
  61.         background-color: #fff;
  62.       }
  63.       nav img {
  64.         width: 40px;
  65.       }
  66.       nav > div {
  67.         width: 25%;
  68.         display: flex;
  69.         flex-flow: column nowrap;
  70.         align-items: center;
  71.       }
  72.       /* 推荐课程 */
  73.       .hot-courser {
  74.         margin: 5px auto;
  75.         display: flex;
  76.         flex-flow: column nowrap;
  77.         padding-top: 5px;
  78.         box-sizing: border-box;
  79.         background-color: #fff;
  80.       }
  81.       .hot-courser > .one {
  82.         margin: 0 10px;
  83.         display: flex;
  84.         flex-flow: row nowrap;
  85.         justify-content: space-between;
  86.       }
  87.       .hot-courser > .one img {
  88.         width: 45vw;
  89.         height: 15vh;
  90.         vertical-align: middle;
  91.       }
  92.       .hot-courser > .two {
  93.         display: flex;
  94.         margin: 5px 10px;
  95.         flex-flow: row nowrap;
  96.         justify-content: flex-start;
  97.         background-color: #fff;
  98.       }
  99.       .hot-courser > .two img {
  100.         width: 30vw;
  101.         height: 20vw;
  102.         vertical-align: middle;
  103.       }
  104.       .hot-courser > .two > div {
  105.         padding: 5px;
  106.         display: flex;
  107.         flex-flow: column nowrap;
  108.         justify-content: space-between;
  109.       }
  110.       .hot-courser > .two > div > div > span:first-of-type {
  111.         border-radius: 25%;
  112.         font-size: 1rem;
  113.         color: lightgray;
  114.       }
  115.       .hot-courser > .two > div > div > span:last-of-type {
  116.         color: darkgrey;
  117.         margin: 5px;
  118.       }
  119.       .new-courser {
  120.         width: 100vw;
  121.       }
  122.       .new-courser > .courser {
  123.         width: 100vw;
  124.         height: 20vh;
  125.         margin-top: 10px;
  126.         display: flex;
  127.         flex-flow: row nowrap;
  128.         background-color: #fff;
  129.         justify-content: space-between;
  130.         align-items: center;
  131.       }
  132.       .new-courser img {
  133.         width: 30vw;
  134.         height: 120px;
  135.         vertical-align: middle;
  136.         margin: 5px 10px;
  137.         align-self: flex-end;
  138.       }
  139.       .new-courser > .courser > div {
  140.         width: 70vw;
  141.         height: 120px;
  142.         display: flex;
  143.         flex-flow: column nowrap;
  144.         justify-content: space-between;
  145.       }
  146.       .new-courser > .courser > div > :first-child {
  147.         font-size: 1.2rem;
  148.         color: #473838;
  149.         font-weight: bold;
  150.       }
  151.        .new-courser > .courser > div > :last-child {
  152.         display: flex;
  153.         justify-content: space-between;
  154.         margin-right: 10px;
  155.         color: darkgray;
  156.       }
  157.       .new-courser > .courser > div > :last-child > :first-child {
  158.         background-color: #776e6e;
  159.         border-radius: 25%;
  160.         color: lightgray;
  161.       }
  162.       /* 最新文章 */
  163.       .articles {
  164.         width: 100vw;
  165.       }
  166.        .articles > .article {
  167.         width: 100vw;
  168.         height: 10vh;
  169.         margin-top: 5px;
  170.         display: flex;
  171.         flex-flow: row nowrap;
  172.         background-color: #fff;
  173.         justify-content: space-between;
  174.         padding: 10px 5px;
  175.       }
  176.       .articles > .article img {
  177.         width: 40vw;
  178.         height: 80px;
  179.         vertical-align: middle;
  180.       }
  181.        .articles > .article > div {
  182.         height: 80px;
  183.         display: flex;
  184.         flex-flow: column nowrap;
  185.         justify-content: space-evenly;
  186.       }
  187.        .articles > .article > div > p {
  188.         font-size: 1.1rem;
  189.         font-weight: 500;
  190.         color:#00000f
  191.       }
  192.        .new-unit2 > a {
  193.         width: 100vw;
  194.         height: 35px;
  195.         padding: 0 10px;
  196.         margin-bottom: 15px;
  197.         box-sizing: border-box;
  198.         background-color: white;
  199.         display: flex;
  200.         flex-flow: row nowrap;
  201.         align-items: center;
  202.         justify-content: center;
  203.         }
  205.       /* 最新博文*/
  206.       .course1 >.blog {
  207.        width: 100vw;
  208.        height: 40px;
  209.        padding: 0 10px;
  210.        margin-bottom: 15px;
  211.        box-sizing: border-box;
  212.        background-color: white;
  213.        display: flex;
  214.        flex-flow: row nowrap;
  215.        align-items: center;
  216.        justify-content: space-between;
  217.       }
  218.       .course1 > .blog a:first-of-type {
  219.        width: 70vw;
  220.       }
  221.       .course1 > .blog a {
  222.       font-size: 1.2rem;
  223.       color: black;
  224.       font-weight: 500;
  225.       white-space: nowrap;
  226.       text-overflow: ellipsis;
  227.       overflow: hidden;
  228.       }
  229.       .mony1 > a {
  230.         width: 100vw;
  231.         height: 35px;
  232.         padding: 0 10px;
  233.         margin-bottom: 15px;
  234.         box-sizing: border-box;
  235.         background-color: white;
  236.         display: flex;
  237.         flex-flow: row nowrap;
  238.         align-items: center;
  239.         justify-content: center;
  240.         }
  241.       body > footer {
  242.         color: rgb(22, 3, 110);
  243.         background-color: #068d3e;
  244.         border-top: 1px solid #ccc;
  245.         height: 60px;
  246.         position: fixed;
  247.         bottom: 0;
  248.         width: 100vw;
  249.         display: flex;
  250.         justify-content: space-around;
  251.       }
  252.       body > footer > a {
  253.         margin-top: 10px;
  254.         font-size: 1rem;
  255.         display: flex;
  256.         flex-flow: column nowrap;
  257.         align-items: center;
  258.       }
  259.       body > footer > a > span:first-of-type {
  260.         font-size: 1.8rem;
  261.       }
  262.     </style>
  263.   </head>
  264.   <body>
  265.     <!-- 页眉 -->
  266.     <header>
  267.       <a href=""><img src="static/images/user.jpg" alt="" /></a>
  268.       <a href=""><img src="static/images/logo.png" alt="" /></a>
  269.       <span class="iconfont"></span>
  270.     </header>
  271.      <!-- 主体 -->
  272.      <div class="container">
  273.       <!-- 轮播图 -->
  274.       <div class="banner">
  275.         <a href=""><img src="static/images/11.png" alt="" /></a>
  276.       </div>
  277.       <!-- 导航区 -->
  278.       <nav>
  279.         <div>
  280.           <a href=""><img src="static/images/html.png" alt="" /></a>
  281.           <a href="">HTML/CSS</a>
  282.         </div>
  283.         <div>
  284.           <a href=""><img src="static/images/JavaScript.png" alt="" /></a>
  285.           <a href="">JavaScript</a>
  286.         </div>
  287.         <div>
  288.           <a href=""><img src="static/images/code.png" alt="" /></a>
  289.           <a href="">服务端</a>
  290.         </div>
  291.         <div>
  292.           <a href=""><img src="static/images/sql.png" alt="" /></a>
  293.           <a href="">数据库</a>
  294.         </div>
  295.         <div>
  296.           <a href=""><img src="static/images/app.png" alt="" /></a>
  297.           <a href="">移动端</a>
  298.         </div>
  299.         <div>
  300.           <a href=""><img src="static/images/tool2.png" alt="" /></a>
  301.           <a href="">工具</a>
  302.         </div>
  303.         <div>
  304.           <a href=""><img src="static/images/manual.png" alt="" /></a>
  305.           <a href="">手册</a>
  306.         </div>
  307.         <div>
  308.           <a href=""><img src="static/images/live.png" alt="" /></a>
  309.           <a href="">直播</a>
  310.         </div>
  311.       </nav>
  312.       <!--  推荐课程 -->
  313.       <h2>推荐课程</h2>
  314.       <div class="hot-courser">
  315.         <div class="one">
  316.           <a href=""><img src="static/images/1.jpg" alt="" /></a>
  317.           <a href=""><img src="static/images/2.jpg" alt="" /></a>
  318.         </div>
  319.         <div class="two">
  320.           <a href=""><img src="static/images/6.png" alt="" /></a>
  321.           <div>
  322.             <p>CI框架30分钟极速入门</p>
  323.             <div><span>中级</span><span>12216次播放</span></div>
  324.           </div>
  325.         </div>
  326.         <div class="two">
  327.           <a href=""><img src="static/images/7.png" alt="" /></a>
  328.           <div>
  329.             <p>CI框架30分钟极速入门</p>
  330.             <div><span>中级</span><span>80000次播放</span></div>
  331.           </div>
  332.         </div>
  333.         <div class="two">
  334.           <a href=""><img src="static/images/1.jpg" alt="" /></a>
  335.           <div>
  336.             <p>CI框架30分钟极速入门</p>
  337.             <div><span>中级</span><span>13221次播放</span></div>
  338.           </div>
  339.         </div>
  340.       </div>
  341.       <!-- 最新更新 -->
  342.       <h2>最新更新</h2>
  343.       <div class="new-courser">
  344.         <div class="courser">
  345.           <a href=""><img src="static/images/5.jpg" alt="" /></a>
  346.           <div>
  347.             <a href=""><span>2019python自学视频</span></a>
  348.             <p>
  349.               本课程适合想从零开始学习 Python
  350.               编程语言的开发人员。由浅入深的带你进入
  351.             </p>
  352.             <div><span>初级</span><span>3285次播放</span></div>
  353.           </div>
  354.         </div>
  355.         <div class="courser">
  356.           <a href=""><img src="static/images/12.png" alt="" /></a>
  357.           <div>
  358.             <a href=""><span>PHP开发免费公益直播课</span></a>
  359.             <p>
  360.               主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00 
  361.               主题：如何高效的学习一门新技术？
  362.             </p>
  363.             <div><span>初级</span><span>34444次播放</span></div>
  364.           </div>
  365.         </div>
  366.         <div class="courser">
  367.           <a href=""><img src="static/images/12.png" alt="" /></a>
  368.           <div>
  369.             <a href=""><span>PHP开发免费公益直播课</span></a>
  370.             <p>
  371.               主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00 
  372.               主题：如何高效的学习一门新技术？
  373.             </p>
  374.             <div><span>初级</span><span>36167次播放</span></div>
  375.           </div>
  376.         </div>
  377.         <div class="courser">
  378.           <a href=""><img src="static/images/12.png" alt="" /></a>
  379.           <div>
  380.             <a href=""><span>PHP开发免费公益直播课</span></a>
  381.             <p>
  382.               主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00 
  383.               主题：如何高效的学习一门新技术？
  384.             </p>
  385.             <div><span>初级</span><span>48997次播放</span></div>
  386.           </div>
  387.         </div>
  388.         <div class="courser">
  389.           <a href=""><img src="static/images/12.png" alt="" /></a>
  390.           <div>
  391.             <a href=""><span>PHP开发免费公益直播课</span></a>
  392.             <p>
  393.               主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00 
  394.               主题：如何高效的学习一门新技术？
  395.             </p>
  396.             <div><span>初级</span><span>66167次播放</span></div>
  397.           </div>
  398.         </div>
  399.       </div>
  400.       <!-- 最新文章 -->
  401.       <h2>最新文章</h2>
  402.       <div class="articles">
  403.         <div class="article">
  404.           <div>
  405.             <p>为什么我的电脑只有C盘</p>
  406.             <span>发布时间：<time>2020-04-10</time></span>
  407.           </div>
  408.           <a href=""><img src="static/images/13.jpg" alt="" /></a>
  409.         </div>
  410.         <div class="article">
  411.             <div>
  412.               <p>为什么我的电脑只有C盘</p>
  413.               <span>发布时间：<time>2020-04-1</time></span>
  414.             </div>
  415.             <a href=""><img src="static/images/13.jpg" alt="" /></a>
  416.           </div>
  417.           <div class="article">
  418.           <div>
  419.             <p>为什么我的电脑只有C盘</p>
  420.             <span>发布时间：<time>2020-03-12</time></span>
  421.           </div>
  422.           <a href=""><img src="static/images/13.jpg" alt="" /></a>
  423.         </div>
  424.       </div>
  425.     </div>
  426.     </div>
  428.     <div class="bgcolor">
  429.       <h2>最新博文</h2>
  430.       <div class="course1">
  431.         <div class="blog">
  432.           <a href="">thinkphp5.6源码阅读</a>
  433.           <a href="">2020-4-11</a>
  434.         </div>
  435.         <div class="blog">
  436.           <a href="">thinkphp5.6源码阅读</a>
  437.           <a href="">2020-4-11</a>
  438.         </div>
  439.         <div class="blog">
  440.           <a href="">thinkphp5.6源码阅读</a>
  441.           <a href="">2020-4-11</a>
  442.         </div>
  443.         <div class="blog">
  444.           <a href="">thinkphp5.6源码阅读</a>
  445.           <a href="">2020-4-11</a>
  446.         </div>
  447.         <div class="blog">
  448.           <a href="">thinkphp5.6源码阅读</a>
  449.           <a href="">2020-4-11</a>
  450.         </div>
  451.         <div class="mony">
  452.           <div class="mony1">
  453.             <a href="">更多内容</a>
  454.           </div>
  455.         </div>
  456.       </div>
  457.     </div>
  458.     <div class="mony">
  459.       <div class="mony1">
  460.         <a href="">更多内容</a>
  461.       </div>
  462.     </div>
  463.     <!-- 底部 -->
  464.     <footer>
  465.         <a href="">
  466.             <span class="iconfont"></span>
  467.             <span>首页</span>
  468.         </a>
  469.         <a href="">
  470.             <span class="iconfont"></span>
  471.             <span>视频</span>
  472.         </a>
  473.         <a href="">
  474.             <span class="iconfont"></span>
  475.             <span>设置</span>
  476.         </a>
  477.         <a href="">
  478.             <span class="iconfont"></span>
  479.             <span>我的</span>
  480.         </a>
  481.     </footer>
  482.   </body>
  483. </html>

效果图

总结：

最初的时候，我很茫然，因为刚接触陌生的东西心里会很害怕跟不上老师的进程。刚开始几节课，老师讲得比较基础，还能跟得上，渐渐的老师授课的进程开始加速，有些跟不上了，需要下课后自己再巩固。这次老师布置的第一个综合任务，要求做一个仿PHP中文网移动端的界面。这次也花了整天近三天时间，还是知识了解运用的不够，毕竟是第一次接触，但收获也挺多的，还需要自己多加强练习才能很好的掌握。

上一条：新浪短链接生成，短网址接口的获取方案下一条：2020年4月6日作业--CSS选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多