templates

Web布局连载——两栏固定布局(五)

在上一篇《Web布局连载——两栏固定布局(四)》中留了一个下文,“No div, no float, no clear, no hack”。看起来很有意思,这种没有div,没有float,没有清除浮动和没有hack的布局,还是看到的少数,当然除了 table布局。因为table布局是不需要使用前面说的几个部分。那么今天我们要讲的布局是不是table布局呢?欲想知道,那就一起随着往下看吧。

Web布局连载——两栏固定布局(三)

  1. Web布局连载——两栏固定布局(一)
  2. Web布局连载——两栏固定布局(二)

Web布局连载——两栏固定布局(二)

在《Web布局连载——两栏固定布局(一)》中,使用了两种不同的结构,配合不同的CSS浮动方法,实两了两种最为常见和最基础的两栏固定布局效果:侧栏在左边,主内容在右边(demo1,demo3),主内容在左边,侧栏在右边(demo2,

Web布局连载——两栏固定布局(一)

CSS布局是一个很老的话题了,网上这方面的教程可以说是随处可见,本站前面也有一些相关的布局教程,但都是一些特殊的,比如说《等高布局》、《左定宽度右边自适应的等高布局》、《960网格布局》、《固定footer布局》和《中间固定两边自适应布局》等等。

CSS3 Media Queries模板

最早在《CSS3 Media Queries》一文中初探了CSS3的媒体类型和媒体特性的相关应用。简单的知道了使用这个能在各种不同的设备显示不一样的样式风格。随着Responsive的响应式设计的兴起,前面跟大家一起学习了:

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧:

  1. 左侧固定宽,右侧自适应屏幕宽;
  2. 左右两列,等高布局;
  3. 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高)
  4. 要求不用JS或CSS行为实现;

仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事:

CSS布局——960gs

说起CSS的布局,有太多了,现在常见的有固定布局流体布局弹性布局,有关于这三种常见的布局,在《Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?》一文中做出了详细的对比介绍,而且Matthew James Taylor也给我们制作了很多个这方面的实例,大家还可以看看Float-less CSS layout带来的这三个类型的布局效果。随着CSS3Media Queries出现,给我们的布局带来一种全新的体验——适应于多媒价的布局响应

如何将页脚固定在页面底部

作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部,换句话说,就是当内容只有一点点时,Web页面显示在浏览器底部,当内容高度超过浏览器高度时,Web页面的footer部分在页面的底部,总而言之Web页面的footer部分永远在页面的底部,换句说,Footer部分永远沉底。如下图所示:

那么今天主要和大家一起学习如何将页脚固定在页面的底部?

八种创建等高列布局

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了。但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情。

页面

返回顶部