Question

我习惯使用codepen.io并忘记了正确格式化的基础知识。我现在正致力于Visual Studio代码。现在我试图将所有东西都移到中心并改变我的颜色。 我注意到，当我在这里运行代码时，一切都很顺利。因此，当我在visual studio代码中预览时，我不确定我缺少什么。

每当我预览代码时，Visual Studio代码都会得到我的图像：HERE但是每当我通过StackOverflow查看我的代码时，我都会看到：HERE

检查我收到这些错误的页面：

无法加载资源：服务器响应状态为404（未找到）styles.css 无法加载资源：服务器响应状态为404（未找到）favicon.ico 无法加载资源：服务器响应状态为404（未找到）styles.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: cursive;
    text-align: center;
    min-height: 100vh;
    min-width: 370px;
    background-image: linear-gradient(135deg,#00ccff,#9933ff 31%,#e646b6 52%,#fff9aa 77%,#00ff99,#00ccff);
    background-size: 200%;
}

header h1 {
    padding: 20px 10px;
    letter-spacing: 0.2em;
    color: white;
}

form * {
    background: rgba(256, 256, 256, 0.3);
    color: white;
}

form.search form .btn {
    padding: 10px;
    border-radius: 2px;
    font-size: 16px;
    border: 1px solid white;
  
}

::placeholder {
    color: white;
}

form.search {
    width: 40%;
    min-width: 200px;
    max-width: 600px;
}

form.search:focus {
    outline: 0;
    color: #333; 
    background: white;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3), 
}

form.btn {
    cursor: pointer;
    width: 60px;
}
form.clear:hover {
    background: ;
}

.giphy {
    padding: 20px 0px 15px 0;
}

.giphy img {
    width: 200px;
    max-width: 800px;
    margin: auto;
    display: block;
}

giphy img.gif {
    width: 50%;
    max-width: 600px;
    box-shadow: 0 0 1px 1px rgba(256,256,256,0.3);
  }

  footer {
    padding: 5px;
    font-size: 14px;
    color: white;
  }
  
  footer a {
    color: #333;
    text-decoration: none;
  }
  footer a:hover {
    color: white;
    text-decoration: underline;
  }

<html>
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">

<title>Giphy</title>
</head>
<header>
    
<body>

<h1>Giphy Hooligan</h1>

<form method="post">
    <label style="display: none;">Search</label>
    <input class="search" type="text" name="search" placeholder="Search" required>
    <input class="btn" type="submit" value="OK">
    <input class="btn" type="button" value="Favorites">
</form>
</header>

<section>
    <div class="giphy">
        <a href="https://giphy.com/" target="blank">
        <img src="https://res.cloudinary.com/beumsk/image/upload/v1520544016/giphy-logo-6611-s-_vme7aa.png" alt="giphy">
        </a>
    </div>
</section>

<footer>
    <p>Dakota Coleman</p>
</footer>












</body>
</html>

Answer 1

如果只是将身体中的物品与中心对齐，则需要

align-items:center;

... body

您可能需要为子项添加其他居中方法（如form），并且flex-children不会继承flexbox。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* add this */
  font-family: cursive;
  text-align: center;
  min-height: 100vh;
  min-width: 370px;
  background-image: linear-gradient(135deg, #00ccff, #9933ff 31%, #e646b6 52%, #fff9aa 77%, #00ff99, #00ccff);
  background-size: 200%;
}

header h1 {
  padding: 20px 10px;
  letter-spacing: 0.2em;
  color: white;
}

form * {
  background: rgba(256, 256, 256, 0.3);
  color: white;
}

form.search form .btn {
  padding: 10px;
  border-radius: 2px;
  font-size: 16px;
  border: 1px solid white;
}

::placeholder {
  color: white;
}

form.search {
  width: 40%;
  min-width: 200px;
  max-width: 600px;
}

form.search:focus {
  outline: 0;
  color: #333;
  background: white;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3),
}

form.btn {
  cursor: pointer;
  width: 60px;
}

form.clear:hover {
  background: ;
}

.giphy {
  padding: 20px 0px 15px 0;
}

.giphy img {
  width: 200px;
  max-width: 800px;
  margin: auto;
  display: block;
}

giphy img.gif {
  width: 50%;
  max-width: 600px;
  box-shadow: 0 0 1px 1px rgba(256, 256, 256, 0.3);
}

footer {
  padding: 5px;
  font-size: 14px;
  color: white;
}

footer a {
  color: #333;
  text-decoration: none;
}

footer a:hover {
  color: white;
  text-decoration: underline;
}

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">

  <title>Giphy</title>
</head>
<header>

  <body>

    <h1>Giphy Hooligan</h1>

    <form method="post">
      <label style="display: none;">Search</label>
      <input class="search" type="text" name="search" placeholder="Search" required>
      <input class="btn" type="submit" value="OK">
      <input class="btn" type="button" value="Favorites">
    </form>
</header>

<section>
  <div class="giphy">
    <a href="https://giphy.com/" target="blank">
      <img src="https://res.cloudinary.com/beumsk/image/upload/v1520544016/giphy-logo-6611-s-_vme7aa.png" alt="giphy">
    </a>
  </div>
</section>

<footer>
  <p>Dakota Coleman</p>
</footer>












</body>

</html>

当CSS属性发生变化时，正在调整正文

1 个答案: