资讯专栏INFORMATION COLUMN

一列布局

lykops / 1828人阅读

摘要:一一列布局一列布局多用于网站的首页,比如搜索,一列布局的结构简洁明了,主题突出,适合排列简单的内容,不适合多行内容,通常一列布局都是固定宽度的。页头主体内容页脚二单列宽度自适应布局。一列自适应布局在实际开发中不设置列的高度,让高度自适应。

一、一列布局
一列布局多用于网站的首页,比如360搜索,一列布局的结构简洁明了,主题突出,适合排列简单的内容,不适合多行内容,通常一列布局都是固定宽度的。




    
    一列布局




主体内容

二、单列宽度自适应布局。
要想宽度自适应,只需要按照百分比来设置宽度,内容就可以根据浏览器窗口自动调节大小。




    
    一列自适应布局




主体内容

三、自适应单列布局





单列布局


主体
内容

原文地址:http://www.cnblogs.com/Mtime/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111821.html

相关文章

  • CSS 常用的定位和布局方法汇总(已添加源码地址)

    CSS-Layout 旨在打造详尽的前端布局代码学习库(自从用了框架开发,CSS生疏了不少,所以开这个库练练手)SF不能正确解析含有中文的网址,所以某些预览链接无法跳转,请访问我的博客阅读此文 常见定位方法 水平居中 子元素为行内元素还是块状元素,宽度一定还是宽度未定,采取的布局方案不同。 方案选择基本思路:子元素为 行内元素:对父元素设置text-align:center; 定宽块状元素: 设...

    loonggg 评论0 收藏0
  • CSS基础篇--页面实现两列布局一列固定宽度,一列宽度自适应方法

    摘要:不管是左是右,反正就是一边宽度固定,一边宽度自适应。博客园的很多主题也是这样设计的,我的博客园博客也是右侧固定宽度,左侧自适应屏幕的布局方式。与配合使用首先我们调整一下结构自适应区固定宽度区代码这样实现,的实际宽度就是屏幕宽度。 我在前面有一篇文章《CSS基础篇--可扩展性的页面布局》中介绍了如下三种布局方式:1.左右结构,左边100%;右边宽度固定2.左右结构,左边固定,右边100%...

    RichardXG 评论0 收藏0
  • CSS多列布局

    摘要:优点加速渲染,实现布局优先缺点代码量大,复杂加速渲染,实现布局优先优点结构简单缺点兼容性差,性能不好,常用作小范围布局多列定宽一列自适应大家来看看想要达到的效果其实只是在上面的布局上,中间再加入一个。 转自个人博客 需要注意的是:本篇文章的布局,都未对父元素进行清除浮动的操作,所以在有一些使用了float的布局中,需要在parent容器清除浮动,才能在实际情况下使用。(清除浮动的方...

    binta 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<