IFE_part1(task1-7)_blog.html总结
利用两天的下班时间,终于IFE_Part1_task7中的blog.html完成了。
总共完成了一个以Flex为主的大布局,若干个小布局,一个搜索框,一个日历,一个标签云,一个分页列表。
有兴趣的朋友可以看一下我的GitHub哦~
总结了一些其中涉及到的知识点:
- 在input中加入背景图片及具体设置
- 具体CSS代码片段如下:
12345678910111213
.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
;
}
- 具体CSS代码片段如下:
- 利用table来完成一个静态日历
- 具体HTML代码如下:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
<!-- 日历用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如下:
123456789101112131415161718192021222324252627282930313233343536373839404142/* 日历 */
.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代码如下:
- 完成一个分页列表:
- HTML如下:
12345678910111213
<
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如下:
12345678910111213141516171819202122232425262728293031323334/* 分页列表 */
.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、布局 。
- HTML如下:
希望能更深入地学习下去。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步