简体中文（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

博客列表 >12-27作业：仿PHP中文网手机端

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

十年一梦
十年一梦原创
2019年12月30日 11:24:10647浏览

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、经验太少，不知道哪个地方用什么颜色好看，希望老师能分享一些常用的配色表！
上一条：WEB前端教学-flex 6个属性练习下一条：12月28日 学号：478291 Grid（网格布局）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多