使用HTML+CSS实现页面布局 使用闭包的方式实现鼠标单击某个百度热搜列表显示对应索引
时间: 2023-11-28 19:51:27 浏览: 61
以下是一个使用 HTML+CSS 实现页面布局的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>页面布局示例</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.header {
background-color: #333;
color: #fff;
width: 100%;
padding: 10px;
text-align: center;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 80%;
padding: 20px;
}
.card {
background-color: #f7f7f7;
box-shadow: 0px 0px 5px #ccc;
margin-bottom: 20px;
width: 30%;
padding: 10px;
text-align: center;
}
.footer {
background-color: #333;
color: #fff;
width: 100%;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>页面布局示例</h1>
</div>
<div class="content">
<div class="card">
<h2>卡片1</h2>
<p>这是一个卡片示例。</p>
</div>
<div class="card">
<h2>卡片2</h2>
<p>这是一个卡片示例。</p>
</div>
<div class="card">
<h2>卡片3</h2>
<p>这是一个卡片示例。</p>
</div>
<div class="card">
<h2>卡片4</h2>
<p>这是一个卡片示例。</p>
</div>
<div class="card">
<h2>卡片5</h2>
<p>这是一个卡片示例。</p>
</div>
<div class="card">
<h2>卡片6</h2>
<p>这是一个卡片示例。</p>
</div>
</div>
<div class="footer">
<p>版权所有 © 2021</p>
</div>
</div>
</body>
</html>
```
以上代码实现了一个简单的页面布局,包括页头、内容区域和页脚。内容区域使用了 Flexbox 布局,并且每个卡片都有相同的样式。
以下是一个使用闭包实现鼠标单击某个百度热搜列表显示对应索引的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>闭包示例</title>
<style>
.item {
padding: 10px;
cursor: pointer;
background-color: #f7f7f7;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="list">
<div class="item">热搜1</div>
<div class="item">热搜2</div>
<div class="item">热搜3</div>
<div class="item">热搜4</div>
<div class="item">热搜5</div>
</div>
<p id="result"></p>
<script>
var items = document.querySelectorAll('.item');
for (var i = 0; i < items.length; i++) {
(function (index) {
items[index].addEventListener('click', function () {
document.getElementById('result').innerHTML = '你点击了第 ' + (index + 1) + ' 个热搜。';
});
})(i);
}
</script>
</body>
</html>
```
以上代码实现了一个简单的热搜列表,当鼠标单击某个列表项时,会在页面上显示该项的索引。为了避免闭包中的变量共享问题,我们使用立即执行函数创建了一个新的作用域,使得每个闭包都拥有自己的 index 变量。这样就可以正确地显示每个列表项的索引了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)