css班级网页布局代码 |css3 横向菜单

/*
本示例演示班级网页的布局代码
*/
/* 设置网页全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #F7F7F7;
margin: 0;
padding: 0;
}
/* 设置页眉 */
header {
background-color: #191919;
padding: 20px;
color: #FFFFFF;
}
/* 设置页眉标题 */
header h1 {
font-size: 48px;
margin: 0;
}
/* 设置导航栏 */
nav {
background-color: #333;
color: #FFFFFF;
overflow: hidden;
}
/* 设置导航栏链接的样式 */
nav a {
float: left;
font-size: 16px;
color: #FFFFFF;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
/* 设置导航栏链接的悬停样式 */
nav a:hover {
background-color: #111;
}
/* 设置正文部分 */
article {
margin: 20px;
padding: 20px;
background-color: #FFFFFF;
border-radius: 5px;
}
/* 设置页脚 */
footer {
background-color: #191919;
padding: 20px;
color: #FFFFFF;
text-align: center;
}
/* 设置页脚链接样式 */
footer a {
color: #FFFFFF;
text-decoration: none;
}
/* 设置页脚链接悬停样式 */
footer a:hover {
text-decoration: underline;
}

以上代码示例展示了 CSS 班级网页布局代码。该布局包括页眉、导航栏、正文部分以及页脚。通过设置 HTML 元素的样式，可以实现不同元素的布局和样式效果，从而让班级网页更加美观、易读。