简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CCS3：PHP中文网移动版
Blogger Information
Blog 2
fans 0
comment 0
visits 1286
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
CCS3：PHP中文网移动版
づ太依赖
Original
668 people have browsed it

实现代码

  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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>php中文网</title>
  9.     <link rel="stylesheet" href="font/font.css">
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  16.         a {
  17.             text-decoration: none;
  18.             color: #666;
  19.         }
  21.         html {
  22.             /* vw: 可视区宽度,100vw:表示占满100份 */
  23.             width: 100vw;
  24.             height: 100vh;
  25.             /* 在html中设置字体大小, 给后的rem单位用 */
  26.             font-size: 14px;
  27.         }
  29.         body {
  30.             min-width: 360px;
  31.             background-color: #fff;
  32.             display: flex;
  33.             flex-flow: column nowrap;
  34.         }
  36.         header {
  37.             display: flex;
  38.             top: 0;
  39.             background-color: #2d353c;
  40.             height: 50px;
  41.             box-sizing: border-box;
  42.             align-items: center;
  43.             justify-content: space-between;
  44.             padding: 0 20px;
  45.             /* width: 90vw; */
  46.             line-height: 50px;
  47.             /* width: 100%; */
  48.         }
  50.         header>p {
  51.             color: rgb(250, 249, 249);
  52.         }
  54.         header>span {
  55.             color: aliceblue;
  56.             font-size: 20px;
  57.             /* padding-right: 5%; */
  58.         }
  60.         .banner img {
  61.             width: 100%;
  62.         }
  63.         /* 导航区 */
  65.         nav {
  66.             height: 100px;
  67.             display: flex;
  68.             flex-flow: row wrap;
  69.         }
  71.         nav>div {
  72.             width: 25vw;
  73.             display: flex;
  74.             flex-flow: column nowrap;
  75.             align-items: center;
  76.         }
  77.         /* 推荐课程 */
  79.         .kc1 {
  80.             display: flex;
  81.             flex-flow: row nowrap;
  82.         }
  84.         .kc1 img {
  85.             width: 98%;
  86.             box-sizing: border-box;
  87.             flex: 1 0 50%;
  88.             align-items: center;
  89.         }
  91.         footer {
  92.             position: fixed;
  93.             bottom: 0;
  94.             width: 100%;
  95.             height: 55px;
  96.             display: flex;
  97.             justify-content: space-around;
  98.             background-color: cornsilk;
  99.         }
  101.         .gx {
  102.             display: flex;
  103.             padding: 5px 4px;
  104.             box-sizing: border-box;
  105.             justify-items: center;
  106.             flex-flow: row nowrap;
  107.         }
  109.         .gx>a {
  110.             display: flex;
  111.             height: 100px;
  112.         }
  114.         .gx img {
  115.             width: 100%;
  116.         }
  118.         footer>div>a {
  119.             display: flex;
  120.             width: 25vw;
  121.             flex-flow: column nowrap;
  122.             align-items: center;
  123.             border-top: 1px solid rgb(79, 79, 80);
  124.         }
  125.     </style>
  126. </head>
  128. <body>
  129.     <!-- 头部 -->
  130.     <header>
  131.         <a href="">头像</a>
  132.         <p>PHP中文网</p>
  133.         <span class="iconfont">&#xe67d;</span>
  134.     </header>
  136.     <!-- 轮播图 -->
  137.     <div class="banner">
  139.         <img src="images/lb1.png" alt="">
  141.     </div>
  144.     <!-- 导航区 -->
  145.     <nav>
  146.         <div>
  147.             <a href=""><span class="iconfont">&#xe632;</span></a>
  148.             <a href="">html</a>
  149.         </div>
  150.         <div>
  151.             <a href=""><span class="iconfont">&#xe632;</span></a>
  152.             <a href="">html</a>
  153.         </div>
  154.         <div>
  155.             <a href=""><span class="iconfont">&#xe632;</span></a>
  156.             <a href="">html</a>
  157.         </div>
  158.         <div>
  159.             <a href=""><span class="iconfont">&#xe632;</span></a>
  160.             <a href="">html</a>
  161.         </div>
  162.         <div>
  163.             <a href=""><span class="iconfont">&#xe632;</span></a>
  164.             <a href="">html</a>
  165.         </div>
  166.         <div>
  167.             <a href=""><span class="iconfont">&#xe632;</span></a>
  168.             <a href="">html</a>
  169.         </div>
  170.         <div>
  171.             <a href=""><span class="iconfont">&#xe632;</span></a>
  172.             <a href="">html</a>
  173.         </div>
  174.         <div>
  175.             <a href=""><span class="iconfont">&#xe632;</span></a>
  176.             <a href="">html</a>
  177.         </div>
  179.     </nav>
  180.     <hr>
  182.     <!-- 推荐课程 -->
  183.     <h2 class="title">
  184.         推荐课程
  185.     </h2>
  186.     <div class="kc1">
  187.         <div>
  188.             <a href=""><img src="images/ke2.jpg" alt=""></a>
  189.         </div>
  190.         <div>
  191.             <a href=""><img src="images/kc1.jpg" alt=""></a>
  192.         </div>
  193.     </div>
  197.     <!-- 最新更新 -->
  198.     <h2>最新课程</h2>
  199.     <div class="gxs">
  200.         <div class="gx">
  201.             <a href=""><img src="images/py1.jpg" alt=""></a>
  202.             <a>2019年python自学视频</a>
  203.         </div>
  204.     </div>
  205.     <div class="gxs">
  206.         <div class="gx">
  207.             <a href=""><img src="images/py1.jpg" alt=""></a>
  208.             <a>2019年python自学视频</a>
  209.         </div>
  210.     </div>
  211.     <div class="gxs">
  212.         <div class="gx">
  213.             <a href=""><img src="images/py1.jpg" alt=""></a>
  214.             <a>2019年python自学视频</a>
  215.         </div>
  216.     </div>
  218.     <!-- 最新文章 -->
  219.     <div></div>
  221.     <!-- 更多内容 -->
  222.     <div class="gd">更多内容</div>
  224.     <!-- 尾部 -->
  225.     <footer>
  226.         <div>
  227.             <a href=""> <span class="iconfont">&#xe723;</span>
  228.                 <span>首页</span></a>
  230.         </div>
  231.         <div>
  232.             <a href=""><span class="iconfont">&#xe60d;</span>
  233.             <span>视频</span>
  234.             </a>
  236.         </div>
  237.         <div>
  238.             <a href=""><span class="iconfont">&#xe62e;</span>
  239.                 <span>社区</span>
  240.             </a>
  242.         </div>
  243.         <div>
  244.             <a href="">
  245.                 <span class="iconfont">&#xe621;</span>
  246.                 <span>我的</span>
  247.             </a>
  249.         </div>
  250.     </footer>
  251. </body>
  253. </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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！