旅游景点特色美食推荐 CSS 布局实战
随着互联网的普及和旅游业的蓬勃发展，越来越多的游客开始关注旅游景点的特色美食。为了更好地展示这些美食，我们需要一个既美观又实用的CSS布局。本文将围绕“旅游景点特色美食推荐”这一主题，通过实战案例，展示如何使用CSS进行布局设计。
一、项目背景
本项目旨在设计一个简洁、美观的旅游景点特色美食推荐页面。页面需要展示多个景点的特色美食图片、名称、简介和推荐理由，同时提供搜索和筛选功能，方便用户快速找到心仪的美食。
二、技术选型
为了实现上述功能，我们将使用以下技术：
- HTML：构建页面结构
- CSS：进行页面样式设计
- JavaScript：实现搜索和筛选功能
三、页面布局设计
1. 页面结构
我们需要确定页面的基本结构。以下是一个简单的HTML结构示例：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>旅游景点特色美食推荐</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>旅游景点特色美食推荐</h1>
<input type="text" id="searchInput" placeholder="搜索美食...">
<button id="searchBtn">搜索</button>
</header>
<main>
<section class="filter">
<label for="location">地区：</label>
<select id="location">
<option value="all">全部地区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<!-- 其他地区 -->
</select>
</section>
<section class="food-list">
<!-- 美食列表 -->
</section>
</main>
<footer>
<p>版权所有 © 2023 旅游景点特色美食推荐</p>
</footer>
<script src="script.js"></script>
</body>
</html>
2. CSS样式设计
接下来，我们将使用CSS来美化页面。以下是一个简单的CSS样式示例：
css
/ styles.css /
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: f4f4f4;
}
header {
background-color: 333;
color: fff;
padding: 10px 20px;
text-align: center;
}
header h1 {
margin: 0;
}
searchInput {
padding: 5px;
margin-right: 10px;
}
searchBtn {
padding: 5px 10px;
background-color: 0084ff;
color: fff;
border: none;
cursor: pointer;
}
main {
padding: 20px;
}
.filter {
margin-bottom: 20px;
}
.filter label,
.filter select {
margin-right: 10px;
}
.food-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.food-item {
background-color: fff;
border: 1px solid ddd;
margin: 10px;
padding: 10px;
width: 30%;
}
.food-item img {
width: 100%;
height: auto;
}
footer {
background-color: 333;
color: fff;
text-align: center;
padding: 10px 20px;
position: absolute;
bottom: 0;
width: 100%;
}
3. JavaScript功能实现
我们需要使用JavaScript来实现搜索和筛选功能。以下是一个简单的JavaScript示例：
javascript
// script.js
document.getElementById('searchBtn').addEventListener('click', function() {
var searchInput = document.getElementById('searchInput').value.toLowerCase();
var foodItems = document.querySelectorAll('.food-item');
foodItems.forEach(function(item) {
var foodName = item.querySelector('.food-name').textContent.toLowerCase();
if (foodName.includes(searchInput)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
document.getElementById('location').addEventListener('change', function() {
var location = this.value;
var foodItems = document.querySelectorAll('.food-item');
foodItems.forEach(function(item) {
var foodLocation = item.getAttribute('data-location');
if (location === 'all' || location === foodLocation) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
四、总结
通过以上实战案例，我们展示了如何使用HTML、CSS和JavaScript技术实现一个旅游景点特色美食推荐页面的布局设计。在实际开发过程中，可以根据需求对页面进行优化和扩展，例如添加更多交互效果、响应式设计等。希望本文能对您的CSS布局实战有所帮助。
Comments NOTHING