![图片[1]|分享个域名展示html模版(双语切换+WEB3风格)|不死鸟资源网](https://www.busi.net/wp-content/uploads/2025/06/20250609103219496-image-1024x723.png)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>域名出售 Domain name for sale</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Press Start 2P', monospace;
}
body {
background-color: #ffffff;
color: #333;
line-height: 1.6;
min-height: 100vh;
background-image:
linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
/* 顶部导航 */
.header {
background-color: #ffffff;
border-bottom: 2px solid #333;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #333, transparent);
}
.logo {
font-size: 1.2rem;
font-weight: bold;
color: #333;
text-decoration: none;
text-shadow: 2px 2px 0 #000;
}
.admin-link {
color: #333;
text-decoration: none;
padding: 0.5rem 1rem;
border: 2px solid #333;
transition: all 0.3s ease;
}
.admin-link:hover {
background: #333;
color: #fff;
}
/* 主要内容 */
.main-content {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
/* 统计卡片 */
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: #ffffff;
padding: 1.5rem;
border: 2px solid #333;
position: relative;
transition: all 0.3s ease;
box-shadow: 4px 4px 0 #333;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent, rgba(0,0,0,0.05), transparent);
pointer-events: none;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 6px 6px 0 #333;
}
.stat-number {
font-size: 2rem;
font-weight: bold;
color: #333;
text-shadow: 2px 2px 0 #000;
}
/* 域名列表 */
.domain-list {
background: #ffffff;
border: 2px solid #333;
padding: 1.5rem;
box-shadow: 4px 4px 0 #333;
}
.domain-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.filter-section {
margin-bottom: 1.5rem;
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.section-title {
font-size: 1.2rem;
font-weight: bold;
color: #333;
text-shadow: 2px 2px 0 #000;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
border: 2px solid #333;
display: inline-block;
box-shadow: 2px 2px 0 #333;
}
.title-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1.5rem;
flex-wrap: nowrap;
gap: 0.5rem;
padding: 0.5rem;
background: #ffffff;
border: 2px solid #333;
box-shadow: 2px 2px 0 #333;
}
.title-image {
height: 60px;
border: 2px solid #333;
box-shadow: 2px 2px 0 #333;
}
.contact-info {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
width: 100%;
padding: 0.5rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.8rem;
border: 1px solid #333;
box-shadow: 1px 1px 0 #333;
transition: all 0.3s ease;
background: #ffffff;
cursor: pointer;
min-width: 120px;
justify-content: center;
}
.contact-item:hover {
transform: translateY(2px);
box-shadow: 0 0 0 #333;
}
.contact-item a {
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
gap: 0.3rem;
}
.contact-icon {
width: 16px;
height: 16px;
}
.contact-text {
font-size: 0.7rem;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filter-button {
padding: 0.5rem 1rem;
background: #ffffff;
border: 2px solid #333;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Press Start 2P', monospace;
box-shadow: 2px 2px 0 #333;
}
.filter-button:hover {
background: #333;
color: #fff;
transform: translateY(2px);
box-shadow: 0 0 0 #333;
}
.filter-button.active {
background: #333;
color: #fff;
transform: translateY(2px);
box-shadow: 0 0 0 #333;
}
/* 域名卡片 */
.domain-card {
background: #ffffff;
border: 2px solid #333;
padding: 1rem;
position: relative;
transition: all 0.3s ease;
box-shadow: 2px 2px 0 #333;
height: 100%;
display: flex;
flex-direction: column;
}
.domain-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent, rgba(0,0,0,0.05), transparent);
pointer-events: none;
}
.domain-card:hover {
transform: translateY(-5px);
box-shadow: 4px 4px 0 #333;
}
.domain-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.domain-name {
font-size: 1.2rem;
font-weight: bold;
color: #333;
text-shadow: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
letter-spacing: 0.5px;
}
.domain-description {
font-size: 0.9rem;
color: #666;
margin-top: 0.3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.domain-status {
padding: 0.25rem 0.75rem;
border: 2px solid #333;
font-size: 0.8rem;
}
.status-available {
color: #333;
}
.status-sold {
color: #ff0000;
border-color: #ff0000;
}
.domain-info {
color: #666;
font-size: 0.8rem;
margin: 0.5rem 0;
}
.buy-button {
background: #ffffff;
color: #333;
border: 2px solid #333;
padding: 0.5rem 1rem;
cursor: pointer;
margin-top: 0.5rem;
transition: all 0.3s ease;
font-family: 'Press Start 2P', monospace;
box-shadow: 2px 2px 0 #333;
display: inline-block;
text-decoration: none;
}
.price {
font-weight: bold;
color: #e53e3e;
}
.buy-button:hover {
background: #333;
color: #fff;
transform: translateY(2px);
box-shadow: 0 0 0 #333;
}
/* 友情链接 */
.footer {
background: #ffffff;
padding: 2rem;
margin-top: 3rem;
text-align: center;
border-top: 2px solid #333;
box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.footer-link {
color: #333;
text-decoration: none;
padding: 0.5rem 1rem;
border: 2px solid #333;
transition: all 0.3s ease;
box-shadow: 2px 2px 0 #333;
}
.footer-link:hover {
background: #333;
color: #fff;
transform: translateY(2px);
box-shadow: 0 0 0 #333;
}
/* 响应式设计 */
@media (max-width: 768px) {
.stats-container {
grid-template-columns: 1fr;
}
.domain-grid {
grid-template-columns: 1fr;
}
.filter-section {
flex-wrap: wrap;
}
.footer-links {
gap: 1rem;
}
.contact-info {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.contact-item {
width: 100%;
justify-content: center;
}
.contact-text {
font-size: 0.65rem;
}
}
/* 像素动画效果 */
@keyframes pixelGlow {
0% { text-shadow: 1px 1px 0 #000; }
50% { text-shadow: 2px 2px 0 #000; }
100% { text-shadow: 1px 1px 0 #000; }
}
.pixel-glow {
animation: pixelGlow 2s infinite;
}
.language-switch {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: 1rem;
}
.language-btn {
padding: 0.3rem 0.8rem;
border: 1px solid #333;
background: #ffffff;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.8rem;
box-shadow: 1px 1px 0 #333;
}
.language-btn:hover {
background: #333;
color: #fff;
transform: translateY(2px);
box-shadow: 0 0 0 #333;
}
.language-btn.active {
background: #333;
color: #fff;
transform: translateY(2px);
box-shadow: 0 0 0 #333;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<a href="/" class="logo pixel-glow">域名展示</a>
<div class="language-switch">
<button class="language-btn active" data-lang="zh">中文</button>
<button class="language-btn" data-lang="en">English</button>
</div>
</header>
<main class="main-content">
<div class="stats-container">
<div class="stat-card">
<div class="stat-number pixel-glow">12</div>
<div>总域名数</div>
</div>
<div class="stat-card">
<div class="stat-number pixel-glow">9</div>
<div>待售域名</div>
</div>
<div class="stat-card">
<div class="stat-number pixel-glow">3</div>
<div>已售域名</div>
</div>
</div>
<section class="domain-list">
<div class="title-container">
<div class="contact-info">
<div class="contact-item">
<a href="weixin://dl/chat?yyy" target="_blank">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E" alt="微信" class="contact-icon">
<span class="contact-text">微信：yyy</span>
</a>
</div>
<div class="contact-item">
<a href="tencent://message/?uin=yyy&Site=&Menu=yes" target="_blank">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E" alt="QQ" class="contact-icon">
<span class="contact-text">QQ：yyy</span>
</a>
</div>
<div class="contact-item">
<a href="mailto:yyy@foxmail.com" target="_blank">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E" alt="邮箱" class="contact-icon">
<span class="contact-text">邮箱：yyy@foxmail.com</span>
</a>
</div>
</div>
</div>
<div class="domain-grid">
<div class="domain-card">
<div class="domain-header">
<div class="domain-name">xxx.com</div>
<span class="domain-status status-available">待出售</span>
</div>
<div class="domain-description">中国海洋经济门户网站首选域名</div>
<div class="domain-info">
注册商：UCLOUD | 2024年3月22日
</div>
<a href="weixin://dl/chat?yyy" class="buy-button">售价：<span class="price">￥16800</span></a>
</div>
<div class="domain-card">
<div class="domain-header">
<div class="domain-name">xxx.com</div>
<span class="domain-status status-available">待出售</span>
</div>
<div class="domain-description">跨境电商论坛专业域名</div>
<div class="domain-info">
注册商：UCLOUD | 2024年3月22日
</div>
<a href="weixin://dl/chat?yyy" class="buy-button">售价：<span class="price">￥1000</span></a>
</div>
<div class="domain-card">
<div class="domain-header">
<div class="domain-name">xxx.com</div>
<span class="domain-status status-available">待出售</span>
</div>
<div class="domain-description">远东商城国际电商域名</div>
<div class="domain-info">
注册商：UCLOUD | 2024年3月22日
</div>
<a href="weixin://dl/chat?yyy" class="buy-button">售价：<span class="price">￥38000</span></a>
</div>
<div class="domain-card">
<div class="domain-header">
<div class="domain-name">xxx.com</div>
<span class="domain-status status-available">待出售</span>
</div>
<div class="domain-description">跨境电商中国官方域名，含网站程序</div>
<div class="domain-info">
注册商：UCLOUD | 2024年3月22日
</div>
<a href="weixin://dl/chat?yyy" class="buy-button">售价：<span class="price">￥10000</span></a>
</div>
<div class="domain-card">
<div class="domain-header">
<div class="domain-name">xxx.com</div>
<span class="domain-status status-available">待出售</span>
</div>
<div class="domain-description">高端商务服务品牌域名</div>
<div class="domain-info">
注册商：UCLOUD | 2024年3月22日
</div>
<a href="weixin://dl/chat?yyy" class="buy-button">售价：<span class="price">￥2000</span></a>
</div>
<div class="domain-card">
<div class="domain-header">
<div class="domain-name">xxx.com</div>
<span class="domain-status status-available">待出售</span>
</div>
<div class="domain-description">中国国际商会品牌域名</div>
<div class="domain-info">
注册商：UCLOUD | 2024年3月22日
</div>
<a href="weixin://dl/chat?yyy" class="buy-button">售价：<span class="price">￥1000</span></a>
</div>
<div class="domain-card">
<div class="domain-header">
<div class="domain-name">xxx.com</div>
<span class="domain-status status-available">待出售</span>
</div>
<div class="domain-description">高端信息科技服务域名</div>
<div class="domain-info">
注册商：UCLOUD | 2024年3月22日
</div>
<a href="weixin://dl/chat?yyy" class="buy-button">售价：<span class="price">￥3000</span></a>
</div>
<div class="domain-card">
<div class="domain-header">
<div class="domain-name">xxx.com</div>
<span class="domain-status status-available">待出售</span>
</div>
<div class="domain-description">国际商会全球品牌域名</div>
<div class="domain-info">
注册商：UCLOUD | 2024年3月22日
</div>
<a href="weixin://dl/chat?yyy" class="buy-button">售价：<span class="price">￥5000</span></a>
</div>
<div class="domain-card">
<div class="domain-header">
<div class="domain-name">xxx.com</div>
<span class="domain-status status-available">待出售</span>
</div>
<div class="domain-description">科技媒体内容网络域名</div>
<div class="domain-info">
注册商：UCLOUD | 2024年3月22日
</div>
<a href="weixin://dl/chat?yyy" class="buy-button">售价：<span class="price">￥888</span></a>
</div>
<div class="domain-card">
<div class="domain-header">
<div class="domain-name">xxx.com</div>
<span class="domain-status status-sold">已售出</span>
</div>
<div class="domain-description">中国睡眠经济品牌域名</div>
<div class="domain-info">
购买方：睡眠科技公司 | 2024年3月25日
</div>
<a href="weixin://dl/chat?yyy" class="buy-button">售价：<span class="price">￥5000</span></a>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer-links">
<a href="#" class="footer-link">域名注册服务</a>
<a href="#" class="footer-link">网站建设平台</a>
<a href="#" class="footer-link">域名行情分析</a>
<a href="#" class="footer-link">云服务提供商</a>
<a href="#" class="footer-link">域名投资指南</a>
</div>
</footer>
<script>
// 语言切换功能
const translations = {
zh: {
title: "域名展示",
admin: "管理员登录",
total: "总域名数",
available: "待售域名",
sold: "已售域名",
filter: "选择域名状态进行筛选",
all: "全部",
available: "待售",
sold: "已售",
statusAvailable: "待出售",
statusSold: "已售出",
register: "注册商",
buyer: "购买方",
buy: "购买",
contact: "联系方式",
wechat: "微信",
qq: "QQ",
telegram: "Telegram",
email: "邮箱",
price: "售价：",
descriptions: {
'xxx.com': '中国海洋经济门户网站首选域名',
'xxx.com': '跨境电商论坛专业域名',
'xxx.com': '跨境电商中国官方域名，含网站程序',
'xxx.com': '高端商务服务品牌域名',
'xxx.com': '中国国际商会品牌域名',
'xxx.com': '高端信息科技服务域名',
'xxx.com': '国际商会全球品牌域名',
'xxx.com': '科技媒体内容网络域名',
'xxx.com': '远东商城国际电商域名',
'xxx.com': '中国睡眠经济品牌域名'
}
},
en: {
title: "Domain Display",
admin: "Admin Login",
total: "Total Domains",
available: "Available",
sold: "Sold",
filter: "Filter by status",
all: "All",
available: "Available",
sold: "Sold",
statusAvailable: "For Sale",
statusSold: "Sold",
register: "Registrar",
buyer: "Buyer",
buy: "Buy",
contact: "Contact",
wechat: "WeChat",
qq: "QQ",
telegram: "Telegram",
email: "Email",
price: "Price: ",
descriptions: {
'xxx.com': 'Preferred domain for China Ocean Economy Portal',
'xxx.com': 'Professional domain for Cross-border E-commerce Forum',
'xxx.com': 'Official China Cross-border E-commerce domain with website program',
'xxx.com': 'Premium Business Service Brand Domain',
'xxx.com': 'China International Chamber of Commerce Brand Domain',
'xxx.com': 'High-end Information Technology Service Domain',
'xxx.com': 'Global International Chamber of Commerce Brand Domain',
'xxx.com': 'Technology Media Content Network Domain',
'xxx.com': 'Far East Mall International E-commerce Domain',
'xxx.com': 'China Sleep Economy Brand Domain'
}
}
};
// 域名价格配置
const domainPrices = {
'xxx.com': { cn: 16800, en: 2333 },
'xxx.com': { cn: 1000, en: 139 },
'xxx.com': { cn: 10000, en: 1389 },
'xxx.com': { cn: 2000, en: 278 },
'xxx.com': { cn: 1000, en: 139 },
'xxx.com': { cn: 3000, en: 417 },
'xxx.com': { cn: 5000, en: 694 },
'xxx.com': { cn: 888, en: 123 },
'xxx.com': { cn: 38000, en: 5278 },
'xxx.com': { cn: 5000, en: 694 }
};
// 检测浏览器语言
const browserLang = navigator.language || navigator.userLanguage;
const defaultLang = browserLang.startsWith('zh') ? 'zh' : 'en';
// 初始化语言
function initLanguage() {
const savedLang = localStorage.getItem('language') || defaultLang;
setLanguage(savedLang);
}
// 设置语言
function setLanguage(lang) {
// 更新语言按钮状态
document.querySelectorAll('.language-btn').forEach(btn => {
btn.classList.remove('active');
if (btn.dataset.lang === lang) {
btn.classList.add('active');
}
});
// 更新基本文本
document.querySelector('.logo').textContent = translations[lang].title;
document.querySelector('.stat-card:nth-child(1) div:last-child').textContent = translations[lang].total;
document.querySelector('.stat-card:nth-child(2) div:last-child').textContent = translations[lang].available;
document.querySelector('.stat-card:nth-child(3) div:last-child').textContent = translations[lang].sold;
// 更新域名状态
document.querySelectorAll('.domain-status').forEach(status => {
status.textContent = status.classList.contains('status-available')
? translations[lang].statusAvailable
: translations[lang].statusSold;
});
// 更新价格显示
document.querySelectorAll('.domain-card').forEach(card => {
const domainName = card.querySelector('.domain-name').textContent;
const price = domainPrices[domainName];
if (price) {
const priceText = lang === 'zh'
? `￥${price.cn}`
: `$${price.en}`;
const buyButton = card.querySelector('.buy-button');
buyButton.innerHTML = `${translations[lang].price}<span class="price">${priceText}</span>`;
}
});
// 更新域名描述
document.querySelectorAll('.domain-card').forEach(card => {
const domainName = card.querySelector('.domain-name').textContent;
const description = card.querySelector('.domain-description');
if (description && translations[lang].descriptions[domainName]) {
description.textContent = translations[lang].descriptions[domainName];
}
});
// 更新其他信息
document.querySelectorAll('.domain-info').forEach(info => {
const text = info.textContent;
if (text.includes('注册商')) {
info.textContent = text.replace('注册商', translations[lang].register);
} else if (text.includes('购买方')) {
info.textContent = text.replace('购买方', translations[lang].buyer);
}
});
// 更新联系方式
document.querySelectorAll('.contact-text').forEach(text => {
const type = text.textContent.split('：')[0];
if (type === '微信') text.textContent = `${translations[lang].wechat}：yyy`;
else if (type === 'QQ') text.textContent = `${translations[lang].qq}：yyy`;
else if (type === '邮箱') text.textContent = `${translations[lang].email}：yyy@foxmail.com`;
});
}
// 语言切换事件
document.querySelectorAll('.language-btn').forEach(btn => {
btn.addEventListener('click', () => {
const lang = btn.dataset.lang;
localStorage.setItem('language', lang);
setLanguage(lang);
});
});
// 初始化
document.addEventListener('DOMContentLoaded', () => {
initLanguage();
});
// 筛选按钮功能
document.querySelectorAll('.filter-button').forEach(button => {
button.addEventListener('click', () => {
document.querySelectorAll('.filter-button').forEach(btn => {
btn.classList.remove('active');
});
button.classList.add('active');
});
});
</script>
</body>
</html> 本站资源均为作者提供和网友推荐收集整理而来，仅供学习和研究使用，请在下载后24小时内删除，谢谢合作!
THE END
