嘿咻~要给自己起个萌萌哒新名字哦(〃'▽'〃
<!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, html { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(150deg, #6a11cb 0%, #2575fc 100%); color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; } @keyframes backgroundAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } body, html { animation: backgroundAnimation 10s ease infinite; background-size: 300% 300%; } .nav-bar { position: fixed; left: 0; top: 0; width: 100%; padding: 20px; box-sizing: border-box; text-align: center; } .nav-bar a { color: #fff; text-decoration: none; display: inline-block; padding: 10px 20px; margin: 0 10px; border-radius: 5px; transition: background 0.3s ease, transform 0.3s ease; } .nav-bar a:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } .main-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; padding: 20px; } .card { background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); transition: transform 0.3s ease; width: 200px; text-align: center; } .card:hover { transform: translateY(-10px); } .card h2 { font-size: 24px; margin: 0 0 10px 0; } .card p { font-size: 16px; margin: 0; } .footer { position: fixed; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; padding: 10px 20px; } @media (max-width: 768px) { .nav-bar a { padding: 10px; margin: 5px; } .card { width: calc(50% - 20px); } } </style> </head> <body> <div class="nav-bar"> <a href="https://www.google.com" target="_blank">Google</a> <a href="https://www.bing.com" target="_blank">Bing</a> <a href="https://www.baidu.com" target="_blank">Baidu</a> </div> <div class="main-content"> <div class="card"> <h2>Google</h2> <p>访问 Google 搜索</p> </div> <div class="card"> <h2>Bing</h2> <p>访问 Bing 搜索</p> </div> <div class="card"> <h2>Baidu</h2> <p>访问 Baidu 搜索</p> </div> <!-- More cards go here --> </div> <div class="footer"> <p>版权所有 © 2024 你的公司名称</p> </div> </body> </html>
暂无评论
请先登录后发表评论!
暂无评论