• 软件测试技术
  • 软件测试博客
  • 软件测试视频
  • 开源软件测试技术
  • 软件测试论坛
  • 软件测试沙龙
  • 软件测试资料下载
  • 软件测试杂志
  • 软件测试人才招聘
    暂时没有公告

字号: 小 中 大 | 推荐给好友 上一篇 | 下一篇

CSS基本布局16例

发布: 2007-6-30 18:56 | 作者: admin | 来源: | 查看: 14次 | 进入软件测试论坛讨论

领测软件测试网 单行单列
单行单列1:采用float浮在左上角,固定宽度。
单行单列2:固定在左上角,固定宽度,采用的是绝对(absolute)定位。
单行单列3:固定在左上角,不固定宽度,采用百分比(%)定义宽度来自适应页面。
单行单列4(推荐):固定宽度,采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。
单行两列
单行两列1:两列都固定宽度。第一列浮在左上角,第二列浮在第一列右边。
单行两列2:两列都百分比宽度,但不满屏。第一列固定在左上角,第二列浮在第一列右边。
单行两列3:两列都百分比宽度,满屏。两列都采用绝对定位。
单行两列4:两列都百分比宽度,满屏。第一列浮在左上角,第二列浮在右上角。
单行两列5:两列都百分比宽度,满屏。第一列浮在左上角,第二列浮在第一列右边。
单行三列
单行三列1:左右列都绝对定位(右列定位在右上)。左列和右列固定宽度,中间列自适应页面。
单行三列2:左列定位在左上,右列定位在右上,中间列浮在左列右面。左列和右列固定宽度,中间列自适应页面。
单行三列3:三列都绝对定位。左列和右列固定宽度,中间列根据内容自适应。
单行三列4(推荐):类似样式2,只是将margin: 20px属性增加在body样式中,解决了中间列在Netscape6.0中置顶的问题。
单行三列5:左右列绝对定位,中间列自适应。宽度满屏。
顶行三列
顶行三列1(推荐):顶行自适应页面宽度。左右列绝对定位,中间列自适应页面。
顶行三列2:宽度满屏

延伸阅读

文章来源于领测软件测试网 https://www.ltesting.net/


关于领测软件测试网 | 领测软件测试网合作伙伴 | 广告服务 | 投稿指南 | 联系我们 | 网站地图 | 友情链接
版权所有(C) 2003-2010 TestAge(领测软件测试网)|领测国际科技(北京)有限公司|软件测试工程师培训网 All Rights Reserved
北京市海淀区中关村南大街9号北京理工科技大厦1402室 京ICP备10010545号-5
技术支持和业务联系:[email protected] 电话:010-51297073

软件测试 | 领测国际 | ISTQB | ISTQB官网 | TMMi | TMMi认证 | 国际软件测试工程师认证 | 领测软件测试网