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

我在学习如何使用w3.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">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-蓝）适用于所有窗格？它不应该只适用于页脚吗？

我在做什么错？

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

来源

2016-11-23 ZioByte

从我的角度来看，对于想要学习HTML和CSS的人来说，使用任何CSS框架都是一个非常糟糕的主意***。这包括W3.css，我认为他们实际上并没有通过提供这个框架来为学习者提供任何好处。 – connexo

页脚在背景中显示，文字定位填充可能出现的空白处，并使背景显示为蓝色。

我删除了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>

来源

2016-11-23 19:32:55 JSouthward

谢谢。我实际上选择了w3.css，因为它只是一个预先烘焙的CSS，我希望它不会隐藏底层结构。虽然我是HTML的新手，但我在其他编程领域有着悠久的历史。我期望找到一些方法来模拟其他语言的“布局”，也许类似于MigLayout（http://www.miglayout.com/QuickStart.pdf）。显然没有什么可比的......或者我错过了什么？ – ZioByte

CSS flex-box的使用是我选择的布局，例如[此flex-box示例]（http://codepen.io/team/css-tricks/pen/jqzNZq），并且一个很好的检查指南是[这一个由CSS技巧]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/） – JSouthward

显然.w3-container确实包含的浮动元件的一些结算虽然看似.w3-display-container只增加position: relative;到元素

w3-display-container集装箱为W3-显示类（位置：相对）

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

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

因此，除非你已经实现了使用香草CSS和HTML，远离任何css框架这只会增加一个额外的复杂层，真的会损害你的学习过程！

来源

2016-11-23 19:39:29 connexo

我仍然无法完全掌握.css。这是事实。到目前为止，我设法摆脱了复杂性，但是，由于我需要进入网络大漩涡，我想了解我在做什么（而不是依靠工具）。我目前的“哲学”问题是.css对我来说看起来不像人类可读的格式，但更类似于.rtf或（更宽大的）.xml，它可以手写，但它们'并不真正意味着被人眼看到。任何指向良好概览文档的指针（即使是书本形式）都会受到高度赞赏。谢谢。 – ZioByte

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

回答

相关问题