时间戳

首页 > 解决方案 > 当我从另一个链接页面单击返回时，我的页面设计改变了颜色/大小

html - 当我从另一个链接页面单击返回时，我的页面设计改变了颜色/大小

问题描述

我在我的程序中遇到问题，在我单击列表项之一（在本例中为选项 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>

标签： htmlcss

解决方案

h1这里的主要问题是元素引起的溢出。由于overflow-x: hiddenat ，此溢出最初不可见body。

您需要以.top h1不同的方式定位您的元素，因为除了这个问题之外，使用特定的像素值来定位事物并不能保证在各种屏幕尺寸下都能获得您想要的结果。

推荐阅读