【网址导航源码】

最新推荐文章于 2024-09-05 06:54:53 发布

Forever伟

最新推荐文章于 2024-09-05 06:54:53 发布

阅读量908

点赞数 23

文章标签：前端

本文链接：https://blog.csdn.net/2402_83286556/article/details/140436740

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网址导航</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #282828; /* 深灰色背景 */
color: #fff; /* 白色文字 */
margin: 0;
padding: 20px;
text-align: center;
column-count: 3; /* 设置三列瀑布流 */
column-gap: 20px; /* 列之间的间距 */
}
h1 {
color: #FF6347; /* 亮红色标题 */
margin-bottom: 20px;
}
a {
text-decoration: none;
color: #FFD700; /* 金黄色链接 */
display: block; /* 将链接显示为块元素 */
margin-bottom: 10px;
padding: 10px;
background-color: #333; /* 链接背景色 */
border-radius: 5px; /* 圆角边框 */
transition: background-color 0.3s, transform 0.3s; /* 渐变和变换效果 */
}
a:hover {
background-color: #FF4500; /* 鼠标悬停时的背景颜色 */
transform: scale(1.05); /* 鼠标悬停时放大 */
}
@media (max-width: 600px) {
body {
column-count: 1; /* 小屏幕时只显示一列 */
}
}
</style>
</head>
<body>
<h1>网址导航</h1>
<div class="links">
<a href="https://www.google.com" target="_blank">Google</a>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.wikipedia.org" target="_blank">维基百科</a>
<a href="https://www.youtube.com" target="_blank">YouTube</a>
<a href="https://www.twitter.com" target="_blank">Twitter</a>
<a href="https://www.instagram.com" target="_blank">Instagram</a>

</div>
</body>
</html>