使用无序列表制作畅销书排行榜页面 超链接无下划线,鼠标悬浮至超链接时显示下划线
时间: 2023-12-24 09:02:28 浏览: 31
可以使用以下 HTML 代码来实现:
```html
<ul>
<li><a href="#" style="text-decoration: none; border-bottom: 1px solid transparent;">《白夜行》</a></li>
<li><a href="#" style="text-decoration: none; border-bottom: 1px solid transparent;">《活着》</a></li>
<li><a href="#" style="text-decoration: none; border-bottom: 1px solid transparent;">《围城》</a></li>
<li><a href="#" style="text-decoration: none; border-bottom: 1px solid transparent;">《解忧杂货店》</a></li>
</ul>
```
其中,`<ul>` 表示无序列表,`<li>` 表示列表项,`<a>` 表示超链接。在超链接的样式中,`text-decoration: none;` 表示无下划线,`border-bottom: 1px solid transparent;` 表示底部边框为透明色,鼠标悬浮时会变成实色从而显示下划线。
相关问题
前段中使用无序列表将多个超链接并成一行
您可以使用 HTML 的无序列表标签 `<ul>` 和列表项标签 `<li>`,并在每个列表项中嵌套超链接标签 `<a>` 来将多个超链接并成一行。示例代码如下:
```html
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
```
这将生成一个无序列表,其中每个列表项都是一个超链接,它们将在同一行上显示。
使用HTML CSS3设计新闻列表并为它添加超链接
下面是一个简单的 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 样式,以便它们在列表中正确地显示。