OJ界面之编码界面

最新推荐文章于 2024-05-29 15:38:04 发布

原创最新推荐文章于 2024-05-29 15:38:04 发布 · 681 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

当点进一题之后后呈现这样的界面，在网站上做过测试题的人应该会对它非常熟悉，先放一张图（页面内容过长，一张截图放不下），相当简单但是有相当实用熟悉。

然后就是实现代码：

<!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">
		<div class = "row">
			<div class ="col-md-12" >
				<h1 class= "text-left">题目描述</h1>
				<div class="well" style ="height:150px">		
				<p class = "text-left">这里是题目描述</p>
				</div>
			</div>
		</div>

		<div class = "row">
			<div class = "col-md-12">
				<h1 class= "text-left">题目输入</h1>
				<div class="well" style ="height:100px">
				<p class = "text-left">输入</p>		
				</div>
			</div>
		</div>

		<div class = "row">
			<div class = "col-md-12">
				<h1 class= "text-left">题目输出</h1>
				<div class="col-md-12 well" style ="height:100px">	
				<p class = "text-left">输出</p>	
				</div>
			</div>
		</div>
	    
		<div class = "row">
			<div class="col-md-12">
				<h1 class= "text-left">编码区</h1>
				<select class="form-control" style = "width:200px;">
				    <option value="0">java</option>
				    <option value="1">c++</option>                          
				</select>
			</div>
		</div>
		
		<hr>

		<div class = "row" >
			<div class="col-md-12">	
				<textarea style = "height:300px"></textarea>				
        	</div>
		</div>
		
		</br>

		<div class = "row" >
			<div class="col-md-12">
				<button type="button" class="btn btn-warning">提交</button>
			</div>
		</div>
	</div>
      

</body>
</html>