Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿写PHP中文网(第九章 1107作业）-PHP培训九期线上班
Blogger Information
Blog 8
fans 0
comment 0
visits 4901
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中文网(第九章 1107作业）-PHP培训九期线上班
yany
Original
610 people have browsed it

1/将PHP中文网移动端剩余部分的内容写完
demo2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>仿PHP中文网手机版首页</title>
  6.     <link rel="stylesheet" href="css/style2.css">
  7. </head>
  8. <body>
  9. <header>
  10.     <img src="css/images/user-pic.jpeg" alt="">
  11.     <img src="css/images/logo.png" alt="">
  12.     <img src="css/images/user-nav.jpg" alt="">
  13. </header>
  14. <div class="banner">
  15.     <img src="css/images/banner.jpg">
  16. </div>
  17. <nav>             /*设置一个导航*/
  18.    <ul>           /*第一排导航*/
  19.        <li>
  20.            <a href="">
  21.                <img src="css/images/html.png" alt="">         /*图片链接*/
  22.                <span>HTML/CSS</span>                  /*图片对应的名称*/
  23.            </a>
  24.        </li>
  25.        <li>
  26.            <a href="">
  27.                <img src="css/images/JavaScript.png" alt="">
  28.                <span>JavaScript</span>
  29.            </a>
  30.        </li>
  31.        <li>
  32.            <a href="">
  33.                <img src="css/images/code.png" alt="">
  34.                <span>服务端</span>
  35.            </a>
  36.        </li>
  37.        <li>
  38.            <a href="">
  39.                <img src="css/images/sql.png" alt="">
  40.                <span>数据库</span>
  41.            </a>
  42.        </li>
  43.    </ul>
  44.     <ul>
  45.         <li>
  46.             <a href="">
  47.                 <img src="css/images/app.png" alt="">
  48.                 <span>移动端</span>
  49.             </a>
  50.         </li>
  51.         <li>
  52.             <a href="">
  53.                 <img src="css/images/manual.png" alt="">
  54.                 <span>手册</span>
  55.             </a>
  56.         </li>
  57.         <li>
  58.             <a href="">
  59.                 <img src="css/images/tool2.png" alt="">
  60.                 <span>工具</span>
  61.             </a>
  62.         </li>
  63.         <li>
  64.             <a href="">
  65.                 <img src="css/images/live.png" alt="">
  66.                 <span>直播</span>
  67.             </a>
  68.         </li>
  69.     </ul>
  70. </nav>
  71. <main>
  72.     <div class="recommend">
  73.         <h3>推荐课程</h3>
  74.         <section>
  75.             <a href=""><img src="css/images/tjkc1.jpg" alt=""></a>
  76.             <a href=""><img src="css/images/tjkc2.jpg" alt=""></a>
  77.         </section>
  78.         <section>
  79.             <div>
  80.                 <a href=""><img src="css/images/tjkc3.jpg" alt=""></a>
  81.                 <span>
  82.                     <a href="">C框架30分钟极速入门</a>
  83.                     <span><i>中级</i>52972次播放</span>
  84.                 </span>
  85.             </div>
  86.             <div>
  87.                 <a href=""><img src="css/images/tjkc4.jpg" alt=""></a>
  88.                 <span>
  89.                     <a href="">2018前端入门_HTML5</a>
  90.                     <span><i>初级</i>256398次播放</span>
  91.                 </span>
  92.             </div>
  93.         </section>
  94.         <h3>最新更新</h3>
  95.         <section>
  96.             <div>
  97.                 <a href=""><img src="css/images/zxgx1.jpg" alt=""></a>
  98.                 <span>
  99.                     <a href="">2019pytho自学视频</a>
  100.                     <span>本课程适合想从零开始学习python编程语言的开发人员。由浅入深的带...</span>
  101.                     <span><i>初级</i>11941次播放</span>
  102.                 </span>
  103.             </div>
  104.             <div>
  105.                 <a href=""><img src="css/images/zxgx2.png" alt=""></a>
  106.                 <span>
  107.                     <a href="">PHP开发免费公益直播课</a>
  108.                     <span>主讲：php中文网-朱老师（Peter Zhu)时间：2019.10.17 晚 20:00-22:00...</span>
  109.                     <span><i>初级</i>3634次播放</span>
  110.                 </span>
  111.             </div>
  112.             <div>
  113.                 <a href=""><img src="css/images/zxgx3.jpg" alt=""></a>
  114.                 <span>
  115.                     <a href="">从零开始到WEB响应式布局</a>
  116.                     <span>重点介绍了HTML/CSS/web布局前段核心技术，通过视频讲解，了解...</span>
  117.                     <span><i>初级</i>11206次播放</span>
  118.                 </span>
  119.             </div>
  120.             <div>
  121.                 <a href=""><img src="css/images/zxgx4.png" alt=""></a>
  122.                 <span>
  123.                     <a href="">PHP文件基础操作</a>
  124.                     <span>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带...</span>
  125.                     <span><i>中级</i>4179次播放</span>
  126.                 </span>
  127.             </div>
  128.             <div>
  129.                 <a href=""><img src="css/images/zxgx5.jpg" alt=""></a>
  130.                 <span>
  131.                     <a href="">memcache基础课程</a>
  132.                     <span>本课程带你从零认识memcache,让你在一小时左后轻松掌握memcache...</span>
  133.                     <span><i>初级</i>1794次播放</span>
  134.                 </span>
  135.             </div>
  136.             <div>
  137.                 <a href=""><img src="css/images/zxgx6.png" alt=""></a>
  138.                 <span>
  139.                     <a href="">微信小程序--企业微网站</a>
  140.                     <span>1,介绍小程序/开发者工具 2，介绍小程序文档 3，微官网项目 4，首页...</span>
  141.                     <span><i>初级</i>7997次播放</span>
  142.                 </span>
  143.             </div>
  144.         </section>
  145.         <h3>最新文章</h3>
  146.         <section>
  147.             <div>
  148.                 <span>
  149.                     <a href="">linux的mysql配置文件在哪</a>
  150.                     <a href="">发布时间：2019-12-26</a>
  151.                 </span>
  152.                 <a href=""><img src="css/images/zxwz1.png" alt=""></a>
  153.             </div>
  154.             <div>
  155.                 <span>
  156.                     <a href="">linux命令行中如何同时执行多个命令</a>
  157.                     <a href="">发布时间：2019-12-26</a>
  158.                 </span>
  159.                 <a href=""><img src="css/images/zxwz2.jpg" alt=""></a>
  160.             </div>
  161.             <div>
  162.                 <span>
  163.                     <a href="">phpmyadmin需要付费吗</a>
  164.                     <a href="">发布时间：2019-12-26</a>
  165.                 </span>
  166.                 <a href=""><img src="css/images/zxwz3.jpg" alt=""></a>
  167.             </div>
  168.             <div>
  169.                 <span>
  170.                     <a href="">Nginx缓存使用</a>
  171.                     <a href="">发布时间：2019-12-26</a>
  172.                 </span>
  173.                 <a href=""><img src="css/images/zxwz4.jpg" alt=""></a>
  174.             </div>
  175.             <div>
  176.                 <span>
  177.                     <a href="">PHP文字生成透明图片之路</a>
  178.                     <a href="">发布时间：2019-12-26</a>
  179.                 </span>
  180.                 <a href=""><img src="css/images/zxwz5.jpg" alt=""></a>
  181.             </div>
  182.             <div>
  183.                 <a href="">更多内容</a>
  184.             </div>
  186.         </section>
  187.         <h3>最新博文</h3>
  188.         <section>
  189.             <div>
  190.                 <span>
  191.                     <a href="">转载《PHP安全之道》学习笔记1:PHP项目安全设置</a>
  192.                     <a href="">2019-12-25</a>
  193.                 </span>
  194.             </div>
  195.             <div>
  196.                 <span>
  197.                     <a href="">关于双列排版自适应问题：（左侧固定，右侧自适应）成功，（右侧...</a>
  198.                     <a href="">2019-12-24</a>
  199.             </span>
  200.             </div>
  202.             <div>
  203.                 <a href="">更多内容</a>
  204.             </div>
  205.         </section>
  206.         <h3>最新问答</h3>
  207.         <section>
  208.             <div>
  209.                 <span>
  210.                     <a href="">echo是遍历所有元素的对象</a>
  211.                     <a href="">2019-12-25</a>
  212.                 </span>
  213.             </div>
  214.             <div>
  215.                 <span>
  216.                     <a href="">关于tp5.0向小程序返回json格式数据异常问题</a>
  217.                     <a href="">2019-12-25</a>
  218.                 </span>
  219.             </div>
  220.             <div>
  221.                 <span>
  222.                     <a href="">想看以前的课程怎么办，</a>
  223.                     <a href="">2019-12-25</a>
  224.                 </span>
  225.             </div>
  226.             <div>
  227.                 <span>
  228.                     <a href="">hr样式</a>
  229.                     <a href="">2019-12-25</a>
  230.                 </span>
  231.             </div>
  232.             <div>
  233.                 <span>
  234.                     <a href="">谁能告诉我php7+tp5.1时遇到使用session::set()问题</a>
  235.                     <a href="">2019-12-24</a>
  236.                 </span>
  237.             </div>
  238.             <div>
  239.                 <a href="">更多内容</a>
  240.             </div>
  241.         </section>
  242.     </div>
  243. </main>
  244. <footer>
  245.     <div>
  246.         <a href=""><img src="css/font-icon/zhuye.png">首页</a>
  247.         <a href=""><img src="css/font-icon/video.png">视频</a>
  248.         <a href=""><img src="css/font-icon/luntan.png">社区</a>
  249.         <a href=""><img src="css/font-icon/geren.png">我的</a>
  250.     </div>
  251. </footer>
  252. </body>
  253. </html>

init.css

  1. body,footer{
  2.     min-width: 320px;
  3.     max-width: 768px;
  5.     margin: 0 auto;
  6.     background-color: #edeff0;
  7.     overflow-y: initial;
  8.     position: relative;
  9.     color: gray;
  10.     overflow: hidden;
  11.     -webkit-tap-highlight-color: transparent;
  12. }
  13. img{
  14.     width: 100%;
  15. }
  16. ul,li{
  17.     margin: 0;
  18.     padding: 0;
  19. }
  20. li{
  21.     list-style: none;
  22. }
  23. a{
  24.     text-decoration: none;
  25.     color: gray;
  26. }

style2.css

  1. @import"init.css";
  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;
  17. }
  19. header>img:first-of-type,
  20. header>img:last-of-type{
  21.     width: 26px;
  22.     height: 26px;
  23.     margin: 5px;
  24. }
  25. header>img:first-of-type{
  26.     border-radius: 50%;
  27. }
  28. header>img{
  29.     width: 94px;
  30. }
  31. .banner{
  32.     display: flex;
  33.     height: 200px;
  34. }
  35. nav{
  36.     background-color: #fff;       /*为导航设置背景色*/
  37.     display: flex;
  38.     flex-flow: column nowrap;         /*导航纵向排列，不换行*/
  39. }
  40. nav img{               /*设置图标大小*/
  41.     width: 45px;
  42.     height: 49px;
  43. }
  44. nav>ul{
  45.     display: flex;
  46. }
  47. nav ul li {
  48.     flex: 1;
  49. }
  50. nav ul li a{                                 /*设置a标签样式*/
  51.     display: flex;
  52.     flex-flow: column wrap;
  53.     align-items: center;                    /*设置导航与纵轴排列样式*/
  54.     margin: 10px;
  55. }
  56. nav ul li a span{
  57.     margin-top: 5px;
  58. }
  59. main{
  60.     display: flex;
  61.     flex-flow: column nowrap;
  62. }
  63. main>.recommend>section:first-of-type{
  64.     display: flex;
  65. }
  66. main>.recommend>section:first-of-type>a{
  67.     margin: 5px;
  68.     flex: 1;
  69. }
  70. main>.recommend>section:first-of-type>a>img{
  71.     height: 90px;
  72. }
  73. main>.recommend>section:nth-of-type(2){
  74.     display: flex;
  75.     flex-flow: column nowrap;
  76. }
  77. main>.recommend>section:nth-of-type(2)>div{
  78.     background-color: #fff;
  79.     margin: 5px;
  80.     display: flex;
  81. }
  82. main>.recommend>section:nth-of-type(2)>div img{
  83.     width: 350px;
  84.     height: 90px;
  85. }
  86. main>.recommend>section:nth-of-type(2)>div>span{
  87.     display: flex;
  88.     flex-flow: column nowrap;
  89.     margin-top: 5px;
  90.     padding-left: 10px;
  91. }
  92. main>.recommend>section:nth-of-type(2)>div>span i{
  93.     font-style: normal;
  94.     background-color: #333333;
  95.     color: white;
  96.     border-radius: 4px;
  97.     padding: 0 5px;
  98.     font-size: smaller;
  99. }
  100. main>.recommend>section:nth-of-type(3){
  101.     display: flex;
  102.     flex-flow: column nowrap;
  103. }
  104. main>.recommend>section:nth-of-type(3)>div{
  105.     display: flex;
  106.     background-color: #fff;
  107.     margin: 5px;
  108. }
  109. main>.recommend>section:nth-of-type(3)>div img{
  110.     width: 350px;
  111.     height: 90px;
  112. }
  113. main>.recommend>section:nth-of-type(3)>div>span{
  114.     display: flex;
  115.     flex-flow: column nowrap;
  116.     margin-top: 5px;
  117.     padding-left: 10px;
  118. }
  119. main>.recommend>section:nth-of-type(3)>div>span i{
  120.     font-style: normal;
  121.     background-color: #333333;
  122.     color: white;
  123.     border-radius: 4px;
  124.     padding:0 5px;
  125.     font-size: smaller;
  126. }
  127. main>.recommend>section:nth-of-type(4){
  128.     display: flex;
  129.     flex-flow: column nowrap;
  130. }
  131. main>.recommend>section:nth-of-type(4)>div{
  132.     display: flex;
  133.     background-color: #fff;
  134.     margin: 5px;
  135. }
  136. main>.recommend>section:nth-of-type(4)>div img{
  137.     width: 200px;
  138.     height: 90px;
  139.     float: right;
  140. }
  141. main>.recommend>section:nth-of-type(4)>div>span{
  142.     display: flex;
  143.     flex: 1;
  144.     flex-flow: column nowrap;
  145.     margin-top: 10px;
  146.     padding-left: 10px;
  147. }
  148. main>.recommend>section:nth-of-type(4)>div:last-child>a{
  149.     display: flex;
  150.     flex: 1;
  151.     justify-content: center;
  152.     align-items: center;
  153. }
  154. main>.recommend>section:nth-of-type(5){
  155.     display: flex;
  156.     flex-flow: column nowrap;
  157. }
  158. main>.recommend>section:nth-of-type(5)>div{
  159.     display: flex;
  160.     background-color: #fff;
  161.     margin: 5px;
  162. }
  163. main>.recommend>section:nth-of-type(5)>div>span{
  164.     display: flex;
  165.     flex: 1;
  166.     margin-top: 10px;
  167.     padding-left: 10px;
  168. }
  169. main>.recommend>sectiog:nth-of-type(5)>div a:last-child{
  170.     display: flex;
  171.     flex: 1;
  172. }
  173. main>.recommend>section:nth-of-type(5)>div:last-child>a{
  174.     display: flex;
  175.     flex: 1;
  176.     justify-content: center;
  177.     align-items: center;
  178. }
  179. main>.recommend>section:nth-of-type(6){
  180.     display: flex;
  181.     flex-flow: column nowrap;
  182. }
  183. main>.recommend>section:nth-of-type(6)>div{
  184.     display: flex;
  185.     background-color: #fff;
  186.     margin: 5px;
  187. }
  188. main>.recommend>section:nth-of-type(6)>div>span{
  189.     display: flex;
  190.     flex: 1;
  191.     margin-top: 10px;
  192.     padding-left: 10px;
  193. }
  194. main>.recommend>sectiog:nth-of-type(6)>div a:last-child{
  195.     display: flex;
  196.     flex: 1;
  197. }
  198. main>.recommend>section:nth-of-type(6)>div:last-child>a{
  199.     display: flex;
  200.     flex: 1;
  201.     justify-content: center;
  202.     align-items: center;
  203. }
  204. footer>div{
  205.     display: flex;
  206.     background-color:#edeff0;
  207. }
  208. footer>div>a{
  209.     display: flex;
  210.     flex: 1;
  211.     flex-flow: column nowrap;
  212.     align-items: center;
  213. }
  214. footer>div img{
  215.     width: 30px;
  216.     height: 30px;
  217. }

2/将中间导航菜单区的代码手抄至少一遍，并给每一行代码加上注释
见上：

3/写作业总结
模仿页面前先分析页面布局，页面是由哪些结构组成，页面的结构排列方式，主轴为横轴还是纵轴排列；分析完大框架，逐个写头部/主体/底部框架，再用css样式修饰html内容。写样式时，先写一个通用或原始样式，引入初始样式写案例样式，写样式时针对移动端视口设置最小最大宽度。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：仿php中文网的页面, 不具挑战性, 不难写, 还是认真写作业的要求, 这个难度其实更大点
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