学习CSS布局网页的一些实例

作者佚名技术来源 CSS技术浏览发布时间 2012-03-05

二列宽度自适应

XHTML CODE：

CSS CODE:

#left{
background-color:#EBDD9E;
  border:2px solid #B5A068;
  width:20%;
  height:300px;
  float:left;
}
#right{
background-color:#EBDD9E;
  border:2px solid #B5A068;
  width:70%;
  height:300px;
  float:left;
}

注：在CSS布局中，一个对象的宽度，不仅仅是由WIDTH值来决定，一个对象的真实宽度是由对象本身的宽、对象的左右外边距，以及左右边框，还有内边距这些属性相加而成。有关宽度计算的问题，是CSS布局中相当重要的被成为盒模型问题。

右列宽度自适应

XHTML CODE：

<div id="left">left</div>
<div id="right">right</div>

CSS CODE：

#left{
background-color:#EBDD9E;
  border:2px solid #B5A068;
  width:100px;
  height:300px;
  float:left;
}

#right{
background-color:#EBDD9E;
  border:2px solid #B5A068;
  width:300px;
  height:300px;
}

二列固定宽度居中

XHTML CODE：

<div id="layout">
<div id="left">left</div>
<div id="right">right</div>
</div>

CSS CODE：

#layout{
  margin:0px auto;
  width:408px;
}

#left,#right{
  background-color:#EBDD9E;
  border:2px solid #B5A068;
  width:200px;
  height:300px;
  float:left;
}

3.三列布局

三列浮动中间列宽度自适应

XHTML CODE：

<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>

CSS CODE：

body{
  margin:0px;
}
#left{
  background-color:#EBDD9E;
  border:2px solid #B5A068;
  width:100px;
  height:300px;
  position:absolute;
  top:0px;
&nbs

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 判断用户浏览器及分辨率调用不同的CSS样式文件下一篇: CSS教程:网页表单设计技巧

关于学习CSS布局网页的一些实例的所有评论

随机推荐