首页使用HTML CSS3设计新闻列表并为它添加超链接

使用HTML CSS3设计新闻列表并为它添加超链接

时间: 2023-06-24 13:07:00 浏览: 458

下面是一个简单的 HTML/CSS3 新闻列表示例，每个新闻都有一个超链接指向相关文章的页面： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>新闻列表</title> <style> /* 设置新闻列表样式 */ .news-list { list-style: none; padding: 0; } /* 设置新闻标题样式 */ .news-title { font-size: 20px; font-weight: bold; margin: 10px 0; } /* 设置新闻摘要样式 */ .news-summary { font-size: 16px; line-height: 1.5; margin: 0; } /* 设置新闻链接样式 */ .news-link { color: #007bff; text-decoration: none; } /* 设置鼠标悬停时链接样式 */ .news-link:hover { text-decoration: underline; } </style> </head> <body> <ul class="news-list"> <li> <a href="https://example.com/article-1" class="news-link"> <h2 class="news-title">新闻标题1</h2> <p class="news-summary">这是新闻1的摘要内容。</p> </a> </li> <li> <a href="https://example.com/article-2" class="news-link"> <h2 class="news-title">新闻标题2</h2> <p class="news-summary">这是新闻2的摘要内容。</p> </a> </li> <li> <a href="https://example.com/article-3" class="news-link"> <h2 class="news-title">新闻标题3</h2> <p class="news-summary">这是新闻3的摘要内容。</p> </a> </li> </ul> </body> </html> ``` 在这个示例中，我们使用了无序列表（`<ul>`）来创建新闻列表，并对其应用了一些基本的 CSS 样式。每个新闻都包含一个超链接（`<a>`）标签，其中 `href` 属性指向相关文章的页面，而 `class` 属性用于设置链接的样式。我们还为新闻标题和摘要设置了自己的 CSS 样式，以便它们在列表中正确地显示。

阅读全文