如何在網頁中弄出目錄效果
效果圖如下所示 ，涉及到的知識分别是 html5
css3
html5
css3
我們先來分析一下思路：首先，使用一個 ul
ol
li
li
dispaly：flex
ul
ol
li
li
dispaly：flex
.items li{
display: flex;
/* 設定為彈性布局 */
position: relative;
overflow: hidden;
height: 20px;
line-height: 20px;
margin-bottom: 5px;
}
接下來，在每個 li
span
li
span
<li>
<span class="news"><a href="#">考試走路甩手誤将手摔入河裡，消防員跳河打撈</a></span>
<span class="dashed"></span>
<span class="time">2020-12</span>
</li>
左邊的 span
span
.items .news{
position: relative;
left: 0;
padding: 0 5px 0 0 ;
/* 為了不讓線緊貼文字 */
background-color: #FFFFFF;
z-index: 10;
/* 設定一個背景并提高層級,遮擋着在文字後面的線, */
}
中間的 span
li
span
li
.items .dashed{
position: absolute;
border-top: 1px dashed #666666;
display: flex;
width: 100%;
top: 10px;
flex: 1;
/* 彈性盒子,表示兩邊固定,中間是一個自适應效果 */
}
右邊的 span
span
.items .time{
position: absolute;
right: 0;
padding-left: 5px;
background-color: #FFFFFF;
}
整體的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>目錄效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.items{
width: 760px;
height: 240px;
border: 3px dashed #000000;
margin: 40px auto;
padding: 20px;
}
.items span{
display: inline-block;
}
.items span{
font-family: "宋體";
}
.items a{
text-decoration: none;
color: #000000;
font-family: "宋體";
}
.items li:hover{
color: red;
}
.items li:hover a{
color: red;
}
.items li:hover .dashed{
border-top: 1px dashed red;
}
.items li{
display: flex;
/* 設定為彈性布局 */
position: relative;
overflow: hidden;
height: 20px;
line-height: 20px;
margin-bottom: 5px;
}
.items .news{
position: relative;
left: 0;
padding: 0 5px 0 0 ;
/* 為了不讓線緊貼文字 */
background-color: #FFFFFF;
z-index: 10;
/* 設定一個背景并提高層級,遮擋着在文字後面的線, */
}
.items .time{
position: absolute;
right: 0;
padding-left: 5px;
background-color: #FFFFFF;
}
.items .dashed{
position: absolute;
border-top: 1px dashed #666666;
display: flex;
width: 100%;
top: 10px;
flex: 1;
/* 彈性盒子,表示兩邊固定,中間是一個自适應效果 */
}
</style>
</head>
<body>
<ul class="items">
<li>
<span class="news"><a href="#">考試走路甩手誤将手摔入河裡，消防員跳河打撈</a></span>
<span class="dashed"></span>
<span class="time">2020-12</span>
</li>
<li>
<span class="news"><a href="#">20餘省公務員省筆考試放榜</a></span>
<span class="dashed"></span>
<span class="time">2020-12</span>
</li>
<li>
<span class="news"><a href="#">辟谷減肥:"大師"稱意念發功可治病</a></span>
<span class="dashed"></span>
<span class="time">2020-12</span>
</li>
<li>
<span class="news"><a href="#">2020年公務員考試34萬人報名,平均24人搶一人</a></span>
<span class="dashed"></span>
<span class="time">2020-12</span>
</li>
<li>
<span class="news"><a href="#">男子送交警錦旗被抓,原因令人震驚</a></span>
<span class="dashed"></span>
<span class="time">2020-12</span>
</li>
<li>
<span class="news"><a href="#">放假過年須知</a></span>
<span class="dashed"></span>
<span class="time">2020-12</span>
</li>
<li>
<span class="news"><a href="#">冬天使用吃什麼</a></span>
<span class="dashed"></span>
<span class="time">2020-12</span>
</li>
<li>
<span class="news"><a href="#">上海一家三口住九平米房間27年</a></span>
<span class="dashed"></span>
<span class="time">2020-12</span>
</li>
<li>
<span class="news"><a href="#">考試走路甩手誤将手摔入河裡，消防員跳河打撈</a></span>
<span class="dashed"></span>
<span class="time">2020-12</span>
</li>
<li>
<span class="news"><a href="#">女人美于自信,而不是化妝</a></span>
<span class="dashed"></span>
<span class="time">2020-12</span>
</li>
</ul>
</body>
</html>
![門戶通專訪草根站長九天狼：做站貴在堅持[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)