放大或缩小时html布局混乱_Html_Css

放大或缩小时html布局混乱

html css

放大或缩小时html布局混乱,html,css,Html,Css,我有一个问题，当我放大和缩小页面时，页面的布局会变得混乱。我在网上搜索过其他帖子，但没有真正的帮助。也许是因为我安排css的方式。希望有人能向我解释如何解决这个问题，谢谢。这就是它前后的样子之前之后 HTML <body> <div id="container"> <div style="position:static"> <ul class="items"> <li>ABO

我有一个问题，当我放大和缩小页面时，页面的布局会变得混乱。我在网上搜索过其他帖子，但没有真正的帮助。也许是因为我安排css的方式。希望有人能向我解释如何解决这个问题，谢谢。这就是它前后的样子

之前

之后

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>

我建议您将其用于所有web开发需求

内容的样式正在破坏一切

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

HTML:

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

将CSS更改为一定程度的修复将有助于解决此问题，但不会完全修复所有问题，因为它当前的工作方式。我建议您将容器

max width

更改为适合开始设计的值，这是一个很好的起点

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

但是之后，您可以使用更改容器的宽度，具体取决于屏幕大小，屏幕大小将相应地响应页面大小。例如，当屏幕尺寸小于平板电脑或手机时，您可以这样做（例如）

因此，不允许要求提供教程或其他参考资料。此外，就具体问题提出具体问题也是如此。你的问题对于这个平台来说太宽泛了。我可以知道你所说的“不会完全解决所有问题，因为它目前的工作方式”是什么意思吗这是我实现css和html的方法错了还是别的什么？我的意思是，因为你使用的是百分比，所以当你放大百分比时，它会在放大级别响应屏幕。因此，一种解决方法是使容器具有最大宽度，并使用媒体查询，以便放大时元素响应屏幕大小。我是否可以知道您的陈述“您实现它的方式将使其无法下降到响应级别”这是否意味着我的css实现完全错误？如果有一个问题，我面临的是，它非常困惑我如何使用的立场：绝对。

<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>

    *{
    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;
}

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

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

    #container {
        max-width: 960px;
    }

}