网站收藏 - 48x48 固定大小的网站图标 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>网址收藏</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
		}
		h1 {
			text-align: center;
			margin-top: 50px;
		}
		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
		}
		.link {
			display: flex;
			align-items: center;
			border: 1px solid #ccc;
			border-radius: 5px;
			margin-bottom: 10px;
			padding: 10px;
		}
		.link img {
			width: 48px;
			height: 48px;
			margin-right: 10px;
		}
		.link h3 {
			margin: 0;
		}
		.link p {
			margin: 0;
			font-size: 14px;
		}
		.link button {
			margin-left: auto;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 5px;
			padding: 10px;
			cursor: pointer;
		}
		.link button:hover {
			background-color: #3e8e41;
		}
	</style>
</head>
<body>
	<h1>网址收藏</h1>
	<div class="container">
		<div class="link">
			<img src="https://www.google.com/favicon.ico">
			<div>
				<h3>Google</h3>
				<p>https://www.google.com</p>
			</div>
			<button>打开</button>
		</div>
		<div class="link">
			<img src="https://www.baidu.com/favicon.ico">
			<div>
				<h3>Baidu</h3>
				<p>https://www.baidu.com</p>
			</div>
			<button>打开</button>
		</div>
		<div class="link">
			<img src="https://www.github.com/favicon.ico">
			<div>
				<h3>Github</h3>
				<p>https://www.github.com</p>
			</div>
			<button>打开</button>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
		$(document).ready(function() {
			$('.link button').click(function() {
				var url = $(this).prev().children('p').text();
				window.open(url, '_blank');
			});
		});
	</script>
</body>
</html>