search

博客列表 >实战模仿PHP手机版-前端篇

实战模仿PHP手机版-前端篇

路亚
路亚原创
2020年04月13日 15:45:53607浏览

我的网址：http://www.uc5566.com:90/410/php.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" />
  7.     <link rel="stylesheet" href="static/css/font-icon.css" />
  8.     <link rel="stylesheet" href="static/css/styly1.css" />
  9.   </head>
  10.   <body>
  11.     <!-- 页眉 -->
  12.     <header>
  13.       <a href=""><img src="static/images/user.jpg" alt="" /></a>
  14.       <img src="static/images/logo.png" alt="" />
  15.       <span class="iconfont">&#xe61f;</span>
  16.     </header>
  17.     <!-- 轮播图 -->
  18.     <div class="slider">
  19.       <img src="static/images/11.png" alt="" />
  20.     </div>
  21.     <!-- 主导航 -->
  22.     <nav>
  23.       <div>
  24.         <a href=""><img src="static/images/html.png" alt="" /></a>
  25.         <a href="">HTML/CSS</a>
  26.       </div>
  27.       <div>
  28.         <a href=""
  29.           ><img src="static/images/JavaScript.png" alt=""
  30.         /></a>
  31.         <a href="">JavaScript</a>
  32.       </div>
  33.       <div>
  34.         <a href=""><img src="static/images/code.png" alt="" /></a>
  35.         <a href="">服务端</a>
  36.       </div>
  37.       <div>
  38.         <a href=""><img src="static/images/sql.png" alt="" /></a>
  39.         <a href="">数据库</a>
  40.       </div>
  41.       <div>
  42.         <a href=""><img src="static/images/app.png" alt="" /></a>
  43.         <a href="">移动端</a>
  44.       </div>
  45.       <div>
  46.         <a href=""><img src="static/images/manual.png" alt="" /></a>
  47.         <a href="">手册</a>
  48.       </div>
  49.       <div>
  50.         <a href=""><img src="static/images/tool2.png" alt="" /></a>
  51.         <a href="">工具</a>
  52.       </div>
  53.       <div>
  54.         <a href=""><img src="static/images/live.png" alt="" /></a>
  55.         <a href="">直播</a>
  56.       </div>
  57.     </nav>
  58.     <!-- 推荐课程 -->
  59.     <h2 class="title">推荐课程</h2>
  60.     <div class="course">
  61.       <a href=""><img src="static/images/tjkc.jpg" alt="" /></a>
  62.       <a href=""><img src="static/images/tjkc.jpg" alt="" /></a>
  63.     </div>
  64.     <div class="list-course">
  65.       <div class="list-course2">
  66.         <a href=""><img src="static/images/rm.jpg" alt="" /></a>
  67.       </div>
  68.       <div class="coursename">
  69.         <a href="">CI框架30分钟极速入门</a>
  70.         <div class="span-wenzhang">
  71.           <span>初级</span>
  72.           <span>310032次播放</span>
  73.         </div>
  74.       </div>
  75.     </div>
  76.     <div class="list-courset">
  77.       <div class="list-course2t">
  78.         <a href=""><img src="static/images/rm.jpg" alt="" /></a>
  79.       </div>
  80.       <div class="coursenamet">
  81.         <a href="">2018前端入门——HTML5</a>
  82.         <div class="span-wenzhang">
  83.           <span>初级</span>
  84.           <span>31550032次播放</span>
  85.         </div>
  86.       </div>
  87.     </div>
  89.     <!-- 最新课程################# -->
  90.     <h2 class="title">最新课程</h2>
  92.     <div class="list-course">
  93.       <div class="list-course2">
  94.         <a href=""
  95.           ><img
  96.             src="https://img.php.cn/upload/course/000/000/015/5e0d6387e45cc764.png"
  97.             alt=""
  98.         /></a>
  99.       </div>
  100.       <div class="coursename">
  101.         <a href="">PHP快速操控Excel之PhpSpreadsheet</a>
  102.         <div class="span-wenzhang">
  103.           <!-- <a style="font-size: 12px;" href=""
  104.             >老的PHPExcel已经停止更新了，目前最新的是使用...</a
  105.           ><br /> -->
  106.           <span>初级</span>
  107.           <span>310032次播放</span>
  108.         </div>
  109.       </div>
  110.     </div>
  111.     <div class="list-courset">
  112.       <div class="list-course2t">
  113.         <a href=""
  114.           ><img
  115.             src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg"
  116.             alt=""
  117.         /></a>
  118.       </div>
  119.       <div class="coursenamet">
  120.         <a href="">2018前端入门——HTML5</a>
  121.         <div class="span-wenzhang">
  122.           <!-- <a style="font-size: 12px;" href=""
  123.             >老的PHPExcel已经停止更新了，目前最新的是使用...</a
  124.           ><br /> -->
  125.           <span>初级</span>
  126.           <span>31550032次播放</span>
  127.         </div>
  128.       </div>
  129.     </div>
  130.     <div class="list-course">
  131.       <div class="list-course2">
  132.         <a href=""
  133.           ><img
  134.             src="https://img.php.cn/upload/course/000/000/015/5da7e9b7895ed229.png"
  135.             alt=""
  136.         /></a>
  137.       </div>
  138.       <div class="coursename">
  139.         <a href="">PHP快速操控Excel之PhpSpreadsheet</a>
  140.         <div class="span-wenzhang">
  141.           <!-- <a style="font-size: 12px;" href=""
  142.             >老的PHPExcel已经停止更新了，目前最新的是使用...</a
  143.           ><br /> -->
  144.           <span>初级</span>
  145.           <span>310032次播放</span>
  146.         </div>
  147.       </div>
  148.     </div>
  149.     <div class="list-courset">
  150.       <div class="list-course2t">
  151.         <a href=""
  152.           ><img
  153.             src="https://img.php.cn/upload/course/000/000/015/5e0d82773b4fe808.png"
  154.             alt=""
  155.         /></a>
  156.       </div>
  157.       <div class="coursenamet">
  158.         <a href="">2018前端入门——HTML5</a>
  159.         <div class="span-wenzhang">
  160.           <!-- <a style="font-size: 12px;" href=""
  161.             >老的PHPExcel已经停止更新了，目前最新的是使用...</a
  162.           ><br /> -->
  163.           <span>初级</span>
  164.           <span>31550032次播放</span>
  165.         </div>
  166.       </div>
  167.     </div>
  168.     <div class="list-course">
  169.       <div class="list-course2">
  170.         <a href=""
  171.           ><img
  172.             src="https://img.php.cn/upload/course/000/000/014/5da6a50535529903.jpg"
  173.             alt=""
  174.         /></a>
  175.       </div>
  176.       <div class="coursename">
  177.         <a href="">PHP快速操控Excel之PhpSpreadsheet</a>
  178.         <div class="span-wenzhang">
  179.           <!-- <a style="font-size: 12px;" href=""
  180.             >老的PHPExcel已经停止更新了，目前最新的是使用...</a
  181.           ><br /> -->
  182.           <span>初级</span>
  183.           <span>310032次播放</span>
  184.         </div>
  185.       </div>
  186.     </div>
  187.     <div class="list-courset">
  188.       <div class="list-course2t">
  189.         <a href=""
  190.           ><img
  191.             src="https://img.php.cn/upload/course/000/000/015/5da51b8ff1224244.png"
  192.             alt=""
  193.         /></a>
  194.       </div>
  195.       <div class="coursenamet">
  196.         <a href="">2018前端入门——HTML5</a>
  197.         <div class="span-wenzhang">
  198.           <!-- <a style="font-size: 12px;" href=""
  199.             >老的PHPExcel已经停止更新了，目前最新的是使用...</a
  200.           ><br /> -->
  201.           <span>初级</span>
  202.           <span>31550032次播放</span>
  203.         </div>
  204.       </div>
  205.     </div>
  206.     <!-- 最新更新 -->
  208.     <!-- 最新文章 -->
  210.     <h2 class="title">最新文章</h2>
  211.     <div class="list-five">
  212.       <div class="list-six">
  213.         <a href=""
  214.           ><p>THINKPHP5 + BARCODE 生成条形码的方法</p>
  215.           <span>发布时间：</span>
  216.           <span>2020-04-12</span>
  217.         </a>
  218.         <div>
  219.           <a href=""
  220.             ><img
  221.               src="https://img.php.cn/upload/article/000/000/020/5e92b93e1d459556.jpg"
  222.               alt=""
  223.           /></a>
  224.         </div>
  225.       </div>
  226.     </div>
  227.     <div class="list-five">
  228.       <div class="list-six">
  229.         <a href=""
  230.           ><p>THINKPHP5 + BARCODE 生成条形码的方法</p>
  231.           <span>发布时间：</span>
  232.           <span>2020-04-12</span>
  233.         </a>
  234.         <div>
  235.           <a href=""
  236.             ><img
  237.               src="https://img.php.cn/upload/article/000/000/020/5e92b93e1d459556.jpg"
  238.               alt=""
  239.           /></a>
  240.         </div>
  241.       </div>
  242.     </div>
  243.     <div class="list-five">
  244.       <div class="list-six">
  245.         <a href=""
  246.           ><p>THINKPHP5 + BARCODE 生成条形码的方法</p>
  247.           <span>发布时间：</span>
  248.           <span>2020-04-12</span>
  249.         </a>
  250.         <div>
  251.           <a href=""
  252.             ><img
  253.               src="https://img.php.cn/upload/article/000/000/020/5e92b93e1d459556.jpg"
  254.               alt=""
  255.           /></a>
  256.         </div>
  257.       </div>
  258.     </div>
  259.     <div class="list-five">
  260.       <div class="list-six">
  261.         <a href=""
  262.           ><p>THINKPHP5 + BARCODE 生成条形码的方法</p>
  263.           <span>发布时间：2020-04-12</span>
  264.         </a>
  265.         <div>
  266.           <a href=""
  267.             ><img
  268.               src="https://img.php.cn/upload/article/000/000/020/5e92b93e1d459556.jpg"
  269.               alt=""
  270.           /></a>
  271.         </div>
  272.       </div>
  273.     </div>
  274.     <!-- 最新博文 -->
  275.     <h2>最新博文</h2>
  276.     <section>
  277.       <div class="list-bolg">
  278.         <a href=""
  279.           ><p>csss-弹性盒子flex布局</p>
  280.           <p>2020-04-12</p></a
  281.         >
  282.       </div>
  283.       <div class="list-bolg">
  284.         <a href=""
  285.           ><p>csss-弹性盒子flex布局</p>
  286.           <p>2020-04-12</p></a
  287.         >
  288.       </div>
  289.       <div class="list-bolg">
  290.         <a href=""
  291.           ><p>csss-弹性盒子flex布局</p>
  292.           <p>2020-04-12</p></a
  293.         >
  294.       </div>
  295.       <div class="list-bolg">
  296.         <a href=""
  297.           ><p>csss-弹性盒子flex布局</p>
  298.           <p>2020-04-12</p></a
  299.         >
  300.       </div>
  301.       <div class="list-bolg">
  302.         <a href=""
  303.           ><p>csss-弹性盒子flex布局</p>
  304.           <p>2020-04-12</p></a
  305.         >
  306.       </div>
  307.     </section>
  308.     <!-- 最新问答 -->
  309.     <!-- 页脚 -->
  310.     <footer>
  311.         <a href=""><span class="iconfont hot">&#xe60c</span><span>首页</span></a>
  312.         <a href=""><span class="iconfont hot">&#xe60c</span><span>分类</span></a>
  313.         <a href=""><span class="iconfont hot">&#xe60c</span><span>购物车</span></a>
  314.         <a href=""><span class="iconfont hot">&#xe60c</span><span>未登录</span></a>
  315.       </footer>
  316.   </body>
  317. </html>

css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. a {
  6.   text-decoration: none;
  7.   color: lightslategrey;
  8. }
  9. html {
  10.   width: 100vw;
  11.   height: 100vh;
  12.   font-size: 14px;
  13. }
  14. body {
  15.   min-width: 360px;
  16.   background-color: rgb(209, 207, 207);
  17.   display: flex;
  18.   flex-flow: column nowrap;
  19. }
  20. body > header {
  21.   background-color: #333;
  22.   color: white;
  23.   height: 30px;
  25.   display: flex;
  26.   align-items: center;
  27.   justify-content: space-between;
  28. }
  29. body > header > a:first-of-type > img {
  30.   width: 25px;
  31.   vertical-align: middle;
  32.   border-radius: 50%;
  33. }
  34. body > .slider {
  35.   height: 180px;
  36. }
  37. body > .slider img {
  38.   width: 100%;
  39. }
  41. /* 主导航区 */
  42. nav {
  43.   height: 200px;
  44.   margin-top: -30px;
  45.   background-color: #ffffff;
  46.   display: flex;
  47.   flex-flow: row wrap;
  48. }
  49. nav > div {
  50.   margin-top: 10px;
  51.   width: 25vw;
  52.   display: flex;
  53.   flex-flow: column nowrap;
  54.   align-items: center;
  55. }
  57. nav > div > a {
  58.   text-align: center;
  59. }
  60. nav > div img {
  61.   width: 50%;
  62. }
  63. .title {
  64.   margin: 10px 15px;
  65.   color: #676767;
  66. }
  67. .course {
  68.   display: flex;
  69. }
  70. .course > a img {
  71.   width: 50vw;
  72.   height: 100px;
  73.   padding: 5px;
  74.   background-color: white;
  75.   box-sizing: border-box;
  76. }
  77. /* 推荐课程 */
  78. .list-course {
  79.   margin: 10px 0;
  80.   display: flex;
  81.   flex-flow: row wrap;
  82. }
  83. .list-course2 {
  84.   background-color: white;
  85. }
  87. .coursename {
  88.   width: 60vw;
  89.   height: 12vh;
  90.   background-color: white;
  91. }
  93. .span-wenzhang {
  94.   margin: 10px;
  95. }
  97. .span-wenzhangt span:first-of-type {
  98.   border-radius: 3px;
  99.   background-color: dodgerblue;
  100.   border: 1px solid #000;
  101. }
  102. body > div > .list-course2 img {
  103.   width: 40vw;
  104.   height: 10vh;
  105.   margin: 5px 0px;
  106. }
  107. /* zzuixin最新课程` */
  108. .list-courset {
  109.   margin: 10px 0;
  110.   display: flex;
  111.   flex-flow: row wrap;
  112. }
  113. .list-course2t {
  114.   background-color: white;
  115. }
  117. .coursenamet {
  118.   width: 60vw;
  119.   background-color: white;
  120. }
  122. .span-wenzhangt span:first-of-type {
  123.   border-radius: 3px;
  124.   background-color: dodgerblue;
  125.   border: 1px solid #000;
  126. }
  127. .span-wenzhang span:first-of-type {
  128.   border-radius: 3px;
  129.   background-color: dodgerblue;
  130.   border: 1px solid #000;
  131. }
  132. body > div > .list-course2t img {
  133.   width: 40vw;
  134.   height: 10vh;
  135. }
  137. /* 最新文章 */
  138. .list-five {
  139.   display: flex;
  140.   box-sizing: border-box;
  141.   justify-content: space-between;
  142.   margin: 10px 0;
  143. }
  144. .list-five > .list-six {
  145.   width: 100vw;
  146.   background-color: white;
  147.   display: flex;
  148.   flex-flow: row nowrap;
  149. }
  150. .list-six > a p,
  151. span {
  152.   /* white-space: nowrap; */
  153.   margin: 5px;
  154. }
  155. .list-six > a {
  156.   margin: 10px;
  157. }
  159. .list-six img {
  160.   width: 40vw;
  161.   height: 12vh;
  162.   margin: 5px;
  163. }
  165. section {
  166.   display: flex;
  167.   flex-flow: column nowrap;
  168.   justify-content: flex-start;
  169. }
  170. .list-bolg > a {
  171.   height: 50px;
  172.   display: flex;
  173.   flex-flow: row nowrap;
  174.   justify-content: space-between;
  175.   background-color: white;
  176.   /* margin: 0 15px; */
  177.   padding-top: 15px;
  178.   margin: 10px 0;
  179. }
  180. .list-bolg > a p:first-of-type {
  181.   font-size: 1.2rem;
  182.   margin: 0 10px;
  183. }
  184. section > div:last-of-type {
  185.   margin-bottom: 70px;
  186. }
  187. /* footer */
  188. footer {
  189.   color: #666;
  190.   background-color: #efefef;
  191.   border: 1px solid rgb(160, 160, 160);
  192.   height: 55px;
  193.   position: fixed;
  194.   bottom: 0;
  195.   width: 100vw;
  196.   display: flex;
  197.   justify-content: space-around;
  198. }
  199. footer > a {
  200.   font-size: 1.2rem;
  201.   color: coral;
  202.   display: flex;
  203.   flex-flow: column nowrap;
  204.   align-items: center;
  205. }
  206. footer > a > span:first-of-type {
  207.   /* font-size: 1.8rem; */
  208. }
上一条：flex实战小案例下一条：pc端实战练习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多