文章摘要
This article presents a bilingual (Chinese and English) HTML template designed for showcasing domain names with a Web3 aesthetic. The template includes language-switching functionality, responsive design, and interactive elements such as filters for domain status. It features a header with navigation, statistics on domain counts (12 total, 9 for sale, 3 sold), listings of domain names with their statuses, price tags in both currencies (e.g., ￥16800 and $2333), and descriptions about their potential uses. Contact options like WeChat, QQ, and email are provided in both languages. The code is styled with pixelated visual effects, grid layouts, and hovers for enhanced interactivity, making it suitable for domain sales platforms seeking a modern and user-friendly interface.
— 文章部分摘要由DeepSeek深度思考而成
![图片[1]|分享个域名展示html模版(双语切换+WEB3风格)|不死鸟资源网](https://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
