Question

[没有缩小1440x990 67％铬

body{
    margin:0;
    padding:0;
    
}
.no-float{
    clear:both;
}

/*Menubar*/
#anime-logo{
    position:relative;
    top:140px;
    left:321px;
    width:170px;
    height:150px;
   
}

#menubar{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    float:left;
    padding-left:150px;
    
    
}

#menubar h1{
    font-family:'chicle';
    text-align:center;
    font-size:80px;
    position:relative;
    top:-10px;
    left:40px;
}

#menubar a{
    text-decoration:none;
    color:white;
    background-color:#000000;
    font-size:40px;
    font-family:'tangerine';
    padding:0 30px 0 15px;
    margin-left:90px;
    
    
}

#menubar a:hover{
    color:#f3baa5;
}

#menubar .current{
    color:#f3baa5;
}

.menubar-options{
    border-bottom:1px black solid;
    position:relative;
    top:-150px;
    
}

/*Main-Article*/
#main-article{
    width:1200px;
    margin:0 auto;
    float:left;
    position:relative;
    top:-100px;
    padding-left:215px;
    
    
    
}

#hanebado-logo{
    width:1070px;
    height:500px;
    
    
    
}

#main-article a{
    text-decoration:none;
    color:#262626;
    font-family:'syncopate';
}

#main-article a:hover{
    color:#a6a6a6;
    
    
}

#main-article p{
    font-size:20px;
    max-width:1070px;
    font-family:'IBM Plex Mono';
}

.read-more{
    font-size:20px;
}

<!DOCTYPE html>
    <html>
        <head>
            <title>Anime World</title>
            <link rel='stylesheet' type='text/css' href='css/style.css'>
            <meta charset='utf-8'>
            <link href="https://fonts.googleapis.com/css?family=Chicle|IBM+Plex+Mono|Syncopate|Tangerine" rel="stylesheet">


        </head>
        <body>
            <div id='menubar'>
                <div class='menubar-options'>
                <img id='anime-logo' src='./img/anime-logo.jpg'><h1>Anime World</h1>
                <a href=''><span class='current'>Home</span></a>
                <a href=''>Top Series</a>
                <a href=''>Merch</a>
                <a href=''>About us</a>
                <a href=''>News</a>
                </div>
            </div>
                
                <div class='no-float'></div>
            
            <div id='main-article'>
                <a href=''><img id='hanebado-logo' src='./img/hanebado-logo.jpg'>
                <h1>Hanebado! Episode 12 review</h1></a>
                <p>If this is "above average" animation, could you point me towards the god tier animation please. Not trying to be slaty or anything, I started watching anime relatively recently and to me
                this is some of the best I've seen(tho I haven't taken the time to like rank them or anything) so I'm just wondering. <a class='read-more' href=''>Read more...</a> </p>
            </div>
        </body>
    </html>

即使缩小后如何保持所有内容居中？一周前才刚刚开始学习HTML / CSS，并且对页面上的位置和div内容不太了解，所以这可能就是为什么我的CSS超级混乱或我想的原因。

有什么提示吗？

Answer 1

您需要使用百分比。例如：

#main-article{
    width: 90%;
    margin:0 auto;
    position:relative;
    padding: 0 125px;
}

并使用响应式元标记，例如：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

而且...如果您了解基本知识...也许可以帮助您了解Bootstrap或Materialize或类似的网格系统

Bootstrap Materialize

如果我缩小页面，网页不会居中，有什么提示吗？

1 个答案: