(1)实现电影票选座的网页结构。根据效果图得到,网页整体为无序列表ul,ul中嵌套多个li,也嵌套一个div,座位选中后背景颜色变为orange。
时间: 2024-12-24 18:31:39 浏览: 7
实现电影票选座的网页结构通常会采用如下的HTML布局:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>电影票选座</title>
<style>
.seat {
display: inline-block;
width: 50px; /* 座位宽度 */
height: 50px; /* 座位高度 */
border: 1px solid #ccc;
margin-right: 5px;
cursor: pointer;
}
.selected {
background-color: orange;
}
</style>
</head>
<body>
<h1>电影票选座</h1>
<ul id="seatsList">
<!-- 通过JavaScript动态生成座位 -->
<!-- 样式如下 -->
<li>
<div class="seat" onclick="selectSeat(this)">S1</div>
</li>
<li>
<div class="seat" onclick="selectSeat(this)">S2</div>
</li>
<!-- 更多座位... -->
</ul>
<script>
function selectSeat(seatElement) {
if (seatElement.classList.contains('selected')) {
seatElement.classList.remove('selected');
} else {
seatElement.classList.add('selected');
}
}
</script>
</body>
</html>
```
在这个示例中,页面上有一个无序列表`<ul>`(id为`seatsList`),其中每个座位作为一个`<li>`元素。每个座位由一个`<div>`元素表示,并带有`seat`类。当选中某个座位时,点击的那个`<div>`会被添加上`selected`类,改变其背景颜色为橙色。这个功能是由JavaScript的`onclick`事件处理函数`selectSeat()`来实现的。
阅读全文