简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >仿写PHP中文网(第九章 1107作业）-PHP培训九期线上班

仿写PHP中文网(第九章 1107作业）-PHP培训九期线上班

yany
yany原创
2019年12月26日 21:29:49598浏览

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内容。写样式时，先写一个通用或原始样式，引入初始样式写案例样式，写样式时针对移动端视口设置最小最大宽度。

上一条：第十期FLEX项目六大属性+组件开发思路分析总结（2019-12-25）下一条：1225组件flex作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多