简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >仿php.cn移动端

仿php.cn移动端

虫先森
虫先森原创
2020年04月12日 17:46:21813浏览

仿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>
上一条：flex实战应用之php中文网（移动端）下一条：CSS Flex弹性盒子认识与实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多