如何让我的网站缩小像这个网站？

Z时代
2024-01-10
分类：问答

我已经开始学习CSS和HTML，因此我对这些语言很陌生。我已经学会了零件如何工作，例如元数据属性"width=device-width,height=device-height,initial-scale=1"，它允许根据设备调整屏幕大小。如何让我的网站缩小像这个网站？

然后我开始在我的网站的工作，但是我对面，我需要帮助的问题就来了：

的问题是，我试图把我的网页内容到一个div，然后试图通过样式它所以效果会像这样的网站：https://www.merlincycles.com/2

然而，当我这样做，并缩小网页的内容（标题，标志，表格等）也移动到边缘但是我想要做的是创建一个类似于提供的网站的效果，以便当用户缩小网站变小，但内容保持不变。请尝试缩小提供的网站以了解想法。

* {  
    padding: 0;  
    margin: 0;  
}  
body {  
    background-color: #f0f0f0;  
    font: 100%/160% verdana, arial, helvetica, sans-serif;  
    padding: 0em 0em 0em;  
}  
#container {  
    padding-right: 10em;  
    padding-left: 10em;  
}  
#header {  
    padding: 0.75em 1em;  
    background-color: black;  
    text-align: center;  
    color: #fff;  
}  
#header a {  
    float: left;  
    color: #fff;  
    text-decoration: none;  
}  
#header a:hover {  
    color: #fcab15;  
}  
#header div:first-of-type {  
    float: right;  
}  
#header div:last-of-type {  
    display: inline-block;  
}  
#header div:last-of-type span {  
    margin-left: 0.5em;  
    color: #fcab15;  
}  
#form-container {  
    padding: 0.75em 1em 3em;  
    background-color: #065671;  
    text-align: center;  
}  
#form-container img {  
    float: left;  
    margin-top: -0.75em;  
    position: relative;  
}  
#form-container form {  
    display: inline-block;  
    vertical-align: middle;  
    margin-top: 2em;  
    margin-right: 20em;  
}  
#form-container form input[type="text"] {  
    line-height: 2.5em;  
    font-size: 1em;  
}  
#form-container form input[type="submit"] {  
    /*Controls submit box*/  
    border-color: #008000;  
    border-style: outset;  
    background-color: #008000;  
    line-height: 2.5em;  
    font-size: 1em;  
}  
@media (max-width:50em) {  
    #header a,  
    #header div:first-of-type,  
    #header div:last-of-type {  
    float: none;  
    display: block;  
    }  
}  
@media (max-width:30.5em) {  
    #form-container img {  
    display: block;  
    margin: none;  
    }  
    #form-container label {  
    display: block;  
    margin: 0.5em 0;  
    }  
}  
@media (min-width:90.5em) {  
    #header a,  
    #header div:first-of-type,  
    #header div:last-of-type {  
    float: none;  
    display: block;  
    }  }

<div id="container">  
    <div id="header">  
    <a href="index.html"> Sign in/Register</a>  
    <div>Need Help? : 02080207651</div>  
    <div>FREE International shipping on<span>Selected Items</span></div>  
    <!-- #header -->  
    </div>  
    <div id="form-container">  
    <img src="image/logo.png" alt="logo">  
    <form action="#">  
     <input type="text" id="textbox" name="textbox" required placeholder="Search  
    Bike King...">  
     <input type="submit" value="Search">  
    </form>  
    <!-- #form-container -->  
    </div>  </div>

回答：

据我所知，你不希望与页面一起缩放内容。如果我是正确的，而不是这样的：

#container { 
    padding-right: 10em; 
    padding-left: 10em; 
}

编辑它看起来像这样：

#container { 
    width: 980px; 
    margin: 0 auto; 
}

* {  
    padding: 0;  
    margin: 0;  
}  
body {  
    background-color: #f0f0f0;  
    font: 100%/160% verdana, arial, helvetica, sans-serif;  
    padding: 0em 0em 0em;  
}  
#container {  
    width:980px;  
    margin: 0 auto;  
}  
#header {  
    padding: 0.75em 1em;  
    background-color: black;  
    text-align: center;  
    color: #fff;  
}  
#header a {  
    float: left;  
    color: #fff;  
    text-decoration: none;  
}  
#header a:hover {  
    color: #fcab15;  
}  
#header div:first-of-type {  
    float: right;  
}  
#header div:last-of-type {  
    display: inline-block;  
}  
#header div:last-of-type span {  
    margin-left: 0.5em;  
    color: #fcab15;  
}  
#form-container {  
    padding: 0.75em 1em 3em;  
    background-color: #065671;  
    text-align: center;  
}  
#form-container img {  
    float: left;  
    margin-top: -0.75em;  
    position: relative;  
}  
#form-container form {  
    display: inline-block;  
    vertical-align: middle;  
    margin-top: 2em;  
    margin-right: 20em;  
}  
#form-container form input[type="text"] {  
    line-height: 2.5em;  
    font-size: 1em;  
}  
#form-container form input[type="submit"] {  
    /*Controls submit box*/  
    border-color: #008000;  
    border-style: outset;  
    background-color: #008000;  
    line-height: 2.5em;  
    font-size: 1em;  
}  
@media (max-width:50em) {  
    #header a,  
    #header div:first-of-type,  
    #header div:last-of-type {  
    float: none;  
    display: block;  
    }  
}  
@media (max-width:30.5em) {  
    #form-container img {  
    display: block;  
    margin: none;  
    }  
    #form-container label {  
    display: block;  
    margin: 0.5em 0;  
    }  
}  
@media (min-width:90.5em) {  
    #header a,  
    #header div:first-of-type,  
    #header div:last-of-type {  
    float: none;  
    display: block;  
    }  }

<div id="container">  
    <div id="header">  
    <a href="index.html"> Sign in/Register</a>  
    <div>Need Help? : 02080207651</div>  
    <div>FREE International shipping on<span>Selected Items</span></div>  
    <!-- #header -->  
    </div>  
    <div id="form-container">  
    <img src="image/logo.png" alt="logo">  
    <form action="#">  
     <input type="text" id="textbox" name="textbox" required placeholder="Search  
    Bike King...">  
     <input type="submit" value="Search">  
    </form>  
    <!-- #form-container -->  
    </div>  </div>