IFE_part1(task1-7)_blog.html总结

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

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

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

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

  • 在input中加入背景图片及具体设置
    •   具体CSS代码片段如下:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      .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代码如下:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      <!-- 日历用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如下:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      /* 日历 */
      .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如下:

      CSS如下:

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

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

 

posted @   小粒旬  阅读(120)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示