Hanyks's Blog - Studio

用div玩table

hanyks@163.com(hanyks) — Tue,24 Aug 2010 14:19:57 +0800

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

        rain.kx's

            *{padding:0;margin:0;}
            .va_m_box{display:table;width:700px;margin:50px auto;border:1px solid #000;border-spacing:4px;}

                .va_c{display:table-row;}
                    .va_r{display:table-cell;border:5px #ccc solid; background:#fff; padding:10px;vertical-align:middle;}

                .va_m_box ul{ display:table-row;}
                    .va_m_box li{ display:table-cell; border:5px #ccc solid; background:#fff; padding:10px;vertical-align:middle;}

            .va_m{width:700px;border-spacing:4px;margin:50px auto;border:1px solid #000;}
                .va_m td{border:5px #ccc solid; background:#fff;padding:10px; }

1. div

                文字啊....垂直居中吧!!!!!!!!!!!
文字啊....垂直居中吧!!!!!!!!!!!
文字啊....垂直居中吧!!!!!!!!!!!
                文字啊....垂直居中吧!!!!!!!!!!!

2. div+ul

文字啊....垂直居中吧!!!!!!!!!!!
文字啊....垂直居中吧!!!!!!!!!!!
文字啊....垂直居中吧!!!!!!!!!!!

文字啊....垂直居中吧!!!!!!!!!!!

3. table

                文字啊....垂直居中吧!!!!!!!!!!!
文字啊....垂直居中吧!!!!!!!!!!!
文字啊....垂直居中吧!!!!!!!!!!!
                文字啊....垂直居中吧!!!!!!!!!!!

base 标签

hanyks@163.com(hanyks) — Thu,12 Aug 2010 11:07:53 +0800

标签为页面上的所有链接规定默认地址或默认目标。

如

div+css之上下居中

hanyks@163.com(hanyks) — Tue,20 Oct 2009 15:29:24 +0800

vertical-align:middle;

firefox 与 ie对于CSS的解析

hanyks@163.com(hanyks) — Wed,08 Jul 2009 11:14:46 +0800

　　其实，以前从来没有接触过CSS相关的内容，都是在做业务的编程，从来没想过前台页面的设计也能如此复杂。这次项目的开过过程中，作为CSS菜鸟的我也接触到CSS的相关设计。所出现的低级问题和浪费很多时间的状况也层出不穷，所以通过各方搜索和自己的实际学习中总结出几点IE和Firefox对CSS的区别，给大家借鉴。

　　首先，大家都知道，IE和Firefox针对于核模型的解析就不一样，自然会产生很多让人挠头的问题，以下就是我的经验总结：

　　1.高度的区别

　　IE:在没有定义高度时候，将根据内容高度的变化，包括未定义高度的图片内容；

　　在定义了高度时候，当内容超过高度时，将使用实际内容的高度。

　　FF:在没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；

　　在当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。

　　建议：在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，尽量不用使用边框样式。

　　2.宽度的区别

　　IE:内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度。

　　 IE中定义 width:100px;padding:5px 的话，所显示的宽度就是100px。

　　FF:容器占的宽度=内容宽度+padding宽度+border宽度。

　　 Firefox中定义 width:100px;padding:5px 的话，所显示的宽度就是105px。

　　建议：使用 !important；但是，!important一定要在前面。

　　如：width:95px !important;width:100px;padding:5px;。

　　注：高度亦是如此！

　　3.浮动（float）的区别

　　（1）空格处理

　　IE:对于DIV并排时候使用float关键字时候，IE对块与块之间的空格是处理的。

　　FF:对于DIV并排时候使用float关键字时候，Firefox对块与块之间的空格是不处理的。

　　建议：经常发现使用float关键字时候在Firefox显示正常，但是在IE中会出现空格，就是这个原因；

　　避免在div连div时候添加空格或者回车，也即是一个div紧接这一个div写；

　　或者，将div放入li中进行处理，这样就不会有空格的问题。

　　（2）Margin加倍

　　IE:在使用float的情况下，IE的margin加倍。

　　FF:正常显示。

　　建议：针对IE，添加display:inline;

　　相应的css为
　　#float{
　　float:left;
　　margin:5px;/*IE下理解为10px*/
　　display:inline;/*IE下再理解为5px*/
　　}

　　4.鼠标位置处理

　　IE:获取事件鼠标位置时，IE用的是event.x和event.y，并且值在不加单位的情况下可以直接使用,IE提供默认单位；

　　 div.style.left = event.x

　　 div.style.top = event.y

　　此时，div显示的位置为鼠标的位置。

　　FF:获取事件鼠标位置时，Firefox用的是MouseEvent.pageX和MouseEvent.pageY，并且在不加单位的情况下直接赋值后，无效；必须添加单位。

　　 div.style.left = MouseEvent.pageX

　　 div.style.top = MouseEvent.pageY

　　此时，div显示的位置为0，0.

　　建议：都添加单位,无论针对IE或者Firefox都有效。

　　 IE：div.style.left = event.x+'px'
　　 div.style.top = event.y+'px'
　　 FF：div.style.left = MouseEvent.pageX+'px'
　　 div.style.top = MouseEvent.pageY+'px'

　　针对IE与Firefox这些不同，解决方案可以有多种，但是当问题直接解析模型的不同的时候，我们只能分别针对浏览器的不同而单独写针对于浏览器的方法。这也是写精致CSS所必须懂得的。

　　以上纯属个人愚见，希望对新学CSS的同学有所帮助。

CSS控制滚动条滚动背景不跟随滚动

hanyks@163.com(hanyks) — Mon,06 Jul 2009 14:38:34 +0800

body{
background-attachment:fixed;
}

设为首页代码大全

hanyks@163.com(hanyks) — Fri,26 Jun 2009 16:01:47 +0800

设为首页代码
把以下代码相应位置
http://www.cosplay8.com');" style="CURSOR: hand">设为首页

强制设为首页代码

鼠标指向时提示设为首页

将下列代码插入区中：

http://www.cnzz.cc/" onmouseover="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.cosplay8.com');" target="_blank">设为首页

打开页面时自动弹出窗口询问是否设为首页
将以下代码放在之间：

function myhomepage(){
this.homepage.style.behavior='url(#default#homepage)';this.homepage.sethomepage('http://www.cosplay8.com');
}

http://www.cosplay8.com" name="homepage"
onclick="myhomepage();">

再将下面代码加入内：

onload="myhomepage();"
即：

离开时自动提示设为首页

http://www.cnzz.cc')))BASEBody.setHomePage('http://www.cosplay8.com');">

FireFox 3 对CSS解析的18项改善:

hanyks@163.com(hanyks) — Tue,23 Jun 2009 16:36:38 +0800

Display属性的inline-block和inline-table已经被支持
font-size-adjust属性已经可以在全部平台上使用(之前值支持Windows)。
rgba()和hsla()这两种色彩描述方式已经可以在color属性中使用
开始支持:default伪类
-moz-max-content, -moz-min-content, -moz-fit-content和-moz-available 已经加入到Width,min-width,max-width属性中
HTML的软联字符()已经被支持
在等宽字符的环境内,预格式化tabs在FF3内可以工作得更好(依据CSS2.1规范)
ime-mode已经被支持
text-rendering已经被支持.
-moz-border-*-start and -moz-border-*-end等CSS属性已经被支持
-moz-initial 已经可以在全部的CSS属性内使用 (除 quotes 和 -moz-border-*-colors 之外)
window.getComputedStyle()支持所有被支持的CSS属性
无内容的content已被支持
空关标属性cursor:none已被支持.
背景图在 -moz-border-radius 下已经可以被正确的裁剪.
white-space属性已经支持pre-wrap.
选择器类似first-child,:only-child,:last-child,:empty和 + 号连接符可以被动态更新.
z-index的负值已被支持.

CSS 文本自动加省略号

hanyks@163.com(hanyks) — Tue,10 Mar 2009 11:27:42 +0800

/*body{
font-size:12px;
line-height:22px;
}
li {
  width:200px;
  white-space:nowrap;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  overflow: hidden;
  }
/*]]>*/

文本溢出自动省略测试文本溢出自动省略测试

文本溢出自动省略测试

文本溢出自动省略测试文本溢出自动省略测试

文本溢出自动省略测试文本溢出自动省略测试

文本溢出自动省略测试

使css兼容IE8的小技巧

hanyks@163.com(hanyks) — Sat,21 Feb 2009 22:26:19 +0800

IE8 Beta1已出，其中我们能看到很多的新特性，如layout引擎将“完全”支持CSS2.1和HTML 5，所以和之前IE浏览器所使用的Layout引擎并不相同，之前的IE浏览器并不完全符合互联网标准。

这样就存在了新的问题，目前在IE7中工作正常的网页在IE8中会出现问题。
微软在IE8提供三种解析页面的模式
　　IE8 Standard Modes ：默认的最标准的模式，严格按照W3C相关规定
　　IE7 Standards Modes ：IE7现在用的解析网页的模式，开起机关是在中加入
　　Quirks Modes ：IE5用的解析网页的模式，开起机关是删除HTML顶部的DOCTYPE声明
　　注意：不同模式间的网页在IE8中可以互相 frame ，因此因不会模式下的DOM和CSS渲染不一样，所以会引发很多问题，务必注意
如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：

使用一张PNG图片制作整个网站的样式..

hanyks@163.com(hanyks) — Fri,20 Feb 2009 17:15:37 +0800

背景图片定位样式
.Searchnav{
    BACKGROUND: url(../UIimages/wmz-mainbg.png) no-repeat;
                width:955px;
                MARGIN:auto;
                BACKGROUND-POSITION: left -182px;height:33px;
}

语法：
background-position : length || length
background-position : position || position
取值：
length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position  : top | center | bottom | left | center | right

说明：
设置或检索对象的背景图像位置。必须先指定 background-image 属性。
该属性定位不受对象的补丁属性( padding )设置影响。
默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。
如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。
对应的脚本特性为 backgroundPosition 。
示例：
div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }
a { background: url("images/aardvark.gif"); background-position: 3.25in; }
body { background: url("images/aardvark.gif"); background-position: top right; }