制作一个网页,要求:实现链接的纵向和横向显示,4纵4横且鼠标浮动到链接后,当前链接的背景颜色由紫色变成红色,内容不限。
时间: 2024-02-17 20:01:50 浏览: 31
好的,我可以为您提供一个简单的网页代码,满足您的要求。您可以将以下代码复制到一个 HTML 文件中,并在浏览器中打开该文件来查看结果。
```
<!DOCTYPE html>
<html>
<head>
<title>链接示例</title>
<style>
a {
display: inline-block;
width: 100px;
height: 30px;
background-color: purple;
color: white;
text-align: center;
line-height: 30px;
margin: 10px;
text-decoration: none;
}
a:hover {
background-color: red;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
<a href="#">链接5</a>
<a href="#">链接6</a>
<a href="#">链接7</a>
<a href="#">链接8</a>
</div>
</body>
</html>
```
上面的代码定义了一个带有链接的容器 div,其中链接使用 inline-block 属性使它们可以在同一行上显示。链接具有固定的宽度和高度,并使用 CSS 中的伪类:hover在鼠标悬停时更改背景颜色。容器使用 flexbox 布局使链接在水平和垂直方向上居中,并通过 flex-wrap: wrap 属性使它们可以在多行上显示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)