css网站布置 |css3 disabled

body {
background-color: #f7f7f7;
margin: 0;
font-family: 'Arial', sans-serif;
}
#header {
background-color: #fff;
padding: 20px;
border-bottom: 1px solid #ddd;
}
#navigation {
background-color: #f7f7f7;
padding: 10px;
border-bottom: 1px solid #ddd;
}
#content {
padding: 20px;
margin: 20px 0;
background-color: #fff;
}
#sidebar {
width: 30%;
float: left;
padding: 20px;
margin-right: 20px;
background-color: #f7f7f7;
}
#footer {
background-color: #f7f7f7;
padding: 20px;
border-top: 1px solid #ddd;
text-align: center;
}

上面的代码是一个简单的网站布局，它包含了一个头部、导航栏、内容区、侧边栏和底部。可以看到，每个元素都有自己的CSS样式。body设定了整个页面的字体、背景色和外边距。#header、#navigation、#content、#sidebar和#footer分别对应了HTML中相应的元素ID，设定了它们的背景色、内外边距和边框。其中，#sidebar通过float属性可以使其浮动到左边。

CSS布局是一个重要的前端开发技能，需要在实践中不断完善。希望以上技巧可以给您的项目带来更加美观的效果。