我的程序出现问题，在我单击其中一个列表项(在本例中为选项 1)并转到链接页面后，当我返回原始页面(通过 Google 的返回箭头)时，原始页面上的所有内容开始向左移动，页面的颜色开始被覆盖。每次我点击并返回时，情况都会变得更糟。如下图所示。
原始外观
多次点击/从链接页面返回后
我不知道为什么会这样。我注意到，当我将选项 1 设为链接而不是列表元素时，问题就消失了，但我希望能够将其设置为列表元素。
首页代码
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Montserrat:900|Work+Sans:300" rel="stylesheet">
<head>
<title></title>
<style>
body{
margin: 0;
padding: 0;
background: linear-gradient(315deg, #ffffff 0%, red 74%);
font-family: sans-serif;
overflow-x: hidden;
}
ul{
position: relative;
width: 450px;
margin: 100px auto 0;
padding: 10px;
box-sizing: border-box;
}
ul li{
display: flex;
background: rgba(255, 255, 255);
padding: 10px 20px;
border-radius: 5px;
border: 0.3rem solid red;
margin: 5px 0;
transition: .5s;
cursor: pointer;
color: red;
font-family: 'Work Sans', sans-serif;
font-weight: 500;
}
h1{
transform: translate(350px, 45px);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
color: white;
}
.top{
margin-left: 180px;
margin-bottom: -25px;
font-weight: 900;
font-size: 45px;
}
.c1{
transform: translate(140px, -5px);
font-size: 25px;
}
.c2{
transform: translate(135px, -10px);
font-size: 25px;
}
.one{
transform: translate(0px, -50px);
}
.two{
transform: translate(0px, -110px);
}
h2{
visibility: hidden;
}
ul li:hover{
transform: scale(1.06);
}
</style>
</head>
<body>
<h1 class="top">Options</h1>
<h2>Select a Category Below</h2>
<ul class="one">
<h1 class="c1">Category 1</h1>
<li><a href="sindex.html">Option 1</a></li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
<ul class="two">
<h1 class="c2">Category 2</h1>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
<section class="f">
<span>BLUE</span>
</section>
</body>
第二页代码
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: aqua;
}
.head{
text-align: center;
transform: translateY(150px);
font-size: 30px;
}
.but{
display: flex;
justify-content: center;
transform: translateY(160px);
}
.btn1{
border-radius: 5px;
width: 200px;
height: 45px;
font-size: 17px;
outline: none;
background-color: #fff;
border: 1px solid #5555;
cursor: pointer;
}
</style>
</head>
<body>
<div class="head">
<h1>Click Below</h1>
</div>
<div class="but">
<a href="designtest.html"><button class="btn1">Generate</button></a>
</div>
</body>
最佳答案
这里的主要问题是由 h1 元素引起的溢出。由于 overflow-x: hidden at body，此溢出最初是不可见的。
你需要用不同的方式定位你的 .top h1 元素，因为除了这个问题，使用特定的像素值来定位东西并不能保证你想要的结果各种屏幕尺寸。
关于html - 当我从另一个链接页面单击返回时，我的页面设计会更改颜色/大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64846865/