Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿php.cn手机端
Blogger Information
Blog 47
fans 1
comment 0
visits 40564
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手机端
新手1314
Original
552 people have browsed it

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>防php中文网手机端</title>
  8.     <link rel="stylesheet" href="css/reset.css" />
  9.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3280782_az0e3d2vvfl.css" />
  10.     <link rel="stylesheet" href="css/header.css" />
  11.     <link rel="stylesheet" href="css/main.css" />
  12.     <link rel="stylesheet" href="css/footer.css" />
  13.   </head>
  14.   <body>
  15.     <header>
  16.       <div class="head">
  17.         <div><img src="images/user.jpg" alt="" class="touxiang" /></div>
  18.         <div><img src="images/logo.png" alt="" class="logo" /></div>
  19.         <div>
  20.           <img src="images/php.png" alt="" class="php" />
  21.           <span class="iconfont icon-spread-left"></span>
  22.         </div>
  23.       </div>
  24.     </header>
  25.     <div><img src="images/lunbo.jpg" alt="" class="lunbo" /></div>
  26.     <main>
  27.       <div class="main">
  28.         <div class="list">
  29.           <a href=""><img src="images/html.png" alt="" /></a>
  30.           <a href="" class="ziti">HTML/CSS</a>
  31.         </div>
  32.         <div class="list">
  33.           <a href=""><img src="images/JavaScript.png" alt="" /></a>
  34.           <a href="" class="ziti">JavaScript</a>
  35.         </div>
  36.         <div class="list">
  37.           <a href=""><img src="images/code.png" alt="" /></a>
  38.           <a href="" class="ziti">服务器</a>
  39.         </div>
  40.         <div class="list">
  41.           <a href=""><img src="images/sql.png" alt="" /></a>
  42.           <a href="" class="ziti">数据库</a>
  43.         </div>
  44.         <div class="list">
  45.           <a href=""><img src="images/app.png" alt="" /></a>
  46.           <a href="" class="ziti">移动端</a>
  47.         </div>
  48.         <div class="list">
  49.           <a href=""><img src="images/shouce.png" alt="" /></a>
  50.           <a href="" class="ziti">手册</a>
  51.         </div>
  52.         <div class="list">
  53.           <a href=""><img src="images/gongju.png" alt="" /></a>
  54.           <a href="" class="ziti">工具</a>
  55.         </div>
  56.         <div class="list">
  57.           <a href=""><img src="images/live.png" alt="" /></a>
  58.           <a href="" class="ziti">直播</a>
  59.         </div>
  60.       </div>
  62.       <div class="tuijian">
  63.         <h3>推荐课程</h3>
  64.         <div>
  65.           <img src="images/tp.png" alt="" />
  66.           <img src="images/tp6.png" alt="" />
  67.         </div>
  68.         <div class="clear">
  69.           <div><img src="images/php8.png" alt="" /></div>
  70.           <div class="zi">
  71.             <h2><a href="">php8,我来也</a></h2>
  72.             <p>
  73.               <span class="jishu">初级</span>
  74.               <span>171357次播放</span>
  75.             </p>
  76.           </div>
  77.           <div><img src="images/2021php.png" alt="" /></div>
  78.           <div class="zi">
  79.             <h2><a href="">细说php(2021版)第一季</a></h2>
  80.             <p>
  81.               <span class="jishu">中级</span>
  82.               <span>154426次播放</span>
  83.             </p>
  84.           </div>
  85.         </div>
  86.       </div>
  87.     </main>
  88.     <footer>
  89.       <div class="item active">
  90.         <a href="" class="iconfont icon-shouye"></a>
  91.         <a href="">首页</a>
  92.       </div>
  93.       <div class="item">
  94.         <a href="" class="iconfont icon-shipin1x"></a>
  95.         <a href="">视频</a>
  96.       </div>
  97.       <div class="item">
  98.         <a href=""><img src="images/gif_live.gif" alt="" /></a>
  99.         <a href="" class="font-px">培训</a>
  100.       </div>
  101.       <div class="item">
  102.         <a href="" class="iconfont icon-code-circle"></a>
  103.         <a href="">社区</a>
  104.       </div>
  105.       <div class="item">
  106.         <a href="" class="iconfont icon-31wode"></a>
  107.         <a href="">我的</a>
  108.       </div>
  109.     </footer>
  110.   </body>
  111. </html>

css:

  1. reset.css:
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. a {
  8.   text-decoration: none;
  9.   color: #666;
  10. }
  12. li {
  13.   list-style: none;
  14. }
  15. html {
  16.   font-size: calc(100vw / 3.75);
  17. }
  19. body {
  20.   font-size: 0.12rem;
  21.   color: #333;
  22.   max-width: 750px;
  23.   min-width: 320px;
  24.   margin: auto;
  25.   background-color: #f4f4f4;
  26. }
  28. @media (max-width: 320px) {
  29.   html {
  30.     font-size: 85px;
  31.   }
  32. }
  33. @media (min-width: 640px) {
  34.   html {
  35.     font-size: 170px;
  36.   }
  37. }
  39. footer.css:
  40. footer {
  41.   display: grid;
  42.   grid-template-columns: repeat(5, 1fr);
  43.   background-color: #f4f4f4;
  44.   width: 100vw;
  45.   height: 0.52rem;
  46.   position: fixed;
  47.   bottom: 0;
  48.   left: 0;
  49.   right: 0;
  50.   border-top: 1px solid #ccc;
  51.   grid-template-rows: 0.52rem;
  52. }
  53. footer .item {
  54.   text-align: center;
  55. }
  56. footer .item.active {
  57.   text-align: center;
  58. }
  59. footer .item.active a {
  60.   /* padding-top: 10px; */
  61.   color: red;
  62.   /* padding: 0.05rem 0; */
  63.   display: block;
  64.   /* width: 20%; */
  65.   line-height: 0.2rem;
  66.   font-weight: bold;
  67.   /* font-size: 16px; */
  68. }
  69. footer .item.active .iconfont {
  70.   margin-top: 0.05rem;
  71.   font-size: 0.16rem;
  72. }
  73. footer .item .iconfont {
  74.   margin-top: 0.05rem;
  75.   font-size: 0.16rem;
  76. }
  77. footer .item a {
  78.   display: block;
  79.   line-height: 0.2rem;
  80.   font-weight: bold;
  81. }
  82. footer .item a img {
  83.   margin-top: 0.05rem;
  84.   width: 25%;
  85.   height: 50%;
  86. }
  87. footer .item .font-px {
  88.   margin-top: -4px;
  89.   display: block;
  90.   font-weight: bold;
  91. }
  93. header.css:
  94. header .head {
  95.   display: grid;
  96.   grid-template-columns: repeat(3, 1fr);
  97.   background-color: #2d353c;
  98.   /* height: 40px; */
  99.   grid-template-rows: 0.42rem;
  100. }
  101. header .touxiang {
  102.   margin-left: 0.05rem;
  103.   margin-top: 0.07rem;
  104.   width: 0.23rem;
  105.   height: 0.23rem;
  106.   border-radius: 50%;
  107. }
  108. header .logo {
  109.   margin-left: 0.12rem;
  110.   width: 0.93rem;
  111.   height: 0.45rem;
  112. }
  113. header .php {
  114.   margin-top: 0.12rem;
  115.   width: 0.7rem;
  116.   height: auto;
  117. }
  118. header .iconfont {
  119.   margin-top: 0.1rem;
  120.   float: right;
  121.   margin-right: 0.15rem;
  122.   color: white;
  123.   font-size: 0.19rem;
  124.   place-items: center center;
  125. }
  127. .lunbo {
  128.   height: 1.5rem;
  129.   width: 100%;
  130. }
  132. main.css:
  133. main .main {
  134.   display: grid;
  135.   height: 1.7rem;
  136.   background-color: white;
  137.   grid-template-columns: repeat(4, 1fr);
  138.   grid-template-rows: repeat(2, 1fr);
  139. }
  140. main .main .list {
  141.   display: grid;
  142.   margin-top: 0.1rem;
  143.   text-align: center;
  144. }
  146. main .main .list img {
  147.   width: 0.45rem;
  148.   height: 0.45rem;
  149. }
  150. main .main .list .ziti {
  151.   margin-top: -10px;
  152.   font-weight: bold;
  153.   font-size: 14px;
  154.   /* color: darkgray; */
  155.   color: slategray;
  156. }
  158. main .tuijian {
  159.   margin-top: 0.2rem;
  160.   padding: 0.1rem 0.1rem 0.1rem;
  161. }
  162. main .tuijian h3 {
  163.   display: block;
  164.   padding-bottom: 0.1rem;
  165.   font-size: 0.18rem;
  166.   font-weight: bold;
  167. }
  168. main .tuijian img {
  169.   margin-bottom: 0.2rem;
  170.   height: 0.85rem;
  171.   width: 49%;
  172. }
  173. main .tuijian .clear {
  174.   display: grid;
  175.   background-color: #fff;
  176.   height: 2.1rem;
  177.   grid-template-columns: 1.6rem 1.95rem;
  178.   grid-template-rows: repeat(2, 1fr);
  179. }
  180. main .tuijian .clear img {
  181.   margin: 10px;
  182.   /* padding: 10px; */
  183.   width: 1.38rem;
  184.   height: 0.8rem;
  185. }
  186. main .tuijian .clear .zi {
  187.   /* margin: 10px; */
  188.   padding-top: 0.1rem;
  189. }
  190. main .tuijian .clear .zi h2 a {
  191.   font-weight: 400;
  192.   font-size: 0.17rem;
  193.   color: #888;
  194. }
  195. main .tuijian .clear .zi p {
  196.   padding-top: 10px;
  197. }
  198. main .tuijian .clear .zi p .jishu {
  199.   background-color: #595757;
  200.   border-radius: 0.08rem;
  201.   color: #fff;
  202.   font-size: 0.1rem;
  203.   padding: 0.02rem;
  204. }
Correcting teacher：PHPzPHPz

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