Question

我有一个问题，当我放大和缩小页面的布局搞砸了。我在网上搜索其他帖子但没有真正帮助。也许是因为我安排我的CSS的方式。希望有人可以向我解释如何解决这个问题，谢谢。这就是它之前和之后的样子。

BEFORE

Before

AFTER

After

HTML

<body>   
<div id="container">
    <div style="position:static">
        <ul class="items">
            <li>ABOUT KDU</li>
            <li style="margin-left:30%;">ADMISSION</li>        
            <img src="kdulogo.png" class="MainImage" 
             style="position:static;"> 
            <li style="margin-left:60%;">CAMPUS LIFE</li>
            <li style="margin-left:75%;">INTERNATIONAL STUDENT</li>
        </ul>
    </div>


<div id="blocks">
    <ul id=" Images">
        <li><img src="SCCM.jpg" class="imageSize"></li>
        <li><img src="SCCA.jpg" class="imageSize"></li>
        <li><img src="SOB.jpg" class="imageSize"></li>  
        <li><img src="SHTCA.jpg" class="imageSize" style="margin-
        left:210px;"></li>     
        <li><img src="SOE.jpg" class="imageSize"></li>     
   </ul>         
</div>
</div>
</body>

CSS

*{
    margin: 0;
    padding: 0;
    user-select: none;
    font-family: "Futura PT Multilingual W02",Futura,Helvetica,Arial,sans-
    serif;
    font-weight: bold;
    overflow-x: hidden;
}

body{
    background: #f5f5f0;  
}


.MainImage{
    position: relative;
    width: 10%;
    margin: auto;
    display: block;
    transition: all .6s linear;
}

.items>li{
    color: black;
    cursor: pointer;
    margin-left: 150px;
    position: absolute;
    top: 100px;
    display: inline;
    text-decoration: none;
    transition: all .2s linear;
}

.items>li:hover{
    text-decoration: underline;
    text-decoration-color: black;
    transition: all .2s linear;
    transform: scale(1.5,1.5);
}

#blocks{
    background-color:  #262626;
    width: 100%;
    height: 517;
    position: static;
    margin-top: 50px;
}

#blocks >ul>li{
    display:block;
    float:left; 
    border: 20px;
    margin-top: 30px;
    margin-left: 80px;
}


#Images{
    position: absolute;
    display: inline;
}

#Image>li{
    position: absolute;
    display: block;
}

.imageSize{
    cursor: pointer;
    width: 340px;
    height: 200px;
    transition: all .4s linear;
}

.imageSize:hover{
    opacity: 0.5;
    transition: all .4s linear;
}


#container{ 
    width: 100%;
    margin: 0 auto;

Answer 1

我建议您使用w3schools来满足您的所有网络开发需求。

内容的样式打破了一切。

修复了一些CSS问题，但实现它的方式将无法降低响应级别。另外，请尝试将HTML和CSS分开（不要使用内联CSS）。

HTML：

<div id="container">
<div style="position:static">
    <ul class="items">
        <li>ABOUT KDU</li>
        <li>ADMISSION</li>
        <img src="http://vignette2.wikia.nocookie.net/cso/images/7/79/Normal_regular_zombie_dummy.png/revision/latest?cb=20120104040300" class="MainImage">
        <li>CAMPUS LIFE</li>
        <li>INTERNATIONAL STUDENT</li>
    </ul>
</div>


<div id="blocks">
    <ul id=" Images">
        <li><img src="http://vignette2.wikia.nocookie.net/cso/images/7/79/Normal_regular_zombie_dummy.png/revision/latest?cb=20120104040300" class="imageSize"></li>
        <li><img src="http://vignette2.wikia.nocookie.net/cso/images/7/79/Normal_regular_zombie_dummy.png/revision/latest?cb=20120104040300" class="imageSize"></li>
        <li><img src="http://vignette2.wikia.nocookie.net/cso/images/7/79/Normal_regular_zombie_dummy.png/revision/latest?cb=20120104040300" class="imageSize"></li>
        <li><img src="http://vignette2.wikia.nocookie.net/cso/images/7/79/Normal_regular_zombie_dummy.png/revision/latest?cb=20120104040300" class="imageSize"></li>
        <li><img src="http://vignette2.wikia.nocookie.net/cso/images/7/79/Normal_regular_zombie_dummy.png/revision/latest?cb=20120104040300" class="imageSize"></li>
    </ul>
</div>

CSS：

    *{
    margin: 0;
    padding: 0;
    user-select: none;
    font-family: "Futura PT Multilingual W02",Futura,Helvetica,Arial,sans-
    serif;
    font-weight: bold;
    overflow-x: hidden;
}

body{
    background: #f5f5f0;
}


.MainImage{
    width: 10%;
    transition: all .6s linear;
    float: left;
}

.items > li{
    color: black;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s linear;
    float: left;
    width: 22.5%;
    text-align: center;
    margin-top: 100px;
}


.items>li:hover{
    text-decoration-color: gray;
    transition: all .2s linear;
    transform: scale(1.2,1.2);
}

#blocks{
    background-color: #262626;
    width: 100%;
    min-height: 717px;
    float: left;
    clear: both;
    margin-top: 20px;
}

#blocks >ul>li{
    display:block;
    float:left;
    border: 20px;
    margin-top: 30px;
    margin-left: 80px;
}


#Images{
    position: absolute;
    display: inline;
}

#Image>li{
    position: absolute;
    display: block;
}

.imageSize{
    cursor: pointer;
    width: 340px;
    height: 200px;
    transition: all .4s linear;
}

.imageSize:hover{
    opacity: 0.5;
    transition: all .4s linear;
}


#container{
    width: 100%;
    margin: 0 auto;
}

Answer 2

它破坏布局的原因是因为你正在使用百分比，这意味着当你改变缩放级别时，宽度会被改变以适应页面的新大小，这就是要发生的事情

将CSS更改为某种程度 将有助于解决此问题，但由于其当前的工作方式 ，因此无法完全解决所有问题。我建议您将容器max-width更改为适合设计的容器，这是一个很好的起点。

#container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

然而，您可以使用media queries根据屏幕大小更改容器的宽度，这将适当地响应页面大小。例如，当平板电脑或手机的屏幕尺寸变小时，您可以这样做（例如）。

@media screen and (max-width: 1024px) {

    #container {
        max-width: 960px;
    }

}

当我放大或缩小时，html布局搞砸了

2 个答案: