OJ系统之题目列表界面

来源：互联网发布：古墓丽影崛起n卡优化编辑：程序博客网时间：2024/06/15 08:42

下面写的是登陆系统之后的界面了，这是项目核心之一的界面了，与之前适用于很多系统的登陆界面不同的是，接下来这些界面只适用于我们自己的系统，使系统独一无二的。

这个界面是用户登录后所能看到的系统中的题目列表信息的界面，标题栏有题目、讨论区等选项，主界面的列表中包含了题目的序号，名称，难度，是否提交是否通过等信息，是对题目及完成情况的一个信息展示。如下图当点击序号后会立即转到题目的阐述及答题编码界面。

<!DOCTYPE <html><head><meta charset="utf-8">    <link rel= "stylesheet" href = "css/oj.css">    <link rel= "stylesheet" href = "css/bootstrap.css">    <link rel= "stylesheet" href = "css/bootstrap.min.css">    <link rel= "stylesheet" href = "css/bootstrap.theme.css">    <link rel= "stylesheet" href = "css/bootstrap.theme.min.css"><title>题目</title></head><body><header class="navbar navbar-fixed-top navbar-inverse">    <div class="container">        <ul class="nav navbar-nav navbar-left">            <li><a href="/">首页</a></li>            <li><a href="/">题目</a></li>            <li><a href="/">讨论区</a></li>        </ul>        <nav>          <ul class="nav navbar-nav navbar-right">            <li><a href="/">登出</a></li>          </ul>        </nav>    </div></header><div class="container-fluid">    <div class="row">        <div class="col-md-8 col-md-offset-2 main">            <h2 class="sub-header">题目列表</h2>            <div class="table-responsive">                <table class="table table-striped">                    <thead>                    <tr>                        <th>序号</th>                        <th>题目名称</th>                        <th>难度</th>                        <th>是否提交</th>                        <th>是否通过</th>                    </tr>                    </thead>                    <tbody>                    <tr>                        <td><a href="/">1</a></td>                        <td>两数相加</td>                        <td>简单</td>                        <td>是</td>                        <td>否</td>                    </tr>                            <td><a href="/"></a></td>                            <td></td>                            <td></td>                            <td></td>                            <td></td>                    </tbody>                </table>            </div>            <ul class="pagination">                <li class="active"><a href="/">1</a></li>                <li><a href="/">2</a></li>                <li><a href="/">3</a></li>                <li><a href="/">4</a></li>                <li><a href="/">5</a></li>            </ul>        </div>    </div></div></body></html>

阅读全文

0 0