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

原文地址：https://www.cnblogs.com/No-harm/p/8955457.html