不支持Flash

进阶:网页CSS样式表设计十条技巧(3)

http://www.sina.com.cn 2007年03月27日 09:18 天极yesky

  8.使用css实现垂直居中

  垂直居中对表格来说是小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用。假设你将一个导航菜单的高度设为2em,然后在css中指定垂直对齐的规则,文字还是会被排到盒的顶部,根本没有什么区别。

  要解决这一问题,只需将盒的行高设为与盒的高度相同即可,以这个例子来说,盒高2em,那么只需在css中再加入一条:line-height: 2em 就可实现垂直居中了!

  9. 容器内的css定位

  css的最大优点之一就是可以将对象定位在文档的任何位置,同样的也可以将对象在某容器内进行定位。只需要为该容器添加一条css规则:

以下是引用片段:
  #container
  {
  position: relative;
  }

  则容器内的任何元素的定位都是相对于该容器的。如果想将navigation定位在容器内离左边界30像素,离顶部5像素,可以使用以下css语句:

以下是引用片段:
  #navigation
  {
  position: absolute;
  left: 30px;
  top: 5px;
  }

  10.延伸至屏幕底部的背景色

  css的缺点之一是缺乏垂直方向的控制,从而导致了一个表格布局不会遇到的问题。假设你在页面的左侧设定了一列用于放置网站的导航。页面为白色背景,但你希望导航所在的列为蓝色背景,使用以下css即可:

以下是引用片段:
  #navigation
  {
  background: blue;
  width: 150px;
  }

  问题在于导航项不会一直延伸到页面的底部,自然它的背景色也不会延伸到底部。于是左列的蓝色背景在页面上被半路截断,浪费了你的一番设计。怎么办呢?很不幸我们现在只能用欺骗的办法,即将body的背景指定为与左列同颜色同宽度的图片,css如下:

以下是引用片段:
  body
  {
  background: url(/blue-image.gif) 0 0 repeat-y;
  }

  背景图应为宽150像素的蓝色图片。这一办法的缺点是没法使用em来指定左列的宽度,当用户改变文字的大小导致内容的宽度扩张时,背景色的宽度不会随之改变。

  到写这篇文章为止这是对这类问题的唯一解决办法,因此你只能为左列使用像素值来获得能够自动延伸的不同的背景色。

[上一页] [1] [2] [3]

本文导航:
·网页CSS样式表设计十条技巧
·网页CSS样式表设计十条技巧(2)
·网页CSS样式表设计十条技巧(3)

发表评论
爱问(iAsk.com)
不支持Flash
 
不支持Flash
不支持Flash