给我一个各种类型列表及CSS控制列表属性、超链接、锚点链接、超链接相关的CSS伪类的网页代码
时间: 2023-07-10 21:03:46 浏览: 108
以下是一个简单的例子,展示了各种类型列表及CSS控制列表属性、超链接、锚点链接、超链接相关的CSS伪类的网页代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>List and Link Example</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
}
a:link, a:visited {
color: blue;
text-decoration: none;
}
a:hover, a:active {
color: red;
text-decoration: underline;
}
.anchor-link {
margin-top: -50px;
padding-top: 50px;
display: block;
position: absolute;
}
</style>
</head>
<body>
<h1>List and Link Example</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<p><a href="#anchor">Jump to Anchor Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis, odio ac dapibus facilisis, elit leo hendrerit arcu, a suscipit diam diam sed dolor. Sed eget lectus eros. Donec vel ex tincidunt, suscipit enim vitae, bibendum urna. Cras in mauris euismod, congue nibh ac, consectetur lorem. Proin nec viverra augue. Aliquam lobortis, nibh in vehicula lacinia, enim diam imperdiet ipsum, ac rhoncus orci quam eget purus. Donec euismod ante nec enim malesuada, at feugiat dolor posuere. Pellentesque ac quam molestie, pharetra ante eu, hendrerit augue.</p>
<a name="anchor" class="anchor-link"></a>
<h2>Anchor Link Example</h2>
<p>Ut in risus sagittis, pretium quam vel, suscipit augue. Nullam quis venenatis nunc. Fusce accumsan tincidunt dapibus. Sed iaculis, velit eget gravida lobortis, dui turpis vestibulum purus, eget venenatis felis quam eget magna.</p>
</body>
</html>
```
这个例子包括一个无序列表、超链接、锚点链接以及相关的CSS样式。其中,`list-style-type`属性控制列表符号的样式,`margin`和`padding`属性控制列表项的内外边距,`a:link`和`a:visited`控制未访问和已访问链接的颜色和文本修饰,`a:hover`和`a:active`控制鼠标悬停和点击链接时的颜色和文本修饰,`class="anchor-link"`和`<a name="anchor">`用于创建锚点链接。
阅读全文