同事分享了一个面试题，要求用HTML+CSS实现，兼容IE6、注意语义化。
自己花了点时间，也练习了一下。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{font-size:14px;line-height:18px;}
a{color:green;}
.lst{width:170px;margin:0 auto;}
.lst li{
float:left;
margin-left:-5px;
margin-bottom:-5px;
list-style: none;
}
.lst a:link,.lst a:visted{color:green;}
.lst a{
width:50px;
padding:16px 0;
border:5px solid blue;
display:block;
text-decoration:none;
text-align:center;
position:relative;
z-index:9;
}
.lst a:hover{
color:red;
border-color:red;
position:relative;
z-index:99;
}
</style>
</head>
<body>
<ul class="lst">
<li><a 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="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</body>
</html>
题目做起来虽然不难，不过还是相当考验基础和技巧的。
网友评论