logo

需要掌握的八个CSS布局技巧

2007/6/17 23:16:10 | Tag: CSS | Hits: 1432 | Comments: 0

1.若有疑问立即检测

在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用,请见 http://validator.w3.org 。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。

2.使用浮动功能时记得适当清除指令 

浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。请参阅Eric Meyer 在Complex Spiral Consulting Web 网站上的教学。

3.边界重合时利用padding或bord

CSS实现完美垂直居中

2006/12/26 14:18:58 | Tag: CSS, 垂直居中 | Hits: 1336 | Comments: 0

    之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子,看来对此的需求还不少。现在就把我经验拿出来分享一下,希望大家鼓鼓掌。

    首先,要有一个概念:凡是 table 布局可以实现的,CSS 一定可以实现。CSS 可以实现的,table 未必能做到。

现在来几个例子:

一、单行内容的居中
只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-he

10个你未必知道的CSS技巧 

2006/12/20 13:19:02 | Tag: CSS | Hits: 1275 | Comments: 0

1.CSS字体属性简写规则
一般用CSS设定字体属性是这样做的:

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

但也可以把它们全部写到一行上去:

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weig

CSS之强制换行

2006/12/12 12:17:47 | Tag: CSS, 换行 | Hits: 1288 | Comments: 0

    在网页中连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法!

对于div

1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。

#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}

eg.
<div id="wrap">ddd1111111111111111111111111111111111111111111111111111111111111111111&l

一些常用的web标准(CSS)

2006/7/3 10:23:04 | Tag: CSS | Hits: 1453 | Comments: 0

数月来学习web标准,并遵循标准设计和制作web页面。一直想写点什么,整理一下自己的心得体会。写这篇文章,主要是针对中文排版设计,英文排版因为很少做,所以不涉及。

先介绍如何设定字体、颜色、大小、段落空白等比较简单的应用,后面再介绍下比如首字下沉、首行缩进。最后讲一些常用的web页面中文排版,比如中文字的截断、固定宽度词内折行(word-wrap和word-break)等等。因为只是写一些应用方面的心得,如果需要完整的CSS属性介绍,请参考CSS手册。

1、如何设定文字字体、颜色、大小 —— 使用font

font-style设定斜体,比如font-style: italic;
font-weight设定文字粗细,比如font-weight: bold;
font-size设定文字大小

Copyright 2013 © SkyIMG.cn. All Rights Reserved. | 京ICP备05063919号