酒店预订网站H5 CSS代码

在酒店预订网站的H5页面中，CSS (层叠样式表) 代码主要用于控制网站的视觉呈现。它通常会包括以下几个方面的内容：

1. **选择器与属性**：CSS通过选择器（如ID选择器 `.hotel-reservation`、类选择器 `.booking-form`、标签选择器 `input[type="submit"]`）定位元素，并定义其外观和行为，如颜色(`color:`)、字体(`font-family:`)、大小(`font-size:`)、位置(`position:`)等。

2. **布局**：CSS Flexbox 或 Grid 可以帮助创建响应式的网格布局，适应不同屏幕尺寸。比如 `.container { display: flex; justify-content: space-between; }` 可以设置容器内的项目水平居中排列。

3. **动画和过渡**：`transition` 和 `animation` 属性可用于添加平滑的过渡效果，如鼠标悬停时按钮变色或下拉菜单展开。

4. **媒体查询**：`@media screen and (max-width: 768px)` 可以针对不同的设备尺寸编写不同的样式规则，实现移动优先的设计。

5. **响应式设计**：CSS媒体查询和百分比单位（如vw/vh）可以帮助调整元素的大小和位置，确保网站在不同设备上看起来都合适。

一个简单的示例可能是这样的：

/* 预订按钮 */
.booking-btn {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.booking-btn:hover {
  background-color: #0056b3;
}