马上注册,自学更多教程,下载更多资源。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
360截图20241027132911442.jpg

杂HTML代码编写的WAP站尾页模板,合用于各类WAP站面

[HTML] 杂文本检察 复造代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>手机WAP站</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.5;
            background: #f5f5f5;
        }

        .header {
            background: #fff;
            padding: 10px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* 幻灯片样式 */
        .slider {
            position: relative;
            overflow: hidden;
            height: 200px;
        }

        .slider-wrapper {
            display: flex;
            transition: transform 0.3s ease;
        }

        .slide {
            flex: 0 0 100%;
            height: 200px;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 头条样式 */
        .headlines {
            background: #fff;
            padding: 10px;
            margin: 10px 0;
        }

        .headline-title {
            color: #f00;
            font-weight: bold;
            border-left: 3px solid #f00;
            padding-left: 10px;
            margin-bottom: 10px;
        }

        .headline-content {
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }

        /* 选项卡样式 */
        .tabs {
            background: #fff;
            margin-top: 10px;
        }

        .tab-nav {
            display: flex;
            border-bottom: 1px solid #eee;
        }

        .tab-nav button {
            flex: 1;
            padding: 10px;
            border: none;
            background: none;
            font-size: 14px;
        }

        .tab-nav button.active {
            color: #007bff;
            border-bottom: 2px solid #007bff;
        }

        .tab-content {
            display: none;
            padding: 10px;
        }

        .tab-content.active {
            display: block;
        }

        .news-item {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .news-item:last-child {
            border-bottom: none;
        }

        .news-item-content {
            flex: 1;
        }

        .news-item-title {
            font-size: 15px;
            margin-bottom: 4px;
        }

        .news-item-desc {
            font-size: 12px;
            color: #666;
        }

        .news-item-image {
            width: 80px;
            height: 60px;
            border-radius: 4px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>WAP站点</h1>
    </header>

    <!-- 幻灯片 -->
    <div class="slider">
        <div class="slider-wrapper">
            <div class="slide">
                <img src="https://via.placeholder.com/400x200/007bff/ffffff?text=Slide+1" alt="幻灯片1">
            </div>
            <div class="slide">
                <img src="https://via.placeholder.com/400x200/28a745/ffffff?text=Slide+2" alt="幻灯片2">
            </div>
            <div class="slide">
                <img src="https://via.placeholder.com/400x200/dc3545/ffffff?text=Slide+3" alt="幻灯片3">
            </div>
        </div>
    </div>

    <!-- 头条 -->
    <div class="headlines">
        <div class="headline-title">头条新闻</div>
        <div class="headline-content">重要新闻:2024年全球科技发展趋势分析</div>
        <div class="headline-content">最新动态:人工智能在医疗领域取得重大突破</div>
    </div>

    <!-- 选项卡 -->
    <div class="tabs">
        <div class="tab-nav">
            <button class="active">科技</button>
            <button>财经</button>
            <button>体育</button>
        </div>

        <div class="tab-content active">
            <div class="news-item">
                <div class="news-item-content">
                    <div class="news-item-title">最新5G技术发展报告</div>
                    <div class="news-item-desc">全球5G技术应用与发展最新动态分析</div>
                </div>
                <img class="news-item-image" src="https://via.placeholder.com/80x60/007bff/ffffff?text=5G" alt="5G技术">
            </div>
            <div class="news-item">
                <div class="news-item-content">
                    <div class="news-item-title">量子计算机研究新进展</div>
                    <div class="news-item-desc">科学家在量子计算领域取得重大突破</div>
                </div>
                <img class="news-item-image" src="https://via.placeholder.com/80x60/28a745/ffffff?text=Quantum" alt="量子计算">
            </div>
            <div class="news-item">
                <div class="news-item-content">
                    <div class="news-item-title">新一代智能手机发布</div>
                    <div class="news-item-desc">各大厂商发布最新旗舰智能手机</div>
                </div>
                <img class="news-item-image" src="https://via.placeholder.com/80x60/dc3545/ffffff?text=Phone" alt="智能手机">
            </div>
        </div>

        <div class="tab-content">
            <div class="news-item">
                <div class="news-item-content">
                    <div class="news-item-title">全球经济形势分析</div>
                    <div class="news-item-desc">2024年全球经济发展趋势预测</div>
                </div>
                <img class="news-item-image" src="https://via.placeholder.com/80x60/ffc107/ffffff?text=Economy" alt="经济分析">
            </div>
            <div class="news-item">
                <div class="news-item-content">
                    <div class="news-item-title">股市最新动态</div>
                    <div class="news-item-desc">全球主要股市表现及投资机会分析</div>
                </div>
                <img class="news-item-image" src="https://via.placeholder.com/80x60/17a2b8/ffffff?text=Stock" alt="股市动态">
            </div>
            <div class="news-item">
                <div class="news-item-content">
                    <div class="news-item-title">数字货币发展趋势</div>
                    <div class="news-item-desc">数字货币市场最新发展动态报道</div>
                </div>
                <img class="news-item-image" src="https://via.placeholder.com/80x60/6c757d/ffffff?text=Crypto" alt="数字货币">
            </div>
        </div>

        <div class="tab-content">
            <div class="news-item">
                <div class="news-item-content">
                    <div class="news-item-title">世界杯最新赛况</div>
                    <div class="news-item-desc">世界杯赛事精彩回顾与分析</div>
                </div>
                <img class="news-item-image" src="https://via.placeholder.com/80x60/e83e8c/ffffff?text=WorldCup" alt="世界杯">
            </div>
            <div class="news-item">
                <div class="news-item-content">
                    <div class="news-item-title">NBA赛事报道</div>
                    <div class="news-item-desc">NBA联赛最新战报与球星动态</div>
                </div>
                <img class="news-item-image" src="https://via.placeholder.com/80x60/fd7e14/ffffff?text=NBA" alt="NBA">
            </div>
            <div class="news-item">
                <div class="news-item-content">
                    <div class="news-item-title">奥运会筹备进展</div>
                    <div class="news-item-desc">奥运会筹备工作最新进展报道</div>
                </div>
                <img class="news-item-image" src="https://via.placeholder.com/80x60/20c997/ffffff?text=Olympic" alt="奥运会">
            </div>
        </div>
    </div>

    <script>
        // 幻灯片功能
        let currentSlide = 0;
        const sliderWrapper = document.querySelector('.slider-wrapper');
        const slides = document.querySelectorAll('.slide');
        
        function nextSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            updateSlider();
        }

        function updateSlider() {
            sliderWrapper.style.transform = `translateX(-${currentSlide * 100}%)`;
        }

        setInterval(nextSlide, 3000);

        // 选项卡功能
        function showTab(index) {
            const tabs = document.querySelectorAll('.tab-content');
            const buttons = document.querySelectorAll('.tab-nav button');
            
            tabs.forEach(tab => tab.classList.remove('active'));
            buttons.forEach(button => button.classList.remove('active'));
            
            tabs[index].classList.add('active');
            buttons[index].classList.add('active');
        }
    </script>
</body>
</html>




上一篇:面击告白后才会显现出内乱容的代码

云码酷 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与云码酷享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和云码酷的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、云码酷管理员和版主有权不事先通知发贴者而删除本文

回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    1

    主题

    160

    帖子

    161

    积分

    注册会员

    Rank: 2

    积分
    161
    发表于 2024-10-27 13:32:07 来自手机 | 显示全部楼层
    沙发
    支持支持再支持
    回复 支持 反对

    使用道具 举报

    1

    主题

    180

    帖子

    181

    积分

    注册会员

    Rank: 2

    积分
    181
    发表于 2024-10-27 13:33:11 来自手机 | 显示全部楼层
    板凳
    前排顶,很好!
    回复 支持 反对

    使用道具 举报

    1

    主题

    184

    帖子

    185

    积分

    注册会员

    Rank: 2

    积分
    185
    发表于 2024-10-27 13:35:26 | 显示全部楼层
    地板
    元芳你怎么看?
    回复 支持 反对

    使用道具 举报

    0

    主题

    185

    帖子

    185

    积分

    注册会员

    Rank: 2

    积分
    185
    发表于 2024-10-27 13:37:39 | 显示全部楼层
    5#
    介是神马?!!
    回复 支持 反对

    使用道具 举报

    0

    主题

    157

    帖子

    157

    积分

    注册会员

    Rank: 2

    积分
    157
    发表于 2024-10-27 13:40:10 来自手机 | 显示全部楼层
    6#
    传说中的沙发???哇卡卡
    回复 支持 反对

    使用道具 举报

    0

    主题

    164

    帖子

    164

    积分

    注册会员

    Rank: 2

    积分
    164
    发表于 2024-10-27 13:42:29 来自手机 | 显示全部楼层
    7#
    看起来好像不错的样子
    回复 支持 反对

    使用道具 举报

    1

    主题

    177

    帖子

    178

    积分

    注册会员

    Rank: 2

    积分
    178
    发表于 2024-10-27 13:44:09 来自手机 | 显示全部楼层
    8#
    顶起顶起顶起
    回复 支持 反对

    使用道具 举报

    1

    主题

    184

    帖子

    185

    积分

    注册会员

    Rank: 2

    积分
    185
    发表于 2024-10-27 13:45:52 | 显示全部楼层
    9#
    好帖必须得顶起
    回复 支持 反对

    使用道具 举报

    1

    主题

    196

    帖子

    197

    积分

    注册会员

    Rank: 2

    积分
    197
    发表于 2024-10-27 13:47:22 来自手机 | 显示全部楼层
    10#
    为毛老子总也抢不到沙发?!!
    回复 支持 反对

    使用道具 举报

    12下一页
    • 售后服务
    • 关注我们
    • 社区新手

    申请友链|Archiver|手机版|小黑屋|云码酷 ( 京ICP备13037810号 )

    Powered by Discuz! X3.2  © 2001-2022 云码酷