FDS's Blog » DIV+CSS http://blog.1xi.net 收藏和分享 Thu, 12 May 2011 06:33:30 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 CSS控制强制不换行/强制换行 http://blog.1xi.net/divcss/huanhang-2 http://blog.1xi.net/divcss/huanhang-2#comments Mon, 23 Mar 2009 02:19:12 +0000 fangds http://blog.1xi.net/?p=7520 CSS控制强制换行/强制换行

强制不换行
div{
white-space:nowrap;
}

自动换行
div{
word-wrap: break-word;
word-break: normal;
}

强制英文单词断行
div{
word-break:break-all;
}

]]> http://blog.1xi.net/divcss/huanhang-2/feed 2 IE6下定义height导致间距的一个问题，发出来体验一下 http://blog.1xi.net/divcss/ie6-height-jianju http://blog.1xi.net/divcss/ie6-height-jianju#comments Mon, 15 Dec 2008 14:21:18 +0000 fangds http://blog.1xi.net/?p=7397 IE6下的一个问题，体验一下，请注意了，在样式“.text”里面有个“height:36px;”，定义后，会导致两个容器存在差异，如果不定义，则正常，以下是代码部分，可以运行，在IE6下面试试看效果吧，注意背景色彩之间的距离。这是一个细节问题，发出来，分享一下。

提示：你可以先修改部分代码再运行。

]]> http://blog.1xi.net/divcss/ie6-height-jianju/feed 0 CSS背景颜色渐变效果 http://blog.1xi.net/divcss/css-jianbian-xiaoguo http://blog.1xi.net/divcss/css-jianbian-xiaoguo#comments Fri, 28 Nov 2008 05:06:17 +0000 fangds http://blog.1xi.net/?p=7338 CSS背景颜色渐变效果，是通过IE特有的滤镜来实现的，很多时候都有着非常重要的作用，但是火狐不能支持。

如：style=”filter:progid:DXImageTransform.Microsoft.Gradient
(startColorStr=’#FFFFFF’, endColorStr=’#3568CC’, gradientType=’0′)”

startColorStr 开始颜色
endColorStr 结束颜色
gradientType 渐变的方式：0-从上到下，1-从左到右

示例：

提示：你可以先修改部分代码再运行。

]]> http://blog.1xi.net/divcss/css-jianbian-xiaoguo/feed 2 z-index使用说明及示例 http://blog.1xi.net/divcss/z-index http://blog.1xi.net/divcss/z-index#comments Tue, 12 Aug 2008 02:58:20 +0000 FDS http://www.1xi.net/blog/?p=40 z-index是设置对象的层叠顺序的样式。该样式只对position属性为relative或absolute的对象有效。这里的层叠顺序也可以说是对象的“上下顺序”。
z-index在层叠的时候，很重要，特别是层的优先级的时候，只要用z-index定一个值，就可以根据你自己想要的顺序来显示效果。
语法：z-index : auto | number
auto : 默认值。可以不写。
number : 无单位的整数值。可为负数,当值为负数时，被指定元素将位于其父元素之下。数值越大，越靠前，反之亦然。

一个小例子：

提示：你可以先修改部分代码再运行。

]]> http://blog.1xi.net/divcss/z-index/feed 0 FF浏览shtml文件是源代码解决办法 http://blog.1xi.net/divcss/ff-shtml http://blog.1xi.net/divcss/ff-shtml#comments Thu, 31 Jul 2008 09:07:51 +0000 FDS http://www.1xi.net/blog/?p=39 下面介绍一下在各操作系统下或者说个版本IIS和Apache下配置shtml的方法：

1、在IIS5下配置shtml

IIS5一般存在于Windows 2000操作系统中，方法就是添加一个“应用程序扩展名映射”。
用程序“C:\WINDOWS\system32\inetsrv\ssinc.dll”来对应扩展名“shtml/shtm”就可以了。

2、在IIS6下配置shtml

IIS6一般存在于Windows 2003操作系统中，其实在IIS6已经默认支持shtml扩展名了。在 开始 -> 管理工具 -> Internet信息服务管理器 -> WEB服务扩展 -> 选择“在服务器端的包含文件” -> 设置为“允许”，然后打开“本地计算机”的属性 -> MIME类型 -> 新建后缀名：.shtml和.shtm、MIME类型：text/html就可以了。

3、在Apache下配置shtml

用文本编辑器打开httpd.conf文件
去掉
#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml
前面的注释#号

在Apache 2.0.6版本之前，添加
AddOutputFilter INCLUDES .shtml

在Apache 2.0.6版本之后
修改Options Indexes FollowSymLinks为
Options Indexes FollowSymLinks Includes

一般来说，FireFox下浏览shtml文件是源代码是因为“AddType text/html”配置的错误，只要按照上面的各种方法进行配置，就不会出现以上的问题了！

]]> http://blog.1xi.net/divcss/ff-shtml/feed 0 谈谈用CSS来定义IE6、IE7、FF几种浏览器的垂直居中 http://blog.1xi.net/divcss/line-height http://blog.1xi.net/divcss/line-height#comments Thu, 03 Jul 2008 02:19:48 +0000 FDS http://www.1xi.net/blog/?p=21 用CSS来定义剧中，只要定义line-height的高度和实际高度相等，就可以实现居中了，如：
h1{height:21px; line-height:21px;} 把height和line-height定义一样的高度就可以了。
通常这样在火狐和IE就可以实现垂直居中了，但通常，底部比上面要多出2-3个PX
看看下面的效果，用不同浏览器打开试试看。

提示：你可以先修改部分代码再运行。

]]> http://blog.1xi.net/divcss/line-height/feed 1 为什么定义链接的CSS样式，但是没有效果 http://blog.1xi.net/divcss/idclass http://blog.1xi.net/divcss/idclass#comments Tue, 01 Jul 2008 01:35:57 +0000 FDS http://www.1xi.net/blog/?p=20 我们用DIV+CSS设计时，可能偶尔会碰到这种情况，在定义了样式的链接样式后，其样式作用于页面时候，链接的样式缺始终不是预期的效果，经过仔细排查后，结果发现了上级的ID定义链接属性后，CLASS的链接样式无法启到作用。这涉及到一个优先级的问题。
示例：

提示：你可以先修改部分代码再运行。

如果你碰到类似问题，请查看是否ID和CLASS是否重复定义了链接属性。

]]> http://blog.1xi.net/divcss/idclass/feed 0 使用编辑器时，字体选择过大，导致字体重叠的解决办法 http://blog.1xi.net/divcss/font-size-7 http://blog.1xi.net/divcss/font-size-7#comments Fri, 27 Jun 2008 08:10:44 +0000 FDS http://www.1xi.net/blog/?p=19 网站页面设计时，会碰到使用编辑器时，字体选择过大，导致字体重叠，这里提供一个简单的解决办法。
在样式表里面定义一下font的样式
font{line-height:150%;}
这样不管字体多大，行高为字体高度的150%了。就不会再出现字体重叠了。

]]> http://blog.1xi.net/divcss/font-size-7/feed 0 用letter-spacing调整页面的字符间距 http://blog.1xi.net/divcss/letter-spacing http://blog.1xi.net/divcss/letter-spacing#comments Mon, 16 Jun 2008 04:03:18 +0000 FDS http://www.1xi.net/blog/?p=18 设计页面的时候，有时候调整下字符之间的距离，也可以让页面更加美观点。介绍一个用CSS来设置字符间距的方法：letter-spacing
例子：

提示：你可以先修改部分代码再运行。

]]> http://blog.1xi.net/divcss/letter-spacing/feed 0 给input的submit属性加上漂亮的背景图片 http://blog.1xi.net/divcss/submit http://blog.1xi.net/divcss/submit#comments Sun, 15 Jun 2008 09:38:00 +0000 FDS http://www.1xi.net/blog/?p=17 在做按钮的时候，怎么给按钮加上漂亮的背景图片呢，这里提供一种解决方法。
首先我们定义一个样式吧。
<code>
.bottom{border:none;background:url(../images/bottom.jpg) left top no-repeat;width:80px; height:24px; color:#fff; font-size:12px; display:block; line-height:24px;}
</code>
然后在写input的时候调用下样式就可以了，如：
<code>
<input type=”submit” class=”bottom”>
</code>
就可以了

]]> http://blog.1xi.net/divcss/submit/feed 1 页面设计时，IE7和火狐没问题，IE6浏览不正常的问题解决办法 http://blog.1xi.net/divcss/ie6-ie7-ff http://blog.1xi.net/divcss/ie6-ie7-ff#comments Fri, 13 Jun 2008 04:12:42 +0000 FDS http://www.1xi.net/blog/?p=15 在页面设计的时候，会碰到IE7和FF浏览都正常，而IE6却有些问题，甚至样式似乎不起作用，我总结了一下，主要有以下几点原因。
1、编码问题会造成IE6浏览样式丢失，这里主页是页面的编码和样式表的编码不同导致，可以把样式和页面都改成UTF-8或者ANSI，直接用记事本打开另存为，即可解决问题。
2、padding和margin问题，IE6下，这个属性，都会导致容器延伸，导致布局错位。可以把这些属性加在容器内部，这样只是在容器内部延伸，不会导致整个容器扩张。IE7和FF就不会出现这种问题
主要总结这两点问题，如果以后发现，再更新。

]]> http://blog.1xi.net/divcss/ie6-ie7-ff/feed 0 万能的float闭合，用来解决多个div对齐时的间距不对 http://blog.1xi.net/divcss/clear-float http://blog.1xi.net/divcss/clear-float#comments Fri, 06 Jun 2008 09:54:22 +0000 FDS http://www.1xi.net/blog/?p=14 万能的float 闭合，用来解决多个div对齐时的间距不对，将以下代码加入CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.

代码:

<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

]]> http://blog.1xi.net/divcss/clear-float/feed 0 什么是CSS hack？CSS hack是怎么写的？ http://blog.1xi.net/divcss/css-hack http://blog.1xi.net/divcss/css-hack#comments Fri, 06 Jun 2008 09:38:49 +0000 FDS http://www.1xi.net/blog/?p=13 什么是CSS hack？
由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
CSS hack是怎么写的？
请注意以下说明：
!important,火狐和IE7都能识别
*+html,目前只有IE7可以识别，而且需要顶部有以下代码申明：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”　”http://www.w3.org/TR/html4/loose.dtd”>
*html,IE6和IE7可以识别
_,IE6支持下划线，IE7和firefox均不支持下划线。
在写CSS hack的过程中，顺序特别要注意，最被广泛识别的，放最前面，其次是浏览器版本低的放其次。
个人推荐使用以下模式，如：
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>

]]> http://blog.1xi.net/divcss/css-hack/feed 0 用CSS实现拉动滚动条时固定网页背景不动 http://blog.1xi.net/divcss/gudingbeijing http://blog.1xi.net/divcss/gudingbeijing#comments Fri, 23 May 2008 07:20:31 +0000 FDS http://www.1xi.net/blog/?p=7 body{
        background-image: url(./inc/bgbk.jpg);
        background-attachment:fixed; 
}

]]> http://blog.1xi.net/divcss/gudingbeijing/feed 0 用CSS来实现多超过固定宽度用省略号代替 http://blog.1xi.net/divcss/shengluehao http://blog.1xi.net/divcss/shengluehao#comments Fri, 23 May 2008 07:18:02 +0000 FDS http://www.1xi.net/blog/?p=6 在完成一个网站时，因为要用到超过固定宽度时用省略号表示，有许多的方法都可以完成，但这都是要服务器付出代价的，那我们为何不用CSS来完成这样一个功能呢？看看下面的代码吧！

提示：你可以先修改部分代码再运行。

]]> http://blog.1xi.net/divcss/shengluehao/feed 1 用CSS来设置onmouseover和onmouseout事件 http://blog.1xi.net/divcss/onmouseover-onmouseout http://blog.1xi.net/divcss/onmouseover-onmouseout#comments Fri, 23 May 2008 07:14:44 +0000 FDS http://www.1xi.net/blog/?p=5 用CSS来设置onmouseover事件实例：

ul{
/*设置onmouseover事件*/
onmouseover: expression(onmouseover=function (){this.style.borderColor =’#cccccc’;this.style.color=’#ffffff’;this.style.backgroundColor =’#0099ff’});

/*设置onmouseout事件*/
onmouseout: expression(onmouseout=function (){this.style.borderColor=”;this.style.color=”;this.style.backgroundColor =”});
background-color:#ffffff;
}

这段代码实现的功能就是当鼠标移动到ul列表时,背景就会变成蓝色,文字变成白色,边框变成灰色.这种效果一般用在当用UL代替表格时,实现的当整行变换效果!

]]> http://blog.1xi.net/divcss/onmouseover-onmouseout/feed 3 用css来控制字间距和字母间距的方法 http://blog.1xi.net/divcss/word-spacing http://blog.1xi.net/divcss/word-spacing#comments Sat, 10 May 2008 07:55:56 +0000 FDS http://www.1xi.net/blog/?p=3 用css来控制字间距和字母间距的方法

利用CSS来定义字间距，你可以在字之间加入更多的距离：
如：

H3 { word-spacing: 1em }

你所使用的参数值将加入任何浏览器的默认设置，你可以使用下面的任何一种长度单位：

in （英寸）
cm （厘米）
mm （毫米）
pt （点数）
pc （打字机字间距）
em （ems）
ex (x-height)
px （象素）

以下为显示结果：

Behold the power of cheese.

]]> http://blog.1xi.net/divcss/word-spacing/feed 1