Question

我已经开始学习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>

Answer 1

据我了解，您不希望自己的内容与页面一起缩放。如果我是对的，而不是这个：

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

将其编辑为如下所示：

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

＆＃13;

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

＆＃13;

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

＆＃13;

当然，你可以改变宽度。我仅为此示例将其设置为980px，您应该根据需要更改并设置它。

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

1 个答案: