传奇私服发布网HTML代码

/ 66 次浏览/ 基础网页代码

设计思路

  • 使用淡黄色背景(#fff8dc)作为网站基调

  • 顶部导航栏与游戏特色区域

  • 服务器列表区，热门服务器添加HOT标志

  • 使用JavaScript动态显示当天日期

  • 响应式设计，适配不同设备

最终代码实现

html
复制
下载
运行
<!DOCTYPE html><html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传奇世界 - 私服发布站</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #fff8dc; /* 淡黄色背景 */
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(to right, #d35400, #e67e22);
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 28px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 10px;
            font-size: 32px;
        }
        
        .date-display {
            background: rgba(0, 0, 0, 0.2);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
        }
        
        /* 导航样式 */
        nav {
            background-color: #f1c40f;
            padding: 10px 0;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
            justify-content: center;
        }
        
        .nav-links li {
            margin: 0 15px;
        }
        
        .nav-links a {
            color: #333;
            text-decoration: none;
            font-weight: bold;
            font-size: 16px;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: #d35400;
        }
        
        /* 主内容区样式 */
        .main-content {
            padding: 30px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 30px;
            color: #d35400;
            font-size: 28px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: #d35400;
        }
        
        /* 服务器列表样式 */
        .server-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .server-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        
        .server-card:hover {
            transform: translateY(-5px);
        }
        
        .server-header {
            padding: 15px;
            background: linear-gradient(to right, #3498db, #2c3e50);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .hot-tag {
            background: #e74c3c;
            color: white;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
        }
        
        .hot-tag i {
            margin-right: 4px;
        }
        
        .server-body {
            padding: 15px;
        }
        
        .server-info {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
        }
        
        .server-info span {
            font-size: 14px;
        }
        
        .server-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
            height: 40px;
            overflow: hidden;
        }
        
        .play-btn {
            display: block;
            width: 100%;
            padding: 10px;
            background: #27ae60;
            color: white;
            text-align: center;
            border-radius: 4px;
            text-decoration: none;
            font-weight: bold;
            transition: background 0.3s;
        }
        
        .play-btn:hover {
            background: #219653;
        }
        
        /* 特色区域样式 */
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .feature-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            font-size: 40px;
            color: #d35400;
            margin-bottom: 15px;
        }
        
        /* 底部样式 */
        footer {
            background: #333;
            color: white;
            padding: 30px 0;
            text-align: center;
        }
        
        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .footer-links {
            display: flex;
            list-style: none;
            margin: 20px 0;
        }
        
        .footer-links li {
            margin: 0 15px;
        }
        
        .footer-links a {
            color: #f1c40f;
            text-decoration: none;
        }
        
        .footer-links a:hover {
            text-decoration: underline;
        }
        
        .copyright {
            font-size: 14px;
            color: #ccc;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                text-align: center;
            }
            
            .logo {
                margin-bottom: 10px;
            }
            
            .nav-links {
                flex-wrap: wrap;
            }
            
            .server-list {
                grid-template-columns: 1fr;
            }
        }    </style></head><body>
    <!-- 头部 -->
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <i class="fas fa-dragon"></i>
                    <span>传奇世界私服发布站</span>
                </div>
                <div class="date-display" id="currentDate">
                    <i class="far fa-calendar-alt"></i>
                    <span>加载中...</span>
                </div>
            </div>
        </div>
    </header>
    
    <!-- 导航 -->
    <nav>
        <div class="container">
            <ul class="nav-links">
                <li><a href="#"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="#"><i class="fas fa-server"></i> 服务器列表</a></li>
                <li><a href="#"><i class="fas fa-download"></i> 客户端下载</a></li>
                <li><a href="#"><i class="fas fa-newspaper"></i> 新闻资讯</a></li>
                <li><a href="#"><i class="fas fa-question-circle"></i> 游戏攻略</a></li>
            </ul>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container main-content">
        <!-- 热门服务器 -->
        <h2 class="section-title">热门服务器推荐</h2>
        <div class="server-list">
            <!-- 服务器卡片1 -->
            <div class="server-card">
                <div class="server-header">
                    <h3>龙啸九州</h3>
                    <span class="hot-tag"><i class="fas fa-fire"></i> HOT</span>
                </div>
                <div class="server-body">
                    <div class="server-info">
                        <span>版本: 1.76复古</span>
                        <span>在线: 528人</span>
                    </div>
                    <p class="server-desc">经典1.76版本，无会员，无抽奖，纯正复古体验！</p>
                    <a href="#" class="play-btn">进入游戏</a>
                </div>
            </div>
            
            <!-- 服务器卡片2 -->
            <div class="server-card">
                <div class="server-header">
                    <h3>轩辕剑影</h3>
                    <span class="hot-tag"><i class="fas fa-fire"></i> HOT</span>
                </div>
                <div class="server-body">
                    <div class="server-info">
                        <span>版本: 1.80战神</span>
                        <span>在线: 486人</span>
                    </div>
                    <p class="server-desc">全新1.80战神版本，装备好打，散人天堂！</p>
                    <a href="#" class="play-btn">进入游戏</a>
                </div>
            </div>
            
            <!-- 服务器卡片3 -->
            <div class="server-card">
                <div class="server-header">
                    <h3>天下无双</h3>
                    <span class="hot-tag"><i class="fas fa-fire"></i> HOT</span>
                </div>
                <div class="server-body">
                    <div class="server-info">
                        <span>版本: 1.85星王</span>
                        <span>在线: 362人</span>
                    </div>
                    <p class="server-desc">1.85星王合击，全新地图，全新BOSS，等你挑战！</p>
                    <a href="#" class="play-btn">进入游戏</a>
                </div>
            </div>
        </div>
        
        <!-- 最新开服 -->
        <h2 class="section-title">今日新开服务器</h2>
        <div class="server-list">
            <!-- 服务器卡片4 -->
            <div class="server-card">
                <div class="server-header">
                    <h3>傲视群雄</h3>
                    <span>新服</span>
                </div>
                <div class="server-body">
                    <div class="server-info">
                        <span>版本: 1.76复古</span>
                        <span>开服: 今天10:00</span>
                    </div>
                    <p class="server-desc">全新1.76复古服，开区第二天统一攻城！</p>
                    <a href="#" class="play-btn">进入游戏</a>
                </div>
            </div>
            
            <!-- 服务器卡片5 -->
            <div class="server-card">
                <div class="server-header">
                    <h3>王者归来</h3>
                    <span>新服</span>
                </div>
                <div class="server-body">
                    <div class="server-info">
                        <span>版本: 1.80合击</span>
                        <span>开服: 今天14:00</span>
                    </div>
                    <p class="server-desc">1.80合击版本，战战合击威力巨大！</p>
                    <a href="#" class="play-btn">进入游戏</a>
                </div>
            </div>
            
            <!-- 服务器卡片6 -->
            <div class="server-card">
                <div class="server-header">
                    <h3>盛世传奇</h3>
                    <span>新服</span>
                </div>
                <div class="server-body">
                    <div class="server-info">
                        <span>版本: 1.95旷世</span>
                        <span>开服: 今天19:00</span>
                    </div>
                    <p class="server-desc">1.95旷世版本，全新技能，全新装备！</p>
                    <a href="#" class="play-btn">进入游戏</a>
                </div>
            </div>
        </div>
        
        <!-- 特色区域 -->
        <h2 class="section-title">游戏特色</h2>
        <div class="features">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3>公平环境</h3>
                <p>无GM干预，无特权，纯绿色游戏环境</p>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h3>万人同服</h3>
                <p>多线路BGP机房，全国玩家畅玩无阻</p>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-gem"></i>
                </div>
                <h3>极品装备</h3>
                <p>装备全爆，散人也能轻松获得顶级装备</p>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-coins"></i>
                </div>
                <h3>永久免费</h3>
                <p>游戏完全免费，不花钱也能玩到顶级</p>
            </div>
        </div>
    </div>
    
    <!-- 底部 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <ul class="footer-links">
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系方式</a></li>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">服务条款</a></li>
                </ul>
                <p class="copyright">© 2023 传奇世界私服发布站 | 本网站仅做游戏信息展示，请选择正规游戏</p>
            </div>
        </div>
    </footer>

    <script>
        // 显示当天日期
        function updateDate() {
            const now = new Date();
            const options = { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric', 
                weekday: 'long' 
            };
            const dateString = now.toLocaleDateString('zh-CN', options);
            document.getElementById('currentDate').querySelector('span').textContent = dateString;
        }
        
        // 页面加载时执行
        window.onload = function() {
            updateDate();
        };    </script></body></html>

功能说明

  1. 网站设计：采用淡黄色背景，符合要求

  2. HOT标志：在热门服务器上添加了明显的HOT标签，使用火焰图标增强视觉效果

  3. 日期显示：在顶部显示当天日期，包括年月日和周几

  4. 响应式布局：适配不同屏幕大小的设备

  5. 服务器信息：展示服务器名称、版本、在线人数和简介

  6. 视觉元素：使用图标和色彩区分不同区域，提升用户体验

QQ截图20250827115550.png

<< 上一篇

HOT HTML页面设计

下一篇 >>

资源发布站HTML代码设计与实现

相关文章

网友留言（0 条）

发表评论

验证码