web前端写一个简单酒店网页设计
时间: 2024-06-09 09:04:26 浏览: 16
好的,以下是一个简单的酒店网页设计,包含了酒店介绍、房间预订、联系方式等模块。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>酒店预订</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>酒店名称</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">客房预订</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</div>
</header>
<section id="banner">
<div class="container">
<h2>豪华客房预订</h2>
<p>欢迎来到我们的酒店,预订我们的豪华客房,体验无与伦比的入住感受。</p>
<a href="#" class="button">立即预订</a>
</div>
</section>
<section id="about">
<div class="container">
<h2>关于我们</h2>
<p>我们的酒店位于美丽的城市中心,提供豪华舒适的客房和周到的服务。我们拥有多年的酒店管理经验和一支专业的团队,为您提供最好的入住体验。</p>
</div>
</section>
<section id="rooms">
<div class="container">
<h2>客房预订</h2>
<p>我们提供多种类型的客房,满足您不同的需求。请选择您需要的客房类型并预订。</p>
<div class="room-type">
<img src="room1.jpg">
<h3>豪华客房</h3>
<p>房间面积:40平方米</p>
<p>床型:1.8米大床</p>
<p>价格:1000元/晚</p>
<a href="#" class="button">立即预订</a>
</div>
<div class="room-type">
<img src="room2.jpg">
<h3>豪华套房</h3>
<p>房间面积:80平方米</p>
<p>床型:1.8米大床+1.5米双人床</p>
<p>价格:2000元/晚</p>
<a href="#" class="button">立即预订</a>
</div>
<div class="room-type">
<img src="room3.jpg">
<h3>行政套房</h3>
<p>房间面积:120平方米</p>
<p>床型:1.8米大床+1.5米双人床</p>
<p>价格:3000元/晚</p>
<a href="#" class="button">立即预订</a>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<h2>联系我们</h2>
<p>如果您有任何疑问或意见,请随时联系我们。</p>
<form>
<label>姓名:</label>
<input type="text" name="name" required>
<label>电子邮件:</label>
<input type="email" name="email" required>
<label>消息:</label>
<textarea name="message" required></textarea>
<input type="submit" value="发送">
</form>
</div>
</section>
<footer>
<div class="container">
<p>版权所有 © 2021 酒店名称</p>
</div>
</footer>
</body>
</html>
```
CSS代码:
```
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 20px 0;
}
header h1 {
float: left;
}
nav {
float: right;
margin-top: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
margin-left: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
/* 横幅样式 */
#banner {
background-image: url(banner.jpg);
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
padding: 100px 0;
}
#banner h2 {
font-size: 48px;
margin-bottom: 20px;
}
#banner p {
font-size: 24px;
margin-bottom: 40px;
}
.button {
display: inline-block;
background-color: #fff;
color: #333;
padding: 10px 20px;
border-radius: 30px;
text-decoration: none;
}
.button:hover {
background-color: #333;
color: #fff;
}
/* 关于我们样式 */
#about {
background-color: #f7f7f7;
padding: 100px 0;
}
#about h2 {
font-size: 36px;
margin-bottom: 40px;
}
#about p {
font-size: 18px;
line-height: 1.8;
}
/* 客房预订样式 */
#rooms {
padding: 100px 0;
}
#rooms h2 {
font-size: 36px;
margin-bottom: 40px;
}
.room-type {
float: left;
width: 33.33%;
padding: 0 20px;
box-sizing: border-box;
}
.room-type img {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.room-type h3 {
font-size: 24px;
margin-bottom: 10px;
}
.room-type p {
font-size: 18px;
line-height: 1.8;
margin-bottom: 20px;
}
/* 联系我们样式 */
#contact {
background-color: #f7f7f7;
padding: 100px 0;
}
#contact h2 {
font-size: 36px;
margin-bottom: 40px;
}
form label {
display: block;
font-size: 18px;
margin-bottom: 10px;
}
form input,
form textarea {
display: block;
width: 100%;
padding: 10px;
font-size: 18px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
form input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
border-radius: 30px;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
form input[type="submit"]:hover {
background-color: #fff;
color: #333;
}
/* 页脚样式 */
footer {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
footer p {
font-size: 18px;
}
```
这个简单的酒店网页设计包含了以下几个模块:
1. 头部:包含酒店名称和导航栏。
2. 横幅:展示酒店的主题和欢迎词,以及立即预订按钮。
3. 关于我们:介绍酒店的基本信息。
4. 客房预订:展示酒店的客房类型、价格和预订按钮。
5. 联系我们:提供联系方式和反馈表单。
6. 页脚:版权信息。
以上代码只是一个简单的酒店网页设计,可以根据实际需求进行修改和完善。