<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> { padding: 0; margin: 0; text-decoration: none; font-size: 20px; } ul li { display: block; float: left; width: 150px; height: 77px; margin: 28px; border: 1px #000000 solid; text-align: center; } ul li a{ color: black; } ul li a:hover { color: #018001; } ul li:hover { border: 1px #ffffff solid; } </style>
</head>
<body>
<ul>
<li><a href="javascript:;">
<p><br>首页<br>Home</p>
</a></li>
<li><a href="javascript:;">
<p><br>社区<br>SNS</p>
</a></li>
<li><a href="javascript:;">
<p><br>技能<br>Skill</p>
</a></li>
<li><a href="javascript:;">
<p><br>科学<br>Science</p>
</a></li>
</ul>
</body>
</html>
还没解决的问题：
1.能不能不用浮动
2.字体能不能调整为自适应边框
