基于web的网络购票页面的代码
时间: 2023-12-14 17:04:43 浏览: 23
这是一个基于HTML、CSS和JavaScript的简单的网络购票页面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购票页面</title>
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
#header {
background-color: #333;
color: #fff;
padding: 10px;
}
#main {
margin: 10px;
padding: 10px;
background-color: #fff;
box-shadow: 0 0 5px #ccc;
}
form {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], select {
display: block;
width: 100%;
padding: 5px;
margin-bottom: 10px;
}
input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #555;
}
</style>
</head>
<body>
<div id="header">
<h1>网络购票页面</h1>
</div>
<div id="main">
<h2>选择您要购买的电影票</h2>
<form>
<label for="movie">电影名称:</label>
<select id="movie" name="movie">
<option value="movie1">电影1</option>
<option value="movie2">电影2</option>
<option value="movie3">电影3</option>
</select>
<label for="date">放映日期:</label>
<input type="text" id="date" name="date" placeholder="例如:2021-01-01">
<label for="time">放映时间:</label>
<input type="text" id="time" name="time" placeholder="例如:14:00">
<input type="submit" value="购买">
</form>
</div>
</body>
</html>
```
这个页面包含一个顶部的标题,一个包含购票表单的主要区域。表单包含三个输入字段:电影名称、放映日期和放映时间,以及一个提交按钮。在这个简单的示例中,表单没有任何交互性,但是你可以使用JavaScript添加表单验证、实时计算价格等功能。