web集结号 » css特效

web集结号 » css特效 http://www.songlecn.com 专注于web表现层技术 Wed, 04 Nov 2009 02:46:32 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 纯CSS网站后台管理菜单 http://www.songlecn.com/2009/03/571/ http://www.songlecn.com/2009/03/571/#comments Sun, 22 Mar 2009 06:43:17 +0000 船长 http://www.songlecn.com/?p=571 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 纯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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>纯css管理菜单</title> <style type="text/css"> body{font-size:12px;} ul,li,h2{margin:0;padding:0;} ul{list-style:none;} #top{width:900px;height:40px;margin:0 auto;background-color:#cc0} #top h2{width:150px;height:40px;background-color:#9c0;float:left;font-size:14px;text-align:center;line-height:40px;} #topTags{width:750px;height:40px;margin:0 auto;background-color:#cc0;float:left} #topTags ul li{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;} #main{width:900px;height:500px;margin:0 auto;background-color:#F5F7E6;} #leftMenu{width:150px;height:500px;background-color:#009900;float:left} #leftMenu ul{margin:10px;} #leftMenu ul li{width:130px;height:30px;display:block;background:#9c0;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;} #leftMenu ul li a{color:#000000;text-decoration:none;} #content{width:750px;height:500px;float:left} .content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;} #footer{width:900px;height:30px;margin:0 auto;background-color:#ccc;line-height:30px;text-align:center;} .content1 {width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;} </style> <script type="text/javascript"> window.onload=function(){ function [...]]]> http://www.songlecn.com/2009/03/571/feed/ 0 简单css水平菜单 http://www.songlecn.com/2009/03/497/ http://www.songlecn.com/2009/03/497/#comments Sun, 15 Mar 2009 04:37:42 +0000 船长 http://www.songlecn.com/?p=497 http://www.songlecn.com/2009/03/497/feed/ 0 高亮度检验的表单显示效果 http://www.songlecn.com/2009/03/407/ http://www.songlecn.com/2009/03/407/#comments Tue, 03 Mar 2009 03:09:21 +0000 船长 http://www.songlecn.com/?p=407 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 高亮度验的表单显示效果，其实很简单^_^ <style type="text/css"> body {margin:0px;font:normal 12px "宋体", Verdana, Arial, Helvetica,sans-serif;color: #3D362B;text-align:center;padding:0px;} *{font-size:12px;margin:0px;padding:0px;} .BladeInput{BORDER: #ccc 1px solid;line-height:16px;color:#666;font-family:arial;padding-left:3px;} .BladeInput2{BORDER: #999 1px solid;line-height:16px;color:#666;font-family:arial;padding-left:3px;background:#FFFFEA} </style> <form action=http://www.songlecn.com method="post" name="theForm" id="theForm"> <table width="400" border="0" align="center" cellpadding="0" cellspacing="5" > <tr> <td width="92" height="26" align="right">用户帐户</td> <td width="408"><font color="#666666"><input name="UserName" type="text" class="BladeInput" id="UserName" onFocus="this.className='Bladeinput2'" onBlur="this.className='Bladeinput'" size="20" maxlength="12"> </font></td> </tr> <tr> <td height="26" align="right">用户密码</td> [...]]]> http://www.songlecn.com/2009/03/407/feed/ 0 一个比较酷的CSS生成带提示的菜单 http://www.songlecn.com/2009/02/331/ http://www.songlecn.com/2009/02/331/#comments Sat, 21 Feb 2009 03:10:32 +0000 船长 http://www.songlecn.com/?p=331 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 一个比较酷的CSS生成带提示的菜单，鼠标悬浮显示信息提示内容，看看效果吧 <style type="text/css"> #coolmenu{ border: 1px solid black; width: 170px; background-color: #E6E6E6; } #coolmenu a{ font: bold 13px Verdana; padding: 2px; padding-left: 4px; display: block; width: 100%; color: black; text-decoration: none; border-bottom: 1px solid black; } html>body #coolmenu a{ width: auto; } #coolmenu a:hover{ background-color: black; color: white; } #tabledescription{ width: 100%; height: 3em; padding: [...]]]> http://www.songlecn.com/2009/02/331/feed/ 0 像册方式展现字母表 http://www.songlecn.com/2009/02/309/ http://www.songlecn.com/2009/02/309/#comments Thu, 19 Feb 2009 02:11:38 +0000 船长 http://www.songlecn.com/?p=309 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 像册方式展现字母表，可做多种改造应用，代码如下: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>像册方式展现字母表——Webjx.Com</title> <style type="text/css"> body{ margin:0; padding:0; text-align:center;} #container {font-family:"courier new", monospace; position:relative; width:530px; height:300px; margin:100px auto; background:#f9f9f9;border:1px dotted #cccccc;text-align:left;} #tabl a:visited, #tabl a {text-decoration:none; color:#666; font-weight:bold;float:left; padding:6px 8px;} #tabl a span {display:none;} #tabl a:hover {text-decoration:none; color:#c00; background:#fff;font-weight:bold;} #tabl [...]]]> http://www.songlecn.com/2009/02/309/feed/ 0 CSS图片遮罩层效果 http://www.songlecn.com/2009/02/294/ http://www.songlecn.com/2009/02/294/#comments Tue, 17 Feb 2009 02:16:50 +0000 船长 http://www.songlecn.com/?p=294 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 用CSS改变的图片由模糊到清楚的导航，也就是CSS图片遮罩层效果，运行可以看到效果 <style> .highlightit img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; } .highlightit:hover img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1; } </style>  <a href="http://www.songlecn.com/" class="highlightit"><img border="0" src="http://www.songlecn.com/wp-content/supload/2009/02/17/wt55.jpg"></a> <a href="http://www.songlecn.com/" class="highlightit"><img border="0" src="http://www.songlecn.com/wp-content/supload/2009/02/17/wt55.jpg"></a> 提示：你可以先修改部分代码再运行。]]> http://www.songlecn.com/2009/02/294/feed/ 0 实现效果很好的分页效果 http://www.songlecn.com/2009/02/279/ http://www.songlecn.com/2009/02/279/#comments Sun, 15 Feb 2009 05:21:50 +0000 船长 http://www.songlecn.com/?p=279 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } CSS样式表实现效果很好的分页效果，在学习编程过程中由于文章内容比较多或者列表内容比较多，我们都需要分页！那么你想不想要一种好的分页效果呢？这个是我认为比较容易使用，同时编程方面也挺容易实现的分页，就是以10页为基础，然后上十页和下十页，因为很少有人有兴趣会去看10页甚至20页以后的内容 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Pagination Style Template webjx.com</title> <style type="text/css"> <!-- #tnt_pagination { display:block; text-align:left; height:22px; clear:both; padding-top:3px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; } #tnt_pagination a:link, #tnt_pagination a:visited{ padding:7px; padding-top:2px; padding-bottom:2px; border:1px solid #EBEBEB; margin-left:5px; text-decoration:none; background-color:#F5F5F5; color:#0072bc; width:22px; font-weight:normal; } [...]]]> http://www.songlecn.com/2009/02/279/feed/ 0