随便写写css，重点的地方我已经加了注释并用红色显示了，有兴趣的大家可以看看。下面是源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.a_bk{
text-align:center;
border:1px solid #ccc;
width:50px;
height:20px;
color:black;
display:block;
text-decoration:none;
/*这样才能使相邻的a看起来就隔着一个边框*/
margin: -1px 0 0 -1px;
float:left;
/*使得相邻排列*/
position:relative;
border-bottom-left-radius: 2px;
white-space: nowrap;
text-overflow: ellipsis;
}
.a_bk:hover{
border:1px solid #1796f9;
border-radius:2px;
/*这样才能使鼠标放上去的时候显示全部的蓝色框,否则因为maring的缘故，边框的右半部分会被相邻的a的边框遮盖 */
z-index: 10;
}
</style>
</head>
<body>
<div style = "width:300px;height:150px;border:1px solid #ccc;margin:30% auto;">
<a href = "#" class = "a_bk">111</a>
<a href = "#" class = "a_bk">222</a>
<a href = "#" class = "a_bk">333</a>
</div>
</body>
</html>
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
