IFE_part1(task1-7)_blog.html总结

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

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

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

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

　　具体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总结

相关文章