1、右边的“搜索功能”能帮助您更快到达内容 !
2、原创+网摘,与您分享最精彩的互联网资源 ~ 奇趣网络应用 & 新奇实用软件下载 !
3、admin@tommyhu.cn QQ:258546962
2、原创+网摘,与您分享最精彩的互联网资源 ~ 奇趣网络应用 & 新奇实用软件下载 !
3、admin@tommyhu.cn QQ:258546962
Mar
12
JS+CSS实现多张图片缩略预览效果,实现类似诸多购物网站产品图片预览的效果,推荐星级三星,要的下载了,解压密码:tommyhu.cn

下载文件 (已下载 6 次)
CSS常用小技巧:
1、使用border-collapse实现表格单线边框
<table width="300" border="1" cellpadding="0"
cellspacing="0" bordercolor="#FF0000"
style="border-collapse:collapse;">
2、css自动截取字符串
<style>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;
border-top:4px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
<div class="test">DIV+CSS模板、后台模板、图片图标下载,
CSS代码实例、CSS导航菜单、CSS图表,这后面的将省略为……显示
</div>
下载文件 (已下载 6 次)CSS常用小技巧:
1、使用border-collapse实现表格单线边框
<table width="300" border="1" cellpadding="0"
cellspacing="0" bordercolor="#FF0000"
style="border-collapse:collapse;">
2、css自动截取字符串
<style>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;
border-top:4px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
<div class="test">DIV+CSS模板、后台模板、图片图标下载,
CSS代码实例、CSS导航菜单、CSS图表,这后面的将省略为……显示
</div>
[
阅读全文]
阅读全文]
Mar
12
Mar
12
今天在公司看到一个来参观的人背了个这样的包,不错的说,哥也要淘一个,哈!




采用轻质材料,人体工学设计,使用方便,背挎舒适
主隔间可放置目前所有ThinkPad系列笔记本电脑,并有安全搭扣,确保笔记本电脑更安全,
同时还设有文件隔间,方便您放置每日所需文件、活页夹等。
文件隔间设有文件夹,可以放置文件、报纸、杂志等物品
最前面的拉链隔间配有笔架环、名片夹和钥匙挂环,还可放置电源等移动配件和其他杂物;
左侧边袋配有耳机线缆孔。
右侧配有一个网格式水壶袋
双肩背带上配有可拆卸式手机袋
适用于目前所有ThinkPad系列笔记本电脑
产品外形尺寸 : 33x16.5x40cm
重量 :1.06kg
颜色:黑色
采用轻质材料,人体工学设计,使用方便,背挎舒适
主隔间可放置目前所有ThinkPad系列笔记本电脑,并有安全搭扣,确保笔记本电脑更安全,
同时还设有文件隔间,方便您放置每日所需文件、活页夹等。
文件隔间设有文件夹,可以放置文件、报纸、杂志等物品
最前面的拉链隔间配有笔架环、名片夹和钥匙挂环,还可放置电源等移动配件和其他杂物;
左侧边袋配有耳机线缆孔。
右侧配有一个网格式水壶袋
双肩背带上配有可拆卸式手机袋
适用于目前所有ThinkPad系列笔记本电脑
产品外形尺寸 : 33x16.5x40cm
重量 :1.06kg
颜色:黑色
Mar
12
什么是 haslayout ?
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)
[
阅读全文]
阅读全文]
Mar
10
本帖由牵手网会员“安庆塔影横江”发布
春节过后,天气忽冷忽热,今天苏州终于放晴了,早上是有冰冻的,只是一天的阳光让人欣慰,许是要放晴了吧,一年的春天终于是要来到了,油菜花儿开的喜啊,看到牵手上朋友发的图片就赶紧转了过来,拍摄的很好,
一天之际在于晨,一年之际在于春,自己也是实施了计划,学习些东西,看些视屏的教案,三毛和安妮,老徐,老朱的被用着垫电脑,做枕头了,专业的修为还是急需提高,希望几个月后有见成效!
生命中又迎来一个如花的春天,不禁感概生活的美好,积极生活,快乐人生,一起加油!
安庆长江大桥
春节过后,天气忽冷忽热,今天苏州终于放晴了,早上是有冰冻的,只是一天的阳光让人欣慰,许是要放晴了吧,一年的春天终于是要来到了,油菜花儿开的喜啊,看到牵手上朋友发的图片就赶紧转了过来,拍摄的很好,
一天之际在于晨,一年之际在于春,自己也是实施了计划,学习些东西,看些视屏的教案,三毛和安妮,老徐,老朱的被用着垫电脑,做枕头了,专业的修为还是急需提高,希望几个月后有见成效!
生命中又迎来一个如花的春天,不禁感概生活的美好,积极生活,快乐人生,一起加油!
安庆长江大桥
[
阅读全文]
阅读全文]
Mar
10
前面有文章提到IE6重复字,今天又遇到,发现 多级注释与这个BUG很有趣的现象,具体就截图了,逐个删除注释,出现重复字多少与是否出现重复字的现象……






5. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:
确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
为浮动元素的最后一个条目使用一个条件注释,比如:
在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)
访问 positioniseverything.net 查看该问题的完整介绍。
引用
5. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:
确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
为浮动元素的最后一个条目使用一个条件注释,比如:
<!--[if !IE]>Put your commentary in here...<![endif]-->
在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)
访问 positioniseverything.net 查看该问题的完整介绍。
Mar
10
虽然说IE8已经来了,并且表现不错。8个小时突破1200W下载,远远地超过24小时下载800W的firefox。但对于整个互联网,IE6仍然是用户最多的浏览器。暂不说IE6怎样,把Web的表现做得更好,既是一种责任,也是一种能力的表现。如果你依然对IE6所出现的种种问题无可奈何,就让我带你来看一下来自SitePoint的 10 Fixes That Solve IE6 Problems,学会这10个方法,你将可以解决大部分IE6出现的问题。

1. 使用 DOCTYPE
你需要在HTML页面的最顶部加上DOCTYPE类型,当然, strict版是值得推荐的,例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
或者, XHTML页面的!DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
你最不想看到的是,IE6进入怪癖模式 – 其实已经够多怪癖了。
2. 设置position: relative
设置position:relative解决了不止一个问题,特别当需要设置对齐的时候。很明显,你需要明白的一点是,绝对定位是相对来说的。说不定,因为你没有设置,而不知道东西都飞到那去了。比如,你设计了每篇文章前都有一张图片,最后,你发现,只有一张图片在页面上,或许,是他们重叠了。
3. 给浮动元素设置 display:inline 值
这源于著名的IE6双倍外边距BUG,例如,你给一个DIV设计了浮动,并且,设置了margin-left:5px;,在IE6中很可能就是margin-left:10px了,这里,给浮动元素设置 display:inline;,即可解决问题。
4. 为元素设置 hasLayout
很多IE6(或IE7)的问题可以用设置hasLayout值的方法来解决。(如果你不知道hasLayout是什么,请看这里)
最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然,zoom也可以用,但这不是CSS的一部分)。设置一个具体的值是推荐的,但有时候并不一定知道高度多少,这里,你可能会用到height:1%。如果父元素没有设置高度,那么元素的物理高度并不会改变,但是,已经具备hasLayout属性。
5. 解决字符重复出现的问题
复杂的布局可能导致一些浮动元素里面的文字,出现在清理浮动位置的下面。这是一个奇怪的问题,下面这此可以帮你解决:
确保浮动元素设置了 display:inline;
在浮动元素中使用 margin-right:-3px;
在浮动元素的最后一个元素后加上一个IE注释,例如: <!--[if !IE]>把你的注释放这里… <![endif]–>
在最后的元素中加上一个DIV(这以设置width 为90% 或者其他相似的高度)
UPDATE: 最简单的方法是删除掉所有注释。(感谢恬玮儿的提示,我自己并没有遇到过,不过,google了一下,发现这个方法也可以解决,并且,这是值得推荐的一个方法。)
你可以到positioniseverything.net中查看更多关于这个的解释。
6.只在<a>标签中使用hover,IE6只支持<a>标签显示hover样式
当然,你还是可以通过JS来解决这个方法。但是, 这关于到可访问性的问题。建议不要把重要的内容设置在利用JS来实现的hover中。
7. 使用!important 或高级选择器来区分IE浏览器
比如min-height可以避免使用CSS来实现对IE的兼容。
#element {
min-height: 20em;
height: auto !important;
height: 20em; /* 让IE6显示这个高度 */
}
IE6 并不能正确地识别min-height,可以设置固定的高度,让IE6解析为20em。即使如此,它还是会因为内容的尺寸扩大而改变高度。而另一个方法是使用高级选择器:
#element {
min-height: 20em;
height: 20em;
}
/* 忽略 IE6 */
#element[id] {
height: auto;
}
8. 避免按比例确定的尺寸
比例会让IE6变得错乱,除非你给父元素添加一个确切的高度。不然,给其他的加上!important,例如:
body{
margin: 2% 0 !important;
margin: 20px 0; /* IE6 可读 */
}
9. 尽早测试,经常测试
别忘记尽早测试,经常测试, 除非你的程度已经完成。不然,你可能花更多的时间来解决IE6的问题。一般情况下,如果你的网站能在IE6和firefox下良好表现,估计其他浏览器就不会有什么大问题了。(至少我自己深有体会)
10. 重构你的代码
很多情况下,解决一个问题,可能比重构你的代码要花更多的时间。比如上一次给公司写一个频道页面的,没有一边制作,一边测试IE6的表现,导致最近有很多奇怪的问题,因为布局比较复杂。后来,干脆重构代码。用了2天。我想,如果是想解决方法,或许2天都搞不定。
1. 使用 DOCTYPE
你需要在HTML页面的最顶部加上DOCTYPE类型,当然, strict版是值得推荐的,例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
或者, XHTML页面的!DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
你最不想看到的是,IE6进入怪癖模式 – 其实已经够多怪癖了。
2. 设置position: relative
设置position:relative解决了不止一个问题,特别当需要设置对齐的时候。很明显,你需要明白的一点是,绝对定位是相对来说的。说不定,因为你没有设置,而不知道东西都飞到那去了。比如,你设计了每篇文章前都有一张图片,最后,你发现,只有一张图片在页面上,或许,是他们重叠了。
3. 给浮动元素设置 display:inline 值
这源于著名的IE6双倍外边距BUG,例如,你给一个DIV设计了浮动,并且,设置了margin-left:5px;,在IE6中很可能就是margin-left:10px了,这里,给浮动元素设置 display:inline;,即可解决问题。
4. 为元素设置 hasLayout
很多IE6(或IE7)的问题可以用设置hasLayout值的方法来解决。(如果你不知道hasLayout是什么,请看这里)
最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然,zoom也可以用,但这不是CSS的一部分)。设置一个具体的值是推荐的,但有时候并不一定知道高度多少,这里,你可能会用到height:1%。如果父元素没有设置高度,那么元素的物理高度并不会改变,但是,已经具备hasLayout属性。
5. 解决字符重复出现的问题
复杂的布局可能导致一些浮动元素里面的文字,出现在清理浮动位置的下面。这是一个奇怪的问题,下面这此可以帮你解决:
确保浮动元素设置了 display:inline;
在浮动元素中使用 margin-right:-3px;
在浮动元素的最后一个元素后加上一个IE注释,例如: <!--[if !IE]>把你的注释放这里… <![endif]–>
在最后的元素中加上一个DIV(这以设置width 为90% 或者其他相似的高度)
UPDATE: 最简单的方法是删除掉所有注释。(感谢恬玮儿的提示,我自己并没有遇到过,不过,google了一下,发现这个方法也可以解决,并且,这是值得推荐的一个方法。)
你可以到positioniseverything.net中查看更多关于这个的解释。
6.只在<a>标签中使用hover,IE6只支持<a>标签显示hover样式
当然,你还是可以通过JS来解决这个方法。但是, 这关于到可访问性的问题。建议不要把重要的内容设置在利用JS来实现的hover中。
7. 使用!important 或高级选择器来区分IE浏览器
比如min-height可以避免使用CSS来实现对IE的兼容。
#element {
min-height: 20em;
height: auto !important;
height: 20em; /* 让IE6显示这个高度 */
}
IE6 并不能正确地识别min-height,可以设置固定的高度,让IE6解析为20em。即使如此,它还是会因为内容的尺寸扩大而改变高度。而另一个方法是使用高级选择器:
#element {
min-height: 20em;
height: 20em;
}
/* 忽略 IE6 */
#element[id] {
height: auto;
}
8. 避免按比例确定的尺寸
比例会让IE6变得错乱,除非你给父元素添加一个确切的高度。不然,给其他的加上!important,例如:
body{
margin: 2% 0 !important;
margin: 20px 0; /* IE6 可读 */
}
9. 尽早测试,经常测试
别忘记尽早测试,经常测试, 除非你的程度已经完成。不然,你可能花更多的时间来解决IE6的问题。一般情况下,如果你的网站能在IE6和firefox下良好表现,估计其他浏览器就不会有什么大问题了。(至少我自己深有体会)
10. 重构你的代码
很多情况下,解决一个问题,可能比重构你的代码要花更多的时间。比如上一次给公司写一个频道页面的,没有一边制作,一边测试IE6的表现,导致最近有很多奇怪的问题,因为布局比较复杂。后来,干脆重构代码。用了2天。我想,如果是想解决方法,或许2天都搞不定。






