废话不多说。
直接下载看看
posted @ 2009-05-18 11:02 勒紧皮带向前冲 阅读(258) | 评论 (1)编辑 收藏
 
1. 两种细线表格做法

被过滤广告
  源码如下:

<table width="100%" border="1" bordercolor="#000000">
  <tr bordercolor="#FFFFFF">
    <td>表格边线为1,线色为黑,行线色为白。</td>
  </tr>
</table>
<p>
<table width="100%" border="0" cellspacing="1" bgcolor="#000000">
  <tr>
    <td bgcolor="#FFFFFF">表格边线为0,间距为1,背景色为黑,行背景色为白。</td>
  </tr>
</table>

  2. 立体表格



  源码如下:

<table  border=1 cellspacing=0  width=100% bordercolorlight=#333333 bordercolordark=#efefef>
  <tr bgcolor=#cccccc>
    <td>it365cn</td>
    <td>it365cn</td>
    <td>it365cn</td>
    <td>it365cn</td>
  </tr>
  <tr bgcolor=#cccccc>
    <td>cnbruce</td>
    <td>cnbruce</td>
    <td>cnbruce</td>
    <td>cnbruce</td>
  </tr>
</table>
<center>表格边线为1,间隔为0,左上为#333333,右下为#efefef,行背景色为#cccccc

3. 另类圆角表格制作

 


  源码如下:

原图:
<table cellpadding=0 cellspacing=0 border=0 width=282 align=center>
  <tr height=1>
    <td rowspan=4 width=1></td>
    <td rowspan=3 width=1></td>
    <td rowspan=2 width=1></td>
    <td width=2></td>
    <td bgcolor=#43B5C9></td>
    <td width=2></td>
    <td rowspan=2 width=1></td>
    <td rowspan=3 width=1></td>
    <td rowspan=4 width=1></td>
  </tr>
  <tr height=1>
    <td bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
  <tr height=1>
    <td bgcolor=#43B5C9></td>
    <td colspan=3 bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
  <tr height=2>
    <td bgcolor=#43B5C9></td>
    <td colspan=5 bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
</table>
<p>放大
<table cellpadding=0 cellspacing=0 border=1 width=282 align=center>
  <tr height=10>
    <td rowspan=4 width=10></td>
    <td rowspan=3 width=10></td>
    <td rowspan=2 width=10></td>
    <td width=20></td>
    <td bgcolor=#43B5C9></td>
    <td width=20></td>
    <td rowspan=2 width=10></td>
    <td rowspan=3 width=10></td>
    <td rowspan=4 width=10></td>
  </tr>
  <tr height=10>
    <td bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
  <tr height=10>
    <td bgcolor=#43B5C9></td>
    <td colspan=3 bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
  <tr height=20>
    <td bgcolor=#43B5C9></td>
    <td colspan=5 bgcolor=#43B5C9></td>
    <td bgcolor=#43B5C9></td>
  </tr>
</table>
4. 虚线边框表格


  源码如下:

<style type="text/css">
.tb{BORDER-BOTTOM: #000000 1px dotted;BORDER-top: #000000 1px dotted;BORDER-LEFT:
#000000 1px dotted;BORDER-RIGHT: #000000 1px dotted;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="tb"><center>www.blueidea.com</td>
  </tr>
</table>
<p>
虚线直线1
<hr size=1 style="border:1px dotted #001403;">
虚线直线2
<p size=1 style="border:1px dotted #001403;">

5. 分类型表格

 

  源码如下:

<fieldset>
<legend>item</legend>
content
</fieldset>


6. 变色的单元格1,通过a:hover做


  源码如下:

<style>
a:link,a:visited,a:hover
{width:100%;text-decoration:none;font-family:verdana;font-size:10px;color:white}
a:hover{background:#0099ff;color:black}
td{background:#3366cc;color:white;padding:0px}
</style>

<TABLE width=100% cellspacing=1 bgcolor=black >
  <TR>
    <TD><a href="#">Blueidea
    <TD><a href="#">.com
  <TR>
    <TD><a href="#">CNBruce
    <TD><a href="#">.com
</TABLE>

7. 变色的单元格2,已经做成了CSS,注意还有透明效果

  源码如下:

<style type="text/css">
.aa
{ background-color:#0000ff; color:#ff0000;filter: alpha(opacity=50)}
.bb 
{ background-color:#3366cc; color:#ffffff}
</style>

 

<table  width="100%">
  <tr>
    <td  onmouseover="this.className='aa'" onmouseout="this.className='bb'"
class="bb"><center><b>cnbruce</td>
   </tr>
</table>


8. 变色的单元格3,通过mouse事件做.有点微软的味道


  源码如下:
<table width="100%" border="1" cellpadding="3" cellspacing="0"
bordercolor="#efefef" bgcolor="#efefef">
  <tr>
    <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";
onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"><div align="left">
Blueidea</div></td>
  </tr>
  <tr>
    <td
onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">
cnbruce</td>
  </tr>
</table>

9. 透明表格

<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100 border=0>
  <tr><td><center>cnbruce</td></tr>
</table>

10. 表格边框显示外阴影

  源码如下:

<table  align=center  width=200  height=100  bgcolor=#f3f3f3
style="filter:progid:DXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)">
  <tr>
    <td><center>www.cnbruce.com</td>
  </tr>
</table>
11. VML代码实现的圆角表格
(1).

 

  源码如下:

<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
   <v:RoundRect style="position:relative;width:150;height:240px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
    <v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
    </v:RoundRect>
</body>
</html>

(2).

  源码如下:

<html  xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
      <v:RoundRect  style="position:relative;width:150;height:240px">
<v:path  textpathok="true"  />
      <v:textpath  on="true"  string="cnbrucecnbrucecnbrucecnbrucecnbruc
ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce"  />
        <v:shadow  on="T"  type="single"  color="#b3b3b3"  offset="3px,3px"/>
        <v:TextBox  style="font-size:10.2pt;">VML</v:TextBox>
        </v:RoundRect> 
</body>
</html>

(3).


  源码如下:

<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
   <v:RoundRect style="position:relative;width:150;height:240px" arcsize=0.5>
    <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
    <v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
    </v:RoundRect>
</body>
</html>

posted @ 2009-05-10 09:42 勒紧皮带向前冲 阅读(232) | 评论 (0)编辑 收藏
 

target="_top"或target="_parent"

posted @ 2009-05-09 11:49 勒紧皮带向前冲 阅读(443) | 评论 (0)编辑 收藏
 

如何让PNG格式的透明图片在IE6下正常显示

原文: Make PNG transparency work in Internet Explorer
翻译:PARAN

初学网页设计的朋友可能都会碰到这样的问题,需要在网页插入一透明图片。如果使用Gif格式的透明图片,可能像素低,显示不够清晰。如果用PNG格式透明图片,在IE6下将达不到透明效果,而是灰色的背景。这会让你的网页看上去非常丑陋,任何一个网页设计师都不想出现这样的问题,下面是一个小小的教程,教你如何让PNG格式的透明图片在IE6下同样能够正常显示。

我们先来看看在透明PNG图片在Mozilla Firefox和Internet Explorer 6中的显示差异:

Mozilla Firefox

PNG透明图片在Mozilla Firefox下显示良好。

 

Internet Explorer 6

在IE6中这张PNG图片的背景却是一片灰白,真的很难看,除非你的网页背景色就是一片灰白:)

 

解决方法

首先,为你的图片外套一个DIV层,像这样:

<body> <div class=”flower”></div> </body>

然后,在CSS文件里面写入:

 

 body {background-color:#000} div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px} 

 

呃,这是指Mozilla Firefox,要让其在IE6下面正常显示,你应该在<head>和</head>之间写入:

<!–[if gte IE 5]> <style type=”text/css”> div.flower { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’); } </style> <![endif]–> 

这样,就OK了,下面是加了上面代码后的IE显示图:

 

如果还是不太明白的话,你可以下载演示看看.

注意如果是这样会使得图片的链接失效。
如果是在页面上直接显示png图片的话,可以直接插入图片。如此演示

如果要去掉图片链接上的边框,在<imag>中加入border=0 即可

posted @ 2009-05-09 11:12 勒紧皮带向前冲 阅读(1037) | 评论 (0)编辑 收藏
 
 1/**  
 2 * @param input  
 3 * @return  
 4 * @throws Exception  
 5 */
  
 6public static String encryptData(String input) throws Exception {   
 7  
 8    SecureRandom sr = new SecureRandom();   
 9    byte rawKeyData[] = "ABCDEFGH".getBytes();   
10    DESKeySpec dks = new DESKeySpec(rawKeyData);   
11  
12    SecretKeyFactory keyFactory = SecretKeyFactory.getInstance("DES");   
13    SecretKey key = keyFactory.generateSecret(dks);   
14  
15    Cipher c = Cipher.getInstance("DES");   
16    c.init(Cipher.ENCRYPT_MODE, key, sr);   
17    byte[] cipherByte = c.doFinal(input.getBytes());   
18    String dec = new BASE64Encoder().encode(cipherByte);   
19    return dec;   
20  
21}
   
22  
23/**  
24 * @param input  
25 * @return  
26 * @throws Exception  
27 */
  
28public static String decryptData(String input) throws Exception {   
29    byte[] dec = new BASE64Decoder().decodeBuffer(input);   
30  
31    SecureRandom sr = new SecureRandom();   
32    byte rawKeyData[] = "ABCDEFGH".getBytes();   
33  
34    DESKeySpec dks = new DESKeySpec(rawKeyData);   
35  
36    SecretKeyFactory keyFactory = SecretKeyFactory.getInstance("DES");   
37  
38    SecretKey key = keyFactory.generateSecret(dks);   
39  
40    Cipher c = Cipher.getInstance("DES");   
41    c.init(Cipher.DECRYPT_MODE, key, sr);   
42    byte[] clearByte = c.doFinal(dec);   
43  
44    return new String(clearByte);   
45  
46}
  
47
注:转自 http://jlusdy.javaeye.com/blog/145803
posted @ 2009-04-30 15:07 勒紧皮带向前冲 阅读(255) | 评论 (0)编辑 收藏
 
  1 import java.text.DateFormat;
  2 import java.util.*;
  3 
  4 public class JspCalendar {
  5     Calendar calendar = null;
  6 
  7     public JspCalendar() {
  8         calendar = Calendar.getInstance();
  9         Date trialTime = new Date();
 10         calendar.setTime(trialTime);
 11     }
 12 
 13     public int getYear() {
 14         return calendar.get(Calendar.YEAR);
 15     }
 16 
 17     public String getMonth() {
 18         int m = getMonthInt();
 19         String[] months = new String[] { "January""February""March",
 20                 "April""May""June""July""August""September",
 21                 "October""November""December" };
 22         if (m > 12)
 23             return "Unknown to Man";
 24 
 25         return months[m - 1];
 26 
 27     }
 28 
 29     public String getDay() {
 30         int x = getDayOfWeek();
 31         String[] days = new String[] { "Sunday""Monday""Tuesday",
 32                 "Wednesday""Thursday""Friday""Saturday" };
 33 
 34         if (x > 7)
 35             return "Unknown to Man";
 36 
 37         return days[x - 1];
 38 
 39     }
 40 
 41     public int getMonthInt() {
 42         return 1 + calendar.get(Calendar.MONTH);
 43     }
 44 
 45     public String getDate() {
 46         return getMonthInt() + "/" + getDayOfMonth() + "/" + getYear();
 47 
 48     }
 49 
 50     public String getTime() {
 51         return getHour() + ":" + getMinute() + ":" + getSecond();
 52     }
 53 
 54     public int getDayOfMonth() {
 55         return calendar.get(Calendar.DAY_OF_MONTH);
 56     }
 57 
 58     public int getDayOfYear() {
 59         return calendar.get(Calendar.DAY_OF_YEAR);
 60     }
 61 
 62     public int getWeekOfYear() {
 63         return calendar.get(Calendar.WEEK_OF_YEAR);
 64     }
 65 
 66     public int getWeekOfMonth() {
 67         return calendar.get(Calendar.WEEK_OF_MONTH);
 68     }
 69 
 70     public int getDayOfWeek() {
 71         return calendar.get(Calendar.DAY_OF_WEEK);
 72     }
 73 
 74     public int getHour() {
 75         return calendar.get(Calendar.HOUR_OF_DAY);
 76     }
 77 
 78     public int getMinute() {
 79         return calendar.get(Calendar.MINUTE);
 80     }
 81 
 82     public int getSecond() {
 83         return calendar.get(Calendar.SECOND);
 84     }
 85 
 86     public static void main(String args[]) {
 87         JspCalendar db = new JspCalendar();
 88         p("date: " + db.getDayOfMonth());
 89         p("year: " + db.getYear());
 90         p("month: " + db.getMonth());
 91         p("time: " + db.getTime());
 92         p("date: " + db.getDate());
 93         p("Day: " + db.getDay());
 94         p("DayOfYear: " + db.getDayOfYear());
 95         p("WeekOfYear: " + db.getWeekOfYear());
 96         p("era: " + db.getEra());
 97         p("ampm: " + db.getAMPM());
 98         p("DST: " + db.getDSTOffset());
 99         p("ZONE Offset: " + db.getZoneOffset());
100         p("TIMEZONE: " + db.getUSTimeZone());
101     }
102 
103     private static void p(String x) {
104         System.out.println(x);
105     }
106 
107     public int getEra() {
108         return calendar.get(Calendar.ERA);
109     }
110 
111     public String getUSTimeZone() {
112         String[] zones = new String[] { "Hawaii""Alaskan""Pacific",
113                 "Mountain""Central""Eastern" };
114 
115         return zones[10 + getZoneOffset()];
116     }
117 
118     public int getZoneOffset() {
119         return calendar.get(Calendar.ZONE_OFFSET) / (60 * 60 * 1000);
120     }
121 
122     public int getDSTOffset() {
123         return calendar.get(Calendar.DST_OFFSET) / (60 * 60 * 1000);
124     }
125 
126     public int getAMPM() {
127         return calendar.get(Calendar.AM_PM);
128     }
129 }
130 
posted @ 2009-04-23 13:55 勒紧皮带向前冲 阅读(221) | 评论 (0)编辑 收藏
 
[java]比较两个日期之间的天数<script src="http://blog.csdn.net/count.aspx?ID=438390&amp;Type=Rank"></script>
1.import java.text.SimpleDateFormat;    
2.import java.util.Date;    
1.public class Tmp {    
1.public static void main( String argv[] ) throws Exception {    
1.long DAY = 24L * 60L * 60L * 1000L;    
1.SimpleDateFormat df = new SimpleDateFormat( "MM.dd.yyyy" );    
2.Date d1 = df.parse( "01.01.2001" );    
3.Date d2 = df.parse( "01.03.2001" );    
4.System.out.println( "The number days between:" );    
5.System.out.println( d1 );    
6.System.out.println( "and:" );    
7.System.out.println( d2 );    
8.System.out.println( "is: " + (( d2.getTime() - d1.getTime() ) / DAY ));    
9.}    
10.}  

posted @ 2009-04-23 13:54 勒紧皮带向前冲 阅读(581) | 评论 (0)编辑 收藏
 
1、这里说用css实现,下面是我摸索的全过程。

一日,漫无目的的浏览css手册,发现了text-overflow属性可以截取字符串,就来用用,用了n次都不成功,怀疑需要与其他属性连用,就找类似属性进行组合使用,最后发现需要和overflow连用。

2、举例:
<div style="overflow:hidden;width:200px;text-overflow:ellipsis">打开抗敌素可打开撒开绿灯撒恺撒棵扩大上爱迪生啊撒大可</div>
posted @ 2009-04-15 13:38 勒紧皮带向前冲 阅读(337) | 评论 (0)编辑 收藏
 

<a href="http://www.163.com" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.163.com');return(false);" style="behavior: url(#default#homepage)" >设置为我的首页</a>

 

加入收藏夹
·<A href="javascript:window.external.addFavorite('http://www.163.com','网易科技')"   target="_self">加入到我的收藏夹</A>

posted @ 2009-03-28 11:51 勒紧皮带向前冲 阅读(341) | 评论 (0)编辑 收藏
 

在WEB开发中,城市-省份是和日历一样需要我们特别处理的用户信息,我们希望自己的程序能够更人性化一些,既方便网友的输入,又尽可能的采集到合法有效的信息,这个时候就需要借助一些插件。

城市输入插件我先后用过很多款了,因为涉及二级联动,调用一般都比较复杂,这里推荐一个非常简洁的工具,只需要一个JS文件,HTML页面的代码也比较干净:

演示地址:这里

在北京卖场的活动中测试通过,不存在跨域等问题。

另外,也顺便测试了快乐笛子(site:http://www.happyshow.org/)编写的日历输入插件,共同的特点就是简洁,但功能一点也没有缩水,特别值得推荐的是它可以快捷输入年份与月份,比如,你要输入12-23-1994,只要双击年份和月份,就可以从下拉列表中选择1994和12,而不用一页一页的翻

转自:http://www.litejava.com/?action=show&id=206
js文件可在我的文件中下载
posted @ 2009-03-27 17:06 勒紧皮带向前冲 阅读(1647) | 评论 (0)编辑 收藏
仅列出标题
共14页: First 上一页 2 3 4 5 6 7 8 9 10 下一页 Last