酷款网页设计 网络推广

CSS之自动换行

大家都知道连续的英文或数字总是把容器撑大，不能根据容器的大小自动换行

对于div

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

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

效果：可以实现换行

2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

#wrap{white-space:normal; width:200px; overflow:auto;}

CSS解决图片下面有空隙的简单方法

在用CSS制作网页过程中可能会碰到图片下面有空隙的问题，最为简单的解决方法是：

在图片的css中加 vertical-align:bottom;


演示代码： 以下是引用片段：
[quote]

经常用到的CSS元素

文本排版

行高：line-height:150%

首行缩减：text-indent:2em;

自动裁剪对象（不允许超过对象本身）：overflow:hidden

自动裁剪后对象后面字符处理成声乐符号：text-overflow:ellipsis;

强制不换行：word-break:keep-all;

强制换行：word-break:break-all; word-warp:warp;

首字符下沉：p:first-letter;

链接文本取消样式：text-decoration:none

将文本设置成方块：display:block

取消父级设定的样式：font-weight:normal

布局排版

对象内补丁：padding:10px; 按顺细上右下左

对象外补丁：margin:10px; 按顺细上右下左

对象浮动对其：float:left

捷足先登学用CSS：HTML结构化

原文：The Early Bird Catches the CSS: Planning Structural HTML
原作者：Virginia DeBolt
翻译：阿捷 w3cn.org
原文发表时间：2004年

你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：

第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。

另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。

float:none|left|right
取值：
none: 默认值。对象不飘浮
left: 文本流向对象的右边
right: 文本流向对象的左边

它是怎样工作的，看个一行两列的例子
xhtml:

CSS:
#wrap{width:100;height:auto;}
#column1{float:left;width:40;}
#column2{float:right;width:60;}
.clear{clear:both;}

position:static|absolute|fixed|relative
取值：

使用overflow:visible:hidden:auto:scroll

　　参考语法：

　　overflow : visible | auto | hidden | scroll

　　参数：

　　visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
　　auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
　　hidden : 　不显示超过对象尺寸的内容
　　scroll : 　总是显示滚动条

　　说明：

　　检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
　　设置textarea对象为hidden值将隐藏其滚动条。
　　对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidde

　　三栏布局是最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。

　　绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。

　　基本方法

　　基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充(padding)属

li和ul标签的用法

LI代码的格式化:

A).运用CSS格式化列表符：

以下是引用片段：
ul li{
list-style-type:none;
}

B).如果你想将列表符换成图像，则：

以下是引用片段：
ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}

C).为了左对齐，可以用如下代码：

以下是引用片段：
ul{
list-style-type:none;
margin:0px;
}

D).如果想给列表加背景色，可以用如下代码：

以下是引用片段：
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;

Blentrans属性

CSS中的混合转换滤镜blendtrans。

　　滤镜效果

　　使用方法 请单击这里使文字淡出，再次单击后可以使文字逐渐出现。

　　我们为这段文字加上的逐渐淡出的多媒体效果。

　　看到了吗？这是一种淡入淡出的效果。让我们来看一下而这种效果用到的转换属性
blendtrans的语法：

　　Filter：BlendTrans（duration=淡入或淡出的时间，以秒作单位)

　　我们看到了BlendTrans属性只有一个属性值duration，它指定了对象淡入淡出的时
间。

　　上面的例子的源代码如下所示：