利用兩天的下班時間，終於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總結