jnpd - 博客园

2012年3月27日

摘要：图形界面是用户对我们应用的第一印象，因此有一个良好的UI界面是非常之关键，可很好的引导用户满足他们的期望。好的UI风格必须一致，才能让网站和应用容易被理解和使用。本文收集了30最好的免费用户界面包：Retro UI Kit byLiam Wolfhttp://dribbble.com/shots/419835-Retro-Ui-Kit-Free-PSDFree Vector Facebook Profile Timeline by Tatchieshttps://www.facebook.com/Tatchies?sk=app_252136564867844Design elements by 阅读全文

posted @ 2012-03-27 09:33 jnpd 阅读(452) 评论(0) 推荐(0) 编辑

2012年2月16日

透明度

摘要： filter:Alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;filter:Alpha(opacity=75);-moz-opacity:0.75;opacity:0.75 阅读全文

posted @ 2012-02-16 14:40 jnpd 阅读(185) 评论(0) 推荐(0) 编辑

2012年2月1日

自动换行 word-break:break-all和word-wrap:break-word

摘要： word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于：1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端阅读全文

posted @ 2012-02-01 11:19 jnpd 阅读(270) 评论(0) 推荐(0) 编辑

2012年1月13日

去掉虚线框兼容所有浏览器

摘要：当一个链接得到焦点时，默认会有个虚线框。如图：在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。所以我们可以这样写：a:focus {outline:none;-moz-outline:none;}顺便提一下，如果你用过 Safari 和 Chrome 可能会发现，当输入框得到焦点时边框会出现阴影效果。如果想去掉阴影效果也可以用 outline 属性。input,textarea { outline:none;}言归正传，刚刚说的是 Firefox ，现在说说 IE。首先比较遗憾，还没有找到通过 CSS 去掉 IE 链接虚线... 阅读全文

posted @ 2012-01-13 11:03 jnpd 阅读(213) 评论(0) 推荐(0) 编辑

position:fixed在IE6下的实现

摘要： Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。值描述static默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。relative位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20″ 会将元素移至元素正常位置左边 20 个像素的位置。absolute位置设置为 absolute 的元阅读全文

posted @ 2012-01-13 10:52 jnpd 阅读(209) 评论(0) 推荐(0) 编辑

2012年1月12日

弹出层被flash遮盖

摘要：这两天搞了一个弹出层的小程序，可测试的时候发现总是被网页中的flash覆盖。原以为是深度或位置设的不对，网上一查原来是flash的设置问题。下面是我找到的解决方案：在做web开发中可能会遇到flash遮挡页面中元素的情况，无论怎么设置flash容器和层的深度(z-index)也无济于事，现有的解决方案是在插入 flash的embed或object标签中加入”wmode”属性并设置为wmode=“transparent”或”opaque”，但wmode属性到底是什么意义，为什么可以解决这个问题呢？window mode(wmode)wmode即窗口模式总共有三种，看看当年Macromedia官方阅读全文

posted @ 2012-01-12 15:13 jnpd 阅读(514) 评论(0) 推荐(0) 编辑

用css写三角形

摘要： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>三角形的写法</title><meta http-equiv="Content-Type" cont 阅读全文

posted @ 2012-01-12 14:45 jnpd 阅读(426) 评论(0) 推荐(0) 编辑

IE6 中 a:hover 的bug

摘要：如上图，在制作数码热销排行的页面时，每种手机的图片都是固定的160×120大小，但是出于页面美观及内容可读性的考虑，在列表页上图片都压缩为原大小的50%显示；也就是80×60像素大小。不过当用户将鼠标移动到缩略图上时，我们会按原图大小显示出来。类似的效果在抓虾上也被应用在显示用户头像上：抓虾使用的技术是利用一个隐藏的浮动层，每张缩略图上注册mouseover事件，当鼠标移动到缩略图上时，设置浮动层中img元素的src属性为头像的图片URL，然后通过JavaScript计算绝对定位，将放大后的头像显示在缩略图上。事实上，如果图片显示的大小已经固定的话，不需要JavaScrip 阅读全文

posted @ 2012-01-12 11:48 jnpd 阅读(183) 评论(0) 推荐(0) 编辑

2011年4月8日

JavaScript教程：常用DOM操作方法,JavaScriptDOM基本操作

摘要：先开看下JavaScript的基本DOM操作，JavaScript操作DOM的一些方法。 childNodes 返回当前元素所有子元素的数组 firstChild 返回当前元素的第一个下级子元素 lastChild 返回当前元素的最后一个子元素 nextSibling 返回紧跟在当前元素后面的元素 nodeValue指定表示先开看下JavaScript的基本DOM操作，JavaScript操作DOM的一些方法。childNodes 返回当前元素所有子元素的数组firstChild 返回当前元素的第一个下级子元素lastChild 返回当前元素的最后一个子元素nextSibling 返回紧跟. 阅读全文

posted @ 2011-04-08 11:06 jnpd 阅读(709) 评论(0) 推荐(0) 编辑

萧晗

日积月累

公告