CSS用于页眉，节和页脚的布置

Question

I have basic html code : 我有基本的html代码：

<header></header>
<main>
<nav></nav>
<section></section>
</main>
<footer></footer>

and I need css to have the header at the top, the footer at the bottom, the nav and the section between the header and footer, with the nav on the left and the section on the right. 我需要css在顶部具有页眉，在底部具有页脚，在导航栏和页眉与页脚之间的部分，在左侧的导航栏和在右侧的部分。

As an example : https://fr.wikipedia.org/ 例如： https : //fr.wikipedia.org/

But in the case where the main content is smaller than the screen size, I need to have the footer fixed on the bottom of the screen. 但是在主要内容小于屏幕尺寸的情况下，我需要将页脚固定在屏幕底部。

My CSS is something like that : 我的CSS是这样的：

    header, nav, section, footer {
        padding: 1px 0;
    }

    header {
        background-color: lightcoral;
        text-align: center;
        background: #FF9900 url("/Content/Images/Etoile.png") 5px center no-repeat;
        background-size: 100px;
    }

    main {
        margin: auto;
    }

    nav {
        float: left;
        width: 15%;
        background-color: lightsalmon;
    }

    section {
        float : right;
        width : 85%;
        background-color: lightblue;
    }

    footer {
        background-color: lightgreen;
        text-align: center;
        clear: both;
    }

Could you help me please ? 请问你能帮帮我吗？

Answer 1

What you're trying to do is create a simple page layout. 您尝试做的是创建一个简单的页面布局。 You can check out this resource for general information about how to do this, since there are multiple ways. 您可以查看此资源，以获取有关如何执行此操作的常规信息，因为有多种方法。

An example taken from the above resource is using the CSS float property. 从上述资源中获取的示例是使用CSS float属性。 It should give you enough to start with for your solution. 它应该为您提供足够的解决方案。

 <!DOCTYPE html> <html> <head> <style> div.container { width: 100%; border: 1px solid gray; } header, footer { padding: 1em; color: white; background-color: black; clear: left; text-align: center; } nav { float: left; max-width: 160px; margin: 0; padding: 1em; } nav ul { list-style-type: none; padding: 0; } nav ul a { text-decoration: none; } article { margin-left: 170px; border-left: 1px solid gray; padding: 1em; overflow: hidden; } </style> </head> <body> <div class="container"> <header> <h1>City Gallery</h1> </header> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> <footer>Copyright &copy; W3Schools.com</footer> </div> </body> </html>

CSS用于页眉，节和页脚的布置

问题描述

1 个解决方案

解决方案1
0 2017-06-06 15:13:50

CSS用于页眉，节和页脚的布置

问题描述

1 个解决方案

解决方案1 0 2017-06-06 15:13:50

解决方案1
0 2017-06-06 15:13:50