CSS 制作与操作(6)

background: url(images/left-top.gif) top left no-repeat; width:100%; }

.rounded h2 { background: url(images/right-top.gif) top right no-repeat;

padding:20px 20px 10px; margin:0; }

.rounded .main { background: url(images/right.gif) top right repeat-y; padding:10px 20px; margin:-2em 0 0 0;

}

.rounded .footer { background: url(images/left-bottom.gif) bottom left no-repeat; }

.rounded .footer p { color:#888; text-align:right;

background:url(images/right-bottom.gif) bottom right no-repeat; display:block;

padding:10px 20px 20px; margin:-2em 0 0 0; }

#header,#pagefooter,#container{ margin:0 auto; width:760px; }

#container{

position:relative; }

#content{ position:absolute; top:0; left:0; width:500px; }

#content img{ float:right; 图片使用浮动设置，文字会围绕它排列。 }

#side{ margin:0 0 0 500px; }

Page Header

查看详细信息>>

Page Content 2 对于一个网页设计者来说，HTMCSS，并对CSS进行初步的体验。

Side Bar 对于一个网页设计者来说，CSS在这中间扮演着重要的角色。

但是如果希望网页能够美观、间扮演着重要的角色。

Page Footer 这是一行文本，这里作为样例，显示在布局框中。

为了使content能够使用绝对定位 ，必须考虑用哪个元素作为它的定位基准，显然它该是contenter这个div因此。将#container设置为{position:relative; }相对定位 。使它成为下级元素的绝对定位基准。然后将#content{设置为绝对定位。这样它就脱离标准流了。side就会向上移动占据原来content所在的位置。将content的宽度和 side的左 margin设置相同的数值。就保证它们并列紧挨着放置。且不会重叠。但是由于content已经脱离标准流了如果它的高度超过side这个div就会与下面的pagefooter重叠。

2，浮动法

在CSS样式中，稍作修改。将#container的position属性去掉，将#containe和#side都设置为向左浮动。二者的宽度相加等于总宽度。