html制作新闻简单板块
时间: 2023-09-02 14:07:02 浏览: 287
以下是一个简单的 HTML 新闻板块示例:
```html
<div class="news">
<h2>最新新闻</h2>
<ul>
<li>
<a href="#">新闻标题1</a>
<span class="date">2021年3月1日</span>
</li>
<li>
<a href="#">新闻标题2</a>
<span class="date">2021年2月28日</span>
</li>
<li>
<a href="#">新闻标题3</a>
<span class="date">2021年2月27日</span>
</li>
</ul>
</div>
```
以上代码定义了一个包含新闻标题和日期的 `<ul>` 列表,使用 `<a>` 标签作为新闻标题的链接。您可以使用 CSS 样式表来美化这个新闻板块,例如:
```css
.news {
border: 1px solid #ccc;
padding: 10px;
}
.news h2 {
font-size: 24px;
margin-bottom: 10px;
}
.news ul {
list-style: none;
margin: 0;
padding: 0;
}
.news li {
margin-bottom: 10px;
}
.news a {
color: #000;
text-decoration: none;
font-weight: bold;
}
.news a:hover {
text-decoration: underline;
}
.news .date {
color: #999;
font-size: 14px;
margin-left: 10px;
}
```
这将使新闻板块具有更好的外观和用户体验。您可以根据需要进行修改和调整。