我试图让我的实践网站看起来整洁有序，但我遇到了一些问题。第一个是我的游戏王图片很小，与上面的魔法聚集图片的比例和尺寸不符。我试图改变它的高度和宽度，但它没有移动一英寸或根本改变任何东西。其次，我的游戏王卡横幅无法再移动到网站的左侧。它只是卡在一个地方。
这是我的 CSS。
body{
background-color: gray;
}
.cards{
position: relative;
left: 430px;
top: 50px;
}
.movDetails{
position: relative;
top: 25px;
}
.movImage{
position: relative;
top: 50px;
}
.movIndexImages{
position: relative;
bottom: 50px;
z-index: -1;
}
.hyperlink a{
text-decoration: none;
}
.movNav{
position: relative;
bottom: 90px;
}
footer{
background-color: rgb(217, 205, 205);
color: white;
}
.movTcg{
position: relative;
top: 40px;
height: 110px;
}
.movDescription{
position: relative;
top: 50px;
}
.movSearchBar{
position: relative;
left: 350px;
}
.movText{
position: relative;
right: 0px;
left: 20px;
}
.movBrowserBar{
position: relative;
left: 300px;
}
.movHololive{
position: relative;
height: 300px;
left: 200px;
top: 80px;
}
.movMGT{
position: relative;
height: 190px;
/* Not Working */
right: 99900px;
}
.movFooter{
position: relative;
top: 100%;
/* display:flex; */
align-items:center;
justify-content: space-between;
}
.movPokemon{
position: relative;
height: 200px;
top: 90px;
left: 680px;
}
.movYugioh{
position: relative;
bottom: 990px;
}
.movMagGlass{
position: relative;
right: 30px;
bottom: 0px;
}
.refFlex{
/* display: flex; */
justify-content: flex-end;
gap: 30px;
/* Why is this refusing to be moved? */
bottom: 50px;
}
/* Ul is whole box container containing ul. */
ul{
list-style-type: none;
display: flex;
justify-content: flex-end;
gap: 20px;
}
/* Targets all li. Makes it seem like it forms a blue box, but
really all it is doing is making sure every li is
colored the set color. */
ul li{
position: relative;
bottom: 40px;
right: 40px;
}
ul li a{
}
.items{
display: flex;
gap: 100px;
flex-wrap: wrap;
position: relative;
left: 80px;
}
section .movItems{
}
section a img{
height: 400px;
width: 300px;
}
.item1 img{
height: 300px;
width: 200px;
}
这是我的html：
<%- include('./partials/header.ejs')%>
<main>
<div class = "movDescription">
<h1 style = "color: red"> TCGCards.com </h1>
<p> <b> Power to the People! </b> </p>
<p>
<b>A marketplace for trading card collectors, and players. Here, we have a great and varied selection of
trading card goods from all over the world! You will never find any better deals then this!
</b>
</p>
<div class = "movSearchBar">
<div class = "fixhyperlink li a">
<!-- /cards means that you want to see something specific. -->
<!--/cards/ means you want to see whole section. -->
<div class = "movText">
<a href = "/cards"> Browse Our Collection </a>
</div>
</div>
</div>
</div>
<div class = "movIndexImages">
<img src = "/images/pokemon.jpg" alt = "pokemon" class = "movPokemon">
<img src = "/images/yugioh.jpeg" alt = "yugioh" class = "movYugioh" >
<img src = "/images/magic-the-gathering-2-558x331(resized).jpg" alt = "MGT" class = "movMGT">
</div>
</main>
<%- include('./partials/footer.ejs')%>
我也很困惑为什么我的页脚不合适。
我尝试摆脱任何可能的限制，例如图片横幅区域的 display: flex ，以修复早期的图像问题，因为我在网上读到这可能会导致问题，但那没有任何作用。
一般情况：您必须使用 flexbox 或 grid 进行布局。不要使用绝对值 - 顶部、底部、左侧、右侧（这可用于弹出窗口或其他）。 您可以阅读本文或在 YouTube 上观看一些指南：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
