Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12-27作业：仿PHP中文网手机端
Blogger Information
Blog 9
fans 3
comment 0
visits 11051
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
12-27作业：仿PHP中文网手机端
十年一梦
Original
658 people have browsed it

12-27作业：仿PHP中文网手机端

首页index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>1227作业——仿php中文网手机端首页</title>
  6.     <link rel="stylesheet" href="static/css/style.css">
  7.     <link rel="stylesheet" href="static/font/iconfont.css">
  8. </head>
  9. <body>
  10. <!--顶部LOGO区-->
  11. <div class="header">
  12.     <img src="static/images/user/user1.gif" alt="">
  13.     <img src="static/images/logo.png" alt="">
  14.     <i class="iconfont icon-youceyingyongheji"></i>
  15. </div>
  16. <!--banner 区域-->
  17. <main>
  18.     <div class="banner">
  19.         <a href=""><img src="static/images/banner/6.png" alt=""></a>
  20.     </div>
  21. <!--    导航区-->
  22.     <div class="nav">
  24.         <a href="">
  25.             <img src="static/images/icon/html.png" alt="">
  26.             <span>HTML/CSS</span>
  27.         </a>
  30.         <a href="">
  31.             <img src="static/images/icon/JavaScript.png" alt="">
  32.             <span>JavaScript</span>
  33.         </a>
  34.         <a href="">
  35.             <img src="static/images/icon/code.png" alt="">
  36.             <span>服务端</span>
  37.         </a>
  38.         <a href="">
  39.             <img src="static/images/icon/sql.png" alt="">
  40.             <span>数据库</span>
  41.         </a>
  42.         <a href="">
  43.             <img src="static/images/icon/app.png" alt="">
  44.             <span>移动端</span>
  45.         </a>
  46.         <a href="">
  47.             <img src="static/images/icon/manual.png" alt="">
  48.             <span>手册</span>
  49.         </a>
  50.         <a href="">
  51.             <img src="static/images/icon/tool2.png" alt="">
  52.             <span>工具</span>
  53.         </a>
  54.         <a href="">
  55.             <img src="static/images/icon/live.png" alt="">
  56.             <span>直播</span>
  57.         </a>
  58.     </div>
  59. <!--    推荐课程-->
  60.     <article class="recommend">
  61.         <h3>推荐课程</h3>
  62.         <section>
  63.             <a href=""><img src="static/images/reco/reco_1.jpg" alt=""></a>
  64.             <a href=""><img src="static/images/reco/reco_2.jpg" alt=""></a>
  65.         </section>
  66.         <section>
  67.         <ul>
  68.         <li>
  69.            <a href=""><img src="static/images/reco/reco_3.jpg" alt=""></a>
  70.             <div>
  71.                 <a href="">CI框架30分钟极速入门</a>
  72.                 <span><i>中级</i>55667播放</span>
  73.             </div>
  74.         </li>
  75.         <li>
  76.             <a href=""><img src="static/images/reco/reco_4.jpg" alt=""></a>
  77.             <div>
  78.                 <a href="">2018前端入门_HTML5</a>
  79.                 <span><i>初级</i>975667播放</span>
  80.             </div>
  81.         </li>
  82.         </ul>
  83.         </section>
  84.     </article>
  85.     <article class="la-up">
  86.         <h3>最新更新</h3>
  87.         <ul>
  88.         <li>
  89.             <a href=""><img src="static/images/laup/laup_1.jpg" alt=""></a>
  90.             <div>
  91.                 <a href="">2019python自学视频</a>
  92.                 <span>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</span>
  93.                 <span><i>初级</i>5667播放</span>
  94.             </div>
  95.         </li>
  97.         <li>
  98.             <a href=""><img src="static/images/laup/laup_2.png" alt=""></a>
  99.             <div>
  100.                 <a href="">PHP开发免费公益直播课</a>
  101.                 <span>主讲：php中文网-朱老师( Peter Zhu)时间：2019.10.17 晚 20:00-22:00主题：如何高效的学习一门新技术？具体内容：1. 2020了, 还有哪些值得学习的新技术? 2.如何高效的学习前端开发? 3.如果高效的学习PHP开发?4.phpStudy V8 新功能介绍与演示 5.小皮面板功能介绍</span>
  102.                 <span><i>初级</i>55667播放</span>
  103.             </div>
  104.         </li>
  106.         <li>
  107.             <a href=""><img src="static/images/laup/laup_3.jpg" alt=""></a>
  108.             <div>
  109.                 <a href="">从零开始到WEB响应式布局</a>
  110.                 <span>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</span>
  111.                 <span><i>初级</i>55667播放</span>
  112.             </div>
  113.         </li>
  115.         <li>
  116.             <a href=""><img src="static/images/laup/laup_4.png" alt=""></a>
  117.             <div>
  118.                 <a href="">PHP文件基础操作</a>
  119.                 <span>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</span>
  120.                 <span><i>中级</i>55667播放</span>
  121.             </div>
  122.         </li>
  124.         <li>
  125.             <a href=""><img src="static/images/laup/laup_5.jpg" alt=""></a>
  126.             <div>
  127.                 <a href=""><span>memcache基础课程</span></a>
  128.                 <span>本课程带你从零认识memcache，让你在一小时左右轻松掌握memcache在windows和linux上的安装，基本命令的使用以及与php集成、thinkphp5中使用memcache做为缓存系统等技术。</span>
  129.                 <span><i>初级</i>55667播放</span>
  130.             </div>
  131.         </li>
  133.         <li>
  134.             <a href=""><img src="static/images/laup/laup_6.png" alt=""></a>
  135.             <div>
  136.                 <a href=""><span>微信小程序--企业微网站</span></a>
  137.                 <span>1，介绍小程序、开发者工具2，介绍小程序文档3，微官网项目4，首页、产品、产品详情、新闻、新闻详情、关于我们</span>
  138.                 <span><i>初级</i>55667播放</span>
  139.             </div>
  140.         </li>
  141.         </ul>
  142.     </article>
  143.     <article class="new-page">
  144.         <h3>最新文章</h3>
  145.         <ul>
  146.         <li>
  147.             <div>
  148.                 <a href="">java程序怎么生成exe</a>
  149.                 <span>发布时间：2019-12-28</span>
  150.             </div>
  151.             <a href=""><img src="static/images/newpage/np_1.jpg" alt=""></a>
  152.         </li>
  154.         <li>
  155.             <div>
  156.                 <a href="">java程序怎么生成exe</a>
  157.                 <span>发布时间：2019-12-28</span>
  158.             </div>
  159.             <a><img src="static/images/newpage/np_2.jpg" alt=""></a>
  160.         </li>
  162.         <li>
  163.             <div>
  164.                 <a href="">WordPress分类与标签等存档页怎么实现置顶</a>
  165.                 <span>发布时间：2019-12-28</span>
  166.             </div>
  167.             <a href=""><img src="static/images/newpage/np_3.jpg" alt=""></a>
  168.         </li>
  170.         <li>
  171.             <div>
  172.                 <a href="">golang的hashmap怎么扩容</a>
  173.                 <span>发布时间：2019-12-28</span>
  174.             </div>
  175.             <a href=""><img src="static/images/newpage/np_4.jpg" alt=""></a>
  176.         </li>
  178.         <li>
  179.             <div>
  180.                 <a href="">Wordpress如何切换和管理网站外观</a>
  181.                 <span>发布时间：2019-12-28</span>
  182.             </div>
  183.             <a href=""><img src="static/images/newpage/np_5.jpg" alt=""></a>
  184.         </li>
  186.         <li>
  187.             <div>
  188.                 <a href="">wordpress怎么调用特定文章列表</a>
  189.                 <span>发布时间：2019-12-28</span>
  190.             </div>
  191.             <a href=""><img src="static/images/newpage/np_1.jpg" alt=""></a>
  192.         </li>
  193.         </ul>
  194.         <a href="">更多内容</a>
  196.     </article>
  197.     <article class="new-blog">
  198.         <h3>最新文章</h3>
  199.         <ul>
  200.         <li>
  201.             <a href=""><span>composer安装laravel，nginx服务器路配置解决404问题，创建简单的控制器</span></a>
  202.             <span>2019-12-28</span>
  203.         </li>
  205.         <li>
  206.             <a href=""><span>2019-12-23 flex容器的6个属性练习总结-PHP培训十期线上班</span></a>
  207.             <span>2019-12-28</span>
  208.         </li>
  209.         <li>
  210.             <a href=""><span>转载《PHP安全之道》学习笔记1：PHP项目安全设置</span></a>
  211.             <span>2019-12-28</span>
  212.         </li>
  213.         <li>
  214.             <a href=""><span>关于双列排版自适应问题：（左侧固定，右侧自适应）成功，（右侧固定，左侧自适应）</span></a>
  215.             <span>2019-12-28</span>
  216.         </li>
  217.         </ul>
  218.         <a href="">更多内容</a>
  220.     </article>
  221.     <article class="new-qa">
  222.         <h3>最新文章</h3>
  223.         <ul>
  224.         <li>
  225.             <a href=""><span>怎么没提示添加成功还是添加失败呀</span></a>
  226.             <span>2019-12-28</span>
  227.         </li>
  228.         <li>
  229.             <a href=""> <span>我写的代码跟您的一样 在浏览器打开的时候为什么是乱码呢</span></a>
  230.             <span>2019-12-28</span>
  231.         </li>
  232.         <li>
  233.             <a href=""> <span>thinkphp3.2.3路径问题</span></a>
  234.             <span>2019-12-28</span>
  235.         </li>
  236.         <li>
  237.             <a href=""> <span>什么是开发工具</span></a>
  238.             <span>2019-12-28</span>
  239.         </li>
  240.         <li>
  241.             <a href=""> <span>怎么能学好PHP</span></a>
  242.             <span>2019-12-28</span>
  243.         </li>
  244.         </ul>
  245.         <a href="">更多内容</a>
  247.     </article>
  248. </main>
  249. <footer>
  250.     <a href=""><i class="iconfont icon-shouye"></i>首页</a>
  251.     <a href=""><i class="iconfont icon-shipin"></i>视频</a>
  252.     <a href=""><i class="iconfont icon-kaifazhezhongxingonggongAPI"></i>社区</a>
  253.     <a href=""><i class="iconfont icon-wode"></i>我的</a>
  254. </footer>
  255. </body>
  256. </html>

首页style.css

  1. /*页面元素初始化*/
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. body{
  7.     font-size: 13px;
  8.     color: #888888;
  9.     background-color: #EDEFF0;
  10.     display: flex;
  11.     flex-direction: column;
  12.     min-width: 360px;
  13.     max-width: 768px;
  14.     margin: 0 auto;
  15.     overflow-x: hidden;
  16.     -webkit-column-rule-color: transparent;
  17. }
  18. a{
  19.     text-decoration: none;
  20.     color: #404040;
  21.     font-size: 13px;
  22. }
  23. li{
  24.     list-style: none;
  25. }
  26. /*header区*/
  27. .header {
  28.     width: 100%;
  29.     max-width: 768px;
  30.     min-width: 360px;
  31.     height: 45px;
  32.     background-color: #2d353c;
  33.     display: flex;
  34.     justify-content: space-between;
  35.     align-items: center;
  36.     position: fixed;
  37.     top: 0;
  38. }
  40. .header > img:first-of-type{
  41.     height: 24px;
  42.     width: 24px;
  43.     border-radius: 12px;
  44.     margin-left: 5px;
  45.     box-sizing: border-box;
  46. }
  47. .header > img:last-of-type{
  48.     height:40px;
  49. }
  50. .header > i{
  51.     width:24px;
  52.     height: 24px;
  53.     color: white;
  54. }
  55. /*导航区*/
  56. body > main {
  57.     flex-grow: 1;
  58.     display: flex;
  59.     flex-direction: column;
  60.     overflow: hidden;
  61.     margin-top: 45px;
  62. }
  63. main > .banner {
  64.     width:100%;
  65. }
  66. main > .banner > a img {
  67.     width:100%;
  68.     height: auto;
  69. }
  70. main > .nav {
  71.     display: flex;
  72.     flex-flow: row wrap;
  73.     padding: 20px;
  74.     box-sizing: border-box;
  75.     background-color: white;
  76. }
  77. main > .nav > a{
  78.     width: 25%;
  79.     height: 75px;
  80.     display: flex;
  81.     flex-direction: column;
  82.     align-items: center;
  83.     margin-top: 5px;
  84. }
  85. main > .nav > a img {
  86.     width: 45px;
  87.     height: 45px;
  88.     margin-bottom: 5px;
  89. }
  90. /*推荐课程*/
  91. main > .recommend {
  92.     margin-top: 30px;
  93.     padding: 0 10px;
  94.     display: flex;
  95.     flex-direction: column;
  96. }
  97. main > .recommend > h3 {
  98.     font-size: 18px;
  99.     font-weight: bold;
  100.     padding-bottom: 10px;
  101. }
  102. main > .recommend > div {
  103.     background-color: white;
  104.     padding: 10px;
  105.     box-sizing: border-box;
  106. }
  107. main > .recommend > section:first-of-type{
  108.     background: none;
  109.     width: 100%;
  110.     display: flex;
  111.     padding: 0;
  112.     justify-content: space-between;
  113. }
  114. main > .recommend > section:first-of-type a {
  115.     margin: 5px;
  116.     height: 100px;
  118. }
  119. main > .recommend > section:first-of-type a > img{
  120.     width: 100%;
  121.     height: 100px;
  122. }
  123. main > .recommend > section:last-of-type > ul {
  124.     display: flex;
  125.     flex-direction: column;
  126. }
  127. main > .recommend > section:last-of-type > ul > li {
  128.     display: flex;
  129.     margin: 5px;
  130.     background-color: white;
  132. }
  133. main > .recommend > section:last-of-type > ul > li > a {
  134.     width: 40%;
  135. }
  137. main > .recommend > section:last-of-type > ul > li > a img {
  138.     width: 100%;
  139.     height: 90px;
  140.     margin: 5px;
  141.     box-sizing: border-box;
  142. }
  143. main > .recommend > section:last-of-type > ul > li > div {
  144.     display: flex;
  145.     flex-direction: column;
  146.     justify-content: space-between;
  147.     padding: 10px;
  148.     box-sizing: border-box;
  149.     flex: 1;
  150. }
  151. main > .recommend > section:last-of-type > ul > li > div > a {
  152.     font-size: 16px;
  153.     font-weight: bold;
  154. }
  155. main > .recommend > section:last-of-type > ul > li > div > span {
  156.     display: flex;
  157.     justify-content: space-between;
  158. }
  159. main > .recommend > section:last-of-type > ul > li > div > span i {
  160.     background-color: #333333;
  161.     color: white;
  162.     font-style: normal;
  163.     border-radius: 10px;
  164.     padding: 0 5px;
  165.     box-sizing: border-box;
  166.     font-size: smaller;
  167. }
  168. /*最新更新*/
  169. main > .la-up {
  170.     display: flex;
  171.     flex-direction: column;
  172.     padding: 10px;
  173. }
  174. main > .la-up h3 {
  175.     font-size: 18px;
  176.     font-weight: bold;
  177.     padding: 10px 0;
  178. }
  179. main > .la-up > ul {
  180.     display: flex;
  181.     flex-direction: column;
  182. }
  183. main > .la-up > ul > li {
  184.     display: flex;
  185.     margin: 5px;
  186.     background-color: white;
  188. }
  189. main > .la-up > ul > li > a {
  190.     width: 40%;
  191. }
  192. main > .la-up > ul > li > a > img {
  193.     width: 100%;
  194.     height: 90px;
  195.     padding: 5px;
  196.     box-sizing: border-box;
  197. }
  198. main > .la-up > ul > li > div {
  199.     display: flex;
  200.     flex-direction: column;
  201.     justify-content: space-between;
  202.     padding: 10px;
  203.     flex: 1;
  204.     width: 0;
  206. }
  207. main > .la-up > ul > li > div > a {
  208.     font-size: 16px;
  209.     font-weight: bold;
  210. }
  211. main > .la-up > ul > li > div > span:first-of-type {
  212.     width: 100%;
  213.     white-space: nowrap;
  214.     overflow: hidden;
  215.     text-overflow: ellipsis;
  216. }
  217. main > .la-up > ul > li > div > span:last-of-type {
  218.     display: flex;
  219.     justify-content: space-between;
  220. }
  221. main > .la-up > ul > li > div > span:last-of-type i{
  222.     background-color: #333333;
  223.     color: white;
  224.     font-style: normal;
  225.     border-radius: 10px;
  226.     padding: 0 5px;
  227.     box-sizing: border-box;
  228.     font-size: smaller;
  229. }
  231. /*最新文章*/
  232. main > .new-page {
  233.     display: flex;
  234.     flex-direction: column;
  235.     padding: 10px;
  236. }
  237. main > .new-page h3 {
  238.     font-size: 18px;
  239.     font-weight: bold;
  240.     padding: 10px 0;
  241. }
  242. main > .new-page > ul {
  243.     display: flex;
  244.     flex-direction: column;
  245. }
  246. main > .new-page > ul > li {
  247.     display: flex;
  248.     justify-content: space-between;
  249.     margin: 5px;
  250.     background-color: white;
  251.     border: 1px solid #eeeeee;
  252.     box-shadow: 0 2px 4px 0 #999999;
  253. }
  254. main > .new-page > ul > li > div {
  255.     display: flex;
  256.     padding: 10px;
  257.     flex-direction: column;
  258.     justify-content: space-between;
  259. }
  260. main > .new-page > ul > li > div > a{
  261.     font-size: 16px;
  262. }
  263. main > .new-page > ul > li > a {
  264.     width: 40%;
  265.     padding: 5px;
  266. }
  267. main > .new-page > ul > li > a img  {
  268.     width: 100%;
  269.     height: 60px;
  270. }
  271. main > .new-page > a {
  272.     background-color: white;
  273.     line-height: 30px;
  274.     text-align: center;
  275.     margin: 10px 5px;
  276. }
  278. /*最新博文*/
  279. main > .new-blog {
  280.     display: flex;
  281.     flex-direction: column;
  282.     padding: 10px;
  283. }
  284. main > .new-blog h3 {
  285.     font-size: 18px;
  286.     font-weight: bold;
  287.     padding: 10px 0;
  288. }
  289. main > .new-blog > ul {
  290.     display: flex;
  291.     flex-direction: column;
  292. }
  293. main > .new-blog > ul > li {
  294.     display: flex;
  295.     justify-content: space-between;
  296.     margin: 5px;
  297.     background-color: white;
  298.     padding: 10px;
  299.     border: 1px solid #eeeeee;
  300.     box-shadow: 0 2px 4px 0 #999999;
  301. }
  302. main > .new-blog > ul > li a {
  303.     width: 70%;
  304.     white-space: nowrap;
  305.     overflow: hidden;
  306.     text-overflow: ellipsis;
  307. }
  308. main > .new-blog > a {
  309.     background-color: white;
  310.     line-height: 30px;
  311.     text-align: center;
  312.     margin: 10px 5px;
  313. }
  314. /*最新问答*/
  315. main > .new-qa {
  316.     display: flex;
  317.     flex-direction: column;
  318.     padding: 10px;
  319.     margin-bottom: 50px;
  320. }
  321. main > .new-qa h3 {
  322.     font-size: 18px;
  323.     font-weight: bold;
  324.     padding: 10px 0;
  325. }
  326. main > .new-qa > ul {
  327.     display: flex;
  328.     flex-direction: column;
  329. }
  330. main > .new-qa > ul > li {
  331.     display: flex;
  332.     justify-content: space-between;
  333.     margin: 5px;
  334.     background-color: white;
  335.     padding: 10px;
  336.     border: 1px solid #eeeeee;
  337.     box-shadow: 0 2px 4px 0 #999999;
  338. }
  339. main > .new-qa > ul > li a {
  340.     width: 70%;
  341.     white-space: nowrap;
  342.     overflow: hidden;
  343.     text-overflow: ellipsis;
  344. }
  345. main > .new-qa > a {
  346.     background-color: white;
  347.     line-height: 30px;
  348.     text-align: center;
  349.     margin: 10px 5px;
  350. }
  351. /*页底导航*/
  352. footer {
  353.     width: 100%;
  354.     height: 40px;
  355.     max-width: 768px;
  356.     min-width: 360px;
  357.     position: fixed;
  358.     bottom: 0;
  359.     border-top: 1px solid #cccccc;
  360.     display: flex;
  361.     justify-content: space-evenly;
  362.     padding: 5px 0;
  363.     background-color: #EDEFF0;
  364. }
  365. footer > a {
  366.     display: flex;
  367.     text-align: center;
  368.     flex-direction: column;
  369.     justify-content: center;
  370. }

最后完成图：

总结：

  • 1、还是有眼高手低的毛病，单词不好记，要多写几遍；
  • 2、脑子思想有点僵硬，不能灵活运用学过的东西，比如全程div，都把ul、li 给忘记了；
  • 3、经验太少，不知道哪个地方用什么颜色好看，希望老师能分享一些常用的配色表！
Correcting teacher：天蓬老师天蓬老师

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