![图片[1]|分享一个米表单页|不死鸟资源网](https://www.busi.net/wp-content/uploads/2025/06/20250615063205286-image-1024x510.png)
![图片[2]|分享一个米表单页|不死鸟资源网](https://www.busi.net/wp-content/uploads/2025/06/20250615063208270-image-1024x501.png)
在原先的代码上添加了注册商筛选、联系方式、网站版权、备案号、友情链接内容，
美元符号修改成人民币符号，更贴合国人习惯
删除域名状态显示，贴上原作者帖子链接（请看最后）
源码：详见附件
顺便求个汇率查询模板：类似这样的站点，https://www.ddfwk.com/
<?php
// 模拟域名数据
$domains = [
['name' => 'oldcms.com', 'price' => '588', 'expiry' => '2025-03-11', 'registrar' => 'Dynadot'],
['name' => 'fofa.xyz', 'price' => '350', 'expiry' => '2025-05-15', 'registrar' => 'Aliyun'],
['name' => 'afei.xyz', 'price' => '688', 'expiry' => '2025-06-14', 'registrar' => 'Aliyun'],
['name' => 'lzxc.cn', 'price' => '688', 'expiry' => '2025-06-30', 'registrar' => 'Dynadot'],
['name' => 'aiguo.xyz', 'price' => '1588', 'expiry' => '2025-07-29', 'registrar' => 'West'],
['name' => 'myriadtalent.com', 'price' => '368', 'expiry' => '2025-08-02', 'registrar' => 'West'],
['name' => 'dhym.cn', 'price' => '258', 'expiry' => '2025-09-23', 'registrar' => 'Aliyun'],
['name' => 'hydeco.cn', 'price' => '688', 'expiry' => '2025-09-24', 'registrar' => 'Dynadot'],
['name' => 'weisensi.com', 'price' => '66', 'expiry' => '2026-02-08', 'registrar' => 'Wordpress'],
['name' => 'jnljjx.com', 'price' => '300', 'expiry' => '2026-06-02', 'registrar' => 'Wordpress'],
['name' => 'hiflsx.com', 'price' => '200', 'expiry' => '2026-07-02', 'registrar' => 'Wordpress'],
['name' => 'ilaien.com', 'price' => '800', 'expiry' => '2027-09-12', 'registrar' => 'Wordpress'],
];
// 获取所有唯一的域名后缀
$suffixes = array_unique(array_map(function($domain) {
return substr(strrchr($domain['name'], "."), 1);
}, $domains));
// 获取所有唯一的注册商
$registrars = array_unique(array_column($domains, 'registrar'));
// 友链数据
$friendLinks = [
['name' => '飞少', 'url' => 'https://note.feishao.cn'],
['name' => '友链2', 'url' => 'https://note.feishao.cn'],
['name' => '友链3', 'url' => 'https://note.feishao.cn'],
['name' => '友链4', 'url' => 'https://note.feishao.cn'],
['name' => '友链5', 'url' => 'https://note.feishao.cn'],
['name' => '友链6', 'url' => 'https://note.feishao.cn'],
['name' => '友链7', 'url' => 'https://note.feishao.cn'],
['name' => '友链8', 'url' => 'https://note.feishao.cn'],
['name' => '友链9', 'url' => 'https://note.feishao.cn'],
['name' => '友链10', 'url' => 'https://note.feishao.cn']
];
?>
<!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>
/* CSS 样式保持不变 */
</style>
<style>
:root {
--primary-color: #3b82f6;
--primary-light: #60a5fa;
--secondary-color: #e5e7eb;
--background-color: #f3f4f6;
--card-background: #ffffff;
--text-color: #1f2937;
--text-secondary: #6b7280;
--header-background: #f9fafb;
}
.dark-mode {
--primary-color: #60a5fa;
--primary-light: #3b82f6;
--secondary-color: #374151;
--background-color: #111827;
--card-background: #1f2937;
--text-color: #f9fafb;
--text-secondary: #d1d5db;
--header-background: #1f2937;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
margin: 0;
padding: 0;
background-color: var(--background-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
header {
background-color: var(--header-background);
color: var(--text-color);
padding: 1rem 1.5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
display: flex;
justify-content: space-between;
align-items: center;
}
h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
main {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
.filter-container {
margin-bottom: 2rem;
display: flex;
gap: 1rem;
align-items: center;
background-color: var(--card-background);
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
select {
padding: 0.5rem 2rem 0.5rem 1rem;
border-radius: 0.375rem;
border: 1px solid var(--secondary-color);
background-color: var(--card-background);
color: var(--text-color);
font-size: 0.875rem;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 1.5em 1.5em;
}
select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.contact-toggle {
margin-top: 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.contact-toggle svg {
width: 20px;
height: 20px;
fill: currentColor;
margin-right: 0.5rem;
}
.contact-details {
display: none;
margin-top: 0.5rem;
}
.contact-details a {
color: #007bff;
text-decoration: none;
}
.contact-details a:hover {
text-decoration: underline;
}
.domain-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.5rem;
}
.domain-card {
background-color: var(--card-background);
border-radius: 0.5rem;
padding: 1.5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
border: 1px solid var(--secondary-color);
display: flex;
flex-direction: column;
}
.domain-card:hover {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.domain-name {
font-size: 1.125rem;
font-weight: 600;
color: var(--primary-color);
margin: 0 0 1rem 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.domain-info {
font-size: 0.875rem;
color: var(--text-secondary);
margin: 0.5rem 0;
display: flex;
align-items: center;
}
.domain-info svg {
margin-right: 0.5rem;
}
.theme-switch:hover {
background-color: var(--secondary-color);
}
@media (min-width: 640px) {
.domain-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.domain-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
.domain-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
.footer-section p {
margin: 0.5rem 0;
text-align: center; /* 确保每行内容在手机端居中 */
}
.friend-links a {
margin: 0 1rem; /* 增加友情链接之间的间隔 */
}
.filter-container {
display: flex;
flex-direction: column; /* 手机端每个筛选条件占一行 */
align-items: flex-start;
}
.filter-container > * {
margin-top: 0.5rem; /* 增加每个筛选条件之间的间距 */
}
}
@media (min-width: 769px) {
.footer-section p {
margin: 0.5rem 0;
text-align: left; /* 确保每行内容在电脑端不居中 */
}
.friend-links a {
margin: 0 1rem; /* 增加友情链接之间的间隔 */
}
.filter-container {
display: flex;
flex-direction: row; /* 电脑端筛选条件在同一行 */
align-items: center;
}
}
.friend-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.friend-links a {
color: #007bff;
text-decoration: none;
}
.friend-links a:hover {
text-decoration: underline;
}
</style>
</style>
</head>
<head>
<!-- 其他头部内容 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.domain-info .fa-yen-sign {
margin-right: 5px; /* 在图标和价格之间添加5px的间距 */
}
</style>
</head>
<body>
<header class="container">
<h1>域名驿站-特价域名出售</h1>
<button id="themeToggle" class="theme-switch" aria-label="切换主题">🌓</button>
</header>
<main class="container">
<div class="filter-container">
<label for="suffixFilter">域名后缀</label>
<select id="suffixFilter">
<option value="">后缀</option>
<?php foreach ($suffixes as $suffix): ?>
<option value="<?php echo htmlspecialchars($suffix); ?>">.<?php echo htmlspecialchars($suffix); ?></option>
<?php endforeach; ?>
</select>
<label for="registrarFilter">注册商</label>
<select id="registrarFilter">
<option value="">注册商</option>
<?php foreach ($registrars as $registrar): ?>
<option value="<?php echo htmlspecialchars($registrar); ?>"><?php echo htmlspecialchars($registrar); ?></option>
<?php endforeach; ?>
</select>
<div class="contact-toggle" onclick="toggleContactDetails()">
<svg viewBox="0 0 24 24">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
联系我
</div>
<div class="contact-details">
<p><a href="tencent://message/?uin=123456789&Site=&Menu=yes">QQ：11618560</a></p>
<p><a href="https://weixin.qq.com/g/your-wechat-group-link">微信：dawxyz</a></p>
<p><a href="mailto:example@example.com">邮箱：tsingark@outlook.com</a></p>
</div>
</div>
<div id="domainGrid" class="domain-grid">
<?php foreach ($domains as $domain): ?>
<div class="domain-card" data-suffix="<?php echo substr(strrchr($domain['name'], "."), 1); ?>" data-registrar="<?php echo htmlspecialchars($domain['registrar']); ?>">
<h3 class="domain-name"><?php echo htmlspecialchars($domain['name']); ?></h3>
<p class="domain-info">
<i class="fas fa-yen-sign"></i>
价格: <?php echo htmlspecialchars($domain['price']); ?>
</p>
<p class="domain-info">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
到期日: <?php echo htmlspecialchars($domain['expiry']); ?>
</p>
<p class="domain-info">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>
</svg>
注册商: <?php echo htmlspecialchars($domain['registrar']); ?>
</p>
</div>
<?php endforeach; ?>
</div>
</main>
<footer class="container">
<div class="footer-section">
<p>友情链接：
<?php
$count = 0;
foreach ($friendLinks as $link):
echo '<a href="' . htmlspecialchars($link['url']) . '" target="_blank">' . htmlspecialchars($link['name']) . '</a>';
if ($count < count($friendLinks) - 1) {
echo ' | ';
}
$count++;
endforeach;
?>
</p>
<p>© 2024 <a href="https://note.feishao.cn" target="_blank">域名驿站 版权所有</a> </p>
<p>网站备案号：<a href="http://beian.miit.gov.cn/" target="_blank">京ICP备12345678号</a></p>
</div>
</footer>
<style>
footer {
background-color: var(--header-background);
color: var(--text-color);
padding: 1rem 1.5rem;
box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.1), 0 -1px 2px 0 rgba(0, 0, 0, 0.06);
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
}
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.copyright p {
margin: 0.5rem 0;
}
.friend-links h3 {
margin: 0 0 0.5rem 0;
font-size: 1rem;
font-weight: 600;
}
.friend-links-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.friend-links-row {
display: flex;
gap: 0.5rem;
}
.friend-links a {
color: var(--primary-color);
text-decoration: none;
}
.friend-links a:hover {
text-decoration: underline;
}
</style>
<script>
// 主题切换功能
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
function setTheme(isDark) {
body.classList.toggle('dark-mode', isDark);
localStorage.setItem('darkMode', isDark);
themeToggle.textContent = isDark ? '🌞' : '🌓';
}
// 检查系统主题偏好
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
let currentTheme = localStorage.getItem('darkMode');
if (currentTheme === null) {
currentTheme = prefersDarkScheme.matches;
} else {
currentTheme = JSON.parse(currentTheme);
}
setTheme(currentTheme);
themeToggle.addEventListener('click', () => {
currentTheme = !currentTheme;
setTheme(currentTheme);
});
// 监听系统主题变化
prefersDarkScheme.addListener((e) => {
if (localStorage.getItem('darkMode') === null) {
setTheme(e.matches);
}
});
// 域名后缀和注册商筛选功能
const suffixFilter = document.getElementById('suffixFilter');
const registrarFilter = document.getElementById('registrarFilter');
const domainCards = document.querySelectorAll('.domain-card');
function filterDomains() {
const selectedSuffix = suffixFilter.value;
const selectedRegistrar = registrarFilter.value;
domainCards.forEach(card => {
const suffixMatch = selectedSuffix === '' || card.dataset.suffix === selectedSuffix;
const registrarMatch = selectedRegistrar === '' || card.dataset.registrar === selectedRegistrar;
if (suffixMatch && registrarMatch) {
card.style.display = '';
} else {
card.style.display = 'none';
}
});
}
suffixFilter.addEventListener('change', filterDomains);
registrarFilter.addEventListener('change', filterDomains);
// 展开/折叠联系方式
function toggleContactDetails() {
const contactDetails = document.querySelector('.contact-details');
if (contactDetails.style.display === 'none' || contactDetails.style.display === '') {
contactDetails.style.display = 'block';
} else {
contactDetails.style.display = 'none';
}
}
</script>
</body>
</html>本站资源均为作者提供和网友推荐收集整理而来，仅供学习和研究使用，请在下载后24小时内删除，谢谢合作!
THE END
