帮我写一个邮箱收件箱展示网页,每个条目可以点进去。
时间: 2023-06-10 14:04:26 浏览: 54
好的,我可以为您提供以下代码片段,您可以基于此进行修改和完善:
HTML部分:
```html
<div class="inbox">
<div class="inbox-item">
<a href="#" class="inbox-subject"></a>
<div class="inbox-from"></div>
<div class="inbox-date"></div>
</div>
<!-- 可以多添加类似inbox-item的条目 -->
</div>
```
CSS部分:
```css
.inbox {
max-width: 800px;
margin: 20px auto;
}
.inbox-item {
background-color: #f0f0f0;
border-radius: 5px;
margin-bottom: 10px;
padding: 10px;
}
.inbox-subject {
font-weight: bold;
font-size: 18px;
color: #333;
display: block;
margin-bottom: 5px;
}
.inbox-from {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.inbox-date {
font-size: 14px;
color: #666;
}
```
JavaScript部分:
```js
// 假设您有一个API来获取邮箱收件箱中的条目
const inboxData = [
{
subject: "关于明天的会议",
from: "张三 <zhangsan@example.com>",
date: "2021-09-01",
content: "明天上午10点,我们公司将要举行一次重要的会议,请务必参加。"
},
{
subject: "招聘通知",
from: "人事部 <hr@example.com>",
date: "2021-08-28",
content: "我们公司现招聘人才,欢迎应聘。"
}
// 可以添加更多的条目
];
// 在页面加载完成后初始化邮箱列表
window.onload = function() {
const inboxEle = document.querySelector(".inbox");
inboxData.forEach(item => {
const inboxItem = document.createElement("div");
inboxItem.classList.add("inbox-item");
const inboxLink = document.createElement("a");
inboxLink.href = "#"; // 可以根据需要替换为具体的链接
inboxLink.classList.add("inbox-subject");
inboxLink.textContent = item.subject;
const inboxFrom = document.createElement("div");
inboxFrom.classList.add("inbox-from");
inboxFrom.textContent = item.from;
const inboxDate = document.createElement("div");
inboxDate.classList.add("inbox-date");
inboxDate.textContent = item.date;
inboxItem.appendChild(inboxLink);
inboxItem.appendChild(inboxFrom);
inboxItem.appendChild(inboxDate);
inboxEle.appendChild(inboxItem);
});
};
```
这样,当页面加载完成后,就会根据您提供的数据渲染出一个邮箱收件箱的列表,每个条目都可以点击。您可以根据需要修改样式和代码逻辑。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![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)