<style type="text/css">
#box1,#box2{
float:left;
width:200px;
height:300px;
color:#ffffff;
font-size:36px;
text-align:center;
line-height:300px;
}
#box1{
border:solid 5px #ff0099;
background-image:url('bg2.jpg');
}
#box2{
border:solid 5px #ffff00;
background-image:url('bg3.jpg');
}
</style>
XHTML构造以下:
<div id="box1">
左栏
</div>
<div id="box2">
右栏</div>
运作結果:
如今,大家想把上下两栏部位交换1下,只需把
<div id="box1">
左栏
</div>
<div id="box2">
右栏</div>
换为:
<div id="box2">
右栏</div>
<div id="box1">
左栏
</div>
便可。
可是,当网页页面很繁杂时,各种各样标识互相嵌套循环,编码不计其数行,这个看似简易的部位替换,将会必须花上很长的時间,也并1定能做到必须的实际效果,如今,大家换1种思路来完成:
#box1{
border:solid 5px #ff0099;
background-image:url('bg2.jpg');
margin-left:105px;
}
#box2{
border:solid 5px #ffff00;
background-image:url('bg3.jpg');
margin-left:⑷20px;
运作后: