我要投稿

#推荐
PHP编写网站信息卡片代码

云码君免费源码

2025-07-08 0 333

功能特点：

响应式设计：卡片自适应大小，在手机和电脑上都能良好显示
动态数据：使用PHP变量存储网站信息，方便修改
现代UI：
- 渐变背景与柔和阴影
- 悬停动画效果
- 优雅的卡片布局
交互元素：
- 可点击的网站链接
- 访问按钮带悬停效果
自动版权年份：使用date('Y')自动显示当前年份

复制下方代码

<?php
// 网站信息卡片
$siteName = "精码云库";
$siteUrl = "https://www.jmkuc.com";
$description = "专注于编程资源与开发工具分享";
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $siteName; ?> - 信息卡片</title>
    <style>
        .info-card {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            width: 350px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
            overflow: hidden;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
            border: 1px solid #e1e8f0;
            margin: 20px auto;
            transition: transform 0.3s ease;
        }
        
        .info-card:hover {
            transform: translateY(-5px);
        }
        
        .card-header {
            background: linear-gradient(90deg, #4361ee 0%, #3a0ca3 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .card-body {
            padding: 25px;
            color: #333;
        }
        
        .site-name {
            font-size: 1.8rem;
            font-weight: 700;
            margin: 0 0 10px 0;
            letter-spacing: 1px;
        }
        
        .site-url {
            display: block;
            font-size: 1.1rem;
            color: #4cc9f0;
            margin: 15px 0;
            word-break: break-all;
            text-decoration: none;
            font-weight: 600;
        }
        
        .site-url:hover {
            text-decoration: underline;
            color: #4895ef;
        }
        
        .description {
            font-size: 1rem;
            line-height: 1.6;
            color: #4a5568;
            border-top: 1px dashed #cbd5e0;
            padding-top: 15px;
            margin-top: 15px;
        }
        
        .visit-btn {
            display: block;
            width: 100%;
            padding: 12px;
            background: linear-gradient(90deg, #4895ef 0%, #4361ee 100%);
            color: white;
            text-align: center;
            border-radius: 6px;
            font-weight: 600;
            text-decoration: none;
            margin-top: 20px;
            transition: all 0.3s ease;
        }
        
        .visit-btn:hover {
            background: linear-gradient(90deg, #4361ee 0%, #3f37c9 100%);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.4);
        }
        
        .footer {
            text-align: center;
            padding: 15px;
            font-size: 0.8rem;
            color: #718096;
            background-color: #f8fafc;
            border-top: 1px solid #edf2f7;
        }
    </style>
</head>
<body>
    <div class="info-card">
        <div class="card-header">
            <h2>网站信息卡片</h2>
        </div>
        
        <div class="card-body">
            <div class="site-name"><?php echo $siteName; ?></div>
            
            <a href="<?php echo $siteUrl; ?>" rel="external nofollow"  rel="external nofollow"  class="site-url" target="_blank">
                <?php echo $siteUrl; ?>
            </a>
            
            <p class="description"><?php echo $description; ?></p>
            
            <a href="<?php echo $siteUrl; ?>" rel="external nofollow"  rel="external nofollow"  class="visit-btn" target="_blank">
                访问网站
            </a>
        </div>
        
        <div class="footer">
            精码云库 &copy; <?php echo date('Y'); ?> 版权所有
        </div>
    </div>
</body>
</html>