web前端写一个酒店网页设计,包括javaScript
时间: 2024-06-08 07:09:26 浏览: 16
好的,下面是一个简单的酒店网页设计,包括JavaScript实现的一些功能:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<title>酒店网页设计</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>酒店名称</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">客房预订</a></li>
<li><a href="#">餐饮服务</a></li>
<li><a href="#">会议室预订</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section id="banner">
<h2>欢迎来到酒店名称</h2>
<p>我们提供最优质的客房、餐饮和会议服务</p>
<button id="book-btn">预订客房</button>
</section>
<section id="rooms">
<h2>客房介绍</h2>
<div class="room">
<img src="room1.jpg">
<h3>豪华大床房</h3>
<p>价格:500元/晚</p>
<button class="book-btn">预订</button>
</div>
<div class="room">
<img src="room2.jpg">
<h3>豪华双床房</h3>
<p>价格:600元/晚</p>
<button class="book-btn">预订</button>
</div>
<div class="room">
<img src="room3.jpg">
<h3>总统套房</h3>
<p>价格:1000元/晚</p>
<button class="book-btn">预订</button>
</div>
</section>
<section id="dining">
<h2>餐饮服务</h2>
<div class="menu">
<h3>早餐</h3>
<ul>
<li>面包、鸡蛋、牛奶、果汁</li>
<li>粥、油条、豆浆</li>
<li>燕麦片、酸奶、水果</li>
</ul>
</div>
<div class="menu">
<h3>午餐</h3>
<ul>
<li>烤鸡、炒饭、炒面</li>
<li>清蒸鲈鱼、烤鳕鱼、烤三文鱼</li>
<li>凉拌海带、拔丝地瓜、冰淇淋</li>
</ul>
</div>
<div class="menu">
<h3>晚餐</h3>
<ul>
<li>麻辣香锅、红烧肉、宫保鸡丁</li>
<li>清蒸海鲜、烤羊肉串、烤牛排</li>
<li>凉拌海带、拔丝地瓜、冰淇淋</li>
</ul>
</div>
</section>
<section id="conference">
<h2>会议室预订</h2>
<form>
<label>会议名称:</label>
<input type="text" name="conference-name">
<label>预订日期:</label>
<input type="date" name="conference-date">
<label>预订时间:</label>
<input type="time" name="conference-time">
<label>参会人数:</label>
<input type="number" name="conference-num">
<button>提交预订</button>
</form>
</section>
</main>
<footer>
<p>版权所有 © 酒店名称</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS部分:
```css
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #1e90ff;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-left: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
#banner {
background-image: url(banner.jpg);
background-size: cover;
background-position: center;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
}
#banner h2 {
margin-bottom: 20px;
}
#book-btn {
background-color: #ff8c00;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 20px;
border-radius: 5px;
cursor: pointer;
}
#book-btn:hover {
background-color: #ffa500;
}
#rooms {
display: flex;
flex-wrap: wrap;
}
.room {
flex-basis: 300px;
margin: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
border-radius: 5px;
overflow: hidden;
}
.room img {
width: 100%;
height: 200px;
object-fit: cover;
}
.room h3 {
margin: 10px;
font-size: 20px;
}
.room p {
margin: 10px;
font-size: 16px;
}
.book-btn {
background-color: #ff8c00;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
.book-btn:hover {
background-color: #ffa500;
}
#dining {
display: flex;
flex-wrap: wrap;
}
.menu {
flex-basis: 300px;
margin: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
border-radius: 5px;
overflow: hidden;
}
.menu h3 {
background-color: #ff8c00;
color: #fff;
padding: 10px;
margin: 0;
}
.menu ul {
padding: 10px;
margin: 0;
list-style: none;
}
.menu li {
margin-bottom: 10px;
}
#conference {
margin-top: 50px;
}
#conference form {
display: flex;
flex-direction: column;
max-width: 400px;
margin: 0 auto;
}
#conference label {
margin-top: 10px;
}
#conference input {
padding: 5px;
margin: 0 0 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
#conference button {
background-color: #ff8c00;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
#conference button:hover {
background-color: #ffa500;
}
footer {
background-color: #1e90ff;
color: #fff;
padding: 20px;
text-align: center;
}
```
JavaScript部分:
```javascript
// 获取预订客房按钮和所有房间的预订按钮
var bookBtn = document.getElementById("book-btn");
var roomBtns = document.getElementsByClassName("book-btn");
// 点击预订客房按钮,弹出提示框
bookBtn.addEventListener("click", function() {
alert("客房预订功能正在开发中,敬请期待!");
});
// 点击每个房间的预订按钮,弹出提示框
for (var i = 0; i < roomBtns.length; i++) {
roomBtns[i].addEventListener("click", function() {
alert("客房预订功能正在开发中,敬请期待!");
});
}
```
以上是一个简单的酒店网页设计,包括JavaScript实现的客房预订功能。由于时间和篇幅限制,该网页并不完整,还有许多细节需要进一步完善。