css布局班级首页代码 |css 禁止选中文本

/* 班级首页布局样式 */
body {
margin: 0;
padding: 0;
}
#header {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
#nav {
background-color: #f1f1f1;
height: 50px;
line-height: 50px;
text-align: center;
}
#content {
margin: 20px;
display: flex;
}
#side {
width: 20%;
padding: 10px;
background-color: #f1f1f1;
}
#main {
width: 80%;
padding: 10px;
background-color: #fff;
}
#footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
/* 响应式布局 */
@media screen and (max-width: 768px) {
#content {
flex-direction: column;
}
#side, #main {
width: 100%;
}
}

这份CSS布局代码中，大家主要定义了五个部分：头部、导航栏、内容区域、侧边栏、底部。其中，头部和底部都是黑色背景，中间的导航栏和内容区域则为白色和灰色的背景色。这个布局非常简单，利用了Flexbox布局的方法来实现网页内容的整合。

在响应式布局方面，大家使用了@media语句来使得网页在宽度小于768px时的响应式布局。此时，内容区域的子项中的元素会逐个显示，便于移动设备上的访问。这样的布局页面适应性强，可以适用于不同屏幕大小的设备，并且在不同的设备及浏览器上面的兼容性非常高，是相当实用的。