search

博客列表 >仿PHP中文网移动端

仿PHP中文网移动端

phpcn_u202398
phpcn_u202398原创
2020年04月13日 17:23:05757浏览

1、效果展示

http://192.144.155.203:90/0410/fphp/index.html

2、原代码

  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.     <title>仿PHP中文网移动端</title>
  7.     <style>
  8.         @import 'static/css/font.css';
  9.         *{
  10.             margin: 0px;
  11.             padding: 0px;            
  12.         }
  13.         body{
  14.             width: 100vw;
  15.             background-color: #dcdddd;
  17.             display: flex;
  18.             flex-flow: column nowrap;
  19.             box-sizing: border-box;
  20.         }
  21.         body >header{
  22.             width: 100vw;
  23.             height: 3.5rem;
  24.             padding: 10px;
  25.             background-color: lightslategray;
  26.             color: white;
  28.             display: flex;
  29.             position: fixed;
  30.             top:0;
  31.             box-sizing: border-box;
  32.         }
  33.         body > header > a{
  34.             text-decoration: none;
  35.             color: white;
  36.             width: 100vw;
  38.             display: flex;
  39.             flex-flow: row nowrap;
  40.             justify-content: space-between;
  41.             align-items: center;
  42.             box-sizing: border-box;
  43.         }
  44.         body >header>a>span:nth-of-type(2)>img{
  45.             height: 8vw;
  46.         }
  47.         body >header>a:hover>span:last-of-type{
  48.             color: sienna;
  49.         }
  50.         body> .solider>a>img{
  51.              width: 100vw;
  52.         }
  53.         body> .solider{
  54.             margin-top:4vw;
  55.         }
  56.         body>.nav{
  57.             background-color:white;
  58.             width: 100vw;
  59.             margin-top: 0.8vw;
  61.             display: flex;
  62.             flex-flow: column nowrap;
  63.             align-content: space-around;
  64.             justify-content: center;
  65.             box-sizing: border-box;
  66.         }
  67.         body>.nav>.one,body>.nav>.two{
  68.             font-size: 2.5vw;
  69.             padding: 3vw;
  71.             display: flex;
  72.             flex-flow: row nowrap;
  73.             justify-content: space-around;
  74.             align-content: center;
  75.         }
  76.         body>.nav>.one>a,body>.nav>.two>a{
  77.             text-decoration: none;
  78.             color:grey;
  80.             display: flex;
  81.             flex-flow: column nowrap;
  82.             align-items: center;
  83.         }
  84.         body>.nav>.one>a>span>img,body>.nav>.two>a>span>img{
  85.             height: 11vw;
  86.         }
  87.         body>.nav>.one>a>span:last-of-type,body>.nav>.two>a>span:last-of-type{
  88.             margin-top: 1vw;
  89.         }
  90.         body>.nav>.one>a>span:first-of-type,body>.nav>.two>a>span:first-of-type{
  91.             background-color: lightseagreen;
  92.             border-radius:3vw ;
  93.             padding: -2vw 0vw;
  94.             height: 10vw;
  95.         }
  96.         body>.nav>.one>a:nth-of-type(2)>span:first-of-type{
  97.             background-color: tomato;
  98.         }
  99.         body>.nav>.one>a:nth-of-type(3)>span:first-of-type{
  100.             background-color: rgb(53, 223, 129);
  101.         }
  102.         body>.nav>.one>a:last-of-type>span:first-of-type{
  103.             background-color: rgb(179, 99, 136);
  104.         }
  105.         body>.nav>.two>a:first-of-type>span:first-of-type{
  106.             background-color: rgb(235, 127, 65);
  107.         }
  108.         body>.nav>.two>a:nth-of-type(2)>span:first-of-type{
  109.             background-color: rgb(38, 143, 192);
  110.         }
  111.         body>.nav>.two>a:nth-of-type(3)>span:first-of-type{
  112.             background-color: rgb(56, 143, 30);
  113.         }
  114.         body>.nav>.two>a:last-of-type>span:first-of-type{
  115.             background-color: rgb(255, 116, 123);
  116.         }
  117.         body>h3{
  118.             margin: 6vw 2vw 2vw 2vw;
  119.             color: #7d7d7d;
  120.         }
  121.         body>.tj1{
  122.             display: flex;
  123.             box-sizing: border-box;
  124.         }
  125.         body>.tj1>a{
  126.             width: 100vw;
  127.             display: flex;
  128.             flex-flow: row nowrap;
  129.             justify-content: space-between;
  131.             box-sizing: border-box;
  132.         }
  133.         body>.tj1>a>img{
  134.             width: 49vw;
  135.             height: 24vw;
  136.         } body>.tj2>.t>a>img,body>.gx>.t>a>img,body>.wz>.t>a>img{
  137.             width: 41vw; 
  138.             height: 20vw;
  139.         }
  140.         body>.tj2,body>.gx,body>.wz{
  141.             width: 100vw;
  142.             display: flex;
  143.             flex-flow:column nowrap;
  144.             align-content: center;
  145.         }
  146.         body>.tj2>.t,body>.gx>.t{
  147.             margin-top: 2vw;
  148.             background-color: white;
  149.             height: 22vw;
  150.             padding-left: 2vw;
  151.             padding-top: 2vw;
  153.             display: flex;
  154.             flex-flow:row nowrap;
  155.             align-items: flex-start;
  156.         }
  157.         body>.tj2>.t>div,body>.gx>.t>div,body>.wz>.t>div{
  159.             padding-left: 3vw;
  160.             display: flex;
  161.             flex-flow: column nowrap;
  162.             justify-content:space-around;
  163.         }
  164.         body>.tj2>.t>div>a,body>.gx>.t>div>a,body>.wz>.t>div>a{
  165.             text-decoration: none;
  166.             color: #7d7d7d;
  167.             font-size: 3vw;
  168.         }
  169.         body>.tj2>.t>div>p{
  170.             padding-top: 2vw;
  171.             font-size: 2.5vw;
  172.             color: #7d7d7d;
  173.             display: flex;
  174.             flex-flow: row nowrap;
  175.             justify-content:flex-start
  176.         }
  177.         body>.tj2>.t>div>p>span:first-of-type,body>.gx>.t>div>p>span:first-of-type{
  178.             background-color: gray;
  179.             color:white;
  180.             border-radius: 2vw;
  181.             margin-right: 1vw;
  182.         }
  183.         body>.gx>.t>div>p{
  184.             padding-top: 2vw;
  185.             font-size: 2.5vw;
  186.             color: #7d7d7d;
  187.         }
  188.         body>.gx>.t>div>p:last-of-type{
  189.             margin-right: 5vw;
  190.             display: flex;
  191.             flex-flow: row nowrap;
  192.             justify-content:space-between
  193.         }
  194.         body>.wz>.t>div>span{
  195.             font-size: 2.5vw;
  196.             color: #7d7d7d;
  197.             margin-top: 2vw;
  198.         }
  199.         body>.wz>.t>div{
  200.             margin-right:  3vw ;
  202.         }
  203.         body>.wz>.t{
  204.             margin-top: 2vw;
  205.             background-color: white;
  206.             height: 22vw;
  207.             padding-left: 2vw;
  208.             padding-top: 2vw;
  210.             display: flex;
  211.             flex-flow:row nowrap;
  212.             align-items: flex-start;
  213.             justify-content: space-between;
  214.         }
  215.         body>.bw,body>.wd{
  216.             width: 100vw;
  217.             display: flex;
  218.             flex-flow: column nowrap;
  219.             justify-content: flex-start;
  221.         }
  222.         body>.bw>a,body>.wd>a{
  223.             background-color: white;
  224.             width: 100vw;
  225.             margin-top: 2vw;
  226.             text-decoration: none;
  227.             padding: 3vw;
  228.             display: flex;
  229.             flex-flow: row nowrap;
  230.             justify-content: space-between;
  231.             box-sizing: border-box;
  232.         }
  233.         body>.bw>a:first-of-type,body>.wd>a:first-of-type{
  234.             margin-top: 0vw;
  235.         }
  236.         body>.bw>a>span:first-of-type,body>.wd>a>span:first-of-type{
  237.             font-size: 3vw;
  238.             color: #7d7d7d;
  239.         }
  240.         body>.bw>a>span:last-of-type,body>.wd>a>span:last-of-type{
  241.             font-size: 2.5vw;
  242.             color: #7d7d7d;
  243.         }
  244.         body>footer{
  245.             width: 100vw;            
  246.             padding: 2vw;
  247.             height: 3.5rem;
  248.             background-color:#afafb0;
  249.             border-top: 0.3vw solid #afafb0;
  250.             color: white;
  252.             display: flex;
  253.             flex-flow: row nowrap;
  254.             justify-content:space-around;
  255.             box-sizing: border-box;
  256.             position: fixed;
  257.             bottom:0;
  258.         }
  259.         body>footer>a{
  260.             margin-top: -2vw;
  261.             text-decoration: none;
  262.             color: white;
  263.             display: flex;
  264.             flex-flow: column nowrap;
  265.             align-content: center;
  266.         } 
  267.         body>footer>a:hover{
  268.             color: lightsalmon;
  269.         }
  270.         body>footer>a:visited:first-of-type{
  271.             color: lightsalmon;
  272.         }              
  273.     </style>
  274. </head>
  275. <body>
  276.     <header>
  277.         <a href="">
  278.             <span class="iconfont">&#xe7b5;</span>
  279.             <span><img src="static/images/logo.png"> </span>  
  280.             <span class="iconfont">&#xe6fd;</span>
  281.         </a>    
  282.     </header>
  283.     <div class="solider">
  284.         <a href="">
  285.             <img src="static/images/1.jpg">
  286.         </a>
  287.     </div>
  288.     <div class="nav">
  289.         <div class="one">
  290.             <a href="">
  291.                 <span><img src="static/images/code.png"></span>
  292.                 <span>HTML/CSS</span>
  293.             </a>
  294.             <a href="">
  295.                 <span><img src="static/images/code.png"></span>
  296.                 <span>JavaScript</span>
  297.             </a>
  298.             <a href="">
  299.                 <span><img src="static/images/ali-clould.png"></span>
  300.                 <span>服务端</span>
  301.             </a>
  302.             <a href="">
  303.                 <span><img src="static/images/integral.png"></span>
  304.                 <span>数据库</span>
  305.             </a>
  306.         </div>
  307.         <div class="two">
  308.             <a href="">
  309.                 <span><img src="static/images/mobile-phone.png"></span>
  310.                 <span>移动端</span>
  311.             </a>
  312.             <a href="">
  313.                 <span><img src="static/images/template.png"></span>
  314.                 <span>手册</span>
  315.             </a>
  316.             <a href="">
  317.                 <span><img src="static/images/tool.png"></span>
  318.                 <span>工具</span>
  319.             </a>
  320.             <a href="">
  321.                 <span><img src="static/images/robot.png"></span>
  322.                 <span>直播</span>
  323.             </a>
  324.         </div>
  326.     </div>
  327.     <h3>推荐课程</h3>
  328.     <div class="tj1">
  329.         <a href="">
  330.             <img src="static/images/t1.jpg">
  331.             <img src="static/images/t2.jpg">
  332.         </a>
  333.     </div>
  334.     <div class="tj2">
  335.         <div class="t"> 
  336.             <a href="">
  337.                 <img src="static/images/t3.jpg"> 
  338.             </a>         
  340.             <div>
  341.                 <a href="">CI框架30分钟极速入门</a>
  342.                 <p>
  343.                     <span>中级</span>
  344.                     <span>2565757次播放</span>
  345.                 </p>
  346.             </div>
  347.         </div>
  348.         <div class="t"> 
  349.             <a href="">
  350.                 <img src="static/images/t4.jpg"> 
  351.             </a>         
  353.             <div>
  354.                 <a href="">2018前端入门_HTML5</a>
  355.                 <p>
  356.                     <span>初级</span>
  357.                     <span>310408次播放</span>
  358.                 </p>
  359.             </div>
  360.         </div>
  361.     </div>
  362.     <h3>最新更新</h3>
  363.     <div class="gx">
  364.         <div class="t"> 
  365.             <a href="">
  366.                 <img src="static/images/g1.png"> 
  367.             </a>    
  368.             <div>
  369.                 <a href="">PHP快速操控Excel之PhpSpreadsheet</a>
  370.                 <p>老的PHPExcel已经停止更新了！目前最新...</p>
  371.                 <p>
  372.                     <span>中级</span>
  373.                     <span>2565757次播放</span>
  374.                 </p>
  375.             </div>
  376.         </div>
  377.         <div class="t"> 
  378.             <a href=""> 
  379.                 <img src="static/images/g2.png"> 
  380.             </a>    
  381.             <div>
  382.                 <a href="">Thinkphp6.0正式版视频教程</a>
  383.                 <p>Thinkphp6.0从2019年10月24日正式发布...</p>
  384.                 <p>
  385.                     <span>中级</span>
  386.                     <span>2565757次播放</span>
  387.                 </p>
  388.             </div>
  389.         </div>
  390.         <div class="t"> 
  391.             <a href="">
  392.                 <img src="static/images/g3.jpg"> 
  393.             </a>    
  394.             <div>
  395.                 <a href="">2019python自学视频</a>
  396.                 <p>本课程适合想从零开始学习 Python 编程...</p>
  397.                 <p>
  398.                     <span>初级</span>
  399.                     <span>2565757次播放</span>
  400.                 </p>
  401.             </div>
  402.         </div>
  403.         <div class="t"> 
  404.             <a href="">
  405.                 <img src="static/images/g4.png"> 
  406.             </a>    
  407.             <div>
  408.                 <a href="">PHP开发免费公益直播课</a>
  409.                 <p>主讲：php中文网-朱老师( Peter Zhu)...</p>
  410.                 <p>
  411.                     <span>初级</span>
  412.                     <span>2565757次播放</span>
  413.                 </p>
  414.             </div>
  415.         </div>
  416.         <div class="t"> 
  417.             <a href="">
  418.                 <img src="static/images/g5.png"> 
  419.             </a>    
  420.             <div>
  421.                 <a href="">从零开始到WEB响应式布局</a>
  422.                 <p>重点介绍了HTML、CSS、web布局前端核心...</p>
  423.                 <p>
  424.                     <span>初级</span>
  425.                     <span>2565757次播放</span>
  426.                 </p>
  427.             </div>
  428.         </div>
  429.         <div class="t"> 
  430.             <a href="">
  431.                 <img src="static/images/g6.png"> 
  432.             </a>    
  433.             <div>
  434.                 <a href="">PHP文件基础操作</a>
  435.                 <p>好多同学在PHP基础的时候对PHP文件的...</p>
  436.                 <p>
  437.                     <span>中级</span>
  438.                     <span>2565757次播放</span>
  439.                 </p>
  440.             </div>
  441.         </div>
  442.     </div>
  443.     <h3>最新文章</h3>
  444.     <div class="wz">        
  445.             <div class="t"> 
  446.                 <div>
  447.                     <a href="">thinkphp5 + barcode 生成条形码的方法</a>                    
  448.                     <span>发布时间：2020-04-12</span>
  449.                 </div>
  450.                 <a href="">
  451.                     <img src="static/images/z1.jpg"> 
  452.                 </a>  
  453.             </div>           
  454.             <div class="t"> 
  455.                 <div>
  456.                     <a href="">如何使用html+css+js实现3D相册</a>                    
  457.                     <span>发布时间：2020-04-12</span>
  458.                 </div>
  459.                 <a href="">
  460.                     <img src="static/images/z2.png"> 
  461.                 </a>  
  462.             </div>
  463.             <div class="t"> 
  464.                 <div>
  466.                     <a href="">Laravel 之 广播 模块详解</a>                    
  467.                     <span>发布时间：2020-04-12</span>
  468.                 </div>
  469.                 <a href="">
  470.                     <img src="static/images/z3.jpg"> 
  471.                 </a>  
  472.             </div>
  473.             <div class="t"> 
  475.                 <div>
  476.                     <a href="">mysql中key 、primary key 、unique ...</a>                    
  477.                     <span>发布时间：2020-04-12</span>
  478.                 </div>
  479.                 <a href="">
  480.                     <img src="static/images/z4.png"> 
  481.                 </a>  
  482.             </div>
  483.             <div class="t"> 
  484.                 <div>
  485.                     <a href="">升级后的phpmyadmin 打不开怎么办</a>                    
  486.                     <span>发布时间：2020-04-12
  487.                     </span>
  488.                 </div>
  489.                 <a href>
  490.                     <img src="static/images/z5.jpg"> 
  491.                 </a>  
  492.             </div>
  494.     </div>
  495.     <div style="margin: 3vw 0vw 0vw 0vw;width:100vw;box-sizing: border-box;background-color: white;width: 100vw;text-align: center;padding: 2vw;"><a href="" style="text-decoration: none;color:#7d7d7d;">更多内容</a></div>
  496.     <h3>最新博文</h3>
  497.     <div class="bw">
  498.        <a href="">
  499.            <span>CSS3：弹性盒子flex布局</span>
  500.            <span>2020-04-12</span>
  501.        </a> 
  502.        <a href="">
  503.         <span>Jquery+AJAX上传文件，无刷新上传并重命名文件</span>
  504.         <span>2020-04-11</span>
  505.         </a> 
  506.         <a href="">
  507.             <span>thinkphp5.6源码阅读1</span>
  508.             <span>2020-04-11</span>
  509.         </a> 
  510.         <a href="">
  511.             <span>Composer windows安装详细介绍</span>
  512.             <span>2020-04-10</span>
  513.         </a> 
  514.         <a href="">
  515.             <span>AI智能电销机器人源码 源码解读（1）—基础</span>
  516.             <span>2020-04-10</span>
  517.         </a> 
  518.     </div>
  519.     <div style="margin: 3vw 0vw 0vw 0vw;width:100vw;box-sizing: border-box;background-color: white;width: 100vw;text-align: center;padding: 2vw;"><a href="" style="text-decoration: none;color:#7d7d7d;">更多内容</a></div>
  520.     <h3>最新问答</h3>
  521.     <div class="wd">
  522.         <a href="">
  523.             <span>url访问admin下的控制器的方法，有问题</span>
  524.             <span>2020-04-12</span>
  525.         </a> 
  526.         <a href="">
  527.             <span>php+workerman实现新订单提示语音</span>
  528.             <span>2020-04-12</span>
  529.         </a> 
  530.         <a href="">
  531.             <span>不出现tp6.0页面</span>
  532.             <span>2020-04-12</span>
  533.         </a> 
  534.         <a href="">
  535.             <span>数据库密码··</span>
  536.             <span>2020-04-12</span>
  537.         </a> 
  538.         <a href="">
  539.             <span>制定的学习计划在哪能找到 咋找不到呢?</span>
  540.             <span>2020-04-10</span>
  541.         </a> 
  542.     </div>
  543.     <div style="margin: 3vw 0vw 20vw 0vw;width:100vw;box-sizing: border-box;background-color: white;width: 100vw;text-align: center;padding: 2vw;"><a href="" style="text-decoration: none;color:#7d7d7d;">更多内容</a></div>
  544.     <footer>
  545.         <a href="" >
  546.             <span class="iconfont">&#xe7a7;</span>
  547.             <span>首页</span>
  548.         </a>
  549.         <a href="">
  550.             <span class="iconfont">&#xe8c1;</span>
  551.             <span>视频</span>
  552.         </a>
  553.         <a href="">
  554.             <span class="iconfont">&#xe7b3;</span>
  555.             <span>社区</span>
  556.         </a>
  557.         <a href="">
  558.             <span class="iconfont">&#xe7b5;</span>
  559.             <span>我的</span>
  560.         </a>
  561.     </footer>
  562. </body>
  563. </html>

3、学习总结

本节课我们进行了一个小的仿站实战课，是对前面知识的一个综合应用，主要运用的知识包括：伪类选择器，flex布局等。通过实战让我感觉到了使用flex布局能够快速的将一个页面框架搭建起来，使用方便，快捷，代码量少。伪类选择器能够快速的定位到自己需要设置标签的标签上，使用起来也很方便。在整个实战结束以后与其他同学的相比较，我的不足之处在于页面的配色上，这个需要提高一下自己的美术功底，以后做出来的页面配色让浏览者看了以后有一种赏心悦目的感觉。

上一条：CSS选择器知识框架和学习总结下一条：JS实现HTML标签转义及反转义
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多