CSS
文章平均质量分 67
liu_zhongjie
这个作者很懒,什么都没留下…
展开
-
用CSS装饰相册
你喜欢我之前的关于生成渐变文字效果的CSS教程么?现在我将使用同样的技巧来展示如何不通过编辑源图片来装饰图片和相册。这个技巧非常简单,你只需要添加标签,并附上一张背景图片就可以生成覆盖效果。这真的很容易并且很灵活——看看我的demos吧,里面有超过20种的效果类型,从简单的图片icon到伪层的圆角(效果不错,也不简单) 这个CSS技巧有什么好处呢? 节约时间——你不再需要用P原创 2009-05-11 15:03:00 · 657 阅读 · 0 评论 -
CSS+JS打造带渐变的进度条
CSS+JS打造带渐变的进度条#load{width:500px;height:25px;border:1px #000 solid;}#loading{position:absolute;z-index:2;height:23;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,原创 2009-08-31 12:45:00 · 653 阅读 · 0 评论 -
CSS强制等比例缩小图片
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">css等比例缩小图片body {text-align: center;margin: 20px auto;padding: 0px;font-size:14px;color:red}#pic{ margin:5px auto原创 2009-08-31 11:48:00 · 657 阅读 · 0 评论 -
背景不滚动
body { background-image:url(/images/logo.gif); background-repeat: no-repeat; background-attachment: fixed;} #codefans_net{height:1628px;} CSS背景不滚动 拖动滚动条,文字会消失,背景依然存在。原创 2009-08-31 10:59:00 · 386 阅读 · 0 评论 -
背景渐变
颜色渐变if (document.all){one=new Array();two=new Array();var a=10;var b=11;var c=12;var d=13;var e=14;var f=15;var width = 930;var height = 60;var gap = 5;var direction = 0;one[0]=f;one[1]=f;one[2]=0;t原创 2009-08-31 10:57:00 · 355 阅读 · 0 评论 -
提示输入格式
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 日期格式限制 ali_xixi.com整理收集 input{font-size:12px;}/* *** http://www.hansir.cn ****/var date_help = function(inp,原创 2009-08-29 12:44:00 · 447 阅读 · 0 评论 -
点击弹出层
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">模拟ightbox提示框DEMO*{ margin:0; padding:0;}body{ background-color:#FFF; color:#000; text-align:center; f原创 2009-08-29 12:40:00 · 891 阅读 · 0 评论 -
DIV 展开效果
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">层展开/关闭 - 运动缓冲效果/* 函数名称: Scroll Scroll(obj, h, s) 参数说明: obj,[object] id值或原创 2009-08-29 12:39:00 · 550 阅读 · 0 评论 -
一个超酷弹出窗口登陆框效果
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">var popup_dragging = false;var popup_target;var popup_mouseX;var popup_mouseY;var popup_mouseposX;var popup_mouse原创 2009-08-29 12:38:00 · 530 阅读 · 0 评论 -
CSS 翻页效果
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档 BODY { FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; WIDTH: 60%; PADDING-LEFT: 25px;}原创 2009-08-31 22:29:00 · 572 阅读 · 0 评论 -
单元格渐变
表格背景颜色渐变 - codefans.net 这是红白渐变 这是黄白渐变 这是蓝白渐变原创 2009-08-31 11:37:00 · 527 阅读 · 0 评论 -
天极网的JS卡通图片切换
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> JS卡通图片切换 body,html{ margin:0px; height:100%; overflow:hidden;} div#adBox{ width:202px; height:260px; border:原创 2009-08-31 11:55:00 · 652 阅读 · 0 评论 -
鼠标经过图片时显示半透明文字,边框变色
鼠标经过图片时出现半透明文字body{background:#333}img{border:none}.wrap{margin:10px;position:relative;}.photo a{position:absolute;display:block;border:1px solid #999;padding:2px}.photo a:hover{border:1px solid #fff;原创 2009-08-31 11:49:00 · 660 阅读 · 0 评论 -
图片浏览
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">清爽简洁的图片交替导航效果img{border:0px}.chinaz{width:380px;height:60px}#page_left_1 {WIDTH: 378px; }#page_left_2 {WIDTH: 380原创 2009-08-31 11:47:00 · 461 阅读 · 0 评论 -
CSS+JS滚动图片功能代码
CSS+JS滚动图片功能代码TD { FONT-SIZE: 12px;BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-TOP: 0原创 2009-08-31 11:46:00 · 392 阅读 · 0 评论 -
CSS 自动背景布局
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml">图片背景自适应 * {margin:0;padding:0;}html{background:#FFFFFF;}body{text-align:left;font:normal 12px/1.6em simsun, Verdana, Lu原创 2009-08-31 10:55:00 · 324 阅读 · 0 评论 -
CSS 黑色 横向三级菜单
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">黑色多级弹出菜单 - Javascript经典专区body {margin: 7px;font:12px Verdana, Arial, Helvetica, sans-serif;}* {list-style-type: n原创 2009-08-31 10:43:00 · 453 阅读 · 0 评论 -
鼠标经过图片由灰色变彩色
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">CSS 图片由灰色变彩色*{margin:0;padding:0;}img{border:0;}#container{margin:20px auto;width:960px;overflow:hidden;}#frmsear原创 2009-08-31 11:43:00 · 1230 阅读 · 0 评论 -
js拖放效果
js拖放效果 拖放效果,也叫拖拽,学名Drag-and-drop ,是最常见的js特效之一。如果忽略很多细节,实现起来很简单,但往往细节才是难点所在。这个程序的原型是在做图片切割效果的时候做出来的,那时参考了好几个同类的效果,跟muxrwc和BlueDestiny学习了不少东西。虽然每次整理都觉得很好了,不过每隔一段时间又会发现得某个地方可以改善,某个地方有错误,某些需求需要实现,就像自己原创 2009-08-29 12:35:00 · 620 阅读 · 0 评论 -
js拖拉缩放效果
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">拖拉缩放效果var isIE = (document.all) ? true : false;var $ = function (id) { return "string" == typeof id ? document.ge原创 2009-08-29 12:32:00 · 903 阅读 · 0 评论 -
一个网页选择框效果代码
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> #rectBox { background:#CCFFFF; border:2px solid #0099FF; filter:alpha(opacity=30); opacity:0.3; position:ab原创 2009-08-29 12:16:00 · 998 阅读 · 0 评论 -
仿网易div css滑动门选项卡效果
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">DIV+CSS仿网易的滑动门技术AJAX#header { background-color: #F8F4EF; height: 200px; width: 400px; margin: 0px; padding: 0px;原创 2009-08-29 12:15:00 · 454 阅读 · 0 评论 -
各种圆角图效果
td{font-size:9pt;word-break: break-all}#corner{font-size:1px}#tit{height:20px;color:white;}#txt{font-size:9pt;line-height:150%;background:white;border-width:1px;border-style:solid}.l,.r,.tl,.tr,.bl,.b原创 2009-08-29 12:15:00 · 351 阅读 · 0 评论 -
能伸展开和收缩的动态图层效果
#content { font-size: 14px; width: 200px; height: 50px; background: #eee; padding: 10px; border: 4px #ccc double; overflow: hidden;}#key { color: red; float: right; margin-top: -20px;}var s=5;var minh原创 2009-08-29 12:14:00 · 397 阅读 · 0 评论 -
CSS 背景渐变
渐变背景var setGradient = (function(){//private variables;var p_dCanvas = document.createElement(canvas);var p_useCanvas = !!( typeof(p_dCanvas.getContext) == function);var p_dCtx = p_useCanvas?原创 2009-08-29 11:23:00 · 1078 阅读 · 0 评论 -
CSS布局口诀 - CSS BUG顺口溜
在进行CSS网页布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢? 一、IE边框若显若无,须注意,定是高度设置已忘记; 二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中; 三、三像素文本慢移不必慌,高度设置帮你忙; 四、兼容各个浏览须注意,默认设置行高可能是杀手; 五、独立清除浮动须铭记,行高设无,高设原创 2009-05-27 23:30:00 · 336 阅读 · 0 评论 -
CSS 获取浏览器尺寸
更新个代码,顺便算是个简单的教学。在以前的代码中, 对贴子中超过746像素宽的图像自动调整为746大小。现在用宽屏显示器的越来越多,需要将ubbshow.js中的图像重绘代码作些修改,使图像大小随屏幕大小及不同的css风格自动调整。该代码运行的前提是先为headerbg样式指定个ID名,也就是把header.asp中的class=headerbg之前加上一句id=headerbg, 这样后原创 2009-05-11 23:58:00 · 6436 阅读 · 1 评论 -
CSS 相册
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">CSS相册v2.0body{ margin:0; padding:0; font-size:12px; background: #333333; line-height:1.7; font-family:Verdana, "宋原创 2009-05-11 15:06:00 · 539 阅读 · 0 评论 -
鼠标划过图层变色效果
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档 #test1{ width:50%; margin:0px auto; padding:5px; } .b原创 2009-08-29 12:17:00 · 388 阅读 · 0 评论 -
仿微软公司主页渐变特效
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档 style="FILTER: progid:DXImageTransform.Microsoft.Gradient(s转载 2009-08-29 12:18:00 · 388 阅读 · 0 评论 -
点击展开
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">滑动效果类 body { background-color: #EEEEEE; margin: 0px; text-align: center; } #wrap { width: 736px; background-color原创 2009-08-29 12:32:00 · 591 阅读 · 0 评论 -
多个选项卡
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">选项卡(IE,FF,Opera,Safari,Chrome)#tab_container1{width:600px;text-align:left;}.cls_tab_nav{height:26px;overflow:hidd原创 2009-08-29 12:30:00 · 489 阅读 · 0 评论 -
鼠标悬停弹出层
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">Untitled Document *{margin:0; padding:0;} body{font-size:12px; font-family:"Times New Roman", Times, serif;原创 2009-08-29 12:29:00 · 748 阅读 · 0 评论 -
仿windows选项卡特效4
Test-->function tabit(id,cid) {tabwoman.className="taboff";tabman.className="taboff";tabsport.className="taboff";tableisure.className="taboff";tabshoes.className="taboff";tabdecor.className="taboff";i原创 2009-08-29 12:23:00 · 400 阅读 · 0 评论 -
透明的层效果
欢迎访问ALIXIXI.COM 欢迎您的到来原创 2009-08-29 12:22:00 · 293 阅读 · 0 评论 -
支付宝动态弹出层效果
支付宝 - 网上支付 安全快速!https://img.alipay.com/img/icon/favicon.ico" type=image/x-icon rel=icon>https://img.alipay.com/img/icon/favicon.ico" type=image/x-icon rel="shortcut icon">https://img.alipay.com/css/em原创 2009-08-29 12:22:00 · 792 阅读 · 0 评论 -
DIV图层圆边圆角的实现
v/:*{behavior: url(#default#VML);}原创 2009-08-29 12:21:00 · 332 阅读 · 0 评论 -
图层动态伸缩效果
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml">runcodevar mh = 30;//最小高度var step = 1;//每次变化的px量var ms = 10;//每隔多久循环一次function toggle(o){ if (!o.tid)o.tid = "_" + Ma原创 2009-08-29 12:19:00 · 279 阅读 · 0 评论 -
经典的图片切换
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">经典的图片幻灯.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:rel原创 2009-08-31 11:58:00 · 628 阅读 · 0 评论