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如何獲得標準標題 - [左右]頁腳佈局？

回答

相關問題