Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿php中文网移动端
Blogger Information
Blog 17
fans 0
comment 0
visits 13599
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中文网移动端
ROC-Y
Original
710 people have browsed it

原站效果

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.     <title>Document</title>
  7.     <link rel="stylesheet" href="static/css/font-icon.css" />
  8.     <link rel="stylesheet" href="css/html.css" />
  9.     <link rel="stylesheet" href="css/body.css" />
  10.     <link rel="stylesheet" href="css/header.css" />
  11.     <link rel="stylesheet" href="css/banner.css" />
  12.     <link rel="stylesheet" href="css/channel.css" />
  13.     <link rel="stylesheet" href="css/course.css" />
  14.     <link rel="stylesheet" href="css/newUpdate.css" />
  15.     <link rel="stylesheet" href="css/newArticle.css" />
  16.     <link rel="stylesheet" href="css/newBlog.css" />
  17.     <link rel="stylesheet" href="css/footer.css" />
  18.     <style>
  19.         /* 初始化 */
  20.         * {
  21.             margin: 0;
  22.             padding: 0;
  23.             color: #888;
  24.         }
  25.         a {
  26.             text-decoration: none;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <!-- 主导航header三个图标分散 -->
  32.     <header>
  33.         <img src="static/images/user_avatar.jpg" alt="">
  34.         <img src="static/images/logo.png" alt="">
  35.         <span class="iconfont"></span>
  36.     </header>
  38.     <!-- 焦点图 -->
  39.     <div class="banner">
  40.         <img src="static/images/banner.png" alt="">
  41.     </div>
  43.     <!-- 频道位 -->
  44.     <div class="channel">
  45.         <div>
  46.             <a href=""><img src="static/images/html.png" alt=""></a>
  47.             <a href="">HTML/CSS</a>
  48.         </div>
  49.         <div>
  50.             <a href=""><img src="static/images/JavaScript.png" alt=""></a>
  51.             <a href="">JavaScript</a>
  52.         </div>
  53.         <div>
  54.             <a href=""><img src="static/images/code.png" alt=""></a>
  55.             <a href="">服务器</a>
  56.         </div>
  57.         <div>
  58.             <a href=""><img src="static/images/sql.png" alt=""></a>
  59.             <a href="">数据库</a>
  60.         </div>
  61.         <div>
  62.             <a href=""><img src="static/images/app.png" alt=""></a>
  63.             <a href="">移动端</a>
  64.         </div>
  65.         <div>
  66.             <a href=""><img src="static/images/manual.png" alt=""></a>
  67.             <a href="">手册</a>
  68.         </div>
  69.         <div>
  70.             <a href=""><img src="static/images/tool2.png" alt=""></a>
  71.             <a href="">工具</a>
  72.         </div>
  73.         <div>
  74.             <a href=""><img src="static/images/live.png" alt=""></a>
  75.             <a href="">直播</a>
  76.         </div>
  77.     </div>
  79.     <!-- 推荐课程 -->
  80.     <div class="course">
  81.         <div>
  82.             <h3>
  83.                 <font color=#888 ; size=4rem>推荐课程</font>
  84.             </h3>
  85.         </div>
  86.         <div class="rowTow">
  87.             <!-- 一排排2个 -->
  88.             <div>
  89.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt=""></a>
  90.             </div>
  91.             <div>
  92.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt=""></a>
  93.             </div>
  94.         </div>
  95.         <div class="colTow">
  96.             <!-- 剩下得一排一个 -->
  97.             <div>
  98.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg"></a>
  99.             </div>
  100.             <div>
  101.                 <a href="">CI框架30分钟极速入门 </a>
  102.                 <p>
  103.                     <span class="level">中级</span>
  104.                     <span>43454次播放</span>
  105.                 </p>
  106.             </div>
  107.         </div>
  108.         <!-- 重复剩下得一排一个 -->
  109.         <div class="colTow">
  110.             <div>
  111.                 <a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"></a>
  112.             </div>
  113.             <div>
  114.                 <a href="">2018前端入门_HTML5 </a>
  115.                 <p>
  116.                     <span class="level">初级</span>
  117.                     <span>66666次播放</span>
  118.                 </p>
  119.             </div>
  120.         </div>
  121.     </div>
  122.     <!--最新更新 -->
  123.     <div class="newUpdate">
  124.         <div>
  125.             <h3>
  126.                 <font color=#888 ; size=4rem>最新更新</font>
  127.             </h3>
  128.         </div>
  129.         <div class="colTow">
  130.             <!-- 剩下得一排一个 -->
  131.             <div>
  132.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/015/5e0d6387e45cc764.png"></a>
  133.             </div>
  134.             <div>
  135.                 <a href="">PHP快速操控Excel </a>
  136.                 <div>
  137.                     <p>老的PHPExcel已经停p止更新了！
  138.                     </p>
  139.                     <p>
  140.                         <span class="level">中级</span>
  141.                         <span>43454次播放</span>
  142.                     </p>
  143.                 </div>
  144.             </div>
  145.         </div>
  146.         <div class="colTow">
  147.             <!-- 剩下得一排一个 -->
  148.             <div>
  149.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/015/5da7e9b7895ed229.png"></a>
  150.             </div>
  151.             <div>
  152.                 <a href="">PHP开发免费公益直播课</a>
  153.                 <div>
  154.                     <p>主讲：php中文网-朱老师
  155.                     </p>
  156.                     <p>
  157.                         <span class="level">中级</span>
  158.                         <span>43454次播放</span>
  159.                     </p>
  160.                 </div>
  161.             </div>
  162.         </div>
  163.         <div class="colTow">
  164.             <!-- 剩下得一排一个 -->
  165.             <div>
  166.                 <a href=""><img src="https://img.php.cn/upload/course/000/000/015/5e0d82773b4fe808.png"></a>
  167.             </div>
  168.             <div>
  169.                 <a href="">Thinkphp6.0视频教程</a>
  170.                 <div>
  171.                     <p>Thinkphp6.0从2019年10月24日发布
  172.                     </p>
  173.                     <p>
  174.                         <span class="level">中级</span>
  175.                         <span>43454次播放</span>
  176.                     </p>
  177.                 </div>
  178.             </div>
  179.         </div>
  180.     </div>
  181.     <!--最新文章 -->
  182.     <div class="newArticle">
  183.         <div>
  184.             <h3>
  185.                 <font color=#888 ; size=4rem>最新文章</font>
  186.             </h3>
  187.         </div>
  188.         <div class="colTow">
  189.             <!-- 剩下得一排一个 -->
  191.             <div>
  192.                 <a href="">如何在linux环境下安装docker </a>
  194.                 <p>发布时间：2020-04-14
  195.                 </p>
  196.             </div>
  197.             <div>
  198.                 <a href=""><img src="https://img.php.cn/upload/article/000/000/041/5e956ebe721df901.jpg"></a>
  199.             </div>
  200.         </div>
  201.         <div class="colTow">
  202.             <!-- 剩下得一排一个 -->
  203.             <div>
  204.                 <a href="">docker镜像如何导出 </a>
  206.                 <p>发布时间：2020-04-14
  207.                 </p>
  208.             </div>
  209.             <div>
  210.                 <a href=""><img src="https://img.php.cn/upload/article/000/000/041/5e9569d1d88e9841.jpg"></a>
  211.             </div>
  212.         </div>
  213.         <div class="colTow">
  214.             <!-- 剩下得一排一个 -->
  215.             <div>
  216.                 <a href="">docker如何安装centos镜像 </a>
  218.                 <p>发布时间：2020-04-14
  219.                 </p>
  220.             </div>
  221.             <div>
  222.                 <a href=""><img src="https://img.php.cn/upload/article/000/000/041/5e955f5617478886.jpg"></a>
  223.             </div>
  224.         </div>
  225.         <div><a href="">更多内容</a>
  226.         </div>
  227.     </div>
  228.     <!--最新博文 -->
  229.     <div class="newBlog">
  230.         <div>
  231.             <h3>
  232.                 <font color=#888 ; size=4rem>最新博文</font>
  233.             </h3>
  234.         </div>
  235.         <div class="blog">
  236.             <a href="">PhpStrom 安装PHPUnit-9单元测试 </a>
  238.             <p>2020-04-14
  239.             </p>
  240.         </div>
  241.         <div class="blog">
  242.             <a href="">微信的openid和unionid </a>
  244.             <p>2020-04-14
  245.             </p>
  246.         </div>
  247.         <div class="blog">
  248.             <a href="">CSS 中各类选择器的属性及应用</a>
  250.             <p>2020-04-14
  251.             </p>
  252.         </div>
  253.         <div><a href="">更多内容</a>
  254.         </div>
  255.     </div>
  256.     <!-- 页脚 -->
  257.     <footer>
  258.         <a href="">
  259.             <span class="iconfont hot"></span>
  260.             <span>首页</span>
  261.         </a>
  262.         <a href="">
  263.             <span class="iconfont "></span>
  264.             <span>视频</span>
  265.         </a>
  266.         <a href="">
  267.             <span class="iconfont "></span>
  268.             <span>社区</span>
  269.         </a>
  270.         <a href="">
  271.             <span class="iconfont "></span>
  272.             <span>我的</span>
  273.         </a>
  274.     </footer>
  275. </body>
  276. </html>

css样式

1.header

  1. body > header {
  2.     /* 转成弹性盒子，图标2端对齐 */
  3.     background-color: #333;
  4.     color: white;
  5.     height: 40px;
  6.     display: flex;
  7.     align-items: center;
  8.     justify-content: space-between;
  9.     padding: 0 15px;
  10.     position: fixed;
  11.     width: 95vw;
  12. }
  13. /* 设置图片样式 */
  14. body > header > img {
  15.     height: 100%;
  16. }
  17. /* 将方形头像改成圆形，并设置图片高度 */
  18. body > header > img:first-child {
  19.     height: 25px;
  20.     border-radius:25px;
  21. }

2.banner

  2. /* 设置焦点图高度 */
  3. body > .banner {
  4.     /* 发现图片会和顶部得导航有重叠部分，所以减去了导航高度 */
  5.     margin-top: 40px;
  6.     height: 150px;
  7. }
  8. /* 设置图片宽度，让正常显示在页面中 */
  9. body > .banner > img {
  10.     width: 100%; 
  11.     height: 100%;
  12. }

3.channel

  1. /* 设置频道位为弹性盒子，并且自动换行 */
  2. body > .channel {
  3.     margin-top: 10px;
  4.     margin-bottom: 10px;
  5.     display: flex;
  6.     flex-flow: row wrap;
  7.     background-color: #fff;
  8. }
  10. /* 针对单个块div设置样式,2个a标签水平，垂直居中 */
  11. body > .channel > div{
  12.     width: 25vw;
  13.     display: flex;
  14.     flex-flow: column ;
  15.     text-align: center;
  16.     /* align-items: center; */
  17.     font-size: bold; 
  18.     margin-top: 10px;
  19.     margin-bottom: 10px;
  21. }
  23. /* 控制图片大小和居中 */
  24. body > .channel > div > a > img{
  25. width: 50%;
  26. }

4.course

  1. /* 推荐课程模块样式 */
  2. body > .course {
  3.   margin: 20px 10px;
  4. }
  5. /* 设置横排2个a标签图片的样式 */
  6. body > .course >div:nth-of-type(2){  
  7.   margin-top: 10px;
  8.   display: flex;
  9.   flex-flow: row nowrap;
  10.   height: 100px; 
  11. }
  12. body > .course >div:nth-of-type(2)> div:first-child{
  13.  margin-right: 10px;
  15. }
  16. body > .course >div:nth-of-type(2)>div>a >img{
  17.   width: 100%;
  18. }
  19. /* 处理一排一个的样式 */
  20. body > .course > .colTow{
  21. margin-top: 10px;
  22. display: flex;
  23. flex-flow: row nowrap;
  24. height: 105px;
  25. background: #FFF;
  27. }
  28. /* 处理图片位置 */
  29. body > .course > .colTow > div:first-child{
  30.   margin: 10px;
  31. width: 40%;
  32. }
  33. /* 设置图片居中 */
  34. body > .course >.colTow >div >a > img{
  35.   /* max-height:86px; */
  36. /* vertical-align: middle; */
  37.  width: 100%;
  38. }
  39. /* 处理文字位置 */
  40. body > .course > .colTow > div:last-child{
  41. margin-top: 10px; 
  42. font-size: 1.2rem;
  43. }
  44. body > .course > .colTow > div:last-child >p {
  45. font-size: 12px;
  46. margin-top: 15px;
  47. }
  48. body > .course > .colTow > div:last-child >p >span:first-child{
  49. background: #595757;
  50. color: #FFF;
  51. padding: 3px;
  52. border-radius:12px;
  53. }

5.newUpdate

  1. /* 最新更新模块样式 */
  3. body > .newUpdate {
  4.     margin: 10px;
  5. }
  6.   /* 处理一排一个的样式 */
  7. body > .newUpdate > .colTow{
  8.   margin-top: 10px;
  9.   display: flex;
  10.   flex-flow: row nowrap;
  11.   height: 103px;
  12.   background: #FFF;
  13. }
  14.   /* 处理图片位置 */
  15.  body > .newUpdate > .colTow > div:first-child{
  16.   margin: 10px;
  17.   width: 40%;
  18. }
  19.   /* 设置图片居中 */
  20. body > .newUpdate >.colTow >div >a > img{
  21.   max-height:85px;
  22.   /* vertical-align: middle; */
  23.   align-items: center;
  24.   width: 100%;
  25. }  
  26.   /* 处理文字位置 ,文字超长自动截断没实现，找来的属性会影响前面的图片，暂时跳过*/  
  27. body > .newUpdate > .colTow>div:last-child{
  29.   display: flex;
  30.   flex-flow: column nowrap;
  31. }
  32. body > .newUpdate > .colTow>div:last-child >a {
  33.   margin-top: 10px;
  34.   font-size: 1.2rem;
  35. }
  36. body > .newUpdate > .colTow > div:last-child>div>p:first-child{
  37.    margin-top: 10px;
  38.    font-size: 12px;  
  39. }
  40. body > .newUpdate > .colTow > div:last-child>div>p:last-child{
  41.   margin-top: 10px;
  42.   font-size: 12px;
  43.   display: flex;
  44.   justify-content: space-between;
  45. }
  46. /* 加了盒子模型之后，复制过来的正常的“中级初级”背景的居中太难调了，先放着把。。。 */
  47. body > .newUpdate > .colTow > div:last-child>div>p:last-child>.level{
  48.   width: 2rem;
  49.   background: #595757;
  50.   border-radius:15px;
  51.   color: #FFF;
  52. }

6.newArticle

  1. /* 最新文章模块样式 */
  3. body > .newArticle {
  4.     margin: 20px 10px ;
  5. }  
  6.   /* 处理一排一个的样式 */
  8. body > .newArticle > .colTow{   
  9.   margin-top: 10px;
  10.   display: flex;
  11.   flex-flow: row nowrap;
  12.   height: 82px;
  13.   background: #FFF;
  14.   justify-content: space-between;
  16. }
  17.   /* 处理图片位置 */
  18. body > .newArticle > .colTow > div:last-child{
  19.   margin: 10px;
  20.   width: 30%;  
  21. }
  22.   /* 设置图片居中 */
  23. body > .newArticle >.colTow >div >a > img{
  24.   vertical-align: middle;
  25.   height: 62px;
  26.   width: 100%;
  27. }
  29.   /* 处理文字位置 */
  31. body > .newArticle > .colTow > div:first-child{
  32.   margin: 10px; 
  33.   font-size: 1.2rem;
  34. }
  36. body > .newArticle > .colTow > div:first-child >a {
  37.   font-size: 12px;
  38.   font-weight: bold;
  39.   margin-top: 10px;  
  40. }
  41. body > .newArticle > .colTow > div:first-child >p {
  42.     font-size: 12px;
  43.     margin-top: 12px;       
  44. }
  46. /*更多内容*/
  47. body > .newArticle>div:last-child {
  48.     margin-top: 10px  ;
  49.     padding: 5px;
  50.     text-align: center;
  51.     background: #FFF;
  52. }

7.newBlog

  1. body > .newBlog {
  2.     margin: 10px;
  3.   }
  5.   /* 设置横排2个a标签图片的样式 */
  7.   body > .newBlog >.blog{
  8.     background: #FFF;
  9.    display: flex;
  10.    flex-flow: row nowrap;
  11.    justify-content: space-between;
  12.    height: 50px;
  13.    margin-top:  10px ;
  15.   }
  16.   body > .newBlog >.blog>a{
  17.     margin: 12px 10px 10px;
  18.     font-weight: bold;
  19.     font-size: 14px;    
  20.   }
  21.   body > .newBlog >.blog>p{
  23.     margin: 10px;
  24. }
  25.   body > .newBlog>div:last-child {
  26.     margin-top: 10px  ;
  27.     margin-bottom: 60px  ;
  28.     padding: 5px;
  29.     text-align: center;
  30.     background: #FFF;
  31. }
  1. /* 页脚 */
  2. body > footer {
  3.     color: #666;
  4.     background-color: #efefef;
  5.     border-top: 1px solid #ccc;
  6.     height: 55px;
  8.     position: fixed;
  9.     bottom: 0;
  10.     width: 100vw;
  12.     display: flex;
  13.     justify-content: space-around;
  14.   }
  15.   body > footer > a {
  16.     margin-top: 10px;
  17.     font-size: 0.8rem;
  18.     display: flex;
  19.     flex-flow: column nowrap;
  20.     align-items: center;
  21.   }
  22.   body > footer > a > span:first-of-type {
  23.     font-size: 1.6rem;
  24.   }

总结

  • 敲的多才能记得住，编写过程中，主要是对元素的居中排列和图片链接上面的图片的位置把握不准，实现方式有问题。 几个带 align的属性总是混。
  • 文字单行显示，超过截断没实现，总是超出右边范围，后面继续改进。
  • 页面上的内容，在调大分辨率的时候，有的UI会超过自己的范围高度，特别是图片，还不太清楚怎么限制。
  • 重复的样式代码很多，慢慢学会精简。
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