我有一个页面，中间有一个菜单，菜单内部有图像正确对齐在一个ul中，但是我想在每个图像下添加文本，但当我尝试时，文本由于某种原因最终在中间一直到菜单的右边，为甚么？此外，感觉我应该删除所有的JavaScript代码，从头开始，并使用更简单的选项来实现我的图像在HTML文件代替。我已经连续坐了10个小时，设计我的网站和学习，所以我可能只是累了，但任何帮助是赞赏。
网页：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map Gallery</title>
<link rel="stylesheet" href="stylemaps.css">
</head>
<body onload="document.body.style.opacity='1'">
<header>
<h1>Map Gallery</h1>
</header>
<div class="menu">
<ul id="imageList"></ul>
</div>
<div class="mappages">
<a href="#" id="chapter1">Chapter 1</a>
<a href="#" id="chapter2">Chapter 2</a>
<a href="#" id="chapter3">Chapter 3</a>
<a href="#" id="chapter4">Chapter 4</a>
</div>
<script src="fadeAnim.js"></script>
<script src="mapscript.js"></script>
</body>
</html>CSS：
@charset "utf-8";
/* CSS Document */
body {
background-image: url("../images/background-maps.jpg");
background-repeat: no-repeat;
background-size: cover;
padding:0;
margin:0;
opacity: 0;
transition: opacity 1s;
/*animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;*/
}
/*@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}*/
.menu{
background-color: rgba(255,255,255,0.5);
justify-content: center;
display: flex;
align-items: center;
margin: 0 auto;
width:55%;
height: 100%;
}
.menu ul{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu li{
width: 20%;
min-width: 200px;
margin: 10px;
text-align: center;
}
.menu img{
width: 100%;
height: 100%;
object-fit: cover;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 600;
font-size: 75px;
text-align: center;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
margin: auto;
}约旦：
const chapter1 = [];
for (let i = 1; i <= 49; i++){
chapter1.push({src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}`});
}
const chapter2 = [{src: '../images/maps/76.jpg'}]; //not used yet
const chapter3 = [{src: '../images/maps/64.jpg'}]; //not used yet
const chapter4 = [{src: '../images/maps/98.jpg'}]; //not used yet
// Function to display images for the chosen chapter
function showImages(chapter) {
document.querySelector('#imageList').innerHTML = '';
// Loop through the images in the selected chapter
chapter.forEach(image => {
const li = document.createElement('li');
li.innerHTML = `<img src="${image.src}" alt="${image.alt}">`;
document.querySelector('#imageList').appendChild(li);
});
}
// Add click event to the Chapter 1 link
document.querySelector('#chapter1').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter1);
});
// Add click event to the Chapter 2 link
document.querySelector('#chapter2').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter2);
});
document.querySelector('#chapter3').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter3);
});
document.querySelector('#chapter4').addEventListener('click', function(e) {
e.preventDefault();
showImages(chapter4);
});
showImages(chapter1);
1条答案
按热度按时间w1jd8yoj1#
欢迎来到stckoverflow@ginger，我做了一些更正，并将示例文本放置在图像下面。