公司简介

北京网站制作之css技巧总结

时间:2014-01-24 15:15:20 来源:莆田擎天网络 作者:莆田擎天网络 点击:1391

    1、同时使用两个class

    通常我们只为属性指定一个class,但这并不等于你只能指定一个,实际上,你想指定多少就可以指定多少,例如:

    通过同时使用两个 class(使用空格而不是逗号分割),这个段落将同时应用两个class中制定的规则。如果两者中有任何规则重叠,那么后一个将获得实际的优先应用。

    2、将块元素居中

    假设你的网站使用了固定宽度的布局,所有的内容置于屏幕中央,可以使用以下的css:#content {

    width: 700px;

    margin: 0 auto;

    }

    你可以把html的body之内任何项目置于

中,该项目将自动获得相等的左右边界值从而保证了居中显示。不过,这在IE6之前版本的浏览器中仍然有问题,将不会居中,因此必须修改如下:

    body {

    text-align: center;

    }

    #content {

    text-align: left;

    width: 700px;

    margin: 0 auto;

    }

    对body的设定将导致主体内容居中,但是连所有的文字也居中了,这恐怕不是你想要的效果,为此#content 的div还要指定一个值:text-align: left.

    3、图片替换的技巧

    使用标准的html而不是图片来显示文字通常更为明智,除了加快下载还可以获得更好的可用性。但是如果你决心使用访问者的机器中可能没有的字体时,你只能选择图片。

    举例来说,你想在每一页的顶部使用“Buy widgets”的标题,但你同时又希望这是能被搜索引擎发现的,为了美观你使用了少见的字体那么你就得用图片来显示了:

   

“Buy

    这样当然没错,但是有证据显示搜索引擎对真实文本的重视远超过alt文本,因此,我们得用另一种方法:

    Buy widgets

,那你的漂亮字体怎么办呢?下面的css可以帮上忙:

    h1 {

    background: url(widget-image.gif) no-repeat;

    }

    h1 span {

    position: absolute;

    left:-2000px;

    }

    现在你既用上了漂亮的图片又很好的隐藏了真实文本--借助css,文本被定位于屏幕左侧-2000像素处。

    4、使用 line-height 垂直居中

    line-height:24px;

    使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致)。

    5、border的默认值

    当编写一条边框的规则时,你通常会指定颜色、宽度以及样式(任何顺序均可)。例如:border: 3px solid #000(3像素宽的黑色实线边框),其实这个例子中唯一需要指定的值只是样式。假如你指定样式为实线(solid),那么其余的值将使用默认值:默认的宽度为中等(相当于3到4像素);默认的颜色为边框里的文字颜色。如果这正是你想要的效果,你完全可以不在css里指定。

    6、清除容器浮动

    #main {

    overflow:hidden;

    }

    7、使用css实现垂直居中

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

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

    8、不让链接折行

    a {

    white-space:nowrap;

    }

    上面的设定就能避免链接折行,不过个人建议长链接会有相应的这行。

闽公网安备 35030202000250号 闽ICP备05009633号