网页设计与网站建设作业html+css+js，一个简易的答题考试网页

最新推荐文章于 2024-04-07 17:31:03 发布

白菜汤里的胡萝卜

最新推荐文章于 2024-04-07 17:31:03 发布

阅读量482

点赞数 6

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_43304758/article/details/135561602

版权

一个简易的答题考试网页

在这里插入图片描述

目录结构

在这里插入图片描述

部分代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试</title>
    <link rel="stylesheet" href="./asset/main.css">
</head>

<body>
    <div class="wrapper">
        <!-- 头部 -->
        <header class="header">
            <!-- 标题 -->
            <h1>网页设计与网站建设</h1>
        </header>
        <!-- 主体内容 -->
        <main class="main">
            <!-- 左边导航 -->
            <nav class="left-side">
                <ul>
                    <li class="current">
                        <a href="./index.html">首页</a>
                    </li>
                    <li>
                        <a href="./danxuan.html">单选题</a>
                    </li>
                    <li>
                        <a href="./duoxuan.html">多选题</a>
                    </li>
                    <li>
                        <a href="./tiankong.html">填空题</a>
                    </li>
                    <li>
                        <a href="./jianda.html">简答题</a>
                    </li>
                    <li>
                        <a href="./shiyan.html">试验题</a>
                    </li>
                </ul>
            </nav>
            <div class="right-cont">
                <!-- logo -->
                <img src="./asset/images/logo.webp" alt="logo">
                <div class="cont">
                    <!-- 中间介绍 -->
                    <div class="intro">
                        <h3>课程介绍</h3>
                        <p>《网页设计与网站建设》是计算机各相关专业比较重要的专业课程，是网络应用设计课程体系中的主干课程，是学生进入工作岗位之前需要掌握的必备技能之一.</p>
                    </div>
                    <!-- 右边个人信息 -->
                    <div class="info">
                        <h3>个人信息</h3>
                        <table border="1">
                            <tr>
                                <td>学员学号：24210524</td>
                                <td>学员姓名：张万瑞</td>
                            </tr>
                            <tr>
                                <td>学员性别：男</td>
                                <td>学员等级：01</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </main>
        <!-- 底部 -->
        <footer class="footer">
            <a href="https://hpc.baicaitang.cn/">@hpc小站</a>
        </footer>
    </div>
    <script src="./asset/jquery.min.js"></script>
    <script src="./asset/main.js"></script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多选题</title>
    <link rel="stylesheet" href="./asset/main.css">
</head>

<body>
    <div class="test-wrap">
        <div class="left">
            <!-- 题目内容 -->
        </div>
        <div class="right">
            <div class="all">
                <!-- 题目数量 -->
            </div>
            <button class="submit">提交</button>
        </div>
    </div>
    <script src="./asset/jquery.min.js"></script>
    <script src="./asset/main.js"></script>
    <script>
        // 初次渲染第一题
        getJson(1, 'duoxuan')
    </script>
</body>

</html>