淘先锋技术网

首页 1 2 3 4 5 6 7

CSS是网页设计中经常用到的技术之一,它能够实现许多有趣、实用的效果。其中一个比较常见的应用场景就是左中右结构,也就是将页面内容划分为左、中、右三个部分。

<div class="container">
<div class="box left"></div>
<div class="box middle"></div>
<div class="box right"></div>
</div>/* CSS代码 */<style>
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.box {
height: 200px;
float: left;
}
.left {
width: 200px;
background: #ccc;
}
.middle {
width: 560px;
background: #eee;
}
.right {
width: 200px;
background: #ccc;
}
</style>

如上所示,我们先创建一个名为.container的div容器,并在其中分别创建三个名为.box的子元素,分别代表左、中、右三个部分。

在CSS中,我们对容器进行设定,使其具有960px的宽度,margin为0自动,overflow设为hidden,这样就可以防止内容超出容器部分被隐藏。对于.box元素,我们对其设定高度为200px,并设置为左浮动。

接下来,我们根据具体需求对左、中、右三个部分的宽度和背景色进行设置。左右两个容器的宽度为200px,中间容器的宽度为560px,并分别设置成灰色和浅灰色相间,让整个页面看起来更加舒适。这样,通过CSS的设置,我们就可以很轻松地实现一个完整的左中右结构的页面布局了。