前端开发

HTML、CSS、JavaScript等技能知识相关性的文章。

使用CSS3设置边框发光效果

最近在设计网页的过程中遇到需要给输入框、图片框添加显示效果，最终觉得选择用CSS3样式比较容易实现这一效果。
现在分享一下心得，以contentBox元素为例。

在CSS样式表中添加下列样式，鼠标移至边框上便会实现发光效果。

.li:hover{
transition:border linear .2s,box-shadow linear .5s;
-moz-transition:border linear .2s,-moz-box-shadow linear .5s;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
outline:none;border-color:rgba(255,0,0,0.5);
box-shadow:0 0 15px rgba(255,0,0,0.5);
-moz-box-shadow:0 0 15px rgba(255,0,0,0.5);
-webkit-box-shadow:0 0 15px rgba(255,0,0,0.5);
}

2013-06-26

前端开发

3,053人阅读

1条评论

教你在网站上添加“设为首页”和“加入收藏”

在我们访问很多门户网站的时候，不难发现其网站顶部或底部都有设为首页和收藏本站的链接。只要你点击这些链接就可以将访问的网址设为你的浏览器主页或添加到你的浏览器收藏夹。不知道的朋友可能认为这很神奇，其实只要运用Javascript代码就可以轻而实现。

设为首页

一般情况下，我们使用的网络浏览器都会设置一个主页，而设置为主页的网站一定是你经常访问或用到的，如果有其他更好的网站出现，你想更换默认主页，这时候你可以使用两种方法：第一种就是通过浏览器的功能菜单来设置完成，具体步骤因浏览器不同而异，这里就不说了。
第二种就是通过该网站的设为首页链接来实现。比如说你想设置当前页面为主页，你可以使用如下代码：<a href=# onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage(document.location.href);event.returnValue=false;">设为首页</a>

这是采用javascript的document.location对象的href属性来获得当前网页的全路径。如果您只想将当前网页所在的域名地址设为首页，您只需将document.location.href改为document.location.host即可。示例如下：<a onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage(document.location.host);event.returnValue=false;" href="#">设为首页</a>
功能说明：如果当前网址为：http://jishukong.net/javascript，则会将当前网页的域名地址（http://jishukong.net）设为首页。

2013-06-21

前端开发

2,088人阅读

2条评论

HTML5+CSS3制作华丽的登录界面

HTML5提供了一些新的元素可以让我们不用JS轻松实现实用的web表单，CSS3提供了很多新的特性，这些特性允许实现新的设计效果（比如动画、渐变等）。
今天分享的是一个基于HTML5和CSS3，运用CSS滤镜做的精美登录界面。由于实例代码使用到了HTML5提供的一些表单新特性，所以你需要使用支持HTML5和CSS3的浏览器来查看。

2013-06-20

前端开发

6,386人阅读

1条评论