html css写一个好看的列表,并插入几组数据的代码
时间: 2023-02-17 18:22:37 浏览: 139
生成数据集列表的代码
下面是一个使用 HTML 和 CSS 编写的美观列表的示例代码,其中包含了几组数据:
```html
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
```
这段代码中,我们使用了 HTML 的 `ul` 标签创建了一个列表,并使用 `li` 标签为每个列表项添加了一些文本。然后使用 CSS 设置了背景颜色,文字颜色等样式。
可以在li标签里面插入自己的数据。
阅读全文