tailwind布局实现考试做题类网站ui代码
代码语言：html
所属分类：布局界面
代码描述：tailwind布局实现考试做题类网站ui代码，自带答题卡与倒计时及进度。
代码标签： tailwind 布局 考试 做题 网站 ui 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正在答题 - 英皇乐理5级全真模拟考试</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
<style>
/* 隐藏所有题目，默认显示第一个 */
.question-slide { display: none; }
.question-slide.active { display: block; }
/* 答题卡样式 */
.question-nav-item.current { background-color: #7c3aed; color: white; border-color: #7c3aed; }
.question-nav-item.answered { background-color: #ede9fe; color: #5b21b6; }
.question-nav-item.marked { box-shadow: 0 0 0 2px #f97316; }
/* 弹窗动画 */
.modal-enter { opacity: 0; transform: scale(0.95); }
.modal-enter-active { opacity: 1; transform: scale(1); transition: all 300ms ease-out; }
.modal-leave-active { opacity: 0; transform: scale(0.95); transition: all 200ms ease-in; }
</style>
</head>
<body class="bg-gray-100 font-sans">
<!-- 答题页顶部导航 -->
<header class="bg-white shadow-md sticky top-0 z-30">
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- 试卷标题 -->
<div class="flex-1 min-w-0">
<h1 class="text-lg font-bold text-gray-800 truncate">英皇乐理5级全真模拟考试</h1>
</div>
<!-- 答题信息 -->
<div class="flex items-center space-x-4 sm:space-x-6 text-sm">
<div class="flex items-center text-gray-600">
<i class="far fa-check-circle text-green-500 mr-2"></i>
<span>进度: <span id="progress-text" class="font-bold">1 / 58</span></span>
</div>
<div class="flex items-center text-red-500">
<i class="far fa-clock mr-2"></i>
<span class="font-bold">倒计时: <span id="timer">120:00</span></span>
</div>
<button id="submit-btn" class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm">
<i class="fas fa-flag-checkered mr-2"></i>交卷
</button>
</div>
</div>
</div>
</header>
<!-- 主答题区域 -->
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex flex-col lg:flex-row gap-8">
<!-- 左侧：题目详情 -->
<main id="quiz-container" class="flex-1 bg-white rounded-lg shadow-lg p-6 md:p-8">
<!-- 题目 1: 单选题 -->
<div class="question-slide" data-question-index="0">
<div class="mb-6 pb-4 border-b">
<h2 class="text-xl font-semibold text-gray-800">第 1 题 <span class="text-sm font-normal text-gray-500">(单选题)</span></h2>
</div>
<div class="prose max-w-none">
<p class="text-gray-700 text-base mb-4">请选择与这个音阶等音的音阶。</p>
<div class="my-6 p-4 border rounded-lg bg-gray-50 flex justify-center">
<img src="https://via.placeholder.com/600x100.png?text=Music+Scale" alt="乐谱片段" class="max-w-full h-auto rounded">
&l.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0