归档于 ‘设计’ 分类

八

笔记：css实现透明背景

郁闷的白菜于 2011-8-22,01:36 Comments (0)

1、半透明背景，内容不透明
2、兼容ie6、7、8，chrome、firefox，若有其他兼容问题请告知，跪谢
3、独立背景浮动，不涉及父级和内容层
搜了一下，网络上兼容性做的很好的大都把透明背景设定在父级上，内容给予position:relative，然后在html里面做兼容代码。因为我所涉及的页面position:absolute图层特别的多，容易互相影响，所以想了其他方法，等于在内容层的背后贴了一张半透明的即时贴。这种方法似乎并不成熟，没有搜索到类似的教程，有个别因为没有解决部分问题的求助贴，主要集中在ie6兼容上，我最终解决了它，分享之。

提示：你可以先修改部分代码再运行。

归类于：设计标签： css, 透明背景.

八

做笔记随机背景的js代码

郁闷的白菜于 2011-8-18,00:06 Comments (0)

<html> <head> <title>JS随机背景效果</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <script language="JavaScript"> bg = new Array(2);//有几个背景这里的数就要改为几，然后下边要对应 bg[0] = '/attachments/month_0812/82008126131225.jpg' bg[1] = '/wp-content/uploads/2010/05/2010-05-09%E5%86%B0%E6%BF%80%E5%87%8C1.jpg' bg[2] = '/wp-content/uploads/2010/05/201005070001.jpg' index = Math.floor(Math.random() * bg.length); document.write("<body BACKGROUND="+bg[index]+">");</body></script> </meta></head> <body> 刷新一下背景吧，是不是每次都不一样？ <a href="/">点我</a>！ </body> </html>

提示：你可以先修改部分代码再运行。

用到，所以做笔记mark一下

归类于：设计标签： js.

八

淘宝店铺装修一枚

郁闷的白菜于 2011-8-10,12:31 Comments (0)

由于淘宝不开放普通用户css，css只开放给设计师用户，设计师用户还要通过审核，通过了审核还不能只给自己做设计，必须进入市场的结果就是你得交保证金一万大洋，于是乎装修只停留在图片堆叠，也只能这样了。
淘宝，杭州地价太贵，你占个山头多方便。

毛毡包

归类于：设计标签：淘宝装修.

五

wp非插件添加缩略图

郁闷的白菜于 2011-5-9,11:25 Comments (0)

为wp缩略图这事折腾了许久了，据说2.9版本就提供了功能，我到3.1折腾模版的时候才知道，有了这个，很多插件都可以不用了。于是谷了一下，找到详细的使用方法。
首先在function.php内插入代码

add_theme_support( ‘post-thumbnails’ );

提示：你可以先修改部分代码再运行。

多个缩略图就是

set_post_thumbnail_size( 155, 110, true ); // 默认缩略图 add_image_size( 'one', 300, 200, true ); // 名为one的缩略图 add_image_size( 'two', 200, 100, true ); // 名为two的缩略图 add_image_size( 'mini', 50, 30, true ); // 名为mini的缩略图

提示：你可以先修改部分代码再运行。

然后在后台发布文章的时候，右栏会多出特色图片板块，在这个板块添加一下当作缩略图的大图，服务器会生成相应的大小，这步跟上传图片很类似，就是在插入图片后面多了一个链接，很简单不赘述。然后在模版需要添加缩略图的地方写入代码：

< ?php the_post_thumbnail(); ?>

提示：你可以先修改部分代码再运行。

就调出第一个大小的缩略图，如果想调其它大小的，只要在括号里对应上相对的名称：

< ?php the_post_thumbnail(mini); ?>

提示：你可以先修改部分代码再运行。

现在玩点花活：

< ?php if ( has_post_thumbnail() ) { ?> < ?php the_post_thumbnail('two'); ?> < ?php } else {?> <img src="临时图片地址"/> < ?php } ?>

提示：你可以先修改部分代码再运行。

以上内容均参考自[ 文库 ] WordPress 自带的缩略图功能全解析，这年头网站被墙的被蟹的被裁被黑的被降权的太多，不知道下次用的时候还能不能搜到，所以乾坤大挪移过来白菜自己家，笔记备用。另外说，搜了跟多文章介绍这个，就jeff这个看着最清楚，还有拓展自己点进去看。

归类于：设计标签： wordpress, wp, 缩略图.

四

js不用display实现滑动门（标签）效果

郁闷的白菜于 2011-4-12,17:26 Comments (6)

文中所提到的很多东西，对很多编程牛人来说不算什么，我也就是做个笔记，因为对js非常不熟悉，一直只是在下载代码改数据的水平上。
那是一个滑动门或者说标签页效果的代码，这个效果代码里常用的display与另外一段效果代码相冲突，所以要避免display去实现它，想了许多方法，最终看到一篇讲解四屏切换效果的文章给了启发，改为用z-index，当点击一个链接触发，不是让指定div显示，同时隐藏其他div，而是将指定div的z-index改为1，其他改为-100，这样在页面在载入时所有的div都是显示的，只是用户是否能看到而已。
在改的过程遇到了另外一个问题，横线在js中是会报错的，查了很多资料才知道z-index在js中应该写为zIndex来避免横线，同理，其他css的表达都应该是这样，比如background-color。
这个这个滑动门的源程序是很多年前一个朋友给的，很好用，没有多余的其他效果，代码简洁而且易于修改，onclick或者onmouthover都可以，以及触发后的css，我共享的这个已经将display改为了z-index。

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script>function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容层数量不一样!"); return false; } for(var i = 0 ; i < menus.length ; i++) { _this.$(menus[i]).value = i; _this.$(menus[i]).onclick = function(){ for(var j = 0 ; j < menus.length ; j++) { _this.$(menus[j]).className = closeClass; _this.$(divs[j]).style.zIndex = "-100"; } _this.$(menus[this.value]).className = openClass; _this.$(divs[this.value]).style.zIndex = "1"; } } }, $ : function(oid){ if(typeof(oid) == "string") return document.getElementById(oid); return oid; } } window.onload = function(){ var SDmodel = new scrollDoor(); SDmodel.sd(["a01","a02","a03"],["b01","b02","b03"],"css01","css02"); }</script> <style> .links { background:#CCCCCC; } .css1 { background:#FFFFFF } .css2 { background:#CCCCCC; border:1px solid #CCCCCC } .white{ background:#FFFFFF; width:100%;position:absolute;z-index:0;} </style> </script></head> <body> <div class="title"> <ul> <li id="a01" class="css01">链接一</li> <li id="a02" class="css02">链接二</li> <li id="a03" class="css02">链接三</li> </ul> </div> <div class="content"> <ul> <li id="b01" style="position:absolute;z-index:1;">内容一</li> <li id="b02" style="position:absolute;z-index:-100;">内容二</li> <li id="b03" style="position:absolute;z-index:-100;">内容三</li> <li class="white"></li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

归类于：设计标签： css, js.

第 1 页，共 7 页12 3 4 5...»最旧 »

归档于 ‘设计’ 分类

笔记：css实现透明背景

做笔记随机背景的js代码

淘宝店铺装修一枚

wp非插件添加缩略图

js不用display实现滑动门（标签）效果

订阅

其他

黑板报专用通道

近期评论

女人时尚

功能

标签云

导航

巨魔的生活

互动

朋友