网站基本布局CSS

以下是一个简单的网站布局示例，使用了CSS Flexbox布局来创建一个具有头部、导航、主内容区和页脚的基本页面结构。

/* 清除默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* 页面级布局 */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
}
 
/* 头部样式 */
header {
    background-color: #333;
    padding: 10px 0;
    color: white;
    text-align: center;
}
 
/* 导航菜单样式 */
nav {
    background-color: #555;
    padding: 10px;
    text-align: center;
}
 
/* 主内容区样式 */
main {
    margin: 15px 0;
    padding: 15px;
    text-align: left;
}
 
/* 使用Flexbox布局进行高度均衡 */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
 
/* 页脚样式 */
footer {
    background-color: #555;
    padding: 10px;0;
    color: white;
    text-align: center;
    margin-top: auto;
}
 
/* 布局示例 */
<div class="container">
    <header>网站头部</header>
    <nav>
        <a href="#">主页</a>
        <a href="#">关于</a>
        <a href="#">服务</a>
        <a href="#">联系</a>
    </nav>
    <main>
        <h1>主要内容</h1>
        <p>这里是主要内容的文本...</p>
    </main>
    <footer>网站页脚</footer>
</div>

这段代码展示了如何使用Flexbox布局创建一个简单的网站结构。.container类使用display: flex和flex-direction: column属性将子元素排列为列，并通过min-height: 100vh确保至少与视口高度一致。footer使用margin-top: auto自动放置在容器的底部。