写一个html代码,内容为导航栏 导航栏中间有四个盒子居中,每个盒子图片大小为70px,文字大小为50px,且图片在文字正上方。导航栏左右在各放置一张图片大小为80px
时间: 2024-05-03 12:20:53 浏览: 203
导航栏.html
以下是符合要求的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
nav {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
background-color: #333;
}
img {
display: block;
width: 80px;
height: 80px;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 150px;
height: 100%;
}
.box img {
margin-bottom: 10px;
width: 70px;
height: 70px;
}
.box span {
font-size: 50px;
color: #fff;
}
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
</style>
</head>
<body>
<nav>
<div class="left">
<img src="left-image.jpg" alt="left image">
</div>
<div class="box">
<img src="image-1.jpg" alt="image 1">
<span>Link 1</span>
</div>
<div class="box">
<img src="image-2.jpg" alt="image 2">
<span>Link 2</span>
</div>
<div class="box">
<img src="image-3.jpg" alt="image 3">
<span>Link 3</span>
</div>
<div class="box">
<img src="
阅读全文