Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿php.cn移动端
Blogger Information
Blog 7
fans 0
comment 2
visits 5342
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿php.cn移动端
虫先森
Original
814 people have browsed it

仿php.cn移动端

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /* 设置全局属性 */
  10.         /* 初始化 */
  11.         * {
  12.             padding: 0;
  13.             margin: 0;
  14.         }
  16.         a {
  17.             text-decoration: none;
  18.             color: #666;
  19.         }
  21.         /* 设置可视化区域 */
  22.         html {
  23.             width: 100vw;
  24.             height: 100vh;
  25.             font-size: 14px;
  26.         }
  28.         body {
  29.             min-width: 360px;
  30.             background-color: #fff;
  31.             display: flex;
  32.             flex-flow: column nowrap;
  33.             align-content: center;
  34.         }
  36.         .iconfont {
  37.             font-family: "iconfont" !important;
  38.             font-size: 1.6rem;
  39.             font-style: normal;
  40.             -webkit-font-smoothing: antialiased;
  41.             -moz-osx-font-smoothing: grayscale;
  42.         }
  44.         body>header {
  45.             background-color: #2d353c;
  46.             color: white;
  47.             height: 30px;
  48.             align-items: center;
  49.             display: flex;
  50.             justify-content: space-between;
  51.             align-self: baseline;
  52.             padding: 0 10px;
  53.             position: fixed;
  54.             width: 100%;
  55.         }
  57.         body>header>.login>img {
  58.             width: 20px;
  59.         }
  61.         body>header>.logo>img {
  62.             height: 25px;
  63.         }
  65.         body>header>span {
  66.             width: 20px;
  67.             padding-right: 15px;
  68.         }
  70.         body>.banner>img {
  71.             width: 100vw;
  72.             padding-top: 30px;
  73.         }
  75.         .nav {
  76.             width: 100vw;
  77.             display: flex;
  78.             flex-flow: row wrap;
  79.             justify-content: space-between;
  80.         }
  82.         .nav>a {
  83.             width: 25vw;
  84.             display: flex;
  85.             flex-flow: column nowrap;
  86.             font-size: 0.8em;
  87.             align-items: center;
  88.         }
  90.         .nav>a>img {
  91.             width: 17vw;
  92.             padding: 4vw 4vw;
  93.         }
  95.         .c_tittle {
  96.             padding: 2px 2px;
  97.             font-size: 1.2em;
  98.             color: black;
  99.             align-self: start;
  100.         }
  102.         .v_tittle {
  103.             font-size: 1em;
  104.             color: black;
  105.         }
  107.         .abstract {
  108.             font-size: 0.8em;
  109.             color: slategray;
  110.         }
  112.         .sign {
  113.             border-radius: 3px 3px;
  114.             background-color: black;
  115.             color: blanchedalmond;
  116.             font-size: 0.7em;
  117.             padding: 1px 1px;
  118.         }
  120.         .p_view {
  121.             font-size: 0.7em;
  122.         }
  124.         .more {
  125.             width: 95vw;
  126.             height: 30px;
  127.             margin: 5px;
  128.             background-color: #f1f1f1;
  129.             box-shadow: 1px 1px 3px rgb(219, 214, 214);
  130.             /* border: 1px silver solid; */
  131.             text-align: center;
  132.         }
  134.         .top_course>.container1 {
  135.             display: flex;
  136.             flex-flow: row nowrap;
  137.             align-items: center;
  138.             align-content: space-around;
  139.             margin: 2px;
  140.         }
  142.         .top_course>.container1>a>img {
  143.             width: 48vw;
  144.             padding: 2px 2px;
  145.         }
  147.         .top_course>.container2 {
  148.             display: flex;
  149.             flex-flow: column nowrap;
  150.             align-items: left;
  151.             align-content: space-around;
  152.             padding: 2px 2px;
  153.         }
  156.         .top_course>.container2>a {
  157.             display: flex;
  158.             flex-flow: row nowrap;
  159.             margin: 2px;
  160.             background-color: #f4f4f4;
  161.         }
  163.         .top_course>.container2>a>img {
  164.             width: 48vw;
  165.             margin-right: 3px;
  166.         }
  168.         .top_course>.container2>a>div>div {
  169.             display: flex;
  170.             flex-flow: row nowrap;
  171.             align-self: baseline;
  172.             padding: 3px 1px;
  173.             align-content: space-around;
  174.         }
  176.         .new_course {
  177.             display: flex;
  178.             flex-flow: column nowrap;
  179.             align-items: left;
  180.             align-content: space-around;
  181.             padding: 2px 2px;
  182.         }
  184.         .new_course>a {
  185.             display: flex;
  186.             flex-flow: row nowrap;
  187.             margin: 2px;
  188.             background-color: #f4f4f4;
  189.         }
  191.         .new_course>a>img {
  192.             width: 48vw;
  193.             margin-right: 3px;
  194.         }
  196.         .new_course>a>div>div {
  197.             display: flex;
  198.             flex-flow: row nowrap;
  199.             align-self: baseline;
  200.             padding: 3px 1px;
  201.             align-content: space-around;
  202.         }
  204.         .new_article {
  205.             display: flex;
  206.             flex-flow: column nowrap;
  207.             align-items: center;
  208.             align-content: space-between;
  209.             padding: 2px 2px;
  211.         }
  213.         .new_article>a {
  214.             display: flex;
  215.             flex-flow: row nowrap;
  216.             margin: 2px;
  217.             background-color: #f4f4f4;
  218.         }
  220.         .new_article>a>div {
  221.             display: flex;
  222.             flex-flow: column nowrap;
  223.             align-items: flex-start;
  224.             align-content: space-around;
  225.             padding: 2px 2px;
  226.             width: 70vw;
  227.         }
  229.         .new_article>a>img {
  230.             width: 25vw;
  231.             margin-left: 3px;
  232.         }
  234.         .nex_blog {
  235.             display: flex;
  236.             flex-flow: column nowrap;
  237.             align-items: center;
  238.             align-content: space-between;
  239.             padding: 2px 2px;
  240.         }
  242.         .new_blog>a {
  243.             display: flex;
  244.             flex-flow: row nowrap;
  245.             align-items: flex-start;
  246.             justify-content: space-between;
  247.             margin: 2px;
  248.             background-color: #f4f4f4;
  249.             padding: 1px 5px 0 2px;
  250.         }
  252.         .nex_ask {
  253.             display: flex;
  254.             flex-flow: column nowrap;
  255.             align-items: center;
  256.             align-content: space-between;
  257.             padding: 2px 2px;
  258.         }
  260.         .new_ask>a {
  261.             display: flex;
  262.             flex-flow: row nowrap;
  263.             align-items: flex-start;
  264.             justify-content: space-between;
  265.             margin: 2px;
  266.             background-color: #f4f4f4;
  267.             padding: 1px 5px 0 2px;
  268.         }
  270.         body>footer {
  271.             color: #666;
  272.             background-color: #efefef;
  273.             border-top: 1px solid #ccc;
  274.             height: 55px;
  276.             position: fixed;
  277.             bottom: 0;
  278.             width: 100vw;
  280.             display: flex;
  281.             flex-flow: row nowrap;
  282.             justify-content: space-around;
  283.         }
  285.         body>footer>a {
  286.             margin-top: 10px;
  287.             font-size: 0.8rem;
  288.             display: flex;
  289.             flex-flow: column nowrap;
  290.             align-items: center;
  291.         }
  293.         body>footer>a>span:first-of-type {
  294.             font-size: 1.6rem;
  295.         }
  296.     </style>
  297. </head>
  299. <body>
  300.     <!-- 页眉 -->
  301.     <header>
  302.         <a href="" class="login"><img src="image/login.png" alt=""></a>
  303.         <a href="" class="logo"><img src="image/logo.png" alt=""></a>
  304.         <span class="iconfont">&#xe6a4;</span>
  306.     </header>
  307.     <div class="banner">
  308.         <img src="image/11.png" alt="" class="banner">
  309.     </div>
  310.     <!-- 导航 -->
  311.     <div class="nav">
  312.         <a href=""><img src="image/html.png" alt="HTML/CSS"><span>HTML/CSS</span></a>
  313.         <a href=""><img src="image/JavaScript.png" alt="JavaScript"><span>JavaScript</span></a>
  314.         <a href=""><img src="image/manual.png" alt="服务器"><span>服务器</span></a>
  315.         <a href=""><img src="image/sql.png" alt="数据库"><span>数据库</span></a>
  316.         <a href=""><img src="image/app.png" alt="移动端"><span>移动端</span></a>
  317.         <a href=""><img src="image/code.png" alt="手册"><span>手册</span></a>
  318.         <a href=""><img src="image/tool2.png" alt="工具"><span>工具</span></a>
  319.         <a href=""><img src="image/live.png" alt="直播"><span>直播</span></a>
  320.     </div>
  321.     <!-- 推荐课程区域 -->
  322.     <div class="top_course">
  323.         <h2 class="c_tittle">推荐课程</h2>
  324.         <div class="container1">
  325.             <a href=""><img src="image/tjkc1.jpg" alt=""></a>
  326.             <a href=""><img src="image/tjkc2.jpg" alt=""></a>
  327.         </div>
  328.         <div class="container2">
  329.             <a href="">
  330.                 <img src="image/tjkc3.jpg" alt="">
  331.                 <div class="">
  332.                     <h2 class="v_tittle">CI框架30分钟极速入门</h2>
  333.                     <div class="">
  334.                         <span class="sign">中级</span>
  335.                         <p class="p_view">61213次播放</p>
  336.                     </div>
  337.                 </div>
  338.             </a>
  339.             <a href="">
  340.                 <img src="image/tjkc4.jpg" alt="">
  341.                 <div class="">
  342.                     <h2 class="v_tittle">2018前端入门_HTML5</h2>
  343.                     <div class="">
  344.                         <span class="sign">初级</span>
  345.                         <p class="p_view">309683次播放</p>
  346.                     </div>
  347.                 </div>
  348.             </a>
  349.         </div>
  350.     </div>
  351.     <!-- 更新课程 -->
  352.     <div class="new_course">
  353.         <h2 class="c_tittle">最新更新</h2>
  354.         <a href="">
  355.             <img src="image/zxkc1.png" alt="">
  356.             <div class="">
  357.                 <h2 class="v_tittle">PHP快速操控Excel之P...</h2>
  358.                 <p class="abstract">老的PHPExcel已经停止更新了...</p>
  359.                 <div>
  360.                     <span class="sign">中级</span>
  361.                     <p class="p_view">14872次播放</p>
  362.                 </div>
  363.             </div>
  364.         </a>
  365.         <a href="">
  366.             <img src="image/zxkc2.png" alt="">
  367.             <div class="">
  368.                 <h2 class="v_tittle">Thinkphp6.0正式版视...</h2>
  369.                 <p class="abstract">Thinkphp6.0从2019年10月24日...</p>
  370.                 <div>
  371.                     <span class="sign">中级</span>
  372.                     <p class="p_view">48581次播放</p>
  373.                 </div>
  374.             </div>
  375.         </a>
  376.         <a href="">
  377.             <img src="image/zxkc3.jpg" alt="">
  378.             <div class="">
  379.                 <h2 class="v_tittle">2019python自学视频</h2>
  380.                 <p class="abstract">本课程适合想从零开始学习Pyth...</p>
  381.                 <div>
  382.                     <span class="sign">初级</span>
  383.                     <p class="p_view">36112次播放</p>
  384.                 </div>
  385.             </div>
  386.         </a>
  387.         <a href="">
  388.             <img src="image/zxkc4.png" alt="">
  389.             <div class="">
  390.                 <h2 class="v_tittle">PHP开发免费公益直播课</h2>
  391.                 <p class="abstract">主讲：php中文网-朱老师（Peter...</p>
  392.                 <div>
  393.                     <span class="sign">初级</span>
  394.                     <p class="p_view">6795次播放</p>
  395.                 </div>
  396.             </div>
  397.         </a>
  398.         <a href="">
  399.             <img src="image/zxkc5.jpg" alt="">
  400.             <div class="">
  401.                 <h2 class="v_tittle">从零开始到WEB响应...</h2>
  402.                 <p class="abstract">重点介绍了HTML、CSS、web...</p>
  403.                 <div>
  404.                     <span class="sign">初级</span>
  405.                     <p class="p_view">29009次播放</p>
  406.                 </div>
  407.             </div>
  408.         </a>
  409.         <a href="">
  410.             <img src="image/zxkc6.png" alt="">
  411.             <div class="">
  412.                 <h2 class="v_tittle">PHP文件基础操作</h2>
  413.                 <p class="abstract">好多同学在PHP基础的时候对PH...</p>
  414.                 <div>
  415.                     <span class="sign">中级</span>
  416.                     <p class="p_view">8926次播放</p>
  417.                 </div>
  418.             </div>
  419.         </a>
  420.     </div>
  421.     <!-- 最新文章 -->
  422.     <div class="new_article">
  423.         <h2 class="c_tittle">最新文章</h2>
  424.         <a href="">
  425.             <div class="">
  426.                 <h2 class="v_tittle">微信引用功能什么意思</h2>
  427.                 <p class="abstract">发布时间：2020-04-10</p>
  428.             </div>
  429.             <img src="image/zxwz1.jpg" alt="">
  430.         </a>
  431.         <a href="">
  432.             <div class="">
  433.                 <h2 class="v_tittle">笔记本电脑滋滋作响怎么解决</h2>
  434.                 <p class="abstract">发布时间：2020-04-10</p>
  435.             </div>
  436.             <img src="image/zxwz2.jpg" alt="">
  437.         </a>
  438.         <a href="">
  439.             <div class="">
  440.                 <h2 class="v_tittle">win7电脑如何调整为最佳性能模式</h2>
  441.                 <p class="abstract">发布时间：2020-04-10</p>
  442.             </div>
  443.             <img src="image/zxwz3.jpg" alt="">
  444.         </a>
  445.         <a href="">
  446.             <div class="">
  447.                 <h2 class="v_tittle">关于java中的强引用与弱引用的介绍</h2>
  448.                 <p class="abstract">发布时间：2020-04-10</p>
  449.             </div>
  450.             <img src="image/zxwz4.jpg" alt="">
  451.         </a>
  452.         <a href="">
  453.             <div class="">
  454.                 <h2 class="v_tittle">win10电脑无法打开wlan怎么解决</h2>
  455.                 <p class="abstract">发布时间：2020-04-10</p>
  456.             </div>
  457.             <img src="image/zxwz5.jpg" alt="">
  458.         </a>
  459.         <div class="more">
  460.             <a href="">更多内容</a>
  461.         </div>
  462.     </div>
  463.     <!-- 最新博客 -->
  464.     <div class="new_blog">
  465.         <h2 class="c_tittle">最新博文</h2>
  466.         <a href="">
  467.             <h2 class="v_tittle">跟小黑学漏洞利用开发之Window...</h2>
  468.             <p class="abstract">2020-4-10</p>
  469.         </a>
  470.         <a href="">
  471.             <h2 class="v_tittle">最新的XSS ByPass代码，跨站脚...</h2>
  472.             <p class="abstract">2020-4-10</p>
  473.         </a>
  474.         <a href="">
  475.             <h2 class="v_tittle">Composer windows安装详细介绍</h2>
  476.             <p class="abstract">2020-4-10</p>
  477.         </a>
  478.         <a href="">
  479.             <h2 class="v_tittle">AI只能电销机器人源码 源码解读...</h2>
  480.             <p class="abstract">2020-4-10</p>
  481.         </a>
  482.         <a href="">
  483.             <h2 class="v_tittle">利用css过滤实现玩网页夜模式适配</h2>
  484.             <p class="abstract">2020-4-10</p>
  485.         </a>
  486.         <div class="more">
  487.             <a href="">更多内容</a>
  488.         </div>
  489.     </div>
  490.     <!-- 最新问答 -->
  491.     <div class="new_ask">
  492.         <h2 class="c_tittle">最新问答</h2>
  493.         <a href="">
  494.             <h2 class="v_tittle">我访问不了</h2>
  495.             <p class="abstract">2020-4-10</p>
  496.         </a>
  497.         <a href="">
  498.             <h2 class="v_tittle">请教一个问题，我想用cut函数把0...</h2>
  499.             <p class="abstract">2020-4-10</p>
  500.         </a>
  501.         <a href="">
  502.             <h2 class="v_tittle">验证码输入正确了怎么还提示验证...</h2>
  503.             <p class="abstract">2020-4-10</p>
  504.         </a>
  505.         <a href="">
  506.             <h2 class="v_tittle">手册没有下载sdk</h2>
  507.             <p class="abstract">2020-4-10</p>
  508.         </a>
  509.         <a href="">
  510.             <h2 class="v_tittle">访问主页后，创建数据库出现错误...</h2>
  511.             <p class="abstract">2020-4-9</p>
  512.         </a>
  513.         <div class="more">
  514.             <a href="">更多内容</a>
  515.         </div>
  516.     </div>
  517.     <!-- 页脚 -->
  518.     <footer>
  519.         <a href=""><span class="iconfont">&#xe8b9;</span><span>首页</span></a>
  520.         <a href=""><span class="iconfont">&#xe612;</span><span>视频</span></a>
  521.         <a href=""><span class="iconfont">&#xe8b8;</span><span>社区</span></a>
  522.         <a href=""><span class="iconfont">&#xe621;</span><span>我的</span></a>
  523.     </footer>
  524.     <style>
  525.         @font-face {
  526.             font-family: 'iconfont';
  527.             src: url('icon/iconfont.eot');
  528.             src: url('icon/iconfont.eot?#iefix') format('embedded-opentype'),
  529.                 url('icon/iconfont.woff2') format('woff2'),
  530.                 url('icon/iconfont.woff') format('woff'),
  531.                 url('icon/iconfont.ttf') format('truetype'),
  532.                 url('icon/iconfont.svg#iconfont') format('svg');
  533.         }
  534.     </style>
  535. </body>
  537. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：写得第一个手机页面, 不管最终怎么样, 都非常不错的, 况且看上去也不算是太难看呀
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post