css第五章上机训练3 |css3 多栏布局

在这个练习中，大家需要对一个HTML文档中的各个元素进行样式设置，使得页面显示效果更加美观和整洁。首先需要使用id选择器对文档中的元素进行选择，然后设置相应的样式属性。

#header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

上述代码中，大家使用了id选择器对页面顶部的header元素进行了样式设置，包括了背景颜色、字体颜色、内边距和文本对齐等属性。这些属性的设置可以使得页面顶部看起来更加整齐美观。

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}

接下来，大家对页面的导航栏进行样式设置。大家首先选择了类选择器，即.navbar类，对导航栏整体进行了样式设置，包括了背景颜色、外边距、内边距和列表的样式等属性。接着，大家使用后代选择器和子选择器对导航栏中的各个元素进行了样式设置，包括了链接的字体颜色、内边距和鼠标悬停时的背景颜色等属性，以及将导航栏中的各个元素浮动在同一行上。

footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

最后，大家对页面的底部进行了样式设置。同样使用了id选择器，对footer元素进行了背景颜色、字体颜色、内边距和文本对齐等属性的设置。这些属性的设置可以使得页面底部看起来更加清晰明了，让用户更容易获取所需的信息。

通过本次上机训练，大家学会了使用CSS选择器和样式属性对HTML文档中的各个元素进行样式设置，使得页面显示效果更加美观和整洁。这是一个重要的前端开发知识点，在日后的工作和学习中也会有广泛的应用。