IFE_part1(task1-7)_blog.html总结

Posted no-harm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了IFE_part1(task1-7)_blog.html总结相关的知识,希望对你有一定的参考价值。

利用两天的下班时间,终于IFE_Part1_task7中的blog.html完成了。

总共完成了一个以Flex为主的大布局,若干个小布局,一个搜索框,一个日历,一个标签云,一个分页列表。

有兴趣的朋友可以看一下我的GitHub哦~

总结了一些其中涉及到的知识点:

  • 在input中加入背景图片及具体设置
    •   具体CSS代码片段如下:
      .search-input input {
          /* 设置插入input框内的小图标 */
          background-image: url("../img/search-01-01-01.png");
          background-repeat:no-repeat;  
      
          float: left;
          width: 170px;
          height: 40px;
          border: 1px solid #dddddd;
      
          /* 增加输入文字的缩进,使input focus的时候输入文字在小图标的右面(刚好是小图标的尺寸),避免和图标背景重合 */
          text-indent: 40px;
      }
      
  •  利用table来完成一个静态日历
    •   具体HTML代码如下:
      <!-- 日历用table来实现 -->
                      <table class="calendar-table" cellspacing="0">
                          <thead>
                              <tr>
                                  <th>M</th>
                                  <th>T</th>
                                  <th>W</th>
                                  <th>T</th>
                                  <th>F</th>
                                  <th>S</th>
                                  <th>S</th>
                              </tr>
                          </thead>
                          <tbody>
                              <tr>
                                  <td>1</td>
                                  <td>2</td>
                                  <td>3</td>
                                  <td>4</td>
                                  <td>5</td>
                                  <td>6</td>
                                  <td>7</td>
                              </tr>
                              <tr>
                                  <td>8</td>
                                  <td>9</td>
                                  <td>10</td>
                                  <td>11</td>
                                  <td>12</td>
                                  <td>13</td>
                                  <td>14</td>
                              </tr>
                              <tr>
                                  <td>15</td>
                                  <td>16</td>
                                  <td>17</td>
                                  <td>18</td>
                                  <td>19</td>
                                  <td>20</td>
                                  <td>21</td>
                              </tr>
                              <tr>
                                  <td>22</td>
                                  <td>23</td>
                                  <td>24</td>
                                  <td>25</td>
                                  <td style="background-color: #773c88;color: #ffffff;">26</td>
                                  <td>27</td>
                                  <td>28</td>
                              </tr>
                              <tr>
                                  <td>29</td>
                                  <td>30</td>
                              </tr>
                          </tbody>
                      </table>
      

        具体CSS如下:

      /* 日历 */
      .calendar {
          width: inherit;
          height: 240px;
          background-color: white;
      }
      .month {
          padding: 24px 24px 20px 20px;
          color: #773c88;
      }
      .prev {
          float: left;
      }
      .month span {
          font-weight: 600;
      }
      .next {
          float: right;
      }
      .calendar-table {
          width: 220px;
          height: 160px;
          color: #999999;
          margin: 0 auto;
          position: relative;
          transform: translateY(-15px);
      }
      .calendar-table td {
          /* 设置table内文字的边距及居中方式 */
          padding:6px;  
          /* margin: 6px; */
          font-size: 5px; 
          text-align:center; 
      }
      .calendar-table th {
          text-align:center;
          padding: 0 6px 6px 6px;
      }
      .calendar-table tr {
          /* 设置行的border */
          border-bottom: 1px solid #eeeeee;
      }
      
  •  完成一个分页列表:
    •   HTML如下:
      <div class="pagination">
                      <ul class="pagination-ul">
                          <li><a href="">第一页</a></li>
                          <li><a href="">上一页</a></li>
                          <li><a class="active" href="">1</a></li>
                          <li><a href="">2</a></li>
                          <li><a href="">3</a></li>
                          <li><a href="">4</a></li>
                          <li><a href="">...</a></li>
                          <li><a href="">下一页</a></li>
                          <li><a href="">最后页</a></li>
                      </ul>
                  </div>
      

      CSS如下:

      /* 分页列表 */
      .pagination {
      
          /* 如何让横向列表居中
          把ul设置为display:inline
          然后用text-align:center来使ul居中
          没设置之前列表是display:block */
          text-align: center;
          
          margin-bottom: 200px;
      }
      .pagination ul{
          display: inline-block;
      }
      .pagination ul li {
          /* 设置列表项为inline,列表可以横向排列 */
          display: inline;
      }
      .pagination ul li a {
          float: left;
          text-decoration: none;
          border: none;
          padding: 14px 17px;   
          margin: 0 5px;
          background-color: white;
      }
      ul.pagination-ul li a:hover:not(.active) {
          background-color: #a660b7;
          color: white;    
          }
      ul.pagination-ul li a.active {
          background-color: #a660b7;
          color: white;
      }
      

      还加深了对其他一些概念的理解,如position、布局 。

希望能更深入地学习下去。

 

以上是关于IFE_part1(task1-7)_blog.html总结的主要内容,如果未能解决你的问题,请参考以下文章

IFE_part2_JavaScript_BOM的学习

IFE_part2_JavaScript_数组去重/trim()

IFE_part2_JavaScript_正则表达式运用(判断邮箱/手机号码)

IFE_part2_JavaScript_关于事件的学习

IFE_part2_JavaScript_实践判断各种数据类型的方法

IFE_part2_JavaScript_Ajax学习