示例示例CSS页面布局的方式有：基于流体的布局（Fluid Layout）：
CSS页面布局的方式有：
1. 基于流体的布局（Fluid Layout）：
css
body {
width: 100%;
margin: 0 auto;
}
#container {
width: 80%;
margin: 0 auto;
}
#left {
float: left;
width: 20%;
}
#right {
float: right;
width: 70%;
}
2. 基于固定宽度的布局（Fixed Width Layout）：
css
body {
width: 960px;
margin: 0 auto;
}
#container {
width: 800px;
margin: 0 auto;
}
#left {
float: left;
width: 120px;
}
#right {
float: right;
width: 680px;
}
3. 基于百分比的布局（Percentage Layout）：
css
body {
width: 100%;
margin: 0 auto;
}
#container {
width: 80%;
margin: 0 auto;
}
#left {
float: left;
width: 20%;
}
#right {
float: right;
width: 70%;
}
4. 基于响应式布局（Responsive Layout）：
css
body {
width: 100%;
margin: 0 auto;
}
#container {
width: 100%;
margin: 0 auto;
}
#left {
float: left;
width: 20%;
}
#right {
float: right;
width: 70%;
}
@media only screen and (max-width: 768px) {
#left {
float: none;
width: 100%;
}
#right {
float: none;
width: 100%;
}
}
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（84条）