master

分支 (1)

管理

管理

master

homework-web01
/
02_QQ官网.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ-轻松做自己</title>
    <style>
        .header {
            /* 高度 */
            height: 200px;
        }

        body {
            /* 设置背景色 */
            background-color: #227bc9;
        }

        .banben {
            text-align: center;
            color: white;
            margin-top: 1px;
            font-size: 70px;
        }

        button {
            text-align: center;

        }

    </style>
</head>
<body>
<div class="header">
    <img src="images/qq_logo.png" alt="">
</div>
<div class="banben">

    <strong>全新版本</strong>


    <div class="butt">
        <div id="versionText" class="text_center" style="font-size: 90px;">QQ9</div>

        <button onclick="keystroke('IOS')">IOS</button>
        <button onclick="keystroke('Android')">Android</button>
        <button onclick="keystroke('Windows')">Windows</button>
        <button onclick="keystroke('macOS')">macOS</button>
    </div>
    <script>
        function keystroke(text) {
            const element = document.getElementById('versionText');
            element.innerText = `欢迎下载${text}版本`
        }
    </script>
</div>
</body>
</html>