abstrakt：HTML <ul> <li class="active"> <a href="">option1</a> &nbs
HTML
<ul>
<li class="active">
<a href="">option1</a>
</li>
<li>
<a href="">option2</a>
</li>
<li>
<a href="">option4</a>
</li>
<li>
<a href="">option5</a>
</li>
<li>
<a href="">option5</a>
</li>
css
ul {
display: flex;
width: 100%;
height: 60px;
background-color: #f2f2f2;
list-style: none;
}
li {
flex: 1 1;
}
li a {
display: block;
height: 60px;
line-height: 60px;
text-decoration: none;
text-align: center;
}
/* 添加透明的下劃線
位置在最后一個(gè)li下面，可通過修改background查看
設(shè)置position為relative
添加CSS3的過度效果
相對位置為left：0% */
li:last-child::after {
position: relative;
content: '';
width: 100%;
height: 3px;
background: transparent;
display: block;
transition: .3s ease;
left: 0;
}
/* 設(shè)置選中鏈接下劃線顏色與位置 */
li:nth-child(1).active~:last-child::after {
background-color: #FF0000;
left: -400%; /* 通過left使下劃線向右移動(dòng)4個(gè)li的大小距離 */
}
li:nth-child(2).active~:last-child::after {
background-color: #FFC000;
left: -300%; /* 通過left使下劃線向右移動(dòng)3個(gè)li的大小距離 */
}
li:nth-child(3).active~:last-child::after {
background-color: #7030A0;
left: -200%; /* 通過left使下劃線向右移動(dòng)2個(gè)li的大小距離 */
}
li:nth-child(4).active~:last-child::after {
background-color: #92D050;
left: -100%; /* 通過left使下劃線向右移動(dòng)1個(gè)li的大小距離 */
}
li:nth-child(5).active:last-child::after {
background-color: #0b8793;
left: 0;
}
/* 設(shè)置鼠標(biāo)懸停下劃線顏色與位置 */
li:nth-child(1):hover~:last-child::after {
background-color: #FF0000;
left: -400%;
}
li:nth-child(2):hover~:last-child::after {
background-color: #FFC000;
left: -300%;
}
li:nth-child(3):hover~:last-child::after {
background-color: #7030A0;
left: -200%;
}
li:nth-child(4):hover~:last-child::after {
background-color: #92D050;
left: -100%;
}
li:nth-child(5):last-child:hover::after {
background-color: #0b8793 ;
left: 0;
}
/* 鏈接字體顏色 */
li:nth-child(1) a {
color: #FF0000;
}
li:nth-child(2) a {
color: #FFC000;
}
li:nth-child(3) a {
color: #7030A0;
}
li:nth-child(4) a {
color: #92D050;
}
li:nth-child(5) a {
color: #00B0F0;
}
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-04-23 15:00:16
Zusammenfassung des Lehrers：li:nth-child(5), nth-child()前面最好不要添加元素限制 , 如果要指定類型, 應(yīng)該用另一個(gè): nth-of-type()