`
yiminghe
  • 浏览: 1460134 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

css列布局整理

阅读更多

对一些经典的布局进行整理,以及修改去除不必要的hack,兼容 gecko,ie6,7,webkit


1。经典负边距布局效果


演示


2.eric 的不依赖DOM结构的灵活 布局


演示

 

3.经典等高列


演示

 

4.修改版等高列的圣杯布局

去除大量的针对 ie hack,以负边距和相对定位重新定位列


演示


5.伪绝对定位布局


演示


6.五列伪绝对定位布局变体


演示

 

 

7.09暑期实习某互联网公司笔试题

出的不错!


描述:

设计师交给A去实现一个布局,这个布局由三列等高的区域组成,左栏的宽度为40%-102px,中栏的宽度为200px,右栏的宽度为60%-102px。左中栏、右中栏之间的间隔均为2px。

一开始A觉得实现这样的布局根本不用花费什么功夫,可是具体实现的时候,却发现远没有想象中那么简单。Web标准、浏览器兼容性……各种需要考虑的细节都让A觉得自己陷入了麻烦之中。


效果:
演示@google code

 

源码出处

 


1
0
分享到:
评论

相关推荐

    DIV+CSS布局技巧整理集合

    ### DIV+CSS布局技巧整理集合 #### 命名规范 在进行网页设计时,合理的命名不仅能够提高代码的可读性,还能帮助其他开发者更好地理解网页结构。以下是一些常用的命名规范: - **页头**:`header` - **登录条**:`...

    DIV+CSS网页布局常用的一些基础知识整理

    - `float`属性允许元素向左(`left`)或向右(`right`)浮动,常用于创建多列布局。但需注意清除浮动,避免影响其他元素的布局。 5. **响应式设计** - 针对不同设备和屏幕尺寸,使用媒体查询(Media Queries)来...

    div+css网页标准版式布局整理自www.aa25.cn

    本资源"div+css网页标准版式布局整理自www.aa25.cn"提供了40个不同的布局示例,包括20个绝对布局和20个自适应布局,是初学者学习网页布局的理想资料。 1. `div`元素:`<div>`是HTML中的一个块级元素,代表一个分区...

    div+css网页标准版式布局【整理自www.aa25.cn】

    本资源"div+css网页标准版式布局【整理自www.aa25.cn】"提供了关于如何构建高效且响应式的网页布局的详细指导,包括文档和源代码,帮助开发者深入理解和应用这一技术。 首先,让我们了解什么是Div。Div,全称...

    css教程(整理的)

    9. **CSS3新特性**:介绍CSS3的新功能,如阴影、渐变、动画、多列布局、过渡和变换等,提升网页的视觉效果。 10. **实践应用**:提供实战案例,让学习者通过实际操作巩固理论知识,比如创建一个完整的网页布局。 ...

    div+css布局大全教程 pdf格式

    浏览器兼容性问题整理.doc文档可能包含了关于如何处理不同浏览器对div+css支持不一致的策略。因为每个浏览器对CSS的解析和实现可能存在差异,开发者需要了解这些差异并采取相应的兼容性解决方案,如使用前缀(-...

    [精通DIV.CSS网页样式与布局].何丽.扫描版

    5. **CSS3新特性**:包括渐变、阴影、过渡、动画、多列布局、媒体查询等,这些是现代网页设计不可或缺的部分。 6. **响应式设计**:讨论了如何利用CSS3的媒体查询适应不同设备和屏幕尺寸,实现跨平台的网页设计。 ...

    Css跨浏览器的一些整理

    标题"Css跨浏览器的一些整理"提示我们关注的是如何解决CSS在不同浏览器间的兼容性问题。在描述中提到了一个具体的例子:在Firefox下,使用`display: inline`可能会导致显示异常,而通过改用`display: table`、`...

    自己整理的网页特效CSS+DIV

    5. **CSS3新特性**:如阴影、渐变、边框半径、多列布局、背景图片裁剪等,为网页特效提供了更多可能性。 6. **CSS预处理器**:如Sass、Less等,它们扩展了CSS的功能,让编写更高效和模块化。 7. **HTML5的语义化...

    CSS,CSS3基础

    3. **多列布局**:column-count、column-gap和column-fill等属性让创建报纸般的多列布局变得简单。 4. **定位与布局**:flexbox(弹性盒模型)和grid(网格布局)提供了更灵活的布局方式,适应不同屏幕尺寸和设备。...

    精心整理七个DIV+CSS实例教程

    - 浮动布局(`float`):常用于创建多列布局,但可能会有清除浮动的问题。 - 盒模型布局(`display: block`,`inline-block`,`flexbox`,`grid`):现代浏览器支持的更灵活布局方式,特别是`flexbox`和`grid`,...

    css3.0参考手册(腾讯技术团队整理).chm

    3. **多列布局**:通过`column-count`、`column-gap`和`column-width`等属性,CSS3提供了更灵活的多列布局方案,为传统流式布局提供了替代方案。 4. **Flexbox布局**:CSS3引入了弹性盒模型(Flexbox),通过`...

    html5和css3 教程整理并附stunning css3 源码.part1

    CSS3则是层叠样式表的第三次重大更新,带来了丰富的样式选择器、多列布局、边框和背景的新特性,以及动画和过渡效果。例如,`:nth-child()`选择器使得我们可以基于元素在父元素中的位置应用样式,媒体查询(@media)...

    web前端开发中常见的多列布局解决方案整理(一定要看)

    在Web前端开发中,多列布局是构建复杂网页结构的关键技术,它允许页面根据需要展示多个分类的内容。本文主要探讨了三种常见的多列布局解决方案:两列定宽加一列自适应、多列不定宽加一列自适应以及多列等分布局。 ...

    精选国外15个CSS框架整理.pdf

    标题中的“精选国外15个CSS框架整理.pdf”指的是一个包含15个流行且在国外广泛使用的CSS框架的资源集合。这些框架旨在简化网页设计过程,提高开发效率,并确保跨浏览器的兼容性。以下是对其中一些框架的详细说明: ...

    CSS 笔记整理好的.zip

    - **浮动布局**:`float`属性常用于创建多列布局,但存在一些局限性,如父元素高度塌陷问题。 - **定位**:`position`属性(static、relative、absolute、fixed)用于元素的定位,其中绝对定位和固定定位可实现...

    常用CSS工具类

    在网页开发过程中,CSS(Cascading Style Sheets)起着至关重要的作用,它负责定义页面的布局、样式和视觉效果。为了提高开发效率,避免重复编写相同的CSS代码,开发者通常会使用一系列预设的CSS工具类。这些工具类...

    CSS从入门到精通经典整理收集.rar

    用户可以通过查阅这个手册了解新的特性和用法,比如阴影效果、渐变、多列布局、媒体查询等,这些都是CSS3的重要组成部分,极大地丰富了网页设计的可能性。 3. **CSS2.1完全参考手册.chm**:CSS2.1是CSS规范的一个...

    CSS重点知识点整理.docx

    - **应用场景**:创建多列布局或实现文字环绕图片的效果。 #### 2.2 盒子模型的百分比布局 - **特点**:使用百分比作为元素宽度或高度的单位,使得布局更加灵活。 - **适用场景**:响应式设计,使页面在不同屏幕...

Global site tag (gtag.js) - Google Analytics