Question

我正在构建一个小小的HTML页面，因为我自学了如何编码。我已经观看了几个演练视频，并希望在不观看视频的情况下整合我所学到的内容，以便更好地完成。这是我正在处理的图像。

我想要这三个部分，'学习HTML'，'学习CSS3'，'学习Javascript'以此为中心页。我创建了一个<section ID="">代码，用于展示展示位置下页面上的所有内容，以及每个框中3个单独的<div class="">。

我的问题是双重的，不仅边框不在页面的中心，而且框子甚至都没有出现。

这是代码......

body {
  background-color: #FFFAF0;
  color: black;
  font-family: garamond;
  font-weight: normal;
  margin: 0;
  line-height: 1.6em;
  padding: 0;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

#topheader {
  background-color: #228B22;
  color: white;
  margin: auto;
  padding: 15px;
  text-align: center;
}

#navbar {
  background-color: black;
  color: white;
}

#navbar ul {
  padding: 0;
  list-style: none;
}

#navbar li {
  display: inline;
  margin: auto;
  padding-right: 50px;
  text-align: center;
}

#navbar a {
  color: white;
  text-decoration: none;
}

#showcase {
  background-image: url('../coding/codage.png');
  background-position: center right;
  min-height: 300px;
  margin-bottom: 30px;
  text-align: center;
  color: white;
}

#main {
  width: 33.3% padding:10px;
  margin: auto;
}

.top {
  float: left;
  border: 3px black;
  box-sizing: border-box;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="ByMyself.css">
  <meta charset="utf-8">
  <title>How To Build A Website By Yourself</title>
</head>

<body>
  <header id="topheader">
    <div class="container">
      <h1>Learning HTML5 and CSS3</h1>
    </div>
  </header>


  <nav id="navbar">
    <div class="container">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Learning HTML5</a></li>
        <li><a href="#">Learning CSS3</a></li>
        <li><a href="#">About Us</a></li>
      </ul>
    </div>
  </nav>

  <section id="showcase">
    <div class="container">
      <h1>How to learn how to build a website from scratch! Code The Future!
      </h1>
    </div>
  </section>

  <div class="clr"></div>

  <section id="main">
    <div class="top">
      <h2>Learn HTML5</h2>
      <ul>
        <ol>Step 1 - Watch Tutorials</ol>
        <ol>Step 2 - Take Notes</ol>
        <ol>Step 3 - Repeat Until It Sinks In</ol>
      </ul>
    </div>
    <div class="top">
      <h2>Learn CSS3</h2>
      <ul>
        <ol>Step 1 - Watch Tutorials</ol>
        <ol>Step 2 - Take Notes</ol>
        <ol>Step 3 - Repeat Until It Sinks In</ol>
      </ul>
    </div>
    <div class="top">
      <h2>Learn Javascript</h2>
      <ul>
        <ol>Step 1 - Watch Tutorials</ol>
        <ol>Step 2 - Take Notes</ol>
        <ol>Step 3 - Repeat Until It Sinks In</ol>
      </ul>
    </div>
  </section>

</body>

</html>

Answer 1

有一些问题：

FLOAT ：您需要做的是同时应用 width （约三分之一）和 margin < / strong>指向您的三个.top元素。请注意，width应考虑边距，这可以通过使用 calc() 函数减去它们来实现。我已经margin: 0 20px;与20px的horziontal marign一起离开，没有垂直边距，以及width: calc(33% - 40px);，在找到33%之前考虑了左边距和右边距可用的width。

BORDER ：您已应用border: 3px black的规则，几乎正确;您正在寻找 border: 3px solid black ; solid 至关重要！

除此之外，您的“列表项”为 <ol> ，代表有序列表。你基本上在无序列表中有多个有序列表。这些应该是列表项（ <li> ），而不是<ol>项内容，如下所示：

<ol> <li>Step 1 - Watch Tutorials</li> <li>Step 2 - Take Notes</li> <li>Step 3 - Repeat Until It Sinks In</li> </ol>

然而，话说回来，你会从简单的 <div> 标签中受益，因为每个点都想要在自己的行上，并且你正在添加自己的“Step” 1“前缀。

这可以在以下内容中找到（点击Run Code Snippet然后Full Page）：

body { background-color: #FFFAF0; color: black; font-family: garamond; font-weight: normal; margin: 0; line-height: 1.6em; padding: 0; } .container { width: 80%; margin: auto; overflow: hidden; } #topheader { background-color: #228B22; color: white; margin: auto; padding: 15px; text-align: center; } #navbar { background-color: black; color: white; } #navbar ul { padding: 0; list-style: none; } #navbar li { display: inline; margin: auto; padding-right: 50px; text-align: center; } #navbar a { color: white; text-decoration: none; } #showcase { background-image: url('../coding/codage.png'); background-position: center right; min-height: 300px; margin-bottom: 30px; text-align: center; color: white; } #main { width: 33.3% padding:10px; margin: auto; } .top { float: left; border: 3px solid black; box-sizing: border-box; text-align: center; margin: 0 20px; width: calc(33% - 40px); }

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="ByMyself.css"> <meta charset="utf-8"> <title>How To Build A Website By Yourself</title> </head> <body> <header id="topheader"> <div class="container"> <h1>Learning HTML5 and CSS3</h1> </div> </header> <nav id="navbar"> <div class="container"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Learning HTML5</a></li> <li><a href="#">Learning CSS3</a></li> <li><a href="#">About Us</a></li> </ul> </div> </nav> <section id="showcase"> <div class="container"> <h1>How to learn how to build a website from scratch! Code The Future! </h1> </div> </section> <div class="clr"></div> <section id="main"> <div class="top"> <h2>Learn HTML5</h2> <div>Step 1 - Watch Tutorials</div> <div>Step 2 - Take Notes</div> <div>Step 3 - Repeat Until It Sinks In</div> </div> <div class="top"> <h2>Learn CSS3</h2> <div>Step 1 - Watch Tutorials</div> <div>Step 2 - Take Notes</div> <div>Step 3 - Repeat Until It Sinks In</div> </div> <div class="top"> <h2>Learn Javascript</h2> <div>Step 1 - Watch Tutorials</div> <div>Step 2 - Take Notes</div> <div>Step 3 - Repeat Until It Sinks In</div> </div> </section> </body> </html>

希望这有帮助！

中心元素和创建框的问题

1 个答案: