search

博客列表 >前端布局实战-仿php中文网移动端首页

前端布局实战-仿php中文网移动端首页

岂几岂几
岂几岂几原创
2020年04月12日 16:54:54820浏览

前端布局实战-仿php中文网移动端首页

1. 实战心得

这次心得写在最前。实现其实听课的同学基本都能实现，而做实战作业最重要的，我认为是总结实现过程中遇到的坑，并为其中的一些疑惑寻找答案。下面是我的一些心得和疑问，请老师帮忙解惑。

  • 一个实战作业，花了半天时间才完成，挺挫败的，里面用到部分老师没有教过的知识，需要去百度，如：标题过长自动隐藏并显示“…”等。
  • 一个头疼的问题，各个区块之间有部分相同的样式，也有自己单独的样式，如何安排才能让css样式代码易读性高一些？当我完成编码后，回头再看自己写的css样式，简直是乱到不想再看……
  • 一个奇怪的现象，用position把<header>和<footer>分别固定在顶部和底部，在火狐中的预览，有时会出现顶部或底部没有固定在其应在的地方的情况。
  • 发现自己一个类似孔乙己茴字有几种写法的怪癖，文字图标的iconfont样式优先级高于元素选择器，不得不为头部/底部文字图标增加单独的样式类，使用类选择器来控制它们的大小。虽然功能实现了，但是总感觉是“曲线救国”的方式，很不舒服。
  • 一个纠结的想法，在实现过程中，大量使用了flex弹性布局。这种做法是否欠妥？算不算是“滥用”？

2. 代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>php中文网</title>
  8.     <link rel="stylesheet" href="static/css/font-icon.css">
  9.     <style>
  10.         html {
  11.             width: 100vw;
  12.             height: 100vw;
  13.             font-size: 14px;
  14.         }
  16.         body {
  17.             margin: 0;
  18.             padding: 0;
  19.             display: flex;
  20.             flex-flow: column nowrap;
  21.             flex: 0 0 auto;
  22.             background-color: #f1f1f1;
  23.         }
  25.         header {
  26.             /* 弹性布局 */
  27.             display: flex;
  28.             /* 主轴水平, 不折行 */
  29.             flex-flow: row nowrap;
  30.             /* 两端对齐 */
  31.             justify-content: space-between;
  32.             background-color: black;
  33.             color: white;
  34.             font-size: 2rem;
  35.             height: 45px;
  36.             align-items: center;
  37.             padding: 0 10px;
  38.             position: fixed;
  39.             top: 0;
  40.             width: 95vw;
  41.         }
  43.         header .head-icon {
  44.             font-size: 1.8rem;
  45.         }
  47.         header img {
  48.             height: 38px;
  49.         }
  51.         body>section:first-of-type {
  52.             margin-top: 45px;
  53.             height: 150px;
  54.         }
  56.         body>section:first-of-type img {
  57.             height: 150px;
  58.             width: 100vw;
  59.         }
  61.         body .nav {
  62.             padding: 10px;
  63.             display: flex;
  64.             flex-flow: row wrap;
  65.             justify-content: space-between;
  66.             align-content: space-between;
  67.             background-color: white;
  68.             max-height: 172px;
  69.             box-sizing: border-box;
  70.         }
  72.         body .nav .nav-item {
  73.             width: 75px;
  74.             text-decoration: none;
  75.             display: flex;
  76.             flex-flow: column nowrap;
  77.             align-items: center;
  78.         }
  80.         body .nav .nav-item img {
  81.             width: 60%;
  82.         }
  84.         body .nav .nav-item span {
  85.             text-align: center;
  86.             font-weight: bold;
  87.             color: #666;
  88.             margin-top: 5px;
  89.         }
  91.         body .recommend,
  92.         .newest-course,
  93.         .newest-article,
  94.         .newest-blog,
  95.         .newest-QA {
  96.             padding: 10px;
  97.             box-sizing: border-box;
  98.         }
  100.         body .recommend h2,
  101.         .newest-course h2,
  102.         .newest-article h2,
  103.         .newest-blog h2,
  104.         .newest-QA h2 {
  105.             color: #aaa;
  106.             font-size: 18px;
  107.         }
  109.         body .recommend .course-box,
  110.         .newest-course .course-box {
  111.             display: flex;
  112.             flex-flow: row nowrap;
  113.             justify-content: space-between;
  114.             flex: 1 1 auto;
  115.             width: 100%;
  116.         }
  118.         body .recommend .course-box .course-item:first-child {
  119.             margin-right: 10px;
  120.         }
  122.         body .recommend .course-box .course-item img {
  123.             width: 100%;
  124.         }
  126.         body .course-list {
  127.             display: flex;
  128.             flex-flow: column nowrap;
  129.             justify-content: flex-start;
  130.             width: 100%;
  131.             /* 
  132.             padding: 10px; */
  133.             margin-top: 15px;
  134.         }
  136.         body .course-list .course-item1 {
  137.             display: flex;
  138.             flex-flow: row nowrap;
  139.             flex: 1 1 auto;
  140.             width: 100%;
  141.             text-decoration: none;
  142.             background-color: white;
  143.             padding: 10px;
  144.             box-sizing: border-box;
  145.         }
  147.         body .course-list .course-item1:not(:first-child) {
  148.             margin-top: 20px;
  149.         }
  152.         body .newest-article .course-list .course-item1:not(:first-child) {
  153.             margin-top: 10px;
  154.         }
  156.         body .newest-article .course-list .course-item1:last-child {
  157.             padding: 0;
  158.             text-align: center;
  159.         }
  161.         body .newest-article .course-list .course-item1 .more {
  162.             display: block;
  163.             margin: 10px auto;
  164.             color: #333;
  166.         }
  168.         body .course-list .course-item1 img {
  169.             width: 40%;
  170.         }
  172.         body .newest-article .course-list .course-item1 img {
  173.             width: 30%;
  174.         }
  176.         body .course-list .course-item1 .course-desc {
  177.             width: 60%;
  178.             margin-left: 10px;
  179.             /* 强制不换行 */
  180.             white-space: nowrap;
  181.             overflow: hidden;
  182.             /* 加省略号 */
  183.             text-overflow: ellipsis;
  184.         }
  186.         body .newest-article .course-list .course-item1 .course-desc {
  187.             width: 70%;
  188.             margin-right: 10px;
  189.         }
  191.         body .course-list .course-item1 .course-desc>p:first-of-type {
  192.             margin-top: 0;
  193.             font-size: 18px;
  194.             color: #666;
  195.             overflow: hidden;
  196.             /* 加省略号 */
  197.             text-overflow: ellipsis;
  198.         }
  200.         body .course-list .course-item1 .course-desc>p:nth-of-type(2) {
  201.             color: #999;
  202.             overflow: hidden;
  203.             text-overflow: ellipsis;
  204.         }
  206.         body .course-list .course-item1 .course-desc>p:last-of-type span:first-of-type {
  207.             background-color: #333;
  208.             color: white;
  209.             font-size: 10px;
  210.             padding: 3px;
  211.             border-radius: 10px;
  212.         }
  214.         body .newest-article .course-list .course-item1 .course-desc>p:last-of-type span:first-of-type {
  215.             font-size: 12px;
  216.             margin-left: unset;
  217.             background-color: unset;
  218.             color: #666;
  219.             border-radius: unset;
  220.         }
  222.         body .course-list .course-item1 .course-desc>p:last-of-type {
  224.             display: flex;
  225.             flex-flow: row nowrap;
  226.             justify-content: space-between;
  227.             align-items: center;
  228.         }
  230.         body .recommend .course-list .course-item1 .course-desc>p:last-of-type {
  232.             justify-content: flex-start;
  233.         }
  235.         body .course-list .course-item1 .course-desc>p:last-of-type span:last-of-type {
  236.             font-size: 12px;
  237.             margin-left: 5px;
  238.             color: #666
  239.         }
  241.         body .newest-blog .course-list .course-item1,
  242.         body .newest-QA .course-list .course-item1 {
  243.             display: flex;
  244.             flex-flow: row nowrap;
  245.             justify-content: space-between;
  246.             align-items: center;
  247.             margin-top: 10px;
  248.             color: #666;
  249.         }
  251.         body .newest-blog .course-list .course-item1 h4,
  252.         body .newest-QA .course-list .course-item1 h4 {
  253.             margin: 0;
  254.             white-space: nowrap;
  255.             overflow: hidden;
  256.             /* 加省略号 */
  257.             text-overflow: ellipsis;
  258.             margin-right: 10px;
  259.         }
  261.         body .newest-blog .course-list .course-item1:last-child,
  262.         body .newest-QA .course-list .course-item1:last-child {
  263.             padding: 0;
  264.             text-align: center;
  265.         }
  267.         body .newest-blog .course-list .course-item1 .more,
  268.         body .newest-QA .course-list .course-item1 .more {
  269.             display: block;
  270.             margin: 10px auto;
  271.             color: #333;
  273.         }
  275.         footer {
  276.             display: flex;
  277.             flex-flow: row nowrap;
  278.             flex: 0 0 auto;
  279.             justify-content: space-around;
  280.             position: fixed;
  281.             bottom: 0;
  282.             width: 100%;
  283.             background: #ddd;
  284.             padding: 10px 0;
  285.             border-top: 1px solid #aaa;
  286.         }
  288.         footer .bottom-btn {
  289.             display: flex;
  290.             flex-flow: column nowrap;
  291.             font-size: 14px;
  292.             color: #999
  293.         }
  295.         footer .bottom-icon {
  296.             font-size: 1.5rem;
  297.             text-align: center;
  298.         }
  300.         footer .bottom-btn.active {
  301.             color: red;
  302.         }
  303.     </style>
  304. </head>
  306. <body>
  307.     <!-- 头部 -->
  308.     <header>
  309.         <span class="iconfont head-icon"></span>
  310.         <img src="static/images/logo.png" alt="php中文网">
  311.         <span class="iconfont head-icon"></span>
  312.     </header>
  313.     <!-- 轮播 -->
  314.     <section class="Carousel">
  315.         <img src="static/images/lb1.png" alt="">
  316.     </section>
  317.     <!-- 导航 -->
  318.     <section class="nav">
  319.         <a class="nav-item" href="#">
  320.             <img src="static/images/html.png" alt="">
  321.             <span>HTML/CSS</span>
  322.         </a>
  323.         <a class="nav-item" href="#">
  324.             <img src="static/images/JavaScript.png" alt="">
  325.             <span>JavaScript</span>
  326.         </a>
  327.         <a class="nav-item" href="#">
  328.             <img src="static/images/code.png" alt="">
  329.             <span>服务端</span>
  330.         </a>
  331.         <a class="nav-item" href="#">
  332.             <img src="static/images/sql.png" alt="">
  333.             <span>数据库</span>
  334.         </a>
  335.         <a class="nav-item" href="#">
  336.             <img src="static/images/app.png" alt="">
  337.             <span>移动端</span>
  338.         </a>
  339.         <a class="nav-item" href="#">
  340.             <img src="static/images/manual.png" alt="">
  341.             <span>手册</span>
  342.         </a>
  343.         <a class="nav-item" href="#">
  344.             <img src="static/images/tool2.png" alt="">
  345.             <span>工具</span>
  346.         </a>
  347.         <a class="nav-item" href="#">
  348.             <img src="static/images/live.png" alt="">
  349.             <span>直播</span>
  350.         </a>
  351.     </section>
  352.     <!-- 推荐课程 -->
  353.     <section class="recommend">
  354.         <h2>推荐课程</h2>
  355.         <div class="course-box">
  356.             <a class="course-item">
  357.                 <img src="static/images/course-item1.jpg" alt="">
  358.             </a>
  359.             <a class="course-item">
  360.                 <img src="static/images/course-item2.jpg" alt="">
  361.             </a>
  362.         </div>
  363.         <div class="course-list">
  364.             <a href="#" class="course-item1">
  365.                 <img src="static/images/course-item1-1.jpg" alt="">
  366.                 <div class="course-desc">
  367.                     <p>CI框架30分钟极速入门</p>
  368.                     <p><span>中级</span><span>61263次播放</span></p>
  369.                 </div>
  370.             </a>
  371.             <a href="#" class="course-item1">
  372.                 <img src="static/images/course-item1-1.jpg" alt="">
  373.                 <div class="course-desc">
  374.                     <p>CI框架30分钟极速入门</p>
  375.                     <p><span>中级</span><span>61263次播放</span></p>
  376.                 </div>
  377.             </a>
  378.         </div>
  379.     </section>
  380.     <!-- 最新更新 -->
  381.     <section class="newest-course">
  382.         <h2>最新更新</h2>
  383.         <div class="course-list">
  384.             <a href="#" class="course-item1">
  385.                 <img src="static/images/course-item1-1.jpg" alt="">
  386.                 <div class="course-desc">
  387.                     <p>CI框架30分钟极速入门</p>
  388.                     <p>老的PHPExcel已经停止更新了</p>
  389.                     <p><span>中级</span><span>61263次播放</span></p>
  390.                 </div>
  391.             </a>
  392.             <a href="#" class="course-item1">
  393.                 <img src="static/images/course-item1-1.jpg" alt="">
  394.                 <div class="course-desc">
  395.                     <p>CI框架30分钟极速入门</p>
  396.                     <p>老的PHPExcel已经停止更新了</p>
  397.                     <p><span>中级</span><span>61263次播放</span></p>
  398.                 </div>
  399.             </a>
  400.             <a href="#" class="course-item1">
  401.                 <img src="static/images/course-item1-1.jpg" alt="">
  402.                 <div class="course-desc">
  403.                     <p>CI框架30分钟极速入门</p>
  404.                     <p>老的PHPExcel已经停止更新了</p>
  405.                     <p><span>中级</span><span>61263次播放</span></p>
  406.                 </div>
  407.             </a>
  408.             <a href="#" class="course-item1">
  409.                 <img src="static/images/course-item1-1.jpg" alt="">
  410.                 <div class="course-desc">
  411.                     <p>CI框架30分钟极速入门</p>
  412.                     <p>老的PHPExcel已经停止更新了</p>
  413.                     <p><span>中级</span><span>61263次播放</span></p>
  414.                 </div>
  415.             </a>
  416.             <a href="#" class="course-item1">
  417.                 <img src="static/images/course-item1-1.jpg" alt="">
  418.                 <div class="course-desc">
  419.                     <p>CI框架30分钟极速入门</p>
  420.                     <p>老的PHPExcel已经停止更新了</p>
  421.                     <p><span>中级</span><span>61263次播放</span></p>
  422.                 </div>
  423.             </a>
  424.             <a href="#" class="course-item1">
  425.                 <img src="static/images/course-item1-1.jpg" alt="">
  426.                 <div class="course-desc">
  427.                     <p>CI框架30分钟极速入门</p>
  428.                     <p>老的PHPExcel已经停止更新了啊啊啊啊啊啊啊啊啊啊啊啊</p>
  429.                     <p><span>中级</span><span>61263次播放</span></p>
  430.                 </div>
  431.             </a>
  432.         </div>
  433.     </section>
  434.     <!-- 最新文章 -->
  435.     <section class="newest-article">
  436.         <!-- 最新文章 -->
  437.         <h2>最新文章</h2>
  438.         <div class="course-list">
  439.             <a href="#" class="course-item1">
  440.                 <div class="course-desc">
  441.                     <p>CI框架30分钟极速入门</p>
  442.                     <p>
  443.                         <!-- <span>中级</span> --><span>发布时间：2020-04-11</span></p>
  444.                 </div>
  445.                 <img src="static/images/course-item1-1.jpg" alt="">
  446.             </a>
  447.             <a href="#" class="course-item1">
  448.                 <div class="course-desc">
  449.                     <p>CI框架30分钟极速入门</p>
  450.                     <p>
  451.                         <!-- <span>中级</span> --><span>发布时间：2020-04-11</span></p>
  452.                 </div>
  453.                 <img src="static/images/course-item1-1.jpg" alt="">
  454.             </a>
  455.             <a href="#" class="course-item1">
  456.                 <div class="course-desc">
  457.                     <p>CI框架30分钟极速入门</p>
  458.                     <p>
  459.                         <!-- <span>中级</span> --><span>发布时间：2020-04-11</span></p>
  460.                 </div>
  461.                 <img src="static/images/course-item1-1.jpg" alt="">
  462.             </a>
  463.             <a href="#" class="course-item1">
  464.                 <div class="course-desc">
  465.                     <p>CI框架30分钟极速入门</p>
  466.                     <p>
  467.                         <!-- <span>中级</span> --><span>发布时间：2020-04-11</span></p>
  468.                 </div>
  469.                 <img src="static/images/course-item1-1.jpg" alt="">
  470.             </a>
  471.             <a href="#" class="course-item1">
  472.                 <div class="course-desc">
  473.                     <p>CI框架30分钟极速入门</p>
  474.                     <p>
  475.                         <!-- <span>中级</span> --><span>发布时间：2020-04-11</span></p>
  476.                 </div>
  477.                 <img src="static/images/course-item1-1.jpg" alt="">
  478.             </a>
  479.             <a href="#" class="course-item1">
  480.                 <div class="course-desc">
  481.                     <p>CI框架30分钟极速入门</p>
  482.                     <p>
  483.                         <!-- <span>中级</span> --><span>发布时间：2020-04-11</span></p>
  484.                 </div>
  485.                 <img src="static/images/course-item1-1.jpg" alt="">
  486.             </a>
  487.             <a href="#" class="course-item1">
  488.                 <p class="more">更多内容</p>
  489.             </a>
  490.         </div>
  491.     </section>
  492.     <!-- 最新博文 -->
  493.     <section class="newest-blog">
  494.         <!-- 最新博文 -->
  495.         <h2>最新博文</h2>
  496.         <div class="course-list">
  497.             <a href="#" class="course-item1">
  498.                 <h4>不出现tp6.0页面aaaaaaaaaaaaadddddddddddddddddddddddddddffffffffffffffffffffffff</h4>
  499.                 <span>2020-04-12</span>
  500.             </a>
  501.             <a href="#" class="course-item1">
  502.                 <h4>不出现tp6.0页面aaaaaaaaaaaaadddddddddddddddddddddddddddffffffffffffffffffffffff</h4>
  503.                 <span>2020-04-12</span>
  504.             </a>
  505.             <a href="#" class="course-item1">
  506.                 <h4>不出现tp6.0页面aaaaaaaaaaaaadddddddddddddddddddddddddddffffffffffffffffffffffff</h4>
  507.                 <span>2020-04-12</span>
  508.             </a>
  509.             <a href="#" class="course-item1">
  510.                 <h4>不出现tp6.0页面aaaaaaaaaaaaadddddddddddddddddddddddddddffffffffffffffffffffffff</h4>
  511.                 <span>2020-04-12</span>
  512.             </a>
  513.             <a href="#" class="course-item1">
  514.                 <h4>不出现tp6.0页面aaaaaaaaaaaaadddddddddddddddddddddddddddffffffffffffffffffffffff</h4>
  515.                 <span>2020-04-12</span>
  516.             </a>
  517.             <a href="#" class="course-item1">
  518.                 <p class="more">更多内容</p>
  519.             </a>
  520.         </div>
  521.     </section>
  522.     <!-- 最新问答 -->
  523.     <section class="newest-QA">
  524.         <!-- 最新问答 -->
  525.         <h2>最新问答</h2>
  526.         <div class="course-list">
  527.             <a href="#" class="course-item1">
  528.                 <h4>不出现tp6.0页面aaaaaaaaaaaaadddddddddddddddddddddddddddffffffffffffffffffffffff</h4>
  529.                 <span>2020-04-12</span>
  530.             </a>
  531.             <a href="#" class="course-item1">
  532.                 <h4>不出现tp6.0页面aaaaaaaaaaaaadddddddddddddddddddddddddddffffffffffffffffffffffff</h4>
  533.                 <span>2020-04-12</span>
  534.             </a>
  535.             <a href="#" class="course-item1">
  536.                 <h4>不出现tp6.0页面aaaaaaaaaaaaadddddddddddddddddddddddddddffffffffffffffffffffffff</h4>
  537.                 <span>2020-04-12</span>
  538.             </a>
  539.             <a href="#" class="course-item1">
  540.                 <h4>不出现tp6.0页面aaaaaaaaaaaaadddddddddddddddddddddddddddffffffffffffffffffffffff</h4>
  541.                 <span>2020-04-12</span>
  542.             </a>
  543.             <a href="#" class="course-item1">
  544.                 <h4>不出现tp6.0页面aaaaaaaaaaaaadddddddddddddddddddddddddddffffffffffffffffffffffff</h4>
  545.                 <span>2020-04-12</span>
  546.             </a>
  547.             <a href="#" class="course-item1">
  548.                 <p class="more">更多内容</p>
  549.             </a>
  550.         </div>
  551.     </section>
  552.     <!-- 底部 -->
  553.     <footer>
  554.         <div class="bottom-btn active">
  555.             <span class="iconfont bottom-icon"></span>
  556.             <span>首页</span>
  557.         </div>
  558.         <div class="bottom-btn">
  559.             <span class="iconfont bottom-icon"></span>
  560.             <span>视频</span>
  561.         </div>
  562.         <div class="bottom-btn">
  563.             <span class="iconfont bottom-icon"></span>
  564.             <span>社区</span>
  565.         </div>
  566.         <div class="bottom-btn">
  567.             <span class="iconfont bottom-icon"></span>
  568.             <span>我的</span>
  569.         </div>
  570.     </footer>
  571. </body>
  573. </html>

3. 显示效果

上一条：flex弹性布局主要用法下一条：Web 前端 - CSS - Flex 弹性布局及仿 php 中文网移动端布局实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多