帮我写一个旅游网站使用div-css
时间: 2024-10-24 08:18:21 浏览: 9
创建一个旅游网站的基本布局通常会涉及到HTML的`<div>`元素和CSS样式。这里是一个简单的例子,展示如何使用`div`和CSS来设计一个旅游网站的页面结构:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>旅游网站</title>
<style>
/* CSS样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f5f5f5;
padding: 1rem;
text-align: center;
}
nav {
display: flex;
justify-content: space-between;
background-color: #333;
color: white;
padding: 0.5rem;
}
.logo {
max-width: 150px;
}
main {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding: 2rem;
}
article {
width: calc(33.33% - 2rem); /* 三列布局 */
box-sizing: border-box;
}
footer {
background-color: #f5f5f5;
text-align: center;
padding: 1rem;
}
</style>
</head>
<body>
<!-- 使用div -->
<header>
<img src="logo.png" alt="Logo" class="logo">
<h1>欢迎来到旅行天堂</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">目的地</a>
<a href="#">行程规划</a>
</nav>
<main>
<!-- 你可以添加多个article元素来显示景点、酒店等内容 -->
<article>
<h2>巴黎埃菲尔铁塔</h2>
<p>描述和图片...</p>
</article>
<!-- 添加更多文章... -->
</main>
<footer>
© 2023 旅行网
</footer>
</body>
</html>
```
在这个示例中,`div`用于划分页面的不同部分,如`header`、`nav`、`main`和`footer`。CSS则负责设置各个部分的样式,比如背景颜色、字体、间距等。
阅读全文