用js写一个楼盘介绍网页
时间: 2024-05-30 14:12:19 浏览: 8
好的,以下是一个简单的楼盘介绍网页的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>楼盘介绍</title>
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
.property {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
width: 300px;
}
.property h2 {
margin-top: 0;
}
.property img {
max-width: 100%;
}
.property p {
margin: 0;
padding: 10px 0;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>楼盘介绍</h1>
</header>
<main>
<div class="property">
<img src="https://via.placeholder.com/300x200.png?text=Property+1" alt="Property 1">
<h2>Property 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lobortis magna, nec vehicula ipsum aliquam non. In maximus, est vel porttitor bibendum, metus magna consequat sapien, vitae malesuada turpis ipsum vel magna.</p>
<button>了解更多信息</button>
</div>
<div class="property">
<img src="https://via.placeholder.com/300x200.png?text=Property+2" alt="Property 2">
<h2>Property 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lobortis magna, nec vehicula ipsum aliquam non. In maximus, est vel porttitor bibendum, metus magna consequat sapien, vitae malesuada turpis ipsum vel magna.</p>
<button>了解更多信息</button>
</div>
<div class="property">
<img src="https://via.placeholder.com/300x200.png?text=Property+3" alt="Property 3">
<h2>Property 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lobortis magna, nec vehicula ipsum aliquam non. In maximus, est vel porttitor bibendum, metus magna consequat sapien, vitae malesuada turpis ipsum vel magna.</p>
<button>了解更多信息</button>
</div>
</main>
<footer>
<p>版权所有 © 2021 楼盘介绍</p>
</footer>
</body>
</html>
```
这个网页使用了 HTML、CSS 和 JavaScript。在 HTML 中,我们定义了网页的基本结构,使用了一些常见的标签,如 `<header>`、`<main>`、`<footer>`、`<div>`、`<img>`、`<h2>`、`<p>`、`<button>` 等等。
在 CSS 中,我们定义了样式表,来控制网页中元素的外观和布局。我们使用了一些常见的属性,如 `font-family`、`margin`、`padding`、`background-color`、`color`、`text-align`、`border`、`width`、`max-width` 等等。
在 JavaScript 中,我们可以添加交互功能,如当用户点击“了解更多信息”按钮时,弹出一个对话框显示更多信息。下面是实现这个功能的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>楼盘介绍</title>
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
.property {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
width: 300px;
}
.property h2 {
margin-top: 0;
}
.property img {
max-width: 100%;
}
.property p {
margin: 0;
padding: 10px 0;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>楼盘介绍</h1>
</header>
<main>
<div class="property">
<img src="https://via.placeholder.com/300x200.png?text=Property+1" alt="Property 1">
<h2>Property 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lobortis magna, nec vehicula ipsum aliquam non. In maximus, est vel porttitor bibendum, metus magna consequat sapien, vitae malesuada turpis ipsum vel magna.</p>
<button class="more-info">了解更多信息</button>
</div>
<div class="property">
<img src="https://via.placeholder.com/300x200.png?text=Property+2" alt="Property 2">
<h2>Property 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lobortis magna, nec vehicula ipsum aliquam non. In maximus, est vel porttitor bibendum, metus magna consequat sapien, vitae malesuada turpis ipsum vel magna.</p>
<button class="more-info">了解更多信息</button>
</div>
<div class="property">
<img src="https://via.placeholder.com/300x200.png?text=Property+3" alt="Property 3">
<h2>Property 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lobortis magna, nec vehicula ipsum aliquam non. In maximus, est vel porttitor bibendum, metus magna consequat sapien, vitae malesuada turpis ipsum vel magna.</p>
<button class="more-info">了解更多信息</button>
</div>
</main>
<footer>
<p>版权所有 © 2021 楼盘介绍</p>
</footer>
<script>
// JavaScript 代码
const buttons = document.querySelectorAll('.more-info');
buttons.forEach(button => button.addEventListener('click', () => {
alert('更多信息');
}));
</script>
</body>
</html>
```
这个网页使用了 JavaScript 代码来添加交互功能。我们首先使用 `document.querySelectorAll('.more-info')` 来获取所有“了解更多信息”按钮的引用,并使用 `.forEach()` 方法为每个按钮添加一个点击事件监听器。当用户点击按钮时,会弹出一个对话框显示更多信息。