search

博客列表 >仿php.cn手机端

仿php.cn手机端

新手1314
新手1314原创
2022年07月19日 17:49:37553浏览

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. }
上一条：0718京东下一条：移动布局仿JD
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多