Community Learn Tools Library Leisure
search
English
Home > List of blog posts > php中文网移动端首页仿写
Blogger Information
Blog 12
fans 0
comment 0
visits 8541
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中文网移动端首页仿写
brait
Original
568 people have browsed it

1.仿写php中文网首页

  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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="static/css/init.css">
  8.     <link rel="stylesheet" href="static/css/style.css">
  9.     <title>Document</title>
  10. </head>
  11. <body>
  12.     <header>
  13.         <img src="static/images/user-pic.jpeg" alt="">
  14.         <img src="static/images/logo.png" alt="">
  15.         <img src="static/images/user-nav.jpg" alt="">
  16.     </header>
  17.     <!-- 轮播图 -->
  18.     <div class="banner">
  19.         <img src="static/images/banner.jpg" alt="">
  20.     </div>
  21.     <!-- 导航 -->
  22.     <nav>
  23.         <ul>
  24.             <li>
  25.                 <a href="">
  26.                     <img src="static/images/html.png" alt="">
  27.                     <span>HTML/CSS</span>
  28.                 </a>
  29.             </li>
  30.             <li>
  31.                 <a href="">
  32.                     <img src="static/images/JavaScript.png" alt="">
  33.                     <span>JavaScript</span>
  34.                 </a>
  35.             </li>
  36.             <li>
  37.                 <a href="">
  38.                     <img src="static/images/code.png" alt="">
  39.                     <span>服务端</span>
  40.                 </a>
  41.             </li>
  42.             <li>
  43.                 <a href="">
  44.                     <img src="static/images/sql.png" alt="">
  45.                         <span>数据库</span>
  46.                 </a>
  47.             </li>
  48.         </ul>
  50.         <ul>
  51.             <li>
  52.                 <a href=""><img src="static/images/app.png" alt="">
  53.                 <span>移动端</span>
  54.                 </a>
  55.             </li>
  56.             <li>
  57.                 <a href="">
  58.                     <img src="static/images/manual.png" alt="">
  59.                     <span>手册</span>
  60.                 </a>
  61.             </li>
  62.             <li>
  63.                 <a href=""><img src="static/images/tool2.png" alt="">
  64.                 <span>工具</span>
  65.                 </a>
  66.             </li>
  67.             <li>
  68.                 <a href="">
  69.                     <img src="static/images/live.png" alt="">
  70.                     <span>直播</span>
  71.                 </a>
  72.             </li>
  73.         </ul>
  74.     </nav>
  75.     <!-- 主体 -->
  76.     <main>
  77.         <!-- 课程推荐 -->
  78.         <article class="recommend">
  79.             <h3>推荐课程</h3>
  80.             <section>
  81.                     <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
  82.                     <a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
  83.             </section>
  85.             <section>
  86.                 <div>
  87.                     <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
  88.                     <span>
  89.                         <a href="">CI框架30分钟极速入门</a>
  90.                         <span><i>中级</i>49738次播放</span>
  91.                     </span>
  92.                 </div>
  94.                 <div>
  95.                     <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
  96.                     <span>
  97.                         <a href="">CI框架30分钟极速入门</a>
  98.                         <span><i>中级</i>49738次播放</span>
  99.                     </span>
  100.                     </div>
  101.             </section>
  102.         </article>
  104.         <article class="newcourse">
  105.             <h3>最新课程</h3>
  106.             <section>
  107.                         <div>
  108.                             <a href=""><img src="static/images/npic1.png" alt=""></a>
  109.                             <span>
  110.                                 <a href="">CI框架30分钟极速入门</a>
  111.                                 <span><i>中级</i>49738次播放</span>
  112.                             </span>
  113.                         </div>
  115.                         <div>
  116.                             <a href=""><img src="static/images/npic2.png" alt=""></a>
  117.                             <span>
  118.                                 <a href="">CI框架30分钟极速入门</a>
  119.                                 <span><i>中级</i>49738次播放</span>
  120.                             </span>
  121.                         </div>
  122.                         <div>
  123.                             <a href=""><img src="static/images/npic3.png" alt=""></a>
  124.                             <span>
  125.                                 <a href="">CI框架30分钟极速入门</a>
  126.                                 <span><i>中级</i>49738次播放</span>
  127.                                 </span>
  128.                         </div>
  129.             </section>
  130.         </article>
  131.         <!-- 最新文章 -->
  132.         <article class="narticle">
  133.             <h3>最新文章</h3>
  134.             <div>
  135.                 <span>
  136.                     <a href=""><span>PHP如何去除数组中的空值(图文+视频)</span></a>发布时间：2018-10-09
  137.                 </span>
  138.                 <a href=""><img src="static/images/nar1.png" alt=""></a>
  139.             </div>
  140.             <div>
  141.                     <span>
  142.                         <a href=""><span>PHP如何去除数组中的空值(图文+视频)</span></a>发布时间：2018-10-09
  143.                     </span>
  144.                     <a href=""><img src="static/images/nar1.png" alt=""></a>
  145.             </div>
  146.             <div>
  147.                         <span>
  148.                             <a href=""><span>PHP如何去除数组中的空值(图文+视频)</span></a>发布时间：2018-10-09
  149.                         </span>
  150.                         <a href=""><img src="static/images/nar1.png" alt=""></a>
  151.             </div>
  152.             <div>
  153.                 <span>更多内容</span>
  154.             </div>
  156.         </article>
  157.         <!-- 最新博文 -->
  158.         <article class="nblog">
  159.             <h3>最新博文</h3>
  160.             <div>
  161.                 <span><a href="">移动端/手机端去除横向进度条</a>
  162.                     <span>2019-11-08</span>
  163.                 </span>
  164.             </div>
  165.             <div>
  166.                     <span><a href="">移动端/手机端去除横向进度条</a>
  167.                         <span>2019-11-08</span>
  168.                     </span>
  169.             </div>
  170.             <div>
  171.                     <span><a href="">移动端/手机端去除横向进度条</a>
  172.                         <span>2019-11-08</span>
  173.                     </span>
  174.             </div>
  176.             <div>
  177.                 <span>更多内容</span>
  178.             </div>
  179.         </article>
  180.     </main>
  183.     <!-- 底部 -->
  184.     <footer>
  185.         <a href=""><img src="static/font-icon/zhuye.png" alt=""><span>主页</span></a>
  186.     <a href="">
  187.         <img src="static/font-icon/video.png" alt="">
  188.         <span>视频</span>
  189.     </a>
  190.     <a href="">
  191.         <img src="static/font-icon/luntan.png" alt="">
  192.         <span>社区</span>
  193.     </a>
  194.     <a href="">
  195.         <img src="static/font-icon/geren.png" alt="">
  196.         <span>我的</span>
  197.     </a>
  198.     </footer>
  199. </body>
  200. </html>

CSS部分：

  1. /* 头部 */
  2. header{
  3.     position: fixed;
  4.     top:0;
  6.     width:100%;
  7.     height: 42px;
  8.     background-color: #444444;
  9.     color:white;
  11.     min-width: 320px;
  12.     max-width: 768px;
  14.     display: flex;
  15.     justify-content: space-between;
  16.     align-items: center;
  18. }
  20. header > img:first-of-type,
  21. header > img:last-of-type{
  22.     width: 26px;
  23.     height: 26px;
  24.     margin: 5px;
  25. }
  27. header > img:first-of-type{
  28.     border-radius:50% ;
  29. }
  31. header > img{
  32.     width:94px;
  33. }
  35. /* 轮播图 */
  36. div > .banner {
  37.     display: flex;
  38.     height: 200px;
  39. }
  40. /* 导航 */
  41. nav{
  42.     background-color: white;
  43.     display: flex;
  44.     flex-flow:column nowrap;
  45. }
  47. nav img{
  48.     width: 45px;
  49.     height: 49px;
  50. }
  52. nav ul {
  53.     display: flex;
  54. }
  56. nav ul li {
  57.     flex: 1;
  58. }
  60. nav  ul li a {
  61.     display: flex;
  62.     flex-flow: column wrap;
  63.     align-items: center;
  64.     margin:10px;
  65. }
  67. nav ul li a span{
  68.     margin-top: 5px;
  69. }
  71. /* 推荐课程 */
  72. main > .recommend > section:first-of-type{
  74.     display: flex;
  75. }
  77. main > .recommend > section:first-of-type > a {
  78.     margin: 5px;
  79.     flex: 1;
  80. }
  82. main > .recommend > section:first-of-type > a > img{
  83.     height: 90px;
  84. }
  86. main > .recommend > section:last-of-type{
  88.     display: flex;
  89.     flex: 1;
  90.     flex-flow: column nowrap;
  91.     margin: 5px;
  93. }
  95. main > .recommend > section:last-of-type > div  img{
  97.     width: 350px;
  98.     height: 90px;
  99. }
  101. main > .recommend > section:last-of-type > div{
  102.     display: flex;
  103.     margin-bottom: 10px;
  104.     background-color: white;
  105. }
  106. main > .recommend > section:last-of-type > div > span{
  107.     display: flex;
  108.     flex-flow: column wrap;
  109.     margin-top: 5px;
  110.     padding-left: 10px;
  111. }
  113. main > .recommend > section:last-of-type > div > span i{
  114.     font-style: normal;
  115.     background-color: #444444;
  116.     border-radius: 4px;
  117.     padding:0 5px;
  118.     color: white;
  119. }
  120. /* 最新课程 */
  121. main > .newcourse >section {
  122.     display: flex;
  123.     flex-flow: column nowrap;
  124. }
  126. main >.newcourse img{
  127.     width: 350px;
  128.     height: 90px;
  129. }
  131. main > .newcourse  div{
  132.     display: flex;
  133.     margin-bottom: 10px;
  134.     background-color: white;
  135.     padding:10px;
  136. }
  137. main > .newcourse div > span{
  138.     display: flex;
  139.     flex-flow: column wrap;
  140.     margin-top: 5px;
  141.     padding-left: 10px;
  143. }
  145. main > .newcourse div > span i{
  146.     font-style: normal;
  147.     background-color: #444444;
  148.     border-radius: 4px;
  149.     color:white;
  150. }
  152. main > .narticle >div{
  153.     background-color: white;
  154.     display: flex;
  155.     justify-content: space-between;
  156.     margin-bottom: 10px;
  157.     padding: 5px;
  159. }
  161. main > .narticle >div img{
  162.     margin-right: 10px;
  163.     width: 330px;
  164.     height: 70px;
  165.     margin-top: 5px;
  166.     padding-left: 10px;
  167. }
  169. main > .narticle > div > span{
  170.     display: flex;
  171.     flex-flow: column wrap;
  172.     padding-top: 20px;
  173.     padding-left: 20px;
  174. }
  175. main > .narticle >div:last-of-type >span{
  177.     margin:0 auto;
  178.     padding:5px;
  180. }
  181. /* 最新博文 */
  182. main > .nblog >div{
  183.     background-color: white;
  184.     display: flex;
  185.     flex-flow: column nowrap;
  186.     margin-bottom: 10px;
  187.     padding: 5px;
  189. }
  191. main > .nblog >div>span{
  192.     margin-bottom: 10px;
  193.     padding: 10px;
  194.     display: flex;
  195.     justify-content: space-between;
  196.     align-content: center;
  197. }
  198. main > .nblog >div:last-of-type >span{
  199.     margin:0 auto;
  200.     padding:5px;
  201. }
  202. /* 底部 */
  203. footer{
  204.     position: fixed;
  205.     bottom: 0;
  207.     width:100%;
  208.     height: 42px;
  209.     padding: 3px;
  211.     min-width: 320px;
  212.     max-width: 768px;
  214.     display: flex;
  215.     justify-content: space-around;
  216.     align-items: center;
  217. }
  219. footer a img {
  220.     width: 16px;
  221.     height: 16px;
  222.     margin: 5px;
  223. }
  225. footer a {
  226.     display: flex;
  227.     flex-flow: column wrap;
  228.     margin: 3px;
  229. }
  231. body{
  232.     height: 2500px;
  233. }

运行效果：

2.手抄导航区代码

3.总结

学的时候觉得好像都记下来了，真的到了仿写的时候就傻眼了，根本没有思绪。我还是坚持关掉老师的示例代码，速度慢的和刚学打字一样，慢慢的敲。还是那句话，一层层嵌套的盒子只要不搞混，就不会写不出来。

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