分享一款纯AI生成的的域名出售页单页源码-源码模板-大圣社区-站长之家

分享一款纯AI生成的的域名出售页单页源码源码

智南 (UID: 1) 创始人 1月前 [复制链接]
帖子链接已复制到剪贴板
145 1
前言：
现在的AI功能真的是越来越强大了，确实给大家提供了很多便利，这两个单页也就是3句话就生成的页面，但是最后出来的效果还是挺不错的，这就是一个简单的域名出售页的源码，还是挺好看的，有需要的朋友请自取
PS：还是尽量给我留个出处，毕竟原创不易，谢谢~
食用方法：
不使用数据库
生成一个“index.html”文件名
代码复制进去保存
绑定域名直接访问即可
要修改信息直接在文件里面改，一眼懂
演示：
只有款式一的演示
https://mi.29o.cn
款式一：
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智南域名出售页</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        /* 卡片容器 */
        .card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin: 20px auto;
            max-width: 1200px;
            overflow: hidden;
        }

        /* 卡片标题 */
        .card-header {
            background-color: #faf6f1;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }

        .card-title {
            color: #2c3e50;
            font-size: 18px;
            font-weight: 600;
        }

        /* 卡片内容 */
        .card-content {
            padding: 20px;
        }

        /* 表格样式 */
        .table-container {
            overflow-x: auto;
            background: white;
            border-radius: 4px;
        }

        .domain-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        .domain-table th {
            background: #faf6f1;
            padding: 12px;
            text-align: left;
            font-weight: 600;
            color: #2c3e50;
        }

        .domain-table td {
            padding: 12px;
            border-bottom: 1px solid #eee;
        }

        .domain-table tr:hover {
            background-color: #f8f9fa;
        }

        /* 按钮样式 */
        .btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        /* 已售标记 */
        .sold-mark {
            color: #e74c3c;
            font-weight: 500;
        }

        del {
            color: #95a5a6;
            text-decoration: line-through;
        }

        /* 联系方式样式 */
        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 10px;
        }

        .contact-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: white;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .contact-item img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }

        /* 友情链接样式 */
        .links-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
            padding: 10px;
        }

        .link-item {
            display: block;
            padding: 10px;
            background: white;
            border-radius: 4px;
            text-decoration: none;
            color: #3498db;
            text-align: center;
            transition: all 0.3s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .link-item:hover {
            background-color: #f8f9fa;
            transform: translateY(-2px);
        }

        /* 底部信息样式 */
        .footer-content {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
        }

        .footer-info p {
            margin: 5px 0;
            font-size: 14px;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }

            .card {
                margin: 10px 0;
            }

            .domain-table {
                font-size: 13px;
            }

            .domain-table td, 
            .domain-table th {
                padding: 8px;
            }

            .contact-grid {
                grid-template-columns: 1fr;
            }

            .links-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 域名列表 -->
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">域名列表</h2>
        </div>
        <div class="card-content">
            <div class="table-container">
                <table class="domain-table">
                    <thead>
                        <tr>
                            <th>域名</th>
                            <th>描述</th>
                            <th>注册商</th>
                            <th>注册时间</th>
                            <th>到期时间</th>
                            <th>标价</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><del>6H0.CN</del></td>
                            <td>精品三杂</td>
                            <td>west</td>
                            <td>2017-07-06</td>
                            <td>2026-07-06</td>
                            <td><span class="sold-mark">已售</span></td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>VRON.CN</td>
                            <td>精品四字母</td>
                            <td>west</td>
                            <td>2019-07-22</td>
                            <td>2026-07-22</td>
                            <td>￥388</td>
                            <td><button class="btn" onclick="inquire(this)">询价</button></td>
                        </tr>
                        <tr>
                            <td>I7T.CN</td>
                            <td>精品三杂</td>
                            <td>west</td>
                            <td>2015-01-28</td>
                            <td>2027-01-28</td>
                            <td>￥388</td>
                            <td><button class="btn" onclick="inquire(this)">询价</button></td>
                        </tr>
                        <tr>
                            <td><del>29O.CN</del></td>
                            <td>优质域名</td>
                            <td>West</td>
                            <td>2014-01-21</td>
                            <td>2027-01-21</td>
                            <td><span class="sold-mark">已售</span></td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>6l8.CN</td>
                            <td>精品三杂已备案</td>
                            <td>West</td>
                            <td>2024-07-01</td>
                            <td>2026-07-01</td>
                            <td>￥888</td>
                            <td><button class="btn" onclick="inquire(this)">询价</button></td>
                        </tr>
                        <tr>
                            <td>DS.SD</td>
                            <td>大圣/大师/大事/品相好</td>
                            <td>趣域</td>
                            <td>2023-03-16</td>
                            <td>2025-03-16</td>
                            <td>￥999</td>
                            <td><button class="btn" onclick="inquire(this)">询价</button></td>
                        </tr>
                        <tr>
                            <td>EO.CX</td>
                            <td>纯二字母随便几百起步</td>
                            <td>West</td>
                            <td>2021-03-23</td>
                            <td>2026-03-23</td>
                            <td>￥588</td>
                            <td><button class="btn" onclick="inquire(this)">询价</button></td>
                        </tr>
                        <tr>
                            <td>jiankongba.cn</td>
                            <td>“监控吧”精品三拼</td>
                            <td>West</td>
                            <td>2017-04-05</td>
                            <td>2025-04-05</td>
                            <td>￥168</td>
                            <td><button class="btn" onclick="inquire(this)">询价</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 联系方式 -->
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">联系方式</h2>
        </div>
        <div class="card-content">
            <div class="contact-grid">
                <div class="contact-item">
                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAgNEg0Yy0xLjEgMC0xLjk5LjktMS45OSAyTDIgMThjMCAxLjEuOSAyIDIgMmgxNmMxLjEgMCAyLS45IDItMlY2YzAtMS4xLS45LTItMi0yem0wIDRsLTggNS04LTVWNmw4IDUgOC01djJ6Ii8+PC9zdmc+" alt="Email">
                    <span>Email: 9321856@QQ.com</span>
                </div>
                <div class="contact-item">
                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNi42MiAxMC43OWMxLjQ0IDIuODMgMy43NiA1LjE0IDYuNTkgNi41OWwyLjItMi4yYy4yNy0uMjcuNjctLjM2IDEuMDItLjI0IDEuMTIuMzcgMi4zMy41NyAzLjU3LjU3LjU1IDAgMSAuNDUgMSAxVjIwYzAgLjU1LS40NSAxLTEgMUM5LjgyIDIxIDIgMTMuMTggMiA0YzAtLjU1LjQ1LTEgMS0xaDMuNTNjLjU1IDAgMSAuNDUgMSAxIDAgMS4yNS4yIDIuNDUuNTcgMy41Ny4xMS4zNS4wMy43NC0uMjUgMS4wMmwtMi4yIDIuMnoiLz48L3N2Zz4=" alt="Phone">
                    <span>电话: +1 909-909-5333</span>
                </div>
                <div class="contact-item">
                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMS41IDExaC0zdi0zaDN2M3oiLz48L3N2Zz4=" alt="WeChat">
                    <span>微信: wx9321856</span>
                </div>
                <div class="contact-item">
                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6Ii8+PC9zdmc+" alt="QQ">
                    <span>QQ: 9321856</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 友情链接 -->
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">友情链接</h2>
        </div>
        <div class="card-content">
            <div class="links-grid">
                <a href="https://vps.ink" class="link-item">大圣云计算</a>
                <a href="https://qcrpn.cn" class="link-item">南方的行者</a>
                <a href="https://ds.sd" class="link-item">大圣社区</a>
                <a href="https://login.29o.cn" class="link-item">聚合登录</a>
                <a href="https://dh.29o.cn" class="link-item">大圣导航</a>
                <a href="https://code.qcron.cn" class="link-item">码易付</a>
            </div>
        </div>
    </div>

    <!-- 底部信息 -->
    <footer class="card">
        <div class="footer-content">
            <div class="footer-info">
                <p>Copyright © 2025 Domain Parking. All rights reserved.</p>
                <p>ICP备案号：陕ICP备2024055554号-1</p>
                <p>公安备案号：陕公网安备 12345678901234号</p>
            </div>
        </div>
    </footer>

    <script>
        function inquire(button) {
            const row = button.closest('tr');
            const domainName = row.cells[0].textContent;
            const price = row.cells[5].textContent;
            alert(`请联系管理员询价：\n域名：${domainName}\n参考价格：${price}\n邮箱：932185@qq.com`);
        }
    </script>
</body></html>
熬夜不好，建议通宵~