IFE_part1(task1-7)_blog.html总结

Posted 2020-11-01 no-harm

利用两天的下班时间，终于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、布局 。

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