品字布局是一种常见的页面布局方式,它将页面分为上下左右四个部分,其中上下为头尾,左右为左侧栏和主体内容,这样的布局方式可以让网页结构更加清晰。下面是一份纯CSS的品字布局代码。
/* 头部 */
.header {
height: 80px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 80px;
}
/* 尾部 */
.footer {
height: 80px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 80px;
}
/* 左侧栏 */
.sidebar {
width: 200px;
background-color: #ccc;
float: left;
}
/* 主体内容 */
.main {
margin-left: 200px;
margin-right: 200px;
background-color: #fff;
}
/* 盒子清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
以上CSS代码中, .header 和 .footer 用于定义页面的头部和尾部样式, .sidebar 和 .main 则用于定义页面左侧栏和主体内容样式,其中通过浮动让 .sidebar 在左侧, .main 在右侧,并通过 margin 属性来调整主体内容的位置。 .clearfix::after 是清除浮动的方式.
使用这份品字布局代码可以快速搭建出一个结构清晰的网页,具体使用可以根据自己的需求来修改样式。