search

博客列表 >用css -flex布局仿PHP中文网移动端（0410）

用css -flex布局仿PHP中文网移动端（0410）

w™下載一個妳
w™下載一個妳原创
2020年05月08日 11:10:57807浏览

1.用css -flex布局仿PHP中文网移动端

2.效果图：




3.代码：

  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="css/font-icon.css" / >
  7.     <title>仿PHP中文网移动端</title>
  8.     <style>
  9.      </style>
  10.   </head>
  11.   <body>
  12.     <header>
  13.       <a href="">
  14.         <span class="iconfont"></span>
  15.         <span><img src="/images/logo.png" /> </span>
  16.         <span class="iconfont"></span>
  17.       </a>
  18.     </header>
  19.     <div class="solider">
  20.       <a href="">
  21.         <img src="/images/q2.jpg" />
  22.       </a>
  23.     </div>
  24.     <div class="nav">
  25.       <div class="one">
  26.         <a href="">
  27.           <span><img src="/images/q3.png" /></span>
  28.           <span>HTML/CSS</span>
  29.         </a>
  30.         <a href="">
  31.           <span><img src="/images/q4.png" /></span>
  32.           <span>JavaScript</span>
  33.         </a>
  34.         <a href="">
  35.           <span><img src="/images/q5.png" /></span>
  36.           <span>服务端</span>
  37.         </a>
  38.         <a href="">
  39.           <span><img src="/images/q6.png" /></span>
  40.           <span>数据库</span>
  41.         </a>
  42.       </div>
  43.       <div class="two">
  44.         <a href="">
  45.           <span><img src="/images/q7.png" /></span>
  46.           <span>移动端</span>
  47.         </a>
  48.         <a href="">
  49.           <span><img src="/images/q8.png" /></span>
  50.           <span>手册</span>
  51.         </a>
  52.         <a href="">
  53.           <span><img src="/images/q9.png" /></span>
  54.           <span>工具</span>
  55.         </a>
  56.         <a href="">
  57.           <span><img src="/images/q10.png" /></span>
  58.           <span>直播</span>
  59.         </a>
  60.       </div>
  61.     </div>
  62.     <h3>推荐课程</h3>
  63.     <div class="tj1">
  64.       <a href="">
  65.         <img src="/images/a1.jpg" />
  66.         <img src="/images/a2.jpg" />
  67.       </a>
  68.     </div>
  69.     <div class="tj2">
  70.       <div class="t">
  71.         <a href="">
  72.           <img src="/images/c1.jpg" />
  73.         </a>
  74.         <div>
  75.           <a href="">CI框架30分钟极速入门</a>
  76.           <p>
  77.             <span>中级</span>
  78.             <span>2565757次播放</span>
  79.           </p>
  80.         </div>
  81.       </div>
  82.       <div class="t">
  83.         <a href="">
  84.           <img src="/images/c2.jpg" />
  85.         </a>
  86.         <div>
  87.           <a href="">2018前端入门_HTML5</a>
  88.           <p>
  89.             <span>初级</span>
  90.             <span>310408次播放</span>
  91.           </p>
  92.         </div>
  93.       </div>
  94.     </div>
  95.     <h3>最新更新</h3>
  96.     <div class="gx">
  97.       <div class="t">
  98.         <a href="">
  99.           <img src="/images/qz.png" />
  100.         </a>
  101.         <div>
  102.           <a href="">PHP快速操控Excel之PhpSpreadsheet</a>
  103.           <p>老的PHPExcel已经停止更新了！目前最新...</p>
  104.           <p>
  105.             <span>中级</span>
  106.             <span>2565757次播放</span>
  107.           </p>
  108.         </div>
  109.       </div>
  110.       <div class="t">
  111.         <a href="">
  112.           <img src="/images/qx.png" />
  113.         </a>
  114.         <div>
  115.           <a href="">Thinkphp6.0正式版视频教程</a>
  116.           <p>Thinkphp6.0从2019年10月24日正式发布...</p>
  117.           <p>
  118.             <span>中级</span>
  119.             <span>2565757次播放</span>
  120.           </p>
  121.         </div>
  122.       </div>
  123.       <div class="t">
  124.         <a href="">
  125.           <img src="/images/qc.jpg" />
  126.         </a>
  127.         <div>
  128.           <a href="">2019python自学视频</a>
  129.           <p>本课程适合想从零开始学习 Python 编程...</p>
  130.           <p>
  131.             <span>初级</span>
  132.             <span>2565757次播放</span>
  133.           </p>
  134.         </div>
  135.       </div>
  136.       <div class="t">
  137.         <a href="">
  138.           <img src="/images/qv.png" />
  139.         </a>
  140.         <div>
  141.           <a href="">PHP开发免费公益直播课</a>
  142.           <p>主讲：php中文网-朱老师( Peter Zhu)...</p>
  143.           <p>
  144.             <span>初级</span>
  145.             <span>2565757次播放</span>
  146.           </p>
  147.         </div>
  148.       </div>
  149.       <div class="t">
  150.         <a href="">
  151.           <img src="/images/qb.jpg" />
  152.         </a>
  153.         <div>
  154.           <a href="">从零开始到WEB响应式布局</a>
  155.           <p>重点介绍了HTML、CSS、web布局前端核心...</p>
  156.           <p>
  157.             <span>初级</span>
  158.             <span>2565757次播放</span>
  159.           </p>
  160.         </div>
  161.       </div>
  162.       <div class="t">
  163.         <a href="">
  164.           <img src="/images/qn.png" />
  165.         </a>
  166.         <div>
  167.           <a href="">PHP文件基础操作</a>
  168.           <p>好多同学在PHP基础的时候对PHP文件的...</p>
  169.           <p>
  170.             <span>中级</span>
  171.             <span>2565757次播放</span>
  172.           </p>
  173.         </div>
  174.       </div>
  175.     </div>
  176.     <h3>最新文章</h3>
  177.     <div class="wz">
  178.       <div class="t">
  179.         <div>
  180.           <a href="">php实现文件上传方法</a>
  181.           <span>发布时间：2020-05-07</span>
  182.         </div>
  184.         <a href="">
  185.           <img src="/images/1q.jpg" />
  186.         </a>
  187.       </div>
  188.       <div class="t">
  189.         <div>
  190.           <a href="">如何大型Laravel项目中组织路由</a>
  191.           <span>发布时间：2020-05-07</span>
  192.         </div>
  193.         <a href="">
  194.           <img src="/images/2q.jpg" />
  195.         </a>
  196.       </div>
  197.       <div class="t">
  198.         <div>
  199.           <a href="">如何JS控制下拉列表左右选择</a>
  200.           <span>发布时间：2020-05-07</span>
  201.         </div>
  202.         <a href="">
  203.           <img src="/images/3q.jpg" />
  204.         </a>
  205.       </div>
  206.       <div class="t">
  207.         <div>
  208.           <a href="">关于CSS和JS合并的WordPress</a>
  209.           <span>发布时间：2020-05-07</span>
  210.         </div>
  211.         <a href="">
  212.           <img src="/images/4q.jpg" />
  213.         </a>
  214.       </div>
  215.       <div class="t">
  216.         <div>
  217.           <a href="">php单例模式是什么意思</a>
  218.           <span>发布时间：2020-05-07 </span>
  219.         </div>
  220.         <a href>
  221.           <img src="/images/5q.jpg" />
  222.         </a>
  223.       </div>
  224.     </div>
  225.     <div
  226.       style="
  227.         margin: 3vw 0vw 0vw 0vw;
  228.         width: 100vw;
  229.         box-sizing: border-box;
  230.         background-color: white;
  231.         width: 100vw;
  232.         text-align: center;
  233.         padding: 2vw;
  234.       "
  235.     >
  236.       <a href="" style="text-decoration: none; color: #7d7d7d;">更多内容</a>
  237.     </div>
  238.     <h3>最新博文</h3>
  239.     <div class="bw">
  240.       <a href="">
  241.         <span>用php判断用户首次登陆业务</span>
  242.         <span>2020-05-07</span>
  243.       </a>
  244.       <a href="">
  245.         <span>Python爬虫|大众点评数据爬虫教程</span>
  246.         <span>2020-05-07</span>
  247.       </a>
  248.       <a href="">
  249.         <span>最新Navicat 15 for MySQL破解加教程正确的破解方式</span>
  250.         <span>2020-05-07</span>
  251.       </a>
  252.     </div>
  253.     <div
  254.       style="
  255.         margin: 3vw 0vw 0vw 0vw;
  256.         width: 100vw;
  257.         box-sizing: border-box;
  258.         background-color: white;
  259.         width: 100vw;
  260.         text-align: center;
  261.         padding: 2vw;
  262.       "
  263.     >
  264.       <a href="" style="text-decoration: none; color: #7d7d7d;">更多内容</a>
  265.     </div>
  266.     <h3>最新问答</h3>
  267.     <div class="wd">
  268.       <a href="">
  269.         <span>关于软删除</span>
  270.         <span>2020-05-08</span>
  271.       </a>
  272.       <a href="">
  273.         <span>php从5.2升级到5.6后，不会跳出JS的提交成功提示框了！</span>
  274.         <span>2020-05-08</span>
  275.       </a>
  276.       <a href="">
  277.         <span>为啥我的一直报错</span>
  278.         <span>2020-05-08</span>
  279.       </a>
  280.       <a href="">
  281.         <span>登陆界面验证显示undefined,求解。</span>
  282.         <span>2020-05-08</span>
  283.       </a>
  284.       <a href="">
  285.         <span>对于数字型SQL注入如何拦截？验证是否为数字能否有效？</span>
  286.         <span>2020-05-08</span>
  287.       </a>
  288.     </div>
  289.     <div
  290.       style="
  291.         margin: 3vw 0vw 20vw 0vw;
  292.         width: 100vw;
  293.         box-sizing: border-box;
  294.         background-color: white;
  295.         width: 100vw;
  296.         text-align: center;
  297.         padding: 2vw;
  298.       "
  299.     >
  300.       <a href="" style="text-decoration: none; color: #7d7d7d;">更多内容</a>
  301.     </div>
  302.     <footer>
  303.       <a href="">
  304.         <span class="iconfont"></span>
  305.         <span>首页</span>
  306.       </a>
  307.       <a href="">
  308.         <span class="iconfont"></span>
  309.         <span>视频</span>
  310.       </a>
  311.       <a href="">
  312.         <span class="iconfont"></span>
  313.         <span>社区</span>
  314.       </a>
  315.       <a href="">
  316.         <span class="iconfont"></span>
  317.         <span>我的</span>
  318.       </a>
  319.     </footer>
  320.   </body>
  321. </html>

4.css样式：

  1.     <style>
  2.       * {
  3.         margin: 0px;
  4.         padding: 0px;
  5.       }
  6.       body {
  7.         width: 100vw;
  8.         background-color: #dcdddd;
  9.         display: flex;
  10.         flex-flow: column nowrap;
  11.         box-sizing: border-box;
  12.       }
  13.       body > header {
  14.         width: 100vw;
  15.         height: 2.5rem;
  16.         padding: 10px;
  17.         background-color: rgb(48, 52, 56);
  18.         color: white;
  19.         display: flex;
  20.         position: fixed;
  21.         top: 0;
  22.         box-sizing: border-box;
  23.       }
  24.       body > header > a {
  25.         text-decoration: none;
  26.         color: white;
  27.         width: 100vw;
  28.         display: flex;
  29.         flex-flow: row nowrap;
  30.         justify-content: space-between;
  31.         align-items: center;
  32.         box-sizing: border-box;
  33.       }
  34.       body > header > a > span:nth-of-type(2) > img {
  35.         height: 8vw;
  36.       }
  37.       body > header > a:hover > span:last-of-type {
  38.         color: sienna;
  39.       }
  40.       body > .solider > a > img {
  41.         width: 100vw;
  42.         margin-top: 1vw;
  43.       }
  44.       body > .solider {
  45.         margin-top: 4vw;
  46.       }
  47.       body > .nav {
  48.         background-color: white;
  49.         width: 100vw;
  50.         /* margin-top: 0.1vw; */
  51.         display: flex;
  52.         flex-flow: column nowrap;
  53.         align-content: space-around;
  54.         justify-content: center;
  55.         box-sizing: border-box;
  56.       }
  57.       body > .nav > .one,
  58.       body > .nav > .two {
  59.         font-size: 2.5vw;
  60.         padding: 3vw;
  61.         display: flex;
  62.         flex-flow: row nowrap;
  63.         justify-content: space-around;
  64.         align-content: center;
  65.       }
  66.       body > .nav > .one > a,
  67.       body > .nav > .two > a {
  68.         text-decoration: none;
  69.         color: grey;
  70.         display: flex;
  71.         flex-flow: column nowrap;
  72.         align-items: center;
  73.       }
  74.       body > .nav > .one > a > span > img,
  75.       body > .nav > .two > a > span > img {
  76.         height: 11vw;
  77.       }
  78.       body > h3 {
  79.         margin: 6vw 2vw 2vw 2vw;
  80.         color: #7d7d7d;
  81.       }
  82.       body > .tj1 {
  83.         display: flex;
  84.         box-sizing: border-box;
  85.       }
  86.       body > .tj1 > a {
  87.         width: 100vw;
  88.         display: flex;
  89.         flex-flow: row nowrap;
  90.         justify-content: space-between;
  91.         box-sizing: border-box;
  92.       }
  93.       body > .tj1 > a > img {
  94.         width: 49vw;
  95.         height: 24vw;
  96.       }
  97.       body > .tj2 > .t > a > img,
  98.       body > .gx > .t > a > img,
  99.       body > .wz > .t > a > img {
  100.         width: 41vw;
  101.         height: 20vw;
  102.       }
  103.       body > .tj2,
  104.       body > .gx,
  105.       body > .wz {
  106.         width: 100vw;
  107.         display: flex;
  108.         flex-flow: column nowrap;
  109.         align-content: center;
  110.       }
  111.       body > .tj2 > .t,
  112.       body > .gx > .t {
  113.         margin-top: 2vw;
  114.         background-color: white;
  115.         height: 22vw;
  116.         padding-left: 2vw;
  117.         padding-top: 2vw;
  118.         display: flex;
  119.         flex-flow: row nowrap;
  120.         align-items: flex-start;
  121.       }
  122.       body > .tj2 > .t > div,
  123.       body > .gx > .t > div,
  124.       body > .wz > .t > div {
  125.         padding-left: 3vw;
  126.         display: flex;
  127.         flex-flow: column nowrap;
  128.         justify-content: space-around;
  129.       }
  130.       body > .tj2 > .t > div > a,
  131.       body > .gx > .t > div > a,
  132.       body > .wz > .t > div > a {
  133.         text-decoration: none;
  134.         color: #7d7d7d;
  135.         font-size: 3vw;
  136.       }
  137.       body > .tj2 > .t > div > p {
  138.         padding-top: 2vw;
  139.         font-size: 2.5vw;
  140.         color: #7d7d7d;
  141.         display: flex;
  142.         flex-flow: row nowrap;
  143.         justify-content: flex-start;
  144.       }
  145.       body > .tj2 > .t > div > p > span:first-of-type,
  146.       body > .gx > .t > div > p > span:first-of-type {
  147.         background-color: gray;
  148.         color: white;
  149.         border-radius: 2vw;
  150.         margin-right: 1vw;
  151.       }
  152.       body > .gx > .t > div > p {
  153.         padding-top: 2vw;
  154.         font-size: 2.5vw;
  155.         color: #7d7d7d;
  156.       }
  157.       body > .gx > .t > div > p:last-of-type {
  158.         margin-right: 5vw;
  159.         display: flex;
  160.         flex-flow: row nowrap;
  161.         justify-content: space-between;
  162.       }
  163.       body > .wz > .t > div > span {
  164.         font-size: 2.5vw;
  165.         color: #7d7d7d;
  166.         margin-top: 2vw;
  167.       }
  168.       body > .wz > .t > div {
  169.         margin-right: 3vw;
  170.       }
  171.       body > .wz > .t {
  172.         margin-top: 2vw;
  173.         background-color: white;
  174.         height: 22vw;
  175.         padding-left: 2vw;
  176.         padding-top: 2vw;
  177.         display: flex;
  178.         flex-flow: row nowrap;
  179.         align-items: flex-start;
  180.         justify-content: space-between;
  181.       }
  182.       body > .wz > .t > a {
  183.         margin-right: 2vw;
  184.       }
  185.       body > .bw,
  186.       body > .wd {
  187.         width: 100vw;
  188.         display: flex;
  189.         flex-flow: column nowrap;
  190.         justify-content: flex-start;
  191.       }
  192.       body > .bw > a,
  193.       body > .wd > a {
  194.         background-color: white;
  195.         width: 100vw;
  196.         margin-top: 2vw;
  197.         text-decoration: none;
  198.         padding: 3vw;
  199.         display: flex;
  200.         flex-flow: row nowrap;
  201.         justify-content: space-between;
  202.         box-sizing: border-box;
  203.       }
  204.       body > .bw > a:first-of-type,
  205.       body > .wd > a:first-of-type {
  206.         margin-top: 0vw;
  207.       }
  208.       body > .bw > a > span:first-of-type,
  209.       body > .wd > a > span:first-of-type {
  210.         font-size: 3vw;
  211.         color: #7d7d7d;
  212.       }
  213.       body > .bw > a > span:last-of-type,
  214.       body > .wd > a > span:last-of-type {
  215.         font-size: 2.5vw;
  216.         color: #7d7d7d;
  217.       }
  219.       footer {
  220.         height: 6vh;
  221.         width: 100vw;
  222.         background-color: rgba(148, 163, 206, 0.8);
  223.         position: fixed;
  224.         bottom: 0;
  225.         display: flex;
  226.         justify-content: space-around;
  227.         align-items: center;
  228.         text-decoration: none;
  229.       }
  231.       main {
  232.         margin-bottom: 8vh;
  233.       }
  234.       h4 {
  235.         white-space: nowrap;
  236.         text-overflow: ellipsis;
  237.         overflow: hidden;
  238.       }
  239.       .desc {
  240.         display: block;
  241.         font-size: 0.7rem;
  242.         white-space: nowrap;
  243.         text-overflow: ellipsis;
  244.         overflow: hidden;
  245.       }
  246.       a {
  247.         text-decoration: none;
  248.       }
  249.     </style>

5.学习感想：

通过这阶段的课程，从中学习到了很多知识，例如、布局，css样式等，通过学习后的作业结论，只要将这些基础知识学好，就能按照自己的方式来完成作业及以后的作品制作，因为之前没有接触过这些所有学习起来很吃力，每天要记得东西非常多，很多东西不知道怎么写，要翻资料，要试着做，错了又重新写，实在找不出解决办法时只有看同学使用的方法进行学习，观看录播视频照做，自己手写做笔记、虽然如此，但是还有很多很多不足的地方，在学习过PHP之后才知道前端比后端简单的多，虽然现在跟不上、但是我没有放弃，我仍然要坚持，有时间就看录播，自己多加练习复习，时刻提醒自己不能半途而废（补交作业。）

上一条：mysqli的增删改查操作下一条：PHP 文件加载与对象基础
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多