css简单页面布局代码 |css 兼容 火狐

CSS常常用于页面布局，下面是一些简单的布局代码，可供参考：

/* 在body中创建一个无序列表，去除默认样式 */
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* 创建一个固定高度的头部，内部包含一个标题 */
header {
height: 50px;
background-color: #333;
color: #fff;
}
header h1 {
margin: 0;
padding: 10px;
}
/* 创建一个三列布局 */
.container {
display: flex;
flex-wrap: wrap;
}
/* 左侧栏 */
.sidebar {
flex: 1;
background-color: #eee;
padding: 10px;
}
/* 中间内容 */
.content {
flex: 2;
background-color: #fff;
padding: 10px;
}
/* 右侧栏 */
.sidebar {
flex: 1;
background-color: #eee;
padding: 10px;
}

这些代码创建了一个包含头部和三个栏目的基本页面布局。使用CSS进行页面布局可以帮助开发者更轻松地实现网页重构和样式调整。