超链接点击完之后保持颜色不变

本文介绍了一种简单的方法来设定HTML中超链接的颜色,并确保点击后颜色保持不变。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在超链接<a>加color="…"

想要什么颜色就是什么颜色

无论怎么点都不会变~

 

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图书数据可视化系统</title> <style> :root { --primary: #3498db; --secondary: #2ecc71; --text: #2c3e50; --bg: #ecf0f1; --border: #bdc3c7; --shadow: 0 4px 20px rgba(0,0,0,0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: '微软雅黑', Arial, sans-serif; } body { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; } .header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 2rem; text-align: center; border-bottom: 2px solid rgba(255,255,255,0.3); box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; } .header::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 4px; background: linear-gradient(135deg, transparent, var(--primary)); } h1 { font-size: 2.5rem; margin-bottom: 0.5rem; position: relative; z-index: 1; } .header-text { font-size: 1rem; opacity: 0.9; margin-top: 0.5rem; } /* 保持原有图表网格布局 */ .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 2rem; max-width: 1200px; margin: 2rem auto; } /* 首个图表卡片改造为导航按钮组 */ .chart-card:first-child { background: white; padding: 2rem; border-radius: 12px; box-shadow: var(--shadow); transition: all 0.3s ease; position: relative; } /* 保持原有悬停效果 */ .chart-card:first-child:hover { transform: translateY(-8px); box-shadow: 0 8px 30px rgba(0,0,0,0.15); z-index: 1; } /* 新增按钮容器样式 */ .button-group { display: grid; /* 使用CSS Grid布局 */ grid-template-columns: repeat(6, 1fr); /* 6列均匀分布 */ gap: 1.5rem; /* 按钮间距 */ margin-top: 2rem; } /* 按钮样式 */ .nav-btn { background: white; /* 继承卡片背景色 */ padding: 1.5rem; border-radius: 10px; box-shadow: var(--shadow); /* 继承卡片阴影 */ font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; color: var(--text); /* 使用文本颜色变量 */ transition: all 0.3s ease; border: 2px solid transparent; /* 初始无边框 */ } /* 按钮悬停效果 */ .nav-btn:hover { background: var(--secondary); /* 次要颜色高亮 */ color: white; /* 文字反色 */ transform: translateY(-2px); /* 微微上移动画 */ box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 增强阴影 */ border-color: var(--primary); /* 添加主色边框 */ } /* 响应式调整 */ @media (max-width: 1024px) { .button-group { grid-template-columns: repeat(4, 1fr); /* 平板设备4列 */ } } @media (max-width: 768px) { .button-group { grid-template-columns: 1fr; /* 移动设备单列 */ gap: 1rem; } } iframe { width: 100%; height: 400px; border: none; background: white; transition: height 0.3s; } .chart-card:hover iframe { height: 500px; } @media (max-width: 768px) { iframe { height: 300px; } .chart-card:hover iframe { height: 400px; } } /* 数据来源样式 */ .source-link { display: block; text-align: right; font-size: 0.8rem; color: #95a5a6; margin-top: 1rem; transition: color 0.3s; } .source-link:hover { color: var(--secondary); text-decoration: underline; } </style> </head> <body> <header class="header"> <h1>图书数据可视化系统</h1> <p class="header-text">探索图书出版市场的可视化分析</p > </header> <main class="chart-grid"> <!-- 改造后的首个卡片:导航按钮组 --> <div class="chart-card"> <div class="button-group"> <!-- 原有五个图表按钮保持不变 --> <a href=" " class="nav-btn" target="_blank"> 散点图分析 </a > <a href="../data/price_range_pie_chart.html" class="nav-btn" target="_blank"> 饼状图分析 </a > <a href="../data/yearly_book_count_line.html" class="nav-btn" target="_blank"> 折线图分析 </a > <a href="../data/radar_chart_top5_books.html" class="nav-btn" target="_blank"> 雷达图分析 </a > <a href="../data/wordcloud.html" class="nav-btn" target="_blank"> 词云图分析 </a > <!-- 新增智能问答按钮 --> <!-- 功能说明:跳转至智能问答页面 设计说明:继承.nav-btn样式,保持视觉统一 技术说明:使用CSS过渡实现悬停动效 --> <a href="../data/ai_chatbot.html" class="nav-btn" target="_blank"> 智能问答 </a > </div> </div> <!-- 其他图表卡片保持原有结构和样式 --> <div class="chart-card"> <h2 class="chart-title"> 柱状图 <span class="source-link">对比维度: 出版社/年份/类型</span> </h2> <iframe src="../data/publisher_book_count_bar.html" frameborder="0"></iframe> </div> <!-- 词云图卡片保持不变 --> <!-- ...(其他卡片保持原有代码)... --> </main> </body> </html> 我想要6个超链接按钮在图的正下方显示,并且点击超链接后在同一个页面中显示,结构不变
06-14
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值