search

博客列表 >仿php中文网移动端

仿php中文网移动端

ROC-Y
ROC-Y原创
2020年04月16日 01:16:51709浏览

原站效果

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会超过自己的范围高度，特别是图片，还不太清楚怎么限制。
  • 重复的样式代码很多，慢慢学会精简。
上一条：200多行代码实现微信公众号网页授权登录 获取用户基本信息(头像/昵称/openid)下一条：grid布局学习笔记
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多