炫酷友情链接代码 - HTML示例 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>炫酷友情链接</title>
	<style>
		body {
			background-color: #f1f1f1;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		h1 {
			color: #333;
			font-size: 36px;
			margin-top: 50px;
		}
		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 50px;
			padding: 0;
		}
		li {
			margin: 20px;
			list-style-type: none;
		}
		a {
			color: #333;
			font-size: 24px;
			text-decoration: none;
			transition: all 0.3s ease-in-out;
		}
		a:hover {
			color: #f1f1f1;
			background-color: #333;
			padding: 10px 20px;
			border-radius: 5px;
			box-shadow: 2px 2px 5px #999;
		}
	</style>
</head>
<body>
	<h1>炫酷友情链接</h1>
	<ul>
		<li><a href='#'>链接一</a></li>
		<li><a href='#'>链接二</a></li>
		<li><a href='#'>链接三</a></li>
		<li><a href='#'>链接四</a></li>
		<li><a href='#'>链接五</a></li>
	</ul>
</body>
</html>