Question

我正在尝试学习如何使用w3.css构建页面。

首先尝试获得标准页眉/左侧面板/右侧面板/页脚布局。

然后我将使插入嵌套布局的问题复杂化，但这是为了以后因为我无法按照我的意愿制作这个简单的示例：（

我目前的代码非常简单（我做了很多尝试，基本上没有区别）：

<!DOCTYPE html>
<html>
<head>
  <title>Page</title>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
  <header class="w3-container w3-indigo">
    <div class="w3-xxlarge">Lorem ipsum -- dolor
      <a href="login.html" class="w3-btn w3-teal w3-large w3-round-xxlarge w3-right">log in</a>
    </div>
  </header>
  <div class="w3-display-container">
    <div class="w3-container w3-left w3-border" style="width: 40%">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Res enim se praeclare habebat, et quidem in utraque parte. Sed in rebus apertissimis nimium longi sumus. Duo Reges: constructio interrete. Aliter enim nosmet ipsos nosse non possumus. Aliud igitur esse censet gaudere, aliud non dolere. Multoque hoc melius nos veriusque quam Stoici. Nam, ut sint illa vendibiliora, haec uberiora certe sunt. </p>
    </div>
    <div class="w3-container w3-right w3-border" style="width: 60%">
      <p>Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. Dat enim intervalla et relaxat. Non autem hoc: igitur ne illud quidem. Sed quot homines, tot sententiae; Quae in controversiam veniunt, de iis, si placet, disseramus.</p>
    </div>
  </div>
  <footer class="w3-container w3-blue">
    <p>Iam id ipsum absurdum, maximum malum neglegi. Quae cum essent dicta, discessimus. Hanc ergo intuens debet institutum illud quasi signum absolvere. Deprehensus omnem poenam contemnet. Odium autem et invidiam facile vitabis. Uterque enim summo bono fruitur, id est voluptate. </p>
  </footer>
</body>
</html>

此代码有几个我无法确定的问题：

标题：按钮未与文字对齐。
页脚：为什么它不是页脚并填充分拣机（右）面板留下的空间？我也尝试在窗格之间留下间隙（35％-55％），在这种情况下，页脚在窗格之间呈现然后在右下方，好像脚也会“浮动”。

为什么颜色（w3-blue）应用于所有窗格？它不应该只适用于页脚吗？

我做错了什么？

任何指向相关文档/教程的指针（可以像我这样的新手都能理解）将是受欢迎的。

Answer 1

页脚显示在背景中，文本位于填充空隙的位置，这使得背景看起来是蓝色的。

我删除了w3-display-container，因为我看不出使用w3-container的原因。

至于按钮，我无法在w3.css中找到添加margin-top: 8px的内容，因此我在按钮中添加了style="margin-top: 8px"。

我建议删除w3.css，因为它会使你的学习过程变得复杂。我会开始使用W3资源学习HTML和CSS，一旦你掌握了基础知识，如果你仍然觉得使用w3.css给它一个去，但老实说它是一个限制框架。

<!DOCTYPE html>
<html>
<head>
  <title>Page</title>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
  <header class="w3-container w3-indigo">
    <div class="w3-xxlarge">Lorem ipsum -- dolor
      <a href="login.html" class="w3-btn w3-teal w3-large w3-round-xxlarge w3-right" style="margin-top: 8px">log in</a>
    </div>
  </header>

  <div class="w3-container">
    <div class="w3-container w3-left w3-border" style="width: 40%">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Res enim se praeclare habebat, et quidem in utraque parte. Sed in rebus apertissimis nimium longi sumus. Duo Reges: constructio interrete. Aliter enim nosmet ipsos nosse non possumus. Aliud igitur esse censet gaudere, aliud non dolere. Multoque hoc melius nos veriusque quam Stoici. Nam, ut sint illa vendibiliora, haec uberiora certe sunt. </p>
    </div>
    <div class="w3-container w3-right w3-border" style="width: 60%">
      <p>Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. Dat enim intervalla et relaxat. Non autem hoc: igitur ne illud quidem. Sed quot homines, tot sententiae; Quae in controversiam veniunt, de iis, si placet, disseramus.</p>
    </div>
  </div>

  <footer class="w3-container w3-blue">
    <p>Iam id ipsum absurdum, maximum malum neglegi. Quae cum essent dicta, discessimus. Hanc ergo intuens debet institutum illud quasi signum absolvere. Deprehensus omnem poenam contemnet. Odium autem et invidiam facile vitabis. Uterque enim summo bono fruitur, id est voluptate. </p>
  </footer>
</body>
</html>

Answer 2

显然.w3-container会对包含的浮动元素进行一些清除，而看似.w3-display-container只会将position: relative;添加到元素

w3-display-container w3-display-classes的容器（位置：相对）

旨在使内部元素的绝对定位与此容器相关。

要了解导致布局损坏的原因，您需要了解HTML，浮动和定位的工作方式。如果你对学习前端开发有任何认真的态度，那就没办法了。

因此，在使用vanilla CSS和HTML实现这一目标之前，远离任何css框架，这只会增加额外的复杂性，真正损害您的学习过程！

W3.CSS如何获得标准的标题 - [左右]页脚布局？

2 个答案: